diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 3ca2fff4..2fde753f 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -63,8 +63,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'ui-animation', 'ui-single-image', - 'ui-partial-ribbons', - //'ui-partial-ribbons-2', + //'ui-partial-ribbons', + 'ui-partial-ribbons-2', 'marks', 'ui-range', diff --git a/ui (gen4)/features/ui-partial-ribbons-2.js b/ui (gen4)/features/ui-partial-ribbons-2.js index a1d5a8bc..90c78384 100755 --- a/ui (gen4)/features/ui-partial-ribbons-2.js +++ b/ui (gen4)/features/ui-partial-ribbons-2.js @@ -33,11 +33,80 @@ var core = require('features/core') var PartialRibbonsActions = actions.Actions({ updateRibbon: ['- Interface/Update partial ribbon size', function(target, w, size, threshold){ + target = target instanceof jQuery + ? this.ribbons.getElemGID(target) + // NOTE: data.getImage(..) can return null at start or end + // of ribbon, thus we need to account for this... + : (this.data.getImage(target) + || this.data.getImage(target, 'after')) + w = w || this.screenwidth + // get config data and normalize... + size = (size + || this.config['ribbon-size-screens'] + || 5) * w + threshold = threshold == 0 ? threshold + : (threshold + || this.config['ribbon-resize-threshold'] + || 1) * w + var data = this.data + var ribbons = this.ribbons + + // localize transition prevention... + // NOTE: we can't get ribbon via target directly here as + // the target might not be loaded... + var r_gid = data.getRibbon(target) + if(r_gid == null){ + return + } + // NOTE: for the initial load this may be empty... + var r = ribbons.getRibbon(r_gid) + + // XXX test threshold... // XXX + + return function(){ + r.length == 0 ? + // ribbon not loaded... + this.resizeRibbon(target, size) + // simply update... + : this.ribbons + .preventTransitions(r) + .updateRibbonInPlace( + this.data.getImages(target, size, 'total'), + r_gid, + target) + .restoreTransitions(r, true) + } }], resizeRibbon: ['- Interface/Resize ribbon to n images', function(target, size){ - // XXX + size = size + || (this.config['ribbon-size-screens'] * this.screenwidth) + || (5 * this.screenwidth) + var data = this.data + var ribbons = this.ribbons + + // localize transition prevention... + // NOTE: we can't get ribbon via target directly here as + // the target might not be loaded... + var r_gid = data.getRibbon(target) + if(r_gid == null){ + return + } + // NOTE: for the initial load this may be empty... + var r = ribbons.getRibbon(r_gid) + + // XXX do we need to for example ignore unloaded (r.length == 0) + // ribbons here, for example not load ribbons too far off + // screen?? + + ribbons + .preventTransitions(r) + .updateRibbon( + data.getImages(target, size, 'total'), + r_gid, + target) + .restoreTransitions(r, true) }], }) @@ -59,7 +128,12 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({ handlers: [ ['focusImage.pre centerImage.pre', function(target, list){ - // XXX + // NOTE: we have to do this as we are called BEFORE the + // actual focus change happens... + // XXX is there a better way to do this??? + target = list != null ? target = this.data.getImage(target, list) : target + + this.updateRibbon(target) }], ['resizing.pre', function(unit, size){ diff --git a/ui (gen4)/imagegrid/data.js b/ui (gen4)/imagegrid/data.js index 3b3440c6..6acfa03e 100755 --- a/ui (gen4)/imagegrid/data.js +++ b/ui (gen4)/imagegrid/data.js @@ -850,6 +850,13 @@ var DataPrototype = { // .getImages(gid|order|ribbon, count, 'before') // -> list // + // Get count images around target padding with available images: + // .getImages(gid|order|ribbon, count, 'total') + // NOTE: this is like 'around' above, but will always try to + // return count images, e.g. when target is closer than + // count/2 to start or end of ribbon, the resulting list + // will get padded from the opposite side if available... + // -> list // // If no image is given the current image/ribbon is assumed as target. // @@ -930,10 +937,9 @@ var DataPrototype = { var i = list.indexOf(target) // prepare to slice the list... - if(mode == 'around'){ - count = count/2 - var pre = Math.floor(count) - var post = Math.ceil(count) - 1 + if(mode == 'around' || mode == 'total'){ + var pre = Math.floor(count/2) + var post = Math.ceil(count/2) - 1 } else if(mode == 'before'){ var pre = count - 1 @@ -952,20 +958,38 @@ var DataPrototype = { // pre... for(var n = i-1; n >= 0 && pre > 0; n--){ - if(n in list){ - res.push(list[n]) - pre-- - } + // NOTE: list may be sparse so we skip the items that are not + // present and count only the ones we add... + n in list + && res.push(list[n]) + && pre-- } res.reverse() // post... + // NOTE: this will also pad the tail if needed if mode is 'total' + post = mode == 'total' ? post + pre : post for(var n = i+1; n < list.length && post > 0; n++){ - if(n in list){ - res.push(list[n]) - post-- + n in list + && res.push(list[n]) + && post-- + } + + // pad to total... + // NOTE: we only need to pad the head here as the tail is padded + // in the post section... + if(mode == 'total' && post > 0){ + var pad = count - res.length + var i = list.indexOf(res[0]) + + res.reverse() + for(var n = i-1; n >= 0 && pad > 0; n--){ + n in list + && res.push(list[n]) + && pad-- } + res.reverse() } return res diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index be7eadbf..a9183bb6 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -1665,7 +1665,7 @@ var RibbonsPrototype = { } // update gids... - $(gids.slice(0, loaded.length-1)) + $(gids.slice(0, loaded.length)) .each(function(i, gid){ gid && that.setElemGID(loaded.eq(i), gid) })