From 899e42473e3d6872f378680aea140766556b6a43 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 27 May 2017 06:50:29 +0300 Subject: [PATCH] ... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/meta.js | 5 + ui (gen4)/features/ui-blank-render.js | 31 ++- ui (gen4)/features/ui-ribbons.js | 6 +- ui (gen4)/imagegrid/ribbons.js | 290 +++++++++++++------------- ui (gen4)/ui.js | 2 + 5 files changed, 187 insertions(+), 147 deletions(-) diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js index ec565bf9..6ce972a9 100755 --- a/ui (gen4)/features/meta.js +++ b/ui (gen4)/features/meta.js @@ -71,6 +71,9 @@ core.ImageGridFeatures.Feature('viewer-testing', [ // XXX //'ui-blank-render', + // XXX BUG: features: this pulls in all the suggestions that depend + // regardless of weather they depend on it or not: + // 'ui-partial-ribbons' 'ui-ribbons-render', 'ui-partial-ribbons-render', 'ui-vdom-render', @@ -81,6 +84,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [ 'ui-cursor', 'ui-single-image', + + // XXX remove this... (at this point this is here only to keep load order consistent) 'ui-partial-ribbons', /*/ XXX has bugs -- non-current ribbons are not always aligned... 'ui-partial-ribbons-2', diff --git a/ui (gen4)/features/ui-blank-render.js b/ui (gen4)/features/ui-blank-render.js index 50a57ea1..3a0d36b9 100755 --- a/ui (gen4)/features/ui-blank-render.js +++ b/ui (gen4)/features/ui-blank-render.js @@ -16,14 +16,17 @@ var core = require('features/core') var ribbons = require('imagegrid/ribbons') + /*********************************************************************/ var RibbonsClassPrototype = { + // XXX } RibbonsClassPrototype.__proto__ = ribbons.BaseRibbons.prototype.__proto__ var RibbonsPrototype = { + // XXX } RibbonsPrototype.__proto__ = ribbons.BaseRibbons.prototype @@ -37,11 +40,35 @@ object.makeConstructor('Ribbons', /*********************************************************************/ +// XXX things that do not yet work with this: +// .nextRibbon(..) / .prevRibbon(..) +// var RenderActions = actions.Actions({ + get dom(){ + return this.ribbons ? this.ribbons.viewer : undefined }, + load: [ function(data){ - // XXX setup .ribbons + return function(){ + // XXX setup .ribbons + var viewer = data.viewer + viewer = viewer == null && this.ribbons != null + ? this.dom + : viewer + + if(this.ribbons == null){ + this.ribbons = Ribbons(viewer, this.images) + // XXX is this correct??? + //this.ribbons.__image_updaters = [this.updateImage.bind(this)] + + } else { + //this.ribbons.clear() + this.ribbons.images = this.images + } + + this.reload() + } }], reload: [ function(){ @@ -103,6 +130,8 @@ var RenderActions = actions.Actions({ }, 'screenheight', count, whole) }], + // XXX do we need updateImage here??? + centerImage: ['- Interface/Center an image in ribbon horizontally', function(target, align, offset, scale){ // XXX diff --git a/ui (gen4)/features/ui-ribbons.js b/ui (gen4)/features/ui-ribbons.js index ad7fa461..97e65451 100755 --- a/ui (gen4)/features/ui-ribbons.js +++ b/ui (gen4)/features/ui-ribbons.js @@ -440,11 +440,14 @@ core.ImageGridFeatures.Feature({ tag: 'ui-ribbons-render', exclusive: ['ui-render'], depends: [ + // XXX BUG: for some reason this causes a dependency conflict... + //'ui', 'base', ], suggested: [ 'ui-animation', 'ui-ribbons-edit-render', + 'ui-partial-ribbons', ], actions: RibbonsActions, @@ -697,7 +700,8 @@ core.ImageGridFeatures.Feature({ tag: 'ui-partial-ribbons', exclusive: ['ui-partial-ribbons'], depends: [ - 'ui' + //'ui', + 'ui-ribbons-render', ], suggested: [ 'ui-partial-ribbons-precache', diff --git a/ui (gen4)/imagegrid/ribbons.js b/ui (gen4)/imagegrid/ribbons.js index ad04e394..5960cbad 100755 --- a/ui (gen4)/imagegrid/ribbons.js +++ b/ui (gen4)/imagegrid/ribbons.js @@ -173,6 +173,151 @@ var BaseRibbonsPrototype = { } }, + // Helpers... + + // Prevent CSS transitions... + // + // Prevent transitions globally (.viewer): + // .preventTransitions() + // -> data + // + // Prevent transitions on elem: + // .preventTransitions(elem) + // -> data + // + // + // NOTE: this will set a .no-transitions CSS class and force + // recalculation on the given element + // NOTE: for this to have effect proper CSS configuration is needed. + preventTransitions: function(target){ + target = target || this.viewer + //prevent_nested = prevent_nested || false + if(target.length == 0){ + return this + } + var t = target[0] + + // handle nesting... + var l = t.getAttribute('__prevent_transitions') + if(l != null){ + t.setAttribute('__prevent_transitions', parseInt(l)+1) + return this + } + t.setAttribute('__prevent_transitions', 0) + + target.addClass('no-transitions') + + var s = getComputedStyle(t) + s.webkitTransition + s.mozTransition + s.msTransition + s.oTransition + s.transition + + return this + }, + + // Restore CSS transitions... + // + // This is a companion to .preventTransitions(..) + // + // Restore transitions globally (.viewer): + // .restoreTransitions() + // -> data + // + // Restore transitions on elem: + // .restoreTransitions(elem) + // -> data + // + // Restore transitions on elem (force sync): + // .restoreTransitions(elem, true) + // -> data + // + // Force restore transitions: + // .restoreTransitions(.., .., true) + // -> data + // + // When at least one .preventTransitions(..) is called with + // prevent_nested set to true, this will be a no-op on all nested + // levels. + // This can be overridden via setting the force to true. + // + // NOTE: the implementation of this method might seem ugly, but the + // code is speed-critical, thus we access the DOM directly and + // the two branches are unrolled... + restoreTransitions: function(target, now, force){ + if(target === true || target === false){ + now = target + target = this.viewer + } else { + target = target || this.viewer + } + if(target.length == 0){ + return this + } + var t = target[0] + + // sync... + if(now){ + // handle nesting... + var l = t.getAttribute('__prevent_transitions') + if(l != null && !force && l != '0'){ + t.setAttribute('__prevent_transitions', parseInt(l)-1) + return this + } + t.removeAttribute('__prevent_transitions') + + target.removeClass('no-transitions') + + var s = getComputedStyle(t) + s.webkitTransition + s.mozTransition + s.msTransition + s.oTransition + s.transition + + // on next exec frame... + } else { + var that = this + setTimeout(function(){ + // handle nesting... + var l = t.getAttribute('__prevent_transitions') + if(l != null && !force && l != '0'){ + t.setAttribute('__prevent_transitions', l-1) + return this + } + t.removeAttribute('__prevent_transitions') + + target.removeClass('no-transitions') + + var s = getComputedStyle(t) + s.webkitTransition + s.mozTransition + s.msTransition + s.oTransition + s.transition + }, 0) + } + + return this + }, + + // Shorthand wrappers of the above... + // + // XXX do we need custom target support here??? + noTransitions: function(func){ + this.preventTransitions() + func.apply(this, args2array(arguments).slice(1)) + this.restoreTransitions(true) + return this + }, + noTransitionsDeep: function(func){ + this.preventTransitions(null, true) + func.apply(this, args2array(arguments).slice(1)) + this.restoreTransitions(true) + return this + }, + // Scale... // @@ -863,151 +1008,6 @@ var RibbonsPrototype = { createImage: RibbonsClassPrototype.createImage, createMark: RibbonsClassPrototype.createMark, - // Helpers... - - // Prevent CSS transitions... - // - // Prevent transitions globally (.viewer): - // .preventTransitions() - // -> data - // - // Prevent transitions on elem: - // .preventTransitions(elem) - // -> data - // - // - // NOTE: this will set a .no-transitions CSS class and force - // recalculation on the given element - // NOTE: for this to have effect proper CSS configuration is needed. - preventTransitions: function(target){ - target = target || this.viewer - //prevent_nested = prevent_nested || false - if(target.length == 0){ - return this - } - var t = target[0] - - // handle nesting... - var l = t.getAttribute('__prevent_transitions') - if(l != null){ - t.setAttribute('__prevent_transitions', parseInt(l)+1) - return this - } - t.setAttribute('__prevent_transitions', 0) - - target.addClass('no-transitions') - - var s = getComputedStyle(t) - s.webkitTransition - s.mozTransition - s.msTransition - s.oTransition - s.transition - - return this - }, - - // Restore CSS transitions... - // - // This is a companion to .preventTransitions(..) - // - // Restore transitions globally (.viewer): - // .restoreTransitions() - // -> data - // - // Restore transitions on elem: - // .restoreTransitions(elem) - // -> data - // - // Restore transitions on elem (force sync): - // .restoreTransitions(elem, true) - // -> data - // - // Force restore transitions: - // .restoreTransitions(.., .., true) - // -> data - // - // When at least one .preventTransitions(..) is called with - // prevent_nested set to true, this will be a no-op on all nested - // levels. - // This can be overridden via setting the force to true. - // - // NOTE: the implementation of this method might seem ugly, but the - // code is speed-critical, thus we access the DOM directly and - // the two branches are unrolled... - restoreTransitions: function(target, now, force){ - if(target === true || target === false){ - now = target - target = this.viewer - } else { - target = target || this.viewer - } - if(target.length == 0){ - return this - } - var t = target[0] - - // sync... - if(now){ - // handle nesting... - var l = t.getAttribute('__prevent_transitions') - if(l != null && !force && l != '0'){ - t.setAttribute('__prevent_transitions', parseInt(l)-1) - return this - } - t.removeAttribute('__prevent_transitions') - - target.removeClass('no-transitions') - - var s = getComputedStyle(t) - s.webkitTransition - s.mozTransition - s.msTransition - s.oTransition - s.transition - - // on next exec frame... - } else { - var that = this - setTimeout(function(){ - // handle nesting... - var l = t.getAttribute('__prevent_transitions') - if(l != null && !force && l != '0'){ - t.setAttribute('__prevent_transitions', l-1) - return this - } - t.removeAttribute('__prevent_transitions') - - target.removeClass('no-transitions') - - var s = getComputedStyle(t) - s.webkitTransition - s.mozTransition - s.msTransition - s.oTransition - s.transition - }, 0) - } - - return this - }, - - // Shorthand wrappers of the above... - // - // XXX do we need custom target support here??? - noTransitions: function(func){ - this.preventTransitions() - func.apply(this, args2array(arguments).slice(1)) - this.restoreTransitions(true) - return this - }, - noTransitionsDeep: function(func){ - this.preventTransitions(null, true) - func.apply(this, args2array(arguments).slice(1)) - this.restoreTransitions(true) - return this - }, - // Rotate... // // Get ribbon rotation angle... diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index b4d7d8c9..e368bb0c 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -119,6 +119,8 @@ $(function(){ //'-ui-partial-ribbons', ]) + window.ImageGridFeatures = viewer.ImageGridFeatures + } catch(err){ console.error(err) return