refactoring...

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

ui (gen4)/features/meta.js

@@ -160,10 +160,10 @@ core.ImageGridFeatures.Feature('imagegrid-testing', [
 	'ui-introspection',
 	'ui-single-image',
 	'ui-slideshow',
+	'ui-virtual-images',
 	'ui-preview-filters',
 	'url-history',
 	'external-editor',
-	'virtual-images',
 
 	// experimental features...
 	//'ui-range',

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

@@ -123,42 +123,38 @@ module.VirtualImages = core.ImageGridFeatures.Feature({
 //---------------------------------------------------------------------
 
 var VirtualImagesUIActions = actions.Actions({
+	config: {
+		'virtual-text-fit-area-threshold': 100,
+	},
 
-	// XXX virtual block editor UI...
+	__virtual_block_processors__: {
-	// XXX
+		// The default handler is designed to process plain or lightly 
-
+		// formatted text.
-})
+		//
-
+		// This will:
-var VirtualImagesUI = 
+		// 	- replace '\n' with '<br>'
-module.VirtualImagesUI = core.ImageGridFeatures.Feature({
+		// 	- adjust font size to fit the image block
-	title: '',
+		//
-	doc: '',
+		// NOTE: the processor is allowed to only modify image block 
-
+		// 		content, anything else would require cleanup...
-	tag: 'ui-virtual-images',
+		// XXX might be a good idea to add action param to enable 
-	depends: [
+		// 		handlers to do things like 'setup', 'cleanup', ...	
-		'ui',
+		default: function(image, dom){
-		'virtual-images'
+			if(!image.text){
-	],
+				return dom }
-
-	actions: VirtualImagesUIActions, 
-
-	handlers: [
-		['updateImage',
-			function(res, gid, img){
-				var image = this.images[gid] || {}
-
-				// set image content...
-				if(image.type == 'virtual' && image.text){
-					var text = document.createElement('div')
-					text.innerHTML = image.text
-					img[0].innerHTML = ''
-					img[0].appendChild(text)
 
 			// threshold after which we try to fill the volume...
-					var C = 100
+			var C = this.config['virtual-text-fit-area-threshold'] || 100
+
+			// construct a basic text element...
+			var text = document.createElement('div')
+			text.innerHTML = image.text
+				.replace(/\n/g, '<br>\n')
+			dom[0].innerHTML = ''
+			dom[0].appendChild(text)
 
 			// scale the text if it is small...
-					var R = img[0].offsetHeight * 0.8
+			var R = dom[0].offsetHeight * 0.8
 			var r = image.text.length > C ?
 				Math.max(
 					text.offsetWidth, 
@@ -175,9 +171,57 @@ module.VirtualImagesUI = core.ImageGridFeatures.Feature({
 			// prioritize width... 
 			text.style.width = '100%'
 
+			return dom
+		},
+	},
+	updateVirtualBlock: ['- Virtual/',
+		function(gid, dom, image){
+			image = image || this.images[gid] || {}
+
+			if(image.type != 'virtual'){
+				return actions.UNDEFINED }
+
+			var p = (this.__virtual_block_processors__ 
+				|| VirtualImagesUIActions.__virtual_block_processors__
+				|| {})
+			p = p[image.format] || p['default']
+			return p instanceof Function ?
+				p.call(this, image, dom) 
+				: dom }],
+
+
+	// XXX virtual block editor UI...
+	// XXX
+})
+
+// NOTE: this is independent of 'virtual-images'...
+var VirtualImagesUI = 
+module.VirtualImagesUI = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-virtual-images',
+	depends: [
+		'ui',
+	],
+	suggested: [
+		'virtual-images',
+	],
+
+	actions: VirtualImagesUIActions, 
+
+	handlers: [
+		['updateImage',
+			function(_, gid, dom){
+				var image = this.images[gid] || {}
+
+				// set image content...
+				if(image.type == 'virtual' && image.text){
+					this.updateVirtualBlock(gid, dom, image)
+
 				// clear reused image content...
-				} else if(img[0].innerHTML != ''){
+				} else if(dom[0].innerHTML != ''){
-					img[0].innerHTML = ''
+					dom[0].innerHTML = ''
 				}
 			}],
 	],