diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index 16d2b0d6..27cd8843 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -742,6 +742,8 @@ var DataPrototype = { // via. .getImage(..) and then get the list with this... // D.getImages(D.getImage(gid, ribbon_gid), N, 'around') // + // XXX add group support -- get the loaded, either a group gid or + // one of the contained images (first?) // XXX for some reason negative target number (ribbon number) // breaks this... getImages: function(target, count, mode){ @@ -873,6 +875,9 @@ var DataPrototype = { // // NOTE: this expects ribbon order and not image order. // NOTE: negative ribbon order is relative to list tail. + // + // XXX add group support -- get the loaded, either a group gid or + // one of the contained images (first?) getRibbon: function(target, offset){ target = target == null ? this.current : target @@ -1686,20 +1691,26 @@ var DataPrototype = { return this }, - cropGroup: function(group){ - group = this.getGroup(group) + // XXX if the group is collapsed there will be problems with uncropping... + cropGroup: function(target){ + var target = this.getImage(target) + var group = this.getGroup(target) if(group == null){ return } - // XXX is this the correct way to do this??? - this.expandGroup(group) - - var res = this.crop(this.groups[group]) - - this.collapseGroup(group) + if(target == group){ + var res = this.crop(this.groups[group]) + } else { + var r = this.getRibbon(target) + var res = this.crop(this.groups[group]) + res.ribbon_order = [r] + res.ribbons[r] = this.groups[group].slice() + res.focusImage(this.current, 'before', r) + } + return res }, diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index e1c602be..39185c9e 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -136,22 +136,35 @@ var RibbonsPrototype = { // Helpers... // XXX need a better way of doing this... - preventTransitions: function(target){ + preventTransitions: function(target, prevent_nested){ target = target || this.viewer + prevent_nested = prevent_nested || false if(target.length == 0){ return this } - target.addClass('no-transitions') var t = target[0] + + // handle nesting... + if(prevent_nested){ + var l = t.getAttribute('__prevent_transitions') + if(l != null){ + t.getAttribute('__prevent_transitions', l+1) + return this + } + t.getAttribute('__prevent_transitions', 0) + } + + target.addClass('no-transitions') getComputedStyle(t).webkitTransition getComputedStyle(t).mozTransition getComputedStyle(t).msTransition getComputedStyle(t).oTransition getComputedStyle(t).transition + return this }, - restoreTransitions: function(target, now){ + restoreTransitions: function(target, now, force){ if(target === true || target === false){ now = target target = this.viewer @@ -161,10 +174,19 @@ var RibbonsPrototype = { if(target.length == 0){ return this } + var t = target[0] + + // handle nesting... + var l = t.getAttribute('__prevent_transitions') + if(l != null && !force && l != '0'){ + t.getAttribute('__prevent_transitions', l-1) + return this + } + t.removeAttribute('__prevent_transitions') + // sync... if(now){ target.removeClass('no-transitions') - var t = target[0] var s = getComputedStyle(t) s.webkitTransition s.mozTransition @@ -177,7 +199,6 @@ var RibbonsPrototype = { var that = this setTimeout(function(){ target.removeClass('no-transitions')}, 0) - var t = target[0] var s = getComputedStyle(t) s.webkitTransition s.mozTransition @@ -194,6 +215,12 @@ var RibbonsPrototype = { this.restoreTransitions(true) return this }, + noTransitionsDeep: function(func){ + this.preventTransitions(null, true) + func.apply(this, args2array(arguments).slice(1)) + this.restoreTransitions(true) + return this + }, // Get visible image tile size... diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 2115f132..bad01bab 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -495,7 +495,13 @@ actions.Actions({ this.crop_stack = [] } this.crop_stack.push(this.data) - this.data = this.data.crop(list, flatten) + + if(list instanceof data.Data){ + this.data = list + + } else { + this.data = this.data.crop(list, flatten) + } }], uncrop: ['Uncrop ribbons', function(level, restore_current, keep_crop_order){ @@ -581,6 +587,53 @@ actions.Actions({ var selector = mode == 'any' ? 'getTaggedByAny' : 'getTaggedByAll' this.crop(this.data[selector](tags), flatten) }], + + + // grouping... + group: ['Group images', + function(gids, group){ this.data.group(gids, group) }], + ungroup: ['Ungroup images', + function(gids, group){ this.data.ungroup(gids, group) }], + + // direction can be: + // 'next' + // 'prev' + groupTo: ['', + function(target, direction){ + target = this.data.getImage(target) + var other = this.data.getImage(target, direction == 'next' ? 1 : -1) + + // we are start/end of ribbon... + if(other == null){ + return + } + + // add into an existing group... + if(this.data.isGroup(other)){ + this.group(target, other) + + // new group... + } else { + this.group([target, other]) + } + }], + // shorthands to .groupTo(..) + groupBack: ['Group target image with the image/group before it', + function(target){ this.groupTo(target, 'prev') }], + groupForward: ['Group target image with the image/group after it', + function(target){ this.groupTo(target, 'next') }], + + // NOTE: this will only group loaded images... + groupMarked: ['Group loaded marked images', + function(){ this.group(this.data.getImages(this.data.getTaggedByAny('marked'))) }], + + expandGroup: ['', + function(target){ this.data.expandGroup(target || this.current) }], + collapseGroup: ['', + function(target){ this.data.collapseGroup(target || this.current) }], + + cropGroup: ['', + function(target){ this.crop(this.data.cropGroup(target || this.current)) }], }) @@ -993,6 +1046,16 @@ actions.Actions(Client, { crop: [ reloadAfter() ], uncrop: [ reloadAfter() ], + // XXX need to force reload for actions that remove/add small numbers + // if images... + group: [ reloadAfter() ], + ungroup: [ reloadAfter() ], + groupTo: [ reloadAfter() ], + groupMarked: [ reloadAfter() ], + expandGroup: [ reloadAfter() ], + collapseGroup: [ reloadAfter() ], + cropGroup: [ reloadAfter() ], + // XXX experimental: not sure if this is the right way to go... // XXX make this play nice with crops... toggleRibbonList: ['Toggle ribbons as images view', @@ -1162,6 +1225,7 @@ module.Features = Object.create(FeatureSet) //--------------------------------------------------------------------- // NOTE: this is split out to an action so as to enable ui elements to // adapt to ribbon size changes... +// XXX try a strategy: load more in the direction of movement by an offset... var PartialRibbonsActions = actions.Actions({ updateRibbon: ['Update partial ribbon size', function(target, w, size, threshold){