diff --git a/ui (gen4)/features/metadata.js b/ui (gen4)/features/metadata.js index 213b28fe..09ce13b3 100755 --- a/ui (gen4)/features/metadata.js +++ b/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) }) })], diff --git a/ui (gen4)/features/ui-partial-ribbons-vdom.js b/ui (gen4)/features/ui-partial-ribbons-vdom.js index d36e1c30..f29fcf77 100755 --- a/ui (gen4)/features/ui-partial-ribbons-vdom.js +++ b/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, diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index e0033e4e..2b58138f 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/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... diff --git a/ui (gen4)/features/virtual-images.js b/ui (gen4)/features/virtual-images.js index 1cdbb8c8..b8187438 100644 --- a/ui (gen4)/features/virtual-images.js +++ b/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) }, }) diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index da8f6408..888e19b9 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/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.forEach(function(update){ - update(gid, image) - }) - } + ;(this.__image_updaters || []) + .forEach(function(update){ + 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')){ - // XXX - //marks[old_gid] = that.getImageMarks(old_gid) - that.getImageMarks(old_gid).remove() - } + typeof(old_gid) == typeof('str') + && 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) - - //_img.style.willChange = '' + pre_updaters_callback + && pre_updaters_callback.call(that, image, data) + 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')