added keyboard help...

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

ui/Gen3-TODO.otl

@@ -6,6 +6,7 @@
 		| This is a tad complicated by:
 		| 	- marks
 		| 	- image elem proportions that can change
+		[_] ASAP: import fav dirs...
 		[_] BUG: sometimes duplicate images get loaded...
 		| this happens when jumping back and forth on the mid ribbon until
 		| the last element shows up and then moving left until the frame

ui/index.html

@@ -272,19 +272,77 @@ body {
 
 /* XXX this is by no means final... */
 .viewer,
-.light.viewer {
+.light.viewer,
+.light.viewer .overlay-block .background {
 	background: white;
 }
 
-.gray.viewer {
+.gray.viewer,
+.gray.viewer .overlay-block .background {
 	background: #333;
 }
 
-.dark.viewer {
+.dark.viewer,
+.dark.viewer .overlay-block .background {
 	background: #0a0a0a;
 }
 
 
+/* Overlay */
+.overlay-block {
+	display: none;
+	position: absolute:
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 100%;
+}
+.viewer.overlay .overlay-block {
+	display: block;
+}
+.overlay-block .content {
+}
+.overlay-block .background {
+	position: absolute:
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 100%;
+	opacity: 0.7;
+}
+
+
+/* this is for sliding stuff */
+.viewer {
+	box-shadow: 0px 0px 50px 0px silver;
+}
+
+/* help */
+.keyboard-help {
+	margin: 20px;
+}
+
+.keyboard-help .section-doc {
+	font-size: small;
+	vertical-align: top;
+	font-style: italic;
+}
+.keyboard-help th {
+	text-align: left;
+	height: 50px;
+	vertical-align: bottom;
+	border-bottom: solid gray 1px;
+}
+.keyboard-help tr:hover {
+	background: #eee;
+	vertical-align: top;
+}
+.keyboard-help tr td:first-child {
+	color: gray;
+	font-style: italic;
+	padding-right: 20px;
+}
+
 </style>
 
 
@@ -376,8 +434,6 @@ $(function(){
 			updateImages()
 		})
 
-
-
 })
 
 
@@ -424,6 +480,10 @@ Populated
 	<div class="down-indicator"></div>
 	<div class="start-indicator"></div>
 	<div class="end-indicator"></div>
+	<div class="overlay-block">
+		<div class="background"></div>
+		<div class="content"></div>
+	</div>
 </div>
 
 

ui/keybindings3.js

@@ -28,8 +28,19 @@ var KEYBOARD_CONFIG = {
 			}),
 	},
 
+	'.overlay:visible':{
+		title: 'Overlay',
+		doc: 'NOTE: In this mode all other key bindings are disabled, except '+
+			'the ones explicitly defined here.',
+		ignore: '*',
+		Esc: doc('Close overlay',
+			function(){
+				$('.overlay').click()
+			}),
+	},
+
 	// general setup...
-	'.viewer': {
+	'.viewer:not(.overlay)': {
 		title: 'Global',
 
 		// Navigation...
@@ -141,7 +152,7 @@ var KEYBOARD_CONFIG = {
 						shiftImageDown(null, DIRECTION) 
 						centerRibbons()
 					}),
-				'ctrl+shift': doc('Shift image up to empty ribbon',
+				'ctrl+shift': doc('Shift image down to empty ribbon',
 					function(){
 						event.preventDefault()
 						shiftImageDownNewRibbon(null, DIRECTION) 
@@ -276,15 +287,71 @@ var KEYBOARD_CONFIG = {
 
 		F4: doc('Open image in external software', openImage),
 
-		// XXX STUB print this in an overlay...
+		// XXX make this generic...
-		// '?'
+		H: {
-		'/': {
+				default: doc('Show keyboard bindings',
-				shift: doc('Show keyboard bindings',
 					function(){
+						var body = $(document.body)
+
+						// remove helo when we scroll to the top...
+						var scroll_handler = function(){
+							if(body.scrollTop() <= 0){
+								$('.keyboard-help')
+									.remove()
+								$('.viewer')
+									.removeClass('overlay')
+								body
+									.click()
+								$(window)
+									.off('scroll', scroll_handler)
+							}
+						}
+
+						// prepare and cleanup...
+						$('.keyboard-help').remove()
+						$('.viewer').addClass('overlay')
+
+						// build the help...
 						var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
-						alert(doc.text())
+							.css({
+								cursor: 'hand',
+							})
+							.appendTo(body)
+
+						// add exit by click...
+						body
+							.one('click', function(){
+								body
+									.animate({
+										scrollTop: 0,
+									}, function(){
+										$('.keyboard-help')
+											.remove()
+										$('.viewer')
+											.removeClass('overlay')
+										$(window)
+											.off('scroll', scroll_handler)
+									})
+							})
+
+						// scroll to the help...
+						// NOTE: need to set the scroll handler AFTER we 
+						// 		scroll down, or it will be more of a 
+						// 		tease than a help...
+						var t = getRelativeVisualPosition($('.viewer'), doc).top
+						body
+							.animate({
+								scrollTop: Math.abs(t) - 40,
+							}, function(){
+								$(window)
+									.on('scroll', scroll_handler)
+							})
 					}),
-			}
+			},
+		// '?'
+		'/': { 
+				shift: 'H', 
+		},
 	}
 }