diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index 126b2416..dc5d24b7 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -57,8 +57,6 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'keyboard', // features... - 'ui-ribbon-auto-align', - 'ui-cursor', 'ui-animation', diff --git a/ui (gen4)/features/ui-partial-ribbons-2.js b/ui (gen4)/features/ui-partial-ribbons-2.js index 205c8d65..f4a7a11a 100755 --- a/ui (gen4)/features/ui-partial-ribbons-2.js +++ b/ui (gen4)/features/ui-partial-ribbons-2.js @@ -41,6 +41,7 @@ var PartialRibbonsActions = actions.Actions({ 'ribbon-update-timeout': 120, }, + // XXX trigger .alignRibbons(..) in correct spot... updateRibbon: ['- Interface/Update partial ribbon size', function(target, w, size, threshold, preload){ target = target instanceof jQuery diff --git a/ui (gen4)/features/ui-partial-ribbons-vdom.js b/ui (gen4)/features/ui-partial-ribbons-vdom.js index 4ebec64f..3343e8a2 100755 --- a/ui (gen4)/features/ui-partial-ribbons-vdom.js +++ b/ui (gen4)/features/ui-partial-ribbons-vdom.js @@ -225,7 +225,6 @@ var VirtualDOMRibbonsPrototype = { ]) }, // XXX setup handlers (???) - // XXX current image marker (???) // XXX STUB: make aligning more extensible... (???) makeRibbon: function(gid, target, count, state){ state = state || {} @@ -415,14 +414,19 @@ var VirtualDOMRibbonsPrototype = { clear: function(){ + this.dom + && this.dom.remove() + delete this.state delete this.dom delete this.vdom + return this }, // NOTE: virtual-dom architecture is designed around a fast-render-on-demand // concept, so we build the state on demand... + // XXX get scale from config on initial load... sync: function(target, size){ var dom = this.dom = this.dom // get/create the ribbon-set... @@ -567,6 +571,7 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({ function(){ delete this.virtualdom.state.tile_size }], // XXX account for fast navigation... + // XXX sync with .alignRibbons(..) correctly... ['focusImage.pre', function(target){ var img = this.ribbons.getImage(target) @@ -578,8 +583,12 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({ if(!this.__partial_ribbon_update){ this.__partial_ribbon_update = setTimeout((function(){ delete this.__partial_ribbon_update + this.ribbons.preventTransitions() - this.updateRibbon(this.current) + this + .updateRibbon(this.current) + // XXX HACK??? + .alignRibbons(null, null, true) this.ribbons.restoreTransitions() }).bind(this), 150) } diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 3ac23b3f..da8fc3ff 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -9,11 +9,6 @@ * maintain configuration state in local storage * - ui-url-hash * handle .location.hash -* - ui-ribbon-auto-align -* unify and handle ribbon alignment... -* - ui-ribbon-align-to-order -* - ui-ribbon-align-to-first -* - ui-ribbon-manual-align * - ui-animation * manage UI non-css animations... * - ui-cursor @@ -221,6 +216,22 @@ module.ViewerActions = actions.Actions({ 'last', // select last image ], 'ribbon-focus-mode': 'visual', + + // control ribbon alignment... + // + // NOTE: when this is null then 'ribbon-focus-mode' will be used... + // NOTE: this supports the same modes as 'ribbon-focus-mode'... + 'ribbon-align-modes': { + none: null, // use .config['ribbon-focus-mode']'s value + visual: 'alignByOrder', + order: 'alignByOrder', + first: 'alignByFirst', + //last, + manual: null, + }, + 'ribbon-align-mode': null, + + 'ribbon-align-delay': 50, }, // Ribbons... @@ -492,6 +503,32 @@ module.ViewerActions = actions.Actions({ function(state){ this.config['ribbon-image-separators'] = state }) ], + // ribbon aligning... + alignRibbons: ['Interface/Align ribbons', + function(target, scale, now){ + if(target == 'now'){ + now = true + target = null + } + var mode = this.config['ribbon-align-mode'] + || this.config['ribbon-focus-mode'] + var modes = this.config['ribbon-align-modes'] + + if(mode in modes && mode != 'manual'){ + this[modes[mode]](target, scale, now) + + // manual... + // XXX is this correct??? + } else { + this + .centerRibbon(target) + .centerImage(target) + } + }], + toggleRibbonAlignMode : ['Interface/Ribbon align mode', + core.makeConfigToggler('ribbon-align-mode', + function(){ return Object.keys(this.config['ribbon-align-modes']) })], + // align modes... // XXX these should also affect up/down navigation... // ...navigate by proximity (closest to center) rather than by @@ -527,7 +564,7 @@ module.ViewerActions = actions.Actions({ var that = this var _align = function(){ - this._align_timeout = null + this.__align_timeout = null // align other ribbons... var ribbon = data.getRibbon(gid) for(var r in data.ribbons){ @@ -559,11 +596,11 @@ module.ViewerActions = actions.Actions({ } else { // if we are going fast we might skip an update... - if(this._align_timeout != null){ - clearTimeout(this._align_timeout) - this._align_timeout = null + if(this.__align_timeout != null){ + clearTimeout(this.__align_timeout) + this.__align_timeout = null } - this._align_timeout = setTimeout(_align, 50) + this.__align_timeout = setTimeout(_align, this.config['ribbon-align-delay']) } }], alignByFirst: ['Interface/Align ribbons except current to first image', @@ -1016,6 +1053,9 @@ module.Viewer = core.ImageGridFeatures.Feature({ ['resizingDone', function(){ this.scale = this.scale }], //*/ + + ['focusImage.post', + function(){ this.alignRibbons() }], ], }) @@ -1411,140 +1451,6 @@ module.URLHash = core.ImageGridFeatures.Feature({ /*********************************************************************/ -// Ribbons... - -// XXX manual align needs more work... -var AutoAlignRibbons = -module.AutoAlignRibbons = core.ImageGridFeatures.Feature({ - title: '', - doc: '', - - tag: 'ui-ribbon-auto-align', - depends: ['ui'], - exclusive: ['ui-ribbon-align'], - - config: { - // control ribbon alignment... - // - // NOTE: when this is null then 'ribbon-focus-mode' will be used... - // NOTE: this supports the same modes as 'ribbon-focus-mode'... - 'ribbon-align-modes': [ - 'none', // use .config['ribbon-focus-mode']'s value - 'visual', - 'order', - 'first', - //'last', - 'manual', - ], - 'ribbon-align-mode': null, - }, - - actions: actions.Actions({ - alignRibbons: ['Interface/Align ribbons', - function(target, scale, now){ - if(target == 'now'){ - now = true - target = null - } - var mode = this.config['ribbon-align-mode'] - || this.config['ribbon-focus-mode'] - - if(mode == 'visual' || mode == 'order'){ - this.alignByOrder(target, scale, now) - - } else if(mode == 'first'){ - this.alignByFirst(target, scale, now) - - // manual... - // XXX is this correct??? - } else { - this - .centerRibbon(target) - .centerImage(target) - } - }], - toggleRibbonAlignMode : ['Interface/Ribbon align mode', - core.makeConfigToggler('ribbon-align-mode', - function(){ return this.config['ribbon-align-modes'] })], - }), - - handlers: [ - ['focusImage.post', - function(){ this.alignRibbons() }], - ], -}) - - -// XXX should .alignByOrder(..) be a feature-specific action or global -// as it is now??? -var AlignRibbonsToImageOrder = -module.AlignRibbonsToImageOrder = core.ImageGridFeatures.Feature({ - title: '', - doc: '', - - tag: 'ui-ribbon-align-to-order', - depends: ['ui'], - exclusive: ['ui-ribbon-align'], - - config: { - //'ribbon-focus-mode': 'order', - 'ribbon-focus-mode': 'visual', - }, - - handlers: [ - ['focusImage.post', function(){ this.alignByOrder() }] - ], -}) - - -var AlignRibbonsToFirstImage = -module.AlignRibbonsToFirstImage = core.ImageGridFeatures.Feature({ - title: '', - doc: '', - - tag: 'ui-ribbon-align-to-first', - depends: ['ui'], - exclusive: ['ui-ribbon-align'], - - config: { - 'ribbon-focus-mode': 'first', - }, - - handlers: [ - ['focusImage.post', function(){ this.alignByFirst() }], - ], -}) - -// XXX needs more work... -// XXX need to save position in some way, ad on each load the same -// initial state will get loaded... -// ...also would need an initial state... -var ManualAlignRibbons = -module.ManualAlignRibbons = core.ImageGridFeatures.Feature({ - title: '', - doc: '', - - tag: 'ui-ribbon-manual-align', - depends: ['ui'], - exclusive: ['ui-ribbon-align'], - - config: { - 'ribbon-focus-mode': 'visual', - }, - - handlers: [ - ['focusImage.post', function(){ - this - .centerRibbon() - .centerImage() - }], - ], -}) - - - -//--------------------------------------------------------------------- - // Adds user management of different back-ends for low level ribbon // alignment and placement... var RibbonsPlacement =