cleanup + added 'activate' option to .makeEditable(..)...

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

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

@@ -87,7 +87,6 @@ var StatusBarActions = actions.Actions({
 	},
 
 	__statusbar_elements__: {
-		// XXX use .makeEditable(..)
 		index: function(item, gid, img){
 			var that = this
 			gid = gid || this.current
@@ -111,36 +110,15 @@ var StatusBarActions = actions.Actions({
 						: $('<span>')
 							.addClass('position editable')
 							.attr('info', 'Image position (click to edit)')
-							.prop('contenteditable', true)
+							.makeEditable({ clear_on_edit: false })
-							.keydown(function(){
+							// select image when done...
-								// keep this from affecting the viewer...
+							.on('edit-done', function(_, text){
-								event.stopPropagation()
+								var i = parseInt(text)
-
-								var n = keyboard.toKeyName(event.keyCode)
-
-								var i = parseInt($(this).text())
 								i = i >= 1 ? i-1
 									: i == null ? 'current'
 									: i
-
-								// lose focus and exit...
-								if(n == 'Esc' || n == 'Enter'){
-									event.preventDefault()
-
-									// get image on enter...
-									if(n == 'Enter'){
 								that.focusImage(i, 
 									item.hasClass('global') ? 'global' : undefined)
-									}
-
-									// clear selection....
-									window.getSelection().removeAllRanges()
-									$(this).blur()
-
-									that.updateStatusBar()
-
-									return false
-								}
 							})
 							// update image position...
 							// XXX this appears to be run in the node context...
@@ -210,14 +188,12 @@ var StatusBarActions = actions.Actions({
 				item = $('<span>')
 					.addClass('ribbon-number')
 					.attr('info', 'Current ribbon (click to edit)')
-					.click(function(){
+					.makeEditable({ clear_on_edit: false })
-						$(this)
-							.makeEditable({ 
-								clear_on_edit: false 
-							})
 					.on('edit-done', function(_, text){
 						that.focusRibbon(text == '*' ? that.base : parseInt(text))
 					})
+					.click(function(){
+						$(this).selectText()
 					})
 					.blur(function(){
 						that.updateStatusBar()

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

@@ -38,6 +38,7 @@ module.makeEditableItem =
 function(list, item, elem, callback, options){
 	return elem
 		.makeEditable({
+			activate: true,
 			clear_on_edit: false,
 		})
 		.on('edit-done', callback || function(){})
@@ -93,6 +94,7 @@ function(actions, list_key, options){
 	var _makeEditable = function(elem){
 		return $(elem).find('.text')
 			.makeEditable({
+				activate: true,
 				blur_on_abort: false,
 				blur_on_commit: false,
 			})

ui (gen4)/lib/util.js

@@ -367,21 +367,29 @@ if(typeof(jQuery) != typeof(undefined)){
 	//
 	// Options format:
 	// 	{
+	// 		// activate (focus) element when done...
+	// 		activate: false,
+	//
+	// 		// set multi line edit mode...
 	// 		multiline: false,
 	//
+	// 		// reset value on abort...
 	// 		reset_on_abort: true,
 	//
+	// 		// blur element on abort/commit...
 	// 		blur_on_abort: false,
 	// 		blur_on_commit: false,
 	//
+	// 		// clear selection on abort/commit...
 	// 		clear_selection_on_abort: true,
 	// 		clear_selection_on_commit: true,
 	//
+	// 		// clear element value on edit...
 	// 		clear_on_edit: true,
 	//
+	// 		// Keys that will abort the edit...
 	// 		abort_keys: [
 	// 			'Esc',
-	// 			...
 	// 		],
 	// 	}
 	//
@@ -415,10 +423,10 @@ if(typeof(jQuery) != typeof(undefined)){
 			this.text('')
 		}
 
-		this
+		this.prop('contenteditable', true)
-			.prop('contenteditable', true)
+
 		// NOTE: this will also focus the element...
-			.selectText()
+		options.activate && this.selectText()
 
 		// do not setup handlers more than once...
 		if(!this.hasClass('editable-field')){