From 30e3a3d5e19db97012b4dc09b014a8c417a55084 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sun, 5 Aug 2012 21:03:37 +0400 Subject: [PATCH] added independent toggling of backgrounds to single and normal modes... Signed-off-by: Alex A. Naanou --- ui/gallery-prototype.js | 135 +++++++++++++++++++++++++++++++-------- ui/gallery.css | 70 ++++++++++++++++++++ ui/gallery.html | 10 ++- ui/single-image-mode.css | 24 ------- 4 files changed, 189 insertions(+), 50 deletions(-) diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 20f98d30..a08dbe96 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -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 **/ diff --git a/ui/gallery.css b/ui/gallery.css index 348694a4..e54f5e6a 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -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; +} + + + diff --git a/ui/gallery.html b/ui/gallery.html index 99ec4c3a..7130e234 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -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);
+
+ +
+ ImageGrid +
+
^
<
@@ -94,6 +102,7 @@ $(document).ready(setup);
+

@@ -103,7 +112,6 @@ $(document).ready(setup);

-

diff --git a/ui/single-image-mode.css b/ui/single-image-mode.css index 9eba954b..f270c76c 100755 --- a/ui/single-image-mode.css +++ b/ui/single-image-mode.css @@ -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; -} - - -