added editing of intervals in slideshow...

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

ui (gen4)/css/widget/browse.css

@@ -30,6 +30,13 @@
 }
 
 
+/* editable... */
+.browse-widget [contenteditable] {
+	min-width: 2px;
+	min-height: 2px;
+}
+
+
 
 /************************************************************ Path ***/
 
@@ -245,6 +252,7 @@
 	opacity: 0.3;
 }
 
+
 /* numbers... */
 /* XXX need to show this only on devices with keyboards... */
 .browse-widget .list .text:before {

ui (gen4)/features/metadata.js

@@ -268,10 +268,12 @@ var MetadataUIActions = actions.Actions({
 		],
 		'metadata-auto-select-mode': 'on select',
 
+		// XXX
 		'metadata-editable-fields': [
-			'Artist',
+			//'Artist',
-			'Copyright',
+			//'Copyright',
-			'Comment',
+			//'Comment',
+			//'Tags',
 		],
 		'metadata-field-order': [
 			// base
@@ -325,13 +327,6 @@ var MetadataUIActions = actions.Actions({
 				b = b == -1 ? x : b
 				return a - b
 			}
-			var _selectElemText = function(elem){
-				var range = document.createRange()
-				range.selectNodeContents(elem)
-				var sel = window.getSelection()
-				sel.removeAllRanges()
-				sel.addRange(range)
-			}
 
 			var _buildInfoList = function(image, metadata){
 				// XXX move these to an info feature...
@@ -434,7 +429,7 @@ var MetadataUIActions = actions.Actions({
 					// select value of current item...
 					.on('select', function(evt, elem){
 						if(that.config['metadata-auto-select-mode'] == 'on select'){
-							_selectElemText($(elem).find('.text').last()[0])
+							$(elem).find('.text').last().selectText()
 						}
 					})
 					// XXX start editing onkeydown...
@@ -451,7 +446,7 @@ var MetadataUIActions = actions.Actions({
 
 						// handle select...
 						if(that.config['metadata-auto-select-mode'] == 'on open'){
-							_selectElemText(elem[0])
+							elem.selectText()
 						}
 
 						// skip non-editable fields...

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

@@ -11,6 +11,7 @@ define(function(require){ var module = {}
 var toggler = require('lib/toggler')
 var actions = require('lib/actions')
 var features = require('lib/features')
+var keyboard = require('lib/keyboard')
 
 var core = require('features/core')
 var base = require('features/base')
@@ -96,6 +97,57 @@ var SlideshowActions = actions.Actions({
 							return
 						}
 
+						var _makeEditable = function(elem){
+							$(elem).find('.text')
+								.prop('contenteditable', true)
+								.text('')
+								.selectText()
+								.keydown(function(){ 
+									event.stopPropagation() 
+
+									var n = keyboard.toKeyName(event.keyCode)
+
+									// reset to original value...
+									if(n == 'Esc'){
+										oo.client.update()
+
+									// save value...
+									} else if(n == 'Enter'){
+										event.preventDefault()
+										var txt = $(this).text()
+
+										// invalid format...
+										if(!Date.str2ms(txt)){
+											oo.client.update()
+											return
+										}
+
+										// add new value and sort list...
+										that.config['slideshow-intervals']
+											.push(txt)
+										that.config['slideshow-intervals']
+											.sort(function(a, b){
+												return Date.str2ms(a) - Date.str2ms(b)
+											})
+
+										// update the list data...
+										oo.client.options.data 
+											= that.config['slideshow-intervals']
+												.concat([
+													'---', 
+													'New...'
+												])
+
+										// update list and select new value...
+										oo.client.update()
+											.done(function(){
+												oo.client.select('"'+txt+'"')
+											})
+									}
+								})
+							return $(elem)
+						}
+
 						// interval...
 						// XXX add custom interval editing...
 						if(/interval/i.test(path)){
@@ -105,8 +157,9 @@ var SlideshowActions = actions.Actions({
 									that.config['slideshow-intervals']
 										.concat([
 											// XXX do we add a new item here???
-											//'---', 
+											'---', 
-											//'New'
+											//$('<input type="text" pattern="[0-9]+|[0-9]*\\.[0-9]+" placeholder="New...">')
+											'New...',
 										]), 
 									{itemButtons: [
 										// mark for removal...
@@ -127,9 +180,16 @@ var SlideshowActions = actions.Actions({
 												}
 											}],
 									]})
+									// select 'New...' item...
+									.on('select', function(evt, elem){
+										if(/new/i.test($(elem).text())){
+											_makeEditable(elem)
+										}
+									})
 									.open(function(evt, time){
-										if(/new/i.test(time)){
+										if(!Date.str2ms(time)){
-											// XXX edit...
+											oo.client.select('New...')
+											// XXX place the cursor...
 											// XXX
 
 										} else {

ui (gen4)/lib/util.js

@@ -159,6 +159,18 @@ function(path){
 
 
 
+/*********************************************************************/
+
+module.selectElemText = function(elem){
+	var range = document.createRange()
+	range.selectNodeContents(elem)
+	var sel = window.getSelection()
+	sel.removeAllRanges()
+	sel.addRange(range)
+}
+
+
+
 /*********************************************************************/
 
 // XXX experiment
@@ -201,9 +213,26 @@ if(typeof(jQuery) != typeof(undefined)){
 				elem.velocity('stop')
 			})
 	}
+
+	jQuery.fn.selectText = function(){
+		var range = document.createRange()
+
+		this.each(function(){
+			range.selectNodeContents(this)
+		})
+
+		var sel = window.getSelection()
+		sel.removeAllRanges()
+		sel.addRange(range)
+
+		return this
+	}
+
+
 }
 
 
+
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })

ui (gen4)/lib/widget/browse.js

@@ -355,8 +355,9 @@ var BrowserPrototype = {
 					'#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9',
 				],
 
-			Enter: 'stopFullPathEdit!',
+			// XXX
-			Esc: 'abortFullPathEdit!',
+			Enter: 'push!',
+			Esc: 'update!',
 		},
 
 		FullPathEdit: {
@@ -454,19 +455,19 @@ var BrowserPrototype = {
 			D: 'toggleDisabledDrawing',
 			T: 'toggleNonTraversableDrawing',
 
-			// XXX should these be select???
+			// XXX should these use .select(..)???
 			// XXX should these be relative to visible area or absolute 
 			// 		to current list regardless of scroll (as is now)???
 			// XXX should these work while filtering??
-			'#1': 'push: "0!"',
+			'#1': 'push!: "0!"',
-			'#2': 'push: "1!"',
+			'#2': 'push!: "1!"',
-			'#3': 'push: "2!"',
+			'#3': 'push!: "2!"',
-			'#4': 'push: "3!"',
+			'#4': 'push!: "3!"',
-			'#5': 'push: "4!"',
+			'#5': 'push!: "4!"',
-			'#6': 'push: "5!"',
+			'#6': 'push!: "5!"',
-			'#7': 'push: "6!"',
+			'#7': 'push!: "6!"',
-			'#8': 'push: "7!"',
+			'#8': 'push!: "7!"',
-			'#9': 'push: "8!"',
+			'#9': 'push!: "8!"',
 		},
 	},