added value selection to browse item + basic editing...

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

ui (gen4)/features/metadata.js

@@ -18,10 +18,13 @@ define(function(require){ var module = {}
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
+var util = require('lib/util')
+var toggler = require('lib/toggler')
 var tasks = require('lib/tasks')
 
 var actions = require('lib/actions')
 var core = require('features/core')
+var base = require('features/base')
 
 var browse = require('lib/widget/browse')
 var overlay = require('lib/widget/overlay')
@@ -243,6 +246,18 @@ module.MetadataReader = core.ImageGridFeatures.Feature({
 // 			- ...
 var MetadataUIActions = actions.Actions({
 	config: {
+		'metadata-auto-select-modes': [
+			'none',
+			'on select',
+			'on open',
+		],
+		'metadata-auto-select-mode': 'on select',
+
+		'metadata-editable-fields': [
+			'Artist',
+			'Copyright',
+			'Comment',
+		],
 		'metadata-field-order': [
 			// metadata...
 			'Make', 'Camera Model Name', 'Lens ID', 'Lens', 'Lens Profile Name', 'Focal Length',
@@ -258,10 +273,15 @@ var MetadataUIActions = actions.Actions({
 		],
 	},
 
+	toggleMetadataAutoSelect: ['Interface/Toggle metadata value auto-select',
+		base.makeConfigToggler('metadata-auto-select-mode', 
+			function(){ return this.config['metadata-auto-select-modes'] })],
+
 	// XXX should we replace 'mode' with nested set of metadata???
 	// XXX make this support multiple images...
 	showMetadata: ['Image/Show metadata',
 		function(image, mode){
+			var that = this
 			image = this.data.getImage(image)
 			mode = mode || 'disabled'
 
@@ -305,6 +325,7 @@ var MetadataUIActions = actions.Actions({
 				])
 			}
 
+
 			// build fields...
 			var fields = []
 			Object.keys(metadata).forEach(function(k){
@@ -339,6 +360,14 @@ var MetadataUIActions = actions.Actions({
 			// add separator to base...
 			fields.length > 0 && base.push('---')
 
+			var selectElemText = function(elem){
+				var range = document.createRange()
+				range.selectNodeContents(elem)
+				var sel = window.getSelection()
+				sel.removeAllRanges()
+				sel.addRange(range)
+			}
+
 			var o = overlay.Overlay(this.ribbons.viewer, 
 				browse.makeList(
 						null,
@@ -346,15 +375,36 @@ var MetadataUIActions = actions.Actions({
 						{
 							showDisabled: false,
 						})
+					// 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])
+						}
+					})
 					// path selected...
 					.open(function(evt, path){ 
-						// edit field...
+						var editable = RegExp(that.config['metadata-editable-fields']
-						/* XXX need keyboard bindings setup for this to work...
+							.map(function(f){ return util.quoteRegExp(f) })
-						o.client.filter().find('.text')
+							.join('|'))
-							.last()
+
+						var elem = o.client.filter(path).find('.text').last()
+
+						if(that.config['metadata-auto-select-mode'] == 'on open'){
+							selectElemText(elem[0])
+						}
+
+						// skip non-editable fields...
+						if(editable.test(path)){
+							elem
 								.prop('contenteditable', true)
 								.focus()
+								/*
+								.one('blur', function(){
+									$(this)
+										.prop('contenteditable', false)
+								})
 								*/
+						}
 					}))
 					.close(function(){
 						// XXX

ui (gen4)/index.html

@@ -13,11 +13,187 @@
 <!-- XXX remove before use... -->
 <style>
 
+/* Open Sans 
+*	- line spacing a bit too large...
+*/
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Regular.ttf)
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+
+
+
+/* Source Sans Pro */
+/*
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf)
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+*/
+
+
+
+/* Arimo 
+*	- bold face a bit too narrow
+*/
+/*
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Regular.ttf)
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+*/
+
+
+
+/* Roboto */
+/*
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Regular.ttf)
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+*/
+
+
+
+/*********************************************************************/
+
 body {
 	margin: 0;
 	/* this will prevent odd blur effects when blurring out specific 
 		elements... */
 	background: black;
+
+	/*font: OpenSans, sans-serif;*/
 }
 
 /* show image gid... */
@@ -130,6 +306,14 @@ body {
 }
 .browse-widget.metadata-view .list>div .text:nth-child(2) {
 	font-style: italic;
+
+	-moz-user-select: auto;
+	-webkit-user-select: auto;
+	-o-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
+
+	cursor: text;
 }
 
 

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

@@ -325,7 +325,8 @@ var BrowserPrototype = {
 	// 		in filter mode???
 	keyboard: {
 		FullPathEdit: {
-			pattern: '.browse-widget .path[contenteditable]',
+			//pattern: '.browse-widget .path[contenteditable]',
+			pattern: '.browse-widget [contenteditable]',
 
 			// keep text editing action from affecting the selection...
 			ignore: [