more tweaks...

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

ui (gen4)/css/layout.less

@@ -1153,7 +1153,7 @@ stretching in width... */
 .overlay-info .index {
 	cursor: pointer;
 }
-.overlay-info .index .position {
+.overlay-info .index .position.editable {
 	cursor: text;
 }
 .overlay-info .index.global:after {

ui (gen4)/features/ui-status.js

@@ -70,7 +70,15 @@ var StatusBarActions = actions.Actions({
 			'path',
 		],
 
-		'status-bar-index-live-update-on-edit': false,
+		'status-bar-index': {
+			// NOTE: this would need to reconstruct the status bar for 
+			// 		changes to take effect, i.e. call .resetStatusBar()
+			// XXX might be a good idea to run an editor on click on
+			// 		touch devices...
+			'editable': true,
+
+			'live-update-on-edit': false,
+		},
 	},
 
 	__statusbar_elements__: {
@@ -83,52 +91,68 @@ var StatusBarActions = actions.Actions({
 				var type = item
 				item = $('<span>')
 					.addClass(type)
-					.append($('<span>')
+					.append(!(this.config['status-bar-index'] || {})['editable'] ?
-						.addClass('position')
+						// not-editable...
-						.attr('info', 'Image position (click to edit image position)')
+						$('<span>')
-						.prop('contenteditable', true)
+							.addClass('position')
-						.keydown(function(){
+							.attr('info', 'Image position (click to toggle ribbon/global)')
-							// keep this from affecting the viewer...
+							// toggle index state...
-							event.stopPropagation()
+							.click(function(){
+								$(this).parent()
+									.toggleClass('global')
+								that.updateStatusBar()
+							})
+						// editable...
+						: $('<span>')
+							.addClass('position editable')
+							.attr('info', 'Image position (click to edit image position)')
+							.prop('contenteditable', true)
+							.keydown(function(){
+								// keep this from affecting the viewer...
+								event.stopPropagation()
 
-							var n = keyboard.toKeyName(event.keyCode)
+								var n = keyboard.toKeyName(event.keyCode)
-							console.log('KEY:', n)
 
-							// lose focus and exit...
+								// lose focus and exit...
-							if(n == 'Esc' || n == 'Enter'){
+								if(n == 'Esc' || n == 'Enter'){
-								event.preventDefault()
+									event.preventDefault()
 
-								// get image on enter...
+									// get image on enter...
-								if(n == 'Enter'){
+									if(n == 'Enter'){
-									that.focusImage(parseInt($(this).text())-1, 
+										that.focusImage(parseInt($(this).text())-1 || 'current', 
-										item.hasClass('global') ? 'global' : undefined)
+											item.hasClass('global') ? 'global' : undefined)
+									}
+
+									// clear selection....
+									window.getSelection().removeAllRanges()
+									$(this).blur()
+
+									// reset on esc...
+									if(n == 'Esc'){
+										that.updateStatusBar()
+									}
+
+									return false
 								}
+							})
+							// update image position...
+							.keyup(function(){
+								event.stopPropagation()
 
-								// clear selection....
+								that.config['status-bar-index']['live-update-on-edit']
+									&& that.focusImage(parseInt($(this).text())-1,
+										item.hasClass('global') ? 'global' : undefined)
+							})
+							.click(function(){
+								// select the text...
 								window.getSelection().removeAllRanges()
-								$(this).blur()
+								var range = document.createRange()
-
+								range.selectNodeContents(this)
-								return false
+								window.getSelection().addRange(range)
-							}
+							})
-						})
+							.blur(function(){
-						// update image position...
+								that.updateStatusBar()
-						.keyup(function(){
+							}))
-							event.stopPropagation()
-
-							that.config['status-bar-index-live-update-on-edit']
-								&& that.focusImage(parseInt($(this).text())-1,
-									item.hasClass('global') ? 'global' : undefined)
-						})
-						.click(function(){
-							// select the text...
-							window.getSelection().removeAllRanges()
-							var range = document.createRange()
-							range.selectNodeContents(this)
-							window.getSelection().addRange(range)
-						})
-						.blur(function(){
-							that.updateStatusBar()
-						}))
 					.append($('<span>')
 						.addClass('length')
 						.attr('info', 'Image position (click to toggle ribbon/global)')
@@ -376,7 +400,14 @@ var StatusBarActions = actions.Actions({
 				}
 			})],	
 	updateStatusBar: ['Interface/Update satus bar',
-		function(){ this.toggleStatusBar('!') }]
+		function(){ this.toggleStatusBar('!') }],
+
+	resetStatusBar: ['Interface/Reset status bar',
+		function(){
+			var mode = this.toggleStatusBar('?')
+			this.toggleStatusBar('none')
+			this.toggleStatusBar(mode)
+		}],
 })
 
 var StatusBar =