mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
added independent toggling of backgrounds to single and normal modes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
845522e9e3
commit
30e3a3d5e1
@ -7,7 +7,7 @@ var keys = {
|
||||
toggleHelp: [72], // ???
|
||||
toggleSingleImageMode: [70, 13], // ???, Enter
|
||||
toggleSingleImageModeTransitions: [84], // t
|
||||
toggleSingleImageModeWhiteBG: [87], // w
|
||||
toggleBackgroundModes: [66], // b
|
||||
close: [27, 88, 67], // ???
|
||||
|
||||
// zooming...
|
||||
@ -48,6 +48,14 @@ var keys = {
|
||||
}
|
||||
|
||||
|
||||
// the list of style modes...
|
||||
// these are swithched through in order by toggleBackgroundModes()
|
||||
var BACKGROUND_MODES = [
|
||||
'dark',
|
||||
'black'
|
||||
]
|
||||
|
||||
|
||||
// this sets the zooming factor used in manual zooming...
|
||||
var ZOOM_FACTOR = 2
|
||||
|
||||
@ -241,13 +249,15 @@ function handleKeys(event){
|
||||
|
||||
: (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
|
||||
: (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions()
|
||||
: (fn(code, keys.toggleSingleImageModeWhiteBG) >= 0) ? toggleSingleImageModeWhiteBG()
|
||||
|
||||
: (fn(code, keys.toggleBackgroundModes) >= 0) ? toggleBackgroundModes()
|
||||
|
||||
// debug...
|
||||
: (fn(code, keys.toggleMarkers) >= 0) ? toggleMarkers()
|
||||
|
||||
: (fn(code, keys.ignore) >= 0) ? false
|
||||
// XXX
|
||||
|
||||
|
||||
: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
|
||||
: false;
|
||||
return false;
|
||||
@ -280,14 +290,29 @@ function setViewerMode(mode){
|
||||
// XXX HACK
|
||||
var ORIGINAL_FIELD_SCALE = 1
|
||||
|
||||
|
||||
// remember the default backgrounds for modes...
|
||||
// ...this effectively makes the modes independant...
|
||||
// NOTE: null represent the default value...
|
||||
// XXX HACK
|
||||
var NORMAL_MODE_BG = null
|
||||
var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1]
|
||||
|
||||
|
||||
function toggleSingleImageMode(){
|
||||
// go to normal mode...
|
||||
if($('.single-image-mode').length > 0){
|
||||
SINGLE_IMAGE_MODE_BG = getBackgroundMode()
|
||||
unsetViewerMode('single-image-mode')
|
||||
setContainerScale(ORIGINAL_FIELD_SCALE)
|
||||
setBackgroundMode(NORMAL_MODE_BG)
|
||||
// go to single image mode...
|
||||
} else {
|
||||
NORMAL_MODE_BG = getBackgroundMode()
|
||||
setViewerMode('single-image-mode')
|
||||
ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
||||
fitImage()
|
||||
setBackgroundMode(SINGLE_IMAGE_MODE_BG)
|
||||
}
|
||||
}
|
||||
|
||||
@ -307,6 +332,88 @@ function toggleWideView(){
|
||||
|
||||
|
||||
|
||||
function toggleSingleImageModeTransitions(){
|
||||
if( $('.no-single-image-transitions').length > 0 ){
|
||||
$('.no-single-image-transitions').removeClass('no-single-image-transitions')
|
||||
} else {
|
||||
$('.viewer').addClass('no-single-image-transitions')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function getBackgroundMode(){
|
||||
var mode = null
|
||||
// find a mode to set...
|
||||
for(var i = 0; i < BACKGROUND_MODES.length; i++){
|
||||
// we found our mode...
|
||||
if( $('.' + BACKGROUND_MODES[i]).length > 0 ){
|
||||
return BACKGROUND_MODES[i]
|
||||
}
|
||||
}
|
||||
return mode
|
||||
}
|
||||
|
||||
|
||||
|
||||
// set the background mode
|
||||
// NOTE: passing null will set the default.
|
||||
function setBackgroundMode(mode){
|
||||
var cur = BACKGROUND_MODES.indexOf(mode)
|
||||
|
||||
// invalid mode...
|
||||
if( cur == -1 && mode != null ){
|
||||
return null
|
||||
}
|
||||
// set the mode...
|
||||
if(mode != null){
|
||||
$('.viewer').addClass(mode)
|
||||
}
|
||||
// remove all others...
|
||||
for(var i = 0; i < BACKGROUND_MODES.length; i++){
|
||||
if( i == cur ){
|
||||
continue
|
||||
}
|
||||
mode = BACKGROUND_MODES[i]
|
||||
$('.' + mode).removeClass(mode)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// this will toggle through background theems: none -> dark -> black
|
||||
function toggleBackgroundModes(){
|
||||
var mode = null
|
||||
|
||||
// find a mode to set...
|
||||
for(var i = 0; i < BACKGROUND_MODES.length-1; i++){
|
||||
// we found our mode...
|
||||
if( $('.' + BACKGROUND_MODES[i]).length > 0 ){
|
||||
// set the next mode in list...
|
||||
mode = BACKGROUND_MODES[i+1]
|
||||
$('.viewer').addClass(mode)
|
||||
break
|
||||
}
|
||||
}
|
||||
// if no set modes are found, set the default...
|
||||
if($('.' + BACKGROUND_MODES[BACKGROUND_MODES.length-1]).length == 0){
|
||||
$('.viewer').addClass(BACKGROUND_MODES[0])
|
||||
// remove all other modes...
|
||||
} else {
|
||||
var cur = BACKGROUND_MODES.indexOf(mode)
|
||||
for(var i = 0; i < BACKGROUND_MODES.length; i++){
|
||||
if( i == cur ){
|
||||
continue
|
||||
}
|
||||
mode = BACKGROUND_MODES[i]
|
||||
$('.' + mode).removeClass(mode)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/********************************************************* Movement **/
|
||||
|
||||
@ -562,28 +669,6 @@ function mergeRibbons(direction){
|
||||
|
||||
|
||||
|
||||
function toggleSingleImageModeTransitions(){
|
||||
if( $('.no-single-image-transitions').length > 0 ){
|
||||
|
||||
$('.no-single-image-transitions').removeClass('no-single-image-transitions')
|
||||
} else {
|
||||
$('.viewer').addClass('no-single-image-transitions')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function toggleSingleImageModeWhiteBG(){
|
||||
if( $('.single-image-white-bg').length > 0 ){
|
||||
|
||||
$('.single-image-white-bg').removeClass('single-image-white-bg')
|
||||
} else {
|
||||
$('.viewer').addClass('single-image-white-bg')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*************************************************** Editor Actions **/
|
||||
|
||||
|
||||
@ -14,6 +14,25 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: white;
|
||||
color: gray;
|
||||
|
||||
/* XXX put a logo here */
|
||||
font-weight: bold;
|
||||
font-size: 24pt;
|
||||
|
||||
opacity: 0.9;
|
||||
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
@ -66,6 +85,15 @@
|
||||
height: 500px;
|
||||
border: solid blue 5px;
|
||||
margin: 20px;
|
||||
|
||||
background: white;
|
||||
|
||||
/* mostly to animate the background... */
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
@ -248,3 +276,45 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* dark background */
|
||||
.dark.viewer, .dark .loading {
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
|
||||
|
||||
.dark .screen-button {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
|
||||
.dark .image {
|
||||
}
|
||||
|
||||
|
||||
.dark .toggle-single, .dark .zoom-in {
|
||||
border-top: solid gray 1px;
|
||||
}
|
||||
|
||||
|
||||
/* black background */
|
||||
.black.viewer, .black .loading {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.black .screen-button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.black .image {
|
||||
}
|
||||
|
||||
|
||||
.black .toggle-single, .black .zoom-in {
|
||||
border-top: solid silver 1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -51,6 +51,8 @@ function setup(){
|
||||
|
||||
// set the default position and init...
|
||||
$('.current.image').click()
|
||||
|
||||
$('.loading').delay(200).fadeOut(400)
|
||||
}
|
||||
$(document).ready(setup);
|
||||
|
||||
@ -62,6 +64,12 @@ $(document).ready(setup);
|
||||
</style>
|
||||
|
||||
<div class="viewer no-single-image-transitions">
|
||||
<div class="loading">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
ImageGrid
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<div class="controller left">
|
||||
<div class="screen-button demote">^</div>
|
||||
<div class="screen-button prev-image"><</div>
|
||||
@ -94,6 +102,7 @@ $(document).ready(setup);
|
||||
|
||||
<div class="demo-buttons">
|
||||
<button onclick="toggleMarkers()">Toggle Markers (m)</button>
|
||||
<button onclick="toggleBackgroundModes()">toggle background mode (b)</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
@ -103,7 +112,6 @@ $(document).ready(setup);
|
||||
<br><br>
|
||||
|
||||
<button onclick="toggleSingleImageModeTransitions()">toggle single image mode transitions (t)</button>
|
||||
<button onclick="toggleSingleImageModeWhiteBG()">toggle single image mode white background (w)</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* single image theme (start everything with .single-image-mode)
|
||||
*/
|
||||
.single-image-mode.viewer {
|
||||
background: black;
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +10,6 @@
|
||||
|
||||
|
||||
.single-image-mode .screen-button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@ -42,25 +40,3 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* white background */
|
||||
.single-image-mode.single-image-white-bg.viewer, .single-image-mode.single-image-white-bg .controller {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode.single-image-white-bg .screen-button {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode.single-image-white-bg .image {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.single-image-mode.single-image-white-bg .toggle-single, .single-image-mode.single-image-white-bg .zoom-in {
|
||||
border-top: solid black 1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user