mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
more work on metadata view, still dealing with problems...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
8c7e8e08f3
commit
6ed2d1ebd5
@ -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)
|
||||
})
|
||||
})],
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ var Ribbons = {
|
||||
//placeRibbon: null,
|
||||
//placeImage: null,
|
||||
|
||||
updateImageIndicators: null,
|
||||
callImageUpdaters: null,
|
||||
_loadImagePreviewURL: null,
|
||||
//load_img_sync: null,
|
||||
updateImage: null,
|
||||
|
||||
@ -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...
|
||||
|
||||
@ -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)
|
||||
},
|
||||
})
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user