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,11 +417,15 @@ if(typeof(jQuery) != typeof(undefined)){
 
 		this
 			.prop('contenteditable', true)
+			// NOTE: this will also focus the element...
+			.selectText()
+
+		// 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')
-			// NOTE: this will also focus the element...
-			.selectText()
 				.keydown(function(){ 
 					if(!that.prop('contenteditable')){
 						return
@@ -441,13 +459,27 @@ if(typeof(jQuery) != typeof(undefined)){
 						that.trigger('commit')
 					}
 				})
+				.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
 	}