added ribbon indicator to status bar (thanks to xyz for the hint)...

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

ui (gen4)/css/layout.less

@@ -1262,9 +1262,26 @@ stretching in width... */
 
 	font-size: small;
 }
+/*
 .overlay-info .index.global:hover:after {
 	content: "Global";
 }
+*/
+
+/* ribbon */
+.overlay-info .ribbon-number {
+	opacity: 0.7;
+}
+.overlay-info .ribbon-number:before {
+	content: "R:";
+	opacity: 0.6;
+}
+/* XXX not sure if we need to expand this 
+.overlay-info .ribbon-number:hover:before {
+	content: "Ribbon: ";
+	opacity: 0.6;
+}
+*/
 
 /* gid */
 .overlay-info .gid {

ui (gen4)/features/filesystem.js

@@ -1873,6 +1873,7 @@ var FileSystemWriterUIActions = actions.Actions({
 					// XXX need to add options to size: 'none',
 					// XXX use closest preview instead of hi-res when 
 					// 		this is set...
+					// XXX need to add option to save full index...
 					//'size_limit',
 					// XXX might be a good idea to include source data links
 					//'include_source_url', // bool

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

@@ -51,8 +51,11 @@ var StatusBarActions = actions.Actions({
 			'minimal',
 			'full',
 		],
+		// XXX make different configurations for different modes instead 
+		// 		of hiding some items... (???)
 		'status-bar-items': [
 			'index',
+			'ribbon',
 			'gid',
 			'path',
 
@@ -84,6 +87,7 @@ var StatusBarActions = actions.Actions({
 	},
 
 	__statusbar_elements__: {
+		// XXX use .makeEditable(..)
 		index: function(item, gid, img){
 			var that = this
 			gid = gid || this.current
@@ -106,7 +110,7 @@ var StatusBarActions = actions.Actions({
 						// editable...
 						: $('<span>')
 							.addClass('position editable')
-							.attr('info', 'Image position (click to edit image position)')
+							.attr('info', 'Image position (click to edit)')
 							.prop('contenteditable', true)
 							.keydown(function(){
 								// keep this from affecting the viewer...
@@ -197,7 +201,33 @@ var StatusBarActions = actions.Actions({
 
 			return item
 		},
+		ribbon: function(item, gid, img){
+			var that = this
+			var n = this.data ? this.data.getRibbonOrder(gid || this.current) : '-'
 
+			// make an element...
+			if(typeof(item) == typeof('str')){
+				item = $('<span>')
+					.addClass('ribbon-number')
+					.attr('info', 'Current ribbon (click to edit)')
+					.click(function(){
+						$(this)
+							.makeEditable({ 
+								clear_on_edit: false 
+							})
+							.on('edit-done', function(_, text){
+								that.focusRibbon(text == '*' ? that.base : parseInt(text))
+							})
+					})
+					.blur(function(){
+						that.updateStatusBar()
+					})
+			}
+
+			item.text(n + ((this.data && this.data.getRibbon(gid) == this.base) ? '*' : ''))
+
+			return item
+		},
 		// XXX handle path correctly...
 		gid: function(item, gid, img){
 			var that = this
@@ -248,7 +278,6 @@ var StatusBarActions = actions.Actions({
 			return item
 		},
 		path: 'gid',
-
 		// XXX show menu in the appropriate corner...
 		mark: function(item, gid, img){
 			gid = gid || this.current

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

@@ -92,8 +92,12 @@ function(actions, list_key, options){
 
 	var _makeEditable = function(elem){
 		return $(elem).find('.text')
-			.makeEditable()
+			.makeEditable({
+				blur_on_abort: false,
+				blur_on_commit: false,
+			})
 			.on('edit-aborted', function(){
+				list.select(null)	
 				list.update()
 			})
 			.on('edit-done', function(evt, text){

ui (gen4)/lib/util.js

@@ -370,6 +370,13 @@ if(typeof(jQuery) != typeof(undefined)){
 	// 		multiline: false,
 	//
 	// 		reset_on_abort: true,
+	//
+	// 		blur_on_abort: false,
+	// 		blur_on_commit: false,
+	//
+	// 		clear_selection_on_abort: true,
+	// 		clear_selection_on_commit: true,
+	//
 	// 		clear_on_edit: true,
 	//
 	// 		abort_keys: [
@@ -392,6 +399,13 @@ if(typeof(jQuery) != typeof(undefined)){
 	// XXX should this reset field to it's original state after 
 	// 		commit/abort???
 	jQuery.fn.makeEditable = function(options){
+		if(options == false){
+			this
+				.prop('contenteditable', false)
+
+			return this
+		}
+
 		options = options || {}
 		var that = this
 
@@ -403,51 +417,69 @@ if(typeof(jQuery) != typeof(undefined)){
 
 		this
 			.prop('contenteditable', true)
-			// make the element focusable and selectable...
-			.attr('tabindex', '0')
-			.addClass('editable-field')
 			// NOTE: this will also focus the element...
 			.selectText()
-			.keydown(function(){ 
-				if(!that.prop('contenteditable')){
-					return
-				}
 
-				event.stopPropagation() 
+		// do not setup handlers more than once...
+		if(!this.hasClass('editable-field')){
+			this
+				// make the element focusable and selectable...
+				.attr('tabindex', '0')
+				.addClass('editable-field')
+				.keydown(function(){ 
+					if(!that.prop('contenteditable')){
+						return
+					}
 
-				var n = keyboard.toKeyName(event.keyCode)
+					event.stopPropagation() 
 
-				// abort...
+					var n = keyboard.toKeyName(event.keyCode)
-				if((options.abort_keys || ['Esc']).indexOf(n) >= 0){
-					// reset original value...
-					(options.reset_on_abort == null || options.reset_on_abort) 
-						&& that.text(original)
 
-					that.trigger('abort')
+					// abort...
+					if((options.abort_keys || ['Esc']).indexOf(n) >= 0){
+						// reset original value...
+						(options.reset_on_abort == null || options.reset_on_abort) 
+							&& that.text(original)
 
-				// done -- single line...
+						that.trigger('abort')
-				} else if(n == 'Enter' 
-						&& !options.multiline){
-					event.preventDefault()
 
-					that.trigger('commit')
+					// done -- single line...
+					} else if(n == 'Enter' 
+							&& !options.multiline){
+						event.preventDefault()
 
-				// done -- multiline...
+						that.trigger('commit')
-				} else if(n == 'Enter' 
-						&& (event.ctrlKey || event.metaKey) 
-						&& options.multiline){
-					event.preventDefault()
 
-					that.trigger('commit')
+					// done -- multiline...
-				}
+					} else if(n == 'Enter' 
-			})
+							&& (event.ctrlKey || event.metaKey) 
-			// user triggerable events...
+							&& options.multiline){
-			.on('abort', function(){
+						event.preventDefault()
-				that.trigger('edit-aborted', original)
+
-			})
+						that.trigger('commit')
-			.on('commit', function(){
+					}
-				that.trigger('edit-done', that.text())
+				})
-			})
+				.on('blur', function(){
+					window.getSelection().removeAllRanges()
+				})
+				// user triggerable events...
+				.on('abort', function(){
+					that.trigger('edit-aborted', original)
+
+					options.clear_selection_on_abort !== false 
+						&& window.getSelection().removeAllRanges()
+
+					options.blur_on_abort !== false && this.blur() 
+				})
+				.on('commit', function(){
+					that.trigger('edit-done', that.text())
+
+					options.clear_selection_on_commit !== false 
+						&& window.getSelection().removeAllRanges()
+
+					options.blur_on_commit !== false && this.blur() 
+				})
+		}
 
 		return this
 	}