added a second set of controllers (mini), to be used as the main mode for desktop...

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

ui/TODO.otl

@@ -1,5 +1,5 @@
 Priority work
-	[_] 73% Preview II
+	[_] 74% Preview II
 		[X] 100% sorted images in ribbons
 			[X] 100% stage I: position the promoted/demoted image correctly
 			| and correct positioning on promote/demote
@@ -58,7 +58,7 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 69% UI
+		[_] 72% UI
 			[X] fix single image mode
 			| need to center the image correctly...
 			[X] 100% add screen buttons for all actions...
@@ -73,7 +73,7 @@ Priority work
 			[X] 100% control single-image mode animations
 				[X] scroll
 				[X] switch (no transition)
-			[_] 16% layout
+			[_] 33% layout
 				[_] 50% tablet
 					[_] stretch to full screen
 					| NOTE: viewer 0% sizes may break things...
@@ -82,9 +82,9 @@ Priority work
 					| just like single image mode...
 					[X] make bg color switching in all modes
 					| black, white, gray
-				[_] 0% PC
+				[_] 50% PC
 					[_] stretch to full screen
-					[_] hide buttons for keyboard actions
+					[X] hide buttons for keyboard actions
 				[_] web
 				| is this is the same as the above two? (with auto-select)
 			[_] 0% settings/help screen

ui/gallery-prototype.js

@@ -8,6 +8,7 @@ var keys = {
 	toggleSingleImageMode: [70, 13],			//	???, Enter
 	toggleSingleImageModeTransitions: [84],		//	t
 	toggleBackgroundModes: [66],				//	b
+	toggleControls: [9],						// tab
 	close: [27, 88, 67],						//	???
 
 	// zooming...
@@ -116,6 +117,8 @@ function setupControlElements(){
 
 	$('.screen-button.fit-three').click(fitThreeImages)
 
+	$('.screen-button.show-controls').click(showControls)
+
 	$('.screen-button.settings').click(function(){alert('not implemented yet...')})
 }
 
@@ -251,6 +254,7 @@ function handleKeys(event){
 		: (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions()
 
 		: (fn(code, keys.toggleBackgroundModes) >= 0) ? toggleBackgroundModes()
+		: (fn(code, keys.toggleControls) >= 0) ? toggleControls()
 
 		// debug...
 		: (fn(code, keys.toggleMarkers) >= 0) ? toggleMarkers()
@@ -384,31 +388,38 @@ function setBackgroundMode(mode){
 
 // this will toggle through background theems: none -> dark -> black
 function toggleBackgroundModes(){
-	var mode = null
+	var mode = getBackgroundMode()
-
+	// default -> first
-	// find a mode to set...
+	if(mode == null){
-	for(var i = 0; i < BACKGROUND_MODES.length-1; i++){
+		setBackgroundMode(BACKGROUND_MODES[0])
-		// we found our mode...
+	// last -> default...
-		if( $('.' + BACKGROUND_MODES[i]).length > 0 ){
+	} else if(mode == BACKGROUND_MODES[BACKGROUND_MODES.length-1]){
-			// set the next mode in list...
+		setBackgroundMode()
-			mode = BACKGROUND_MODES[i+1]
+	// next...
-			$('.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)
+		setBackgroundMode(BACKGROUND_MODES[BACKGROUND_MODES.indexOf(mode)+1])
-		for(var i = 0; i < BACKGROUND_MODES.length; i++){
-			if( i == cur ){
-				continue
-			}
-			mode = BACKGROUND_MODES[i]
-			$('.' + mode).removeClass(mode)
 	}
+}
+
+
+
+function showControls(){
+	$('.hidden-controls').removeClass('hidden-controls')
+}
+
+
+
+function hideControls(){
+	$('.viewer').addClass('hidden-controls')
+}
+
+
+
+function toggleControls(){
+	if( $('.hidden-controls').length > 0 ){
+		showControls()
+	} else {
+		hideControls()
 	}
 }
 

ui/gallery.css

@@ -98,12 +98,14 @@
 }
 
 
-.controller {
+.controller, .controller-mini {
 	position: absolute;
 
-	height: 500px;
+	overflow: hidden;
 	width: 50px;
 
+	height: 500px;
+
 	/* keep these on top of the normal elements but below the high 
 	 * visibility 9000+ crowd...
 	 */
@@ -118,6 +120,15 @@
 	opacity: 0.5;
 }
 
+.controller-mini {
+	width: 0px;
+}
+
+.hidden-controls .controller-mini {
+	width: 25px;
+}
+
+
 .controller.left {
 	left: 0px;
 }
@@ -125,6 +136,20 @@
 	right: 0px;
 }
 
+.hidden-controls .controller.left {
+	width: 0px;
+}
+.hidden-controls .controller.right {
+	width: 0px;
+}
+
+.controller-mini.left {
+	left: 0px;
+}
+.controller-mini.right {
+	right: 0px;
+}
+
 
 .screen-button {
 	text-align: center;
@@ -141,7 +166,8 @@
 }
 
 
-.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide {
+.controller-mini .screen-button {
+	height: 50%;
 }
 
 
@@ -150,6 +176,7 @@
 	height: 10%;
 }
 
+
 .toggle-single, .fit-three, .zoom-in, .zoom-out {
 	height: 10%;
 }
@@ -159,39 +186,6 @@
 	height: 5%;
 }
 
-.promote {
-}
-
-
-.next-image {
-}
-
-
-.prev-image {
-}
-
-
-.demote {
-}
-
-
-.toggle-wide {
-}
-
-
-.toggle-single {
-}
-
-
-.zoom-in {
-}
-
-
-.zoom-out {
-}
-
-
-
 
 .container {
 	position: relative;

ui/gallery.html

@@ -76,6 +76,10 @@ $(document).ready(setup);
 			<small><i>loading...</i></small>
 		</td></tr></table>
 	</div>
+	<div class="controller-mini left">
+		<div class="screen-button show-controls">*</div>
+		<div class="screen-button"></div>
+	</div>
 	<div class="controller left">
 		<div class="screen-button demote">^</div>
 		<div class="screen-button prev-image">&lt;</div>
@@ -95,7 +99,10 @@ $(document).ready(setup);
 		<div class="h-marker"></div>
 		<div class="v-marker"></div>
 	</div>
-	<!-- need to keep these after -->
+	<div class="controller-mini right">
+		<div class="screen-button settings">?</div>
+		<div class="screen-button"></div>
+	</div>
 	<div class="controller right">
 		<div class="screen-button demote">^</div>
 		<div class="screen-button next-image">&gt;</div>
@@ -108,7 +115,8 @@ $(document).ready(setup);
 
 <div class="demo-buttons">
 	<button onclick="toggleMarkers()">Toggle Markers (m)</button>
-	<button onclick="toggleBackgroundModes()">toggle background mode (b)</button>
+	<button onclick="toggleBackgroundModes()">toggle background modes (b)</button>
+	<button onclick="toggleControls()">toggle screen controls (tab)</button>
 
 	<br><br>
 

ui/single-image-mode.css

@@ -4,7 +4,7 @@
 }
 
 
-.single-image-mode .controller {
+.single-image-mode .controller, .single-image-mode .controller-mini {
 	opacity: 0.2;
 }