more work on metadata view, still dealing with problems...

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

ui (gen4)/features/metadata.js

@@ -292,6 +292,8 @@ module.MetadataReader = core.ImageGridFeatures.Feature({
 // 			- ...
 var MetadataUIActions = actions.Actions({
 	config: {
+		'metadata-preview-size': 150,
+
 		'metadata-auto-select-modes': [
 			'none',
 			'on select',
@@ -341,13 +343,20 @@ var MetadataUIActions = actions.Actions({
 	//
 	// XXX should we replace 'mode' with nested set of metadata???
 	// XXX make this support multiple images...
-	showMetadata: ['Image/Metadata2...',
+	// XXX make things editable only in when edit is loaded...
+	showMetadata: ['Image/Metadata...',
 		widgets.makeUIDialog(function(image, mode){
 			var that = this
 			image = this.data.getImage(image)
 			mode = mode || 'disabled'
 			data = this.images[image]
 
+			var preview_size = this.config['metadata-preview-size'] || 150
+
+			var _normalize = typeof(path) != 'undefined' ? 
+				path.normalize
+				: function(e){ return e.replace(/\/\.\//, '') }
+
 			return browse.makeLister(null, 
 				function(p, make){
 					// helper...
@@ -355,8 +364,21 @@ var MetadataUIActions = actions.Actions({
 					// 		this is done to keep the ref to make(..) up-to-date...
 					make.dialog.wait = function(){
 						make.Separator()
-						make.Spinner() 
+						make.Spinner() }
-					}
+					// XXX BUG: this when attached is stealing marks from 
+					// 		the original image in ribbon and sows them in 
+					// 		the dialog...
+					// 		...need to avoid both!
+					make.dialog.updatePreview = function(){
+						var preview = this.preview = this.preview || that.ribbons.createImage(image)
+						return that.ribbons.updateImage(preview, image, preview_size, false,
+							function([p]){
+								p.classList.add('clone', 'preview')
+								p.style.height = preview_size +'px'
+								p.style.width = preview_size +'px'
+							}) }
+
+					make(['Preview:', this.updatePreview()])
 
 					// essentials...
 					make(['$GID: ', image])
@@ -384,9 +406,6 @@ var MetadataUIActions = actions.Actions({
 
 					if(data){
 						// some abstractions...
-						var _normalize = typeof(path) != 'undefined' ? 
-							path.normalize
-							: function(e){ return e.replace(/\/\.\//, '') }
 						var _basename = typeof(path) != 'undefined' ?
 							path.basename
 							: function(e){ return e.split(/[\\\/]/g).pop() }
@@ -445,6 +464,8 @@ var MetadataUIActions = actions.Actions({
 					cls: 'table-view',
 					showDisabled: false,
 				})
+				.on('attached', function(){
+					this.updatePreview() })
 				// select value of current item...
 				.on('select', function(evt, elem){
 					that.config['metadata-auto-select-mode'] == 'on select'
@@ -452,6 +473,8 @@ var MetadataUIActions = actions.Actions({
 				.close(function(){
 					// XXX handle comment and tag changes...
 					// XXX
+
+					that.refresh(image)
 				})
 		})],
 

ui (gen4)/features/ui-partial-ribbons-vdom.js

@@ -94,7 +94,7 @@ var Ribbons = {
 	//placeRibbon: null,
 	//placeImage: null,
 
-	updateImageIndicators: null,
+	callImageUpdaters: null,
 	_loadImagePreviewURL: null,
 	//load_img_sync: null,
 	updateImage: null,

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

@@ -348,7 +348,8 @@ module.uiContainer = function(func){
 // 	- mark the action as a container
 //
 // The container will:
-// 	- trigger the client's close event on close
+// 	- trigger client's 'attached' event when attached to container
+// 	- trigger client's 'close' event on close
 //
 // XXX not sure how the click is handled here...
 // XXX pass options???
@@ -398,6 +399,7 @@ module.makeUIContainer = function(make){
 				// XXX is this the right way to go???
 				.on('click', function(evt){ 
 					that.modal && that.modal.focus() })
+				.trigger('attached', o)
 
 		return o
 			// focus the new dialog...

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

@@ -168,6 +168,7 @@ var VirtualImagesUIActions = actions.Actions({
 					text.scrollHeight,
 					text.scrollWidth)
 			var s = R/r
+
 			text.style.fontSize = `${ 100*s }%`
 			// prioritize width... 
 			text.style.width = '100%'
@@ -191,6 +192,7 @@ var VirtualImagesUIActions = actions.Actions({
 				: dom }],
 
 	// XXX add text format selection...
+	// XXX make things editable only when edit is loaded...
 	metadataSection: [
 		{ sortedActionPriority: 80 },
 		function(make, gid, image){
@@ -206,6 +208,7 @@ var VirtualImagesUIActions = actions.Actions({
 				reset_on_commit: false,
 				editdone: function(evt, value){
 					image.text = value 
+					make.dialog.updatePreview()
 					that.refresh(gid)
 				},
 			})

ui (gen4)/imagegrid/ribbons.js

@@ -591,12 +591,12 @@ var BaseRibbonsPrototype = {
 		// get the base image...
 		// current...
 		if(target == null || target == 'current') {
-			img = this.viewer.find('.current.image')
+			img = this.viewer.find('.current'+IMAGE)
 
 		// gid...
 		} else if(typeof(target) == typeof('str')){
 			//return this.viewer.find('.image[gid="'+JSON.stringify(target)+'"]')
-			img = this.viewer.find('.image[gid='+JSON.stringify(target)+']')
+			img = this.viewer.find(IMAGE+'[gid='+JSON.stringify(target)+']')
 		}
 
 		// we got a collection...
@@ -1447,18 +1447,16 @@ var RibbonsPrototype = {
 	},
 
 	// XXX is .__image_updaters the right way to go???
-	updateImageIndicators: function(gid, image){
+	callImageUpdaters: function(gid, image){
 		gid = gid == null ? this.elemGID() : gid
 		image = image == null ? this.getImage() : $(image)
 
 		// collect marks...
 		image.after(this.getImageMarks(gid))
 
-		if(this.__image_updaters != null){
+		;(this.__image_updaters || [])
-			this.__image_updaters.forEach(function(update){
+			.forEach(function(update){
-				update(gid, image)
+				update(gid, image) })
-			})
-		}
 
 		return image
 	},
@@ -1496,6 +1494,8 @@ var RibbonsPrototype = {
 	//
 	// NOTE: this can update collections of images by passing either a 
 	// 		list of gids, images or a jQuery collection...
+	// NOTE: pre_updaters_callback if given is called after image is fully
+	// 		constructed but before .callImageUpdaters(..) is called...
 	//
 	// If this is set to true image previews will be loaded synchronously...
 	load_img_sync: false,
@@ -1513,14 +1513,14 @@ var RibbonsPrototype = {
 	// 		._loadImagePreviewURL(..)
 	// 		.correctImageProportionsForRotation(..)
 	//
-	// 		.updateImageIndicators(..)
+	// 		.callImageUpdaters(..)
 	//
 	// XXX add options for images to preload and only then do the update...
 	// XXX really slow for very large numbers of input images/gids...
 	// XXX add support for basic image templating here...
 	// 		...templates for blank images, text blocks and other stuff,
 	// 		this would best be done by simply filling in SVG templates...
-	updateImage: function(image, gid, size, sync, callback){
+	updateImage: function(image, gid, size, sync, pre_updaters_callback){
 		var that = this
 		var imgs = this.viewer.find(IMAGE)
 
@@ -1546,7 +1546,6 @@ var RibbonsPrototype = {
 		size = size == null ? this.getVisibleImageSize('max') : size
 
 		var update = {}
-		//var marks = {}
 
 		// build update data...
 		image.map(function(_, image){
@@ -1563,7 +1562,6 @@ var RibbonsPrototype = {
 				style: {},
 			}
 			var reset_preview = false
-			//var will_change = []
 
 			// same image -- update...
 			if(old_gid == gid || gid == null){
@@ -1573,11 +1571,8 @@ var RibbonsPrototype = {
 			// reuse for different image -- reconstruct...
 			} else {
 				// remove old marks...
-				if(typeof(old_gid) == typeof('str')){
+				typeof(old_gid) == typeof('str')
-					// XXX
+					&& that.getImageMarks(old_gid).remove()
-					//marks[old_gid] = that.getImageMarks(old_gid)
-					that.getImageMarks(old_gid).remove()
-				}
 				// reset gid...
 				data.attrs = {
 					gid: JSON.stringify(gid)
@@ -1649,17 +1644,8 @@ var RibbonsPrototype = {
 					}, 0)
 				}
 			}
-
-			callback 
-				&& callback.call(that, image, data)
-
-			//image[0].style.willChange = will_change.join(', ')
 		})
 
-		// clear marks...
-		//Object.values(marks)
-		//	.forEach(function(m){ m.remove() })
-
 		var W = this.viewer.innerWidth()
 		var H = this.viewer.innerHeight()
 
@@ -1675,9 +1661,9 @@ var RibbonsPrototype = {
 			css && img.css(css)
 
 			that.correctImageProportionsForRotation(img, W, H)
-			that.updateImageIndicators(data.gid, img)
+			pre_updaters_callback 
-
+				&& pre_updaters_callback.call(that, image, data)
-			//_img.style.willChange = '' 
+			that.callImageUpdaters(data.gid, img)
 
 			return _img
 		}))
@@ -2228,7 +2214,7 @@ var RibbonsPrototype = {
 	// NOTE: overflowing offset will focus first/last image.
 	focusImage: function(target){
 		var cur = this.viewer
-			.find('.current.image')
+			.find('.current'+IMAGE)
 		var next = this.getImage(target)
 
 		cur.removeClass('current')