added independent toggling of backgrounds to single and normal modes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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 **/
 

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;
+}
+
+
+

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);
 </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">&lt;</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>
 

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;
-}
-
-
-