added virtiual block editor + some cleanup...

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

ui (gen4)/features/keyboard.js

@@ -358,6 +358,7 @@ module.GLOBAL_KEYBOARD = {
 		Menu: 'showContextMenu',
 		//alt_I: 'Menu',
 		alt_I: 'browseActions: "/Image/" -- Image menu...',
+		alt_V: 'browseActions: "/Virtual block/" -- Virtual block menu...',
 		alt_R: 'browseActions: "/Ribbon/" -- Ribbon menu...',
 
 

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

@@ -1372,6 +1372,7 @@ var BrowseActionsActions = actions.Actions({
 				'Image/55:.*flip.*',
 				'Image/-70:---',
 				'Image/-70:.*remove.*',
+			'$Virtual block',
 			'$Ribbon',
 				'Ribbon/-70:---',
 				'Ribbon/-70:.*remove.*',

ui (gen4)/features/virtual-blocks.js

@@ -12,25 +12,27 @@ var features = require('lib/features')
 
 var core = require('features/core')
 
+var widgets = require('features/ui-widgets')
+
+var browse = require('lib/widget/browse')
+
 
 
 /*********************************************************************/
 
-// XXX revise menu placement...
+// XXX should these be sortable and how???
-var VirtualBlocksActions = actions.Actions({
+// 		...relative placement (i.e. "before <GID>")???
-	// construction of new "virtual images"...
-	//
-	// XXX should this be restricted to collections???
 // XXX should these be importable from fs???
 // 		i.e. exported as json to <title>.virt and imported back...
 // 		...might be a good idea to add custom import/export handlers...
 // 
+var VirtualBlocksActions = actions.Actions({
+	// construction of new "virtual images"...
+	//
 	// XXX do better arg processing -- handle metadata correctly...
 	// XXX add export support for this type of stuff...
 	// 		text -> file.txt
-	// XXX add default named templates...
+	makeVirtualBlock: ['- $Virtual block/',
-	// XXX add svg templates???
-	makeVirtualBlock: ['- Virtual/',
 		function(ref, offset, metadata){
 			ref = ref || 'current'
 			offset = offset || 'after'	
@@ -65,22 +67,30 @@ var VirtualBlocksActions = actions.Actions({
 			// update metadata...
 			metadata
 				&& (this.images[gid] = metadata)
+			this.markChanged
+				&& this.markChanged('images', [gid])
 
 			// focus new image...
 			// NOTE: this should update the view too...
 			this.focusImage(gid)
 		}],
 
-	makeVirtualBlankBefore: ['Virtual/Add blank before',
+	// XXX this is enabled only in crop mode as there is no way to delete 
-		'makeVirtualBlank: $0 "before"'],
+	// 		a block but possible to create one...
-	makeVirtualBlank: ['Virtual/Add blank after',
+	// 		...should we add a .removeBlock(..) action???
-		core.doc``,
+	makeVirtualBlank: ['Virtual block/50:Add blank $after',
-		//{ browseMode: function(){ return !this.collection && 'disabled' }, },
+		core.doc`
+		
+		`,
+		{ browseMode: function(){ return !this.collection && 'disabled' }, },
 		function(ref, offset){
 			this.makeVirtualBlock(ref, offset, {
 				type: 'virtual',
 				path: null, 
 			}) }],
+	makeVirtualBlankBefore: ['Virtual block/51:Add blank $before',
+		{ browseMode: 'makeVirtualBlank', },
+		'makeVirtualBlank: $0 "before"'],
 
 	// XXX export...
 })
@@ -162,7 +172,7 @@ var VirtualBlocksUIActions = actions.Actions({
 			return dom
 		},
 	},
-	updateVirtualBlock: ['- Virtual/',
+	updateVirtualBlock: ['- Virtual block/',
 		function(gid, dom, image){
 			image = image || this.images[gid] || {}
 
@@ -177,7 +187,6 @@ var VirtualBlocksUIActions = actions.Actions({
 				p.call(this, image, dom) 
 				: dom }],
 
-	// XXX make things editable only when edit is loaded...
 	metadataSection: [
 		{ sortedActionPriority: 80 },
 		function(make, gid, image){
@@ -186,33 +195,11 @@ var VirtualBlocksUIActions = actions.Actions({
 				return }
 
 			make.Separator()
-			make.Editable(['Te$xt:', image.text], {
+			this.editVirtualBlockText ?
-				start_on: 'open',
+				// editable... 
-				edit_text: 'last',
+				this.editVirtualBlockText(make, gid, image)
-				multiline: true,
+				// view only...
-				reset_on_commit: false,
+				: make(['Te$xt:', image.text])
-				editdone: function(evt, value){
-					image.text = value 
-					// mark image as changed...
-					that.markChanged 
-						&& that.markChanged('images', [gid])
-					// refresh views...
-					make.dialog.updatePreview()
-					that.refresh(gid)
-				},
-			})
-			make(['Format:', image.format || 'text'], {
-				open: function(){
-					this.selectTextFormat(gid) }, 
-			})
-		}],
-	// XXX is there a point in showing this when there is 1 format only???
-	selectTextFormat: ['Virtual/Text format...',
-		{ browseMode: function(){ 
-			return (this.image || {}).type != 'virtual' && 'disabled' }, },
-		function(gid){
-			// XXX show a list of keys from __virtual_block_processors__
-			// XXX
 		}],
 })
 
@@ -255,8 +242,48 @@ module.VirtualBlocksUI = core.ImageGridFeatures.Feature({
 //---------------------------------------------------------------------
 
 var VirtualBlocksEditUIActions = actions.Actions({
-	// XXX virtual block editor...
+	// XXX this is a good candidate for inlineing (browse2)
-	// XXX
+	// XXX should we also add a preview (preview constructor from metadata)???
+	// XXX should we do a sanity check for image type???
+	editVirtualBlockText: ['Virtual block/$Edit text...',
+		{ browseMode: function(){ 
+			return (this.image || {}).type != 'virtual' && 'disabled' }, },
+		widgets.makeUIDialog(function(gid){
+			var that = this
+
+			var _make = function(make, gid, image){
+				make.Editable(['Te$xt:', image.text], {
+					start_on: 'open',
+					edit_text: 'last',
+					multiline: true,
+					reset_on_commit: false,
+					editdone: function(evt, value){
+						image.text = value 
+						// mark image as changed...
+						that.markChanged 
+							&& that.markChanged('images', [gid])
+						// refresh views...
+						make.dialog.updatePreview
+							&& make.dialog.updatePreview()
+						that.refresh(gid)
+					}, }) }
+
+			// XXX should this be a more specific test???
+			return arguments[0] instanceof Function?
+				// inline...
+				_make.call(this, ...arguments)
+				// dialog...
+				: browse.makeLister(null, 
+					function(p, make){
+						var gid = gid || that.current
+						var data = data || that.images[gid]
+
+						_make(make, gid, data) 
+					}, {
+						cls: 'table-view',
+					})
+					.close(function(){
+						that.refresh(gid) }) })],
 })
 
 // NOTE: this is independent of 'virtual-blocks'...