diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 2fde753f..996ca2b8 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -64,6 +64,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'ui-single-image', //'ui-partial-ribbons', + // XXX this is still experimental but seems to already work faster... 'ui-partial-ribbons-2', 'marks', diff --git a/ui (gen4)/features/ui-partial-ribbons-2.js b/ui (gen4)/features/ui-partial-ribbons-2.js index 90c78384..df5db65d 100755 --- a/ui (gen4)/features/ui-partial-ribbons-2.js +++ b/ui (gen4)/features/ui-partial-ribbons-2.js @@ -15,22 +15,21 @@ var core = require('features/core') /*********************************************************************/ -// XXX update sequence: -// - if target is loaded more than 1 screen width off the edge: -// - jump (animate) -// - update ribbon -// - if target is not loaded or too close to edge: -// - update ribbon to place current at ~1 screen off the edge in -// the opposite direction... -// - load target partially (1/2 ribbon) ~1 screen off the other edge -// - jump (animate) -// - update ribbon to place target at center of ribbon -// ...this all feels a bit too complicated... // XXX do we need to do most of the work here on in imagegrid/data.js??? // ...another question would be if we can do this using existing // functionality? var PartialRibbonsActions = actions.Actions({ + config: { + 'ribbon-size-screens': 7, + + // the amount of screen widths to keep around the current image... + 'ribbon-update-threshold': 1.2, + + // the oversize multiplier limit when we resize the ribbon down... + 'ribbon-resize-threshold': 2, + }, + updateRibbon: ['- Interface/Update partial ribbon size', function(target, w, size, threshold){ target = target instanceof jQuery @@ -43,11 +42,12 @@ var PartialRibbonsActions = actions.Actions({ // get config data and normalize... size = (size || this.config['ribbon-size-screens'] - || 5) * w + || 9) * w threshold = threshold == 0 ? threshold : (threshold || this.config['ribbon-resize-threshold'] - || 1) * w + || 2) + var update_threshold = (this.config['ribbon-update-threshold'] || 2) * w var data = this.data var ribbons = this.ribbons @@ -61,10 +61,38 @@ var PartialRibbonsActions = actions.Actions({ // NOTE: for the initial load this may be empty... var r = ribbons.getRibbon(r_gid) - // XXX test threshold... - // XXX + // next/prev loaded... + var img = this.ribbons.getImage(target) + var nl = img.nextAll('.image:not(.clone)').length + var pl = img.prevAll('.image:not(.clone)').length + var loaded = nl + pl + 1 - return function(){ + // next/prev available... + // NOTE: we subtract 1 to remove the current and make these + // compatible with: nl, pl + var na = this.data.getImages(target, size, 'after').length - 1 + var pa = this.data.getImages(target, size, 'before').length - 1 + + //console.log(`-- loaded: ${loaded} size: ${size}`) + + // full resize... + // ribbon not loaded... + if(r.length == 0 + // ribbon shorter than we expect... + || (loaded < size && na + pa > loaded) + || loaded > size * threshold){ + //console.log(`RESIZE: ${loaded} -> ${size}`) + this.resizeRibbon(target, size) + + // soft-update... + } else if(na + pa < nl + pl + // passed threshold on the right... + || (nl < update_threshold && na > nl) + // passed threshold on the left... + || (pl < update_threshold && pa > pl) + // loaded more than we need by threshold... + || nl + pl + 1 > size + update_threshold){ + //console.log('UPDATE') r.length == 0 ? // ribbon not loaded... this.resizeRibbon(target, size) @@ -72,7 +100,7 @@ var PartialRibbonsActions = actions.Actions({ : this.ribbons .preventTransitions(r) .updateRibbonInPlace( - this.data.getImages(target, size, 'total'), + this.data.getImages(target, loaded, 'total'), r_gid, target) .restoreTransitions(r, true) @@ -138,6 +166,7 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({ ['resizing.pre', function(unit, size){ // XXX + this.updateRibbon() }], ], })