made the help a mode, some cleanup and minor refactoring...

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

ui/index.html

@@ -313,15 +313,18 @@ body {
 
 
 /* this is for sliding stuff */
-.viewer {
+.viewer.help-mode {
 	box-shadow: 0px 0px 50px 0px silver;
 }
 
 /* help */
 .keyboard-help {
-	margin: 20px;
+	width: 80%;
+	margin-top: 20px;
+	margin-left: 15%;
+	margin-right: 5%;
+	margin-bottom: 100px;
 }
-
 .keyboard-help .section-doc {
 	font-size: small;
 	vertical-align: top;
@@ -341,6 +344,11 @@ body {
 	color: gray;
 	font-style: italic;
 	padding-right: 20px;
+	padding-left: 10px;
+}
+.keyboard-help .section-doc td:only-child {
+	padding-right: 0px;
+	padding-left: 0px;
 }
 
 </style>

ui/keybindings3.js

@@ -26,18 +26,28 @@ var KEYBOARD_CONFIG = {
 				toggleImageProportions() 
 				centerRibbons()
 			}),
+		Esc: doc('Exit single image mode', 
+				function(){ toggleSingleImageMode('off') }),
+		Q: 'Esc',
 	},
 
-	'.overlay:visible':{
+
-		title: 'Overlay',
+	'.help-mode':{
+		title: 'Help',
 		doc: 'NOTE: In this mode all other key bindings are disabled, except '+
 			'the ones explicitly defined here.',
 		ignore: '*',
-		Esc: doc('Close overlay',
+
-			function(){
+		Esc: doc('Close help',
-				$('.overlay').click()
+			function(){ toggleKeyboardHelp('off') }),
-			}),
+		H: 'Esc',
+		Q: 'Esc',
+		// '?'
+		'/': { 
+				shift: 'Esc', 
 			},
+	},
+
 
 	// general setup...
 	'.viewer:not(.overlay)': {
@@ -287,67 +297,8 @@ var KEYBOARD_CONFIG = {
 
 		F4: doc('Open image in external software', openImage),
 
-		// XXX make this generic...
+		H: doc('Show keyboard bindings',
-		H: {
+			function(){ toggleKeyboardHelp() }),
-				default: 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)
-							.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', 

ui/modes.js

@@ -72,6 +72,72 @@ function toggleImageProportions(mode){
 }
 
 
+var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
+		function(action){
+			var body = $(document.body)
+			var win = $(window)
+
+			// on...
+			if(action == 'on'){
+				// remove helo when we scroll to the top...
+				var scroll_handler = function(){
+					if(body.scrollTop() <= 0){
+						toggleKeyboardHelp('off')
+					}
+				}
+
+				// prepare and cleanup...
+				$('.keyboard-help').remove()
+				$('.viewer').addClass('overlay')
+
+				// build the help...
+				var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
+					.css({
+						cursor: 'hand',
+					})
+					.appendTo(body)
+
+				// add exit by click...
+				body
+					.one('click', function(){
+						toggleKeyboardHelp('off')
+					})
+
+				// 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(){
+						win
+							.on('scroll', scroll_handler)
+					})
+
+			// off...
+			} else {
+				var _cleanup = function(){
+					$('.keyboard-help').remove()
+					$('.viewer').removeClass('overlay')
+					body.click()
+					win.off('scroll', scroll_handler)
+				}
+
+				if(body.scrollTop() > 0){
+						body
+							.animate({
+								scrollTop: 0,
+							}, _cleanup) 
+				} else {
+					_cleanup()
+				}
+			}
+		})
+
+
+
 
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */