From 52d9564345ca5c9289182ab6acda302b9bb323bb Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 11 Nov 2014 17:33:07 +0300 Subject: [PATCH] now viewer should not err when empty + cleanup + some refactoring... Signed-off-by: Alex A. Naanou --- ui (gen4)/index.html | 8 ++--- ui (gen4)/ribbons.js | 80 ++++++++++++++++++++++++++++++++++++-------- ui (gen4)/ui.js | 18 ---------- ui (gen4)/viewer.js | 63 ++++++++++++++++++++++++---------- 4 files changed, 115 insertions(+), 54 deletions(-) diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html index b00439d2..b1e1b968 100755 --- a/ui (gen4)/index.html +++ b/ui (gen4)/index.html @@ -156,11 +156,11 @@ require('nw.gui').Window.get().showDevTools()
-
+ -
+ -
+ -
+
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 5e96aea0..f05de727 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -72,8 +72,8 @@ module.RibbonsClassPrototype = { createViewer: function(){ return $('
') .addClass('viewer') - .append($('
') - .addClass('ribbon-set')) + //.append($('
') + // .addClass('ribbon-set')) }, // XXX NOTE: quots removal might render this incompatible with older data formats... createRibbon: function(gids){ @@ -135,6 +135,9 @@ module.RibbonsPrototype = { // XXX need a better way of doing this... preventTransitions: function(target){ target = target || this.viewer + if(target.length == 0){ + return this + } target.addClass('no-transitions') var t = target[0] getComputedStyle(t).webkitTransition @@ -152,6 +155,9 @@ module.RibbonsPrototype = { } else { target = target || this.viewer } + if(target.length == 0){ + return this + } // sync... if(now){ target.removeClass('no-transitions') @@ -237,7 +243,7 @@ module.RibbonsPrototype = { // Get ribbon set scale... // getScale: function(){ - return getElementScale(this.viewer.find('.ribbon-set')) + return getElementScale(this.getRibbonSet()) }, // Set ribbon set scale... @@ -251,7 +257,11 @@ module.RibbonsPrototype = { // // XXX if chrome 38 renders images blurry uncomment the fix... setScale: function(scale, t, l){ - var ribbon_set = this.viewer.find('.ribbon-set') + var ribbon_set = this.getRibbonSet() + + if(ribbon_set.length == 0){ + return this + } if(t != null && l != null){ this.setOrigin(t, l) @@ -280,7 +290,7 @@ module.RibbonsPrototype = { // Get current ribbon-set origin... // getOrigin: function(){ - return getElementOrigin(this.viewer.find('.ribbon-set')) + return getElementOrigin(this.getRibbonSet()) }, // Set ribbon set origin... @@ -301,7 +311,12 @@ module.RibbonsPrototype = { // // XXX DEBUG: remove point updating when not needed... setOrigin: function(a, b){ - var ribbon_set = this.viewer.find('.ribbon-set') + var ribbon_set = this.getRibbonSet() + + if(ribbon_set.length == 0){ + return this + } + var ro = ribbon_set.offset() var s = this.getScale() @@ -378,9 +393,17 @@ module.RibbonsPrototype = { // NOTE: the .shadow element is essentially a ribbon. // // XXX should we also have a ribbon shadow??? + // XXX when this cant find a target it will return an empty function, + // not sure if this is correct... makeShadow: function(target, animate, delay){ delay = delay || 200 var img = this.getImage(target) + + if(img.length == 0){ + // XXX is this correct??? + return function(){} + } + var gid = this.getElemGID(img) var s = this.getScale() var vo = this.viewer.offset() @@ -470,6 +493,26 @@ module.RibbonsPrototype = { // Contextual getters... + // Get ribbon-set... + // + // Get ribbon set if it exists + // .getRibbonSet() + // -> ribbon-set + // + // Get ribbon set if it exists or create it if not + // .getRibbonSet(true) + // -> ribbon-set + // + getRibbonSet: function(create){ + var ribbon_set = this.viewer.find('.ribbon-set') + if(ribbon_set.length == 0 && create){ + ribbon_set = $('
') + .addClass('ribbon-set') + .appendTo(this.viewer) + } + return ribbon_set + }, + // Get image... // // Get current image: @@ -676,6 +719,7 @@ module.RibbonsPrototype = { var ribbon = this.getRibbon(target) var i = this.getRibbonOrder(ribbon) ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon + var ribbon_set = this.getRibbonSet(true) var ribbons = this.viewer.find('.ribbon') @@ -694,7 +738,7 @@ module.RibbonsPrototype = { // place the ribbon... if(ribbons.length == 0 || ribbons.length <= position){ - this.viewer.find('.ribbon-set').append(ribbon) + ribbon_set.append(ribbon) } else if(i == -1 || i > position) { ribbons.eq(position).before(ribbon) @@ -735,6 +779,10 @@ module.RibbonsPrototype = { placeImage: function(target, to, mode){ mode = mode == null ? 'before' : mode + if(this.getRibbonSet().length == 0){ + return + } + target = target == null || target.constructor !== Array ? [target] : target // get or make images... @@ -1193,11 +1241,7 @@ module.RibbonsPrototype = { clear: function(gids){ // clear all... if(gids == null || gids == '*'){ - this.viewer.find('.ribbon').remove() - // reset offsets... - this.viewer.find('.ribbon-set').css({ - top: '', - }) + this.getRibbonSet().remove() // clear one or more gids... } else { @@ -1543,7 +1587,11 @@ module.RibbonsPrototype = { // XXX custom align point woud also be nice... // (top, bottom, center, %, px) centerRibbon: function(target, offset, scale){ - var ribbon_set = this.viewer.find('.ribbon-set') + var ribbon_set = this.getRibbonSet() + + if(ribbon_set.length == 0){ + return this + } //this.setOrigin(target) @@ -1575,9 +1623,13 @@ module.RibbonsPrototype = { scale = scale || this.getScale() var ribbon = this.getRibbon(target) + if(ribbon.length == 0){ + return this + } + var rl = ribbon.offset().left var il = target.offset().left - //var rsl = this.viewer.find('.ribbon-set').offset().left + //var rsl = this.getRibbonSet().offset().left var W = this.viewer.width() * scale var w = target.width() * scale diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index ef832523..552ed79c 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -179,24 +179,6 @@ $(function(){ // XXX window.a = testing.setupActions() - // setup features... - /* - // XXX I do not fully understand it yet, but PartialRibbons must be - // setup BEFORE AlignRibbonsTo*, otherwise the later will break - // on shifting an image to a new ribbon... - // To reproduce: - // - setupe RibbonAlignToFirst first - // - go to top ribbon - // - shift image up - viewer.PartialRibbons.setup(a) - viewer.AlignRibbonsToImageOrder.setup(a) - //viewer.AlignRibbonsToFirstImage.setup(a) - viewer.SingleImageView.setup(a) - viewer.ShiftAnimation.setup(a) - viewer.BoundsIndicators.setup(a) - viewer.CurrentImageIndicator.setup(a) - */ - viewer.Features.setup(a, [ // XXX I do not fully understand it yet, but PartialRibbons must be // setup BEFORE AlignRibbonsTo*, otherwise the later will break diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 0e660ffe..71051ee0 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -36,6 +36,10 @@ function reloadAfter(transitions){ var updateImagePosition = module.updateImagePosition = function updateImagePosition(actions, target){ + if(actions.ribbons.getRibbonSet().length == 0){ + return + } + target = target || actions.current target = target instanceof jQuery ? actions.ribbons.getElemGID(target) @@ -890,9 +894,6 @@ actions.Actions(Client, { /*********************************************************************/ -// XXX do a simple feature framework... -// ...need something like: -// Features(['feature_a', 'feature_b'], action).setup() var FeatureProto = module.FeatureProto = { @@ -1018,9 +1019,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... -var PartialRibbonsActions = -module.PartialRibbonsActions = -actions.Actions({ +var PartialRibbonsActions = actions.Actions({ updateRibbon: ['Update partial ribbon size', function(target, w, size, threshold){ target = target instanceof jQuery @@ -1145,9 +1144,7 @@ module.PartialRibbons = Feature({ //--------------------------------------------------------------------- -var SingleImageActions = -module.SingleImageActions = -actions.Actions({ +var SingleImageActions = actions.Actions({ toggleSingleImage: ['Toggle single image view', // XXX this is wrong!!! CSSClassToggler( @@ -1155,6 +1152,7 @@ actions.Actions({ 'single-image-mode') ], }) +// helper... // XXX should this be an action??? function updateImageProportions(){ // XXX @@ -1228,6 +1226,9 @@ function updateImageProportions(){ // var SingleImageView = module.SingleImageView = Feature({ + title: '', + doc: '', + tag: 'ui-single-image-view', actions: SingleImageActions, @@ -1266,6 +1267,9 @@ module.SingleImageView = Feature({ // as it is now??? var AlignRibbonsToImageOrder = module.AlignRibbonsToImageOrder = Feature({ + title: '', + doc: '', + tag: 'ui-ribbon-align-to-order', handlers: [ @@ -1278,6 +1282,9 @@ module.AlignRibbonsToImageOrder = Feature({ //--------------------------------------------------------------------- var AlignRibbonsToFirstImage = module.AlignRibbonsToFirstImage = Feature({ + title: '', + doc: '', + tag: 'ui-ribbon-align-to-first', handlers: [ @@ -1291,6 +1298,9 @@ module.AlignRibbonsToFirstImage = Feature({ // XXX at this point this does not support target lists... var ShiftAnimation = module.ShiftAnimation = Feature({ + title: '', + doc: '', + tag: 'ui-animation', handlers: [ @@ -1320,11 +1330,12 @@ module.ShiftAnimation = Feature({ //--------------------------------------------------------------------- -var BoundsIndicatorsActions = -module.BoundsIndicatorsActions = -actions.Actions({ +var BoundsIndicatorsActions = actions.Actions({ flashIndicator: ['Flash an indicator', function(direction){ + if(this.ribbons.getRibbonSet().length == 0){ + return + } var cls = { // shift up/down... up: '.up-indicator', @@ -1353,6 +1364,7 @@ actions.Actions({ }], }) +// helper... function didAdvance(indicator){ return function(){ var img = this.data.current @@ -1366,6 +1378,9 @@ function didAdvance(indicator){ var BoundsIndicators = module.BoundsIndicators = Feature({ + title: '', + doc: '', + tag: 'ui-bounds-indicators', actions: BoundsIndicatorsActions, @@ -1436,15 +1451,18 @@ module.BoundsIndicators = Feature({ //--------------------------------------------------------------------- -var CurrentImageIndicatorActions = -module.CurrentImageIndicatorActions = -actions.Actions({ +var CurrentImageIndicatorActions = actions.Actions({ updateCurrentImageIndicator: ['Update current image indicator', function(target, update_border){ + var ribbon_set = this.ribbons.getRibbonSet() + + if(ribbon_set.length == 0){ + return this + } + var scale = this.ribbons.getScale() var cur = this.ribbons.getImage(target) var ribbon = this.ribbons.getRibbon(target) - var ribbon_set = this.ribbons.viewer.find('.ribbon-set') var marker = ribbon.find('.current-marker') @@ -1515,9 +1533,10 @@ actions.Actions({ var CurrentImageIndicator = module.CurrentImageIndicator = Feature({ - tag: 'ui-current-image-indicator', + title: '', + doc: '', - actions: CurrentImageIndicatorActions, + tag: 'ui-current-image-indicator', config: { 'current-image-border': 3, @@ -1529,6 +1548,8 @@ module.CurrentImageIndicator = Feature({ 'current-image-indicator-fadein': 500, }, + actions: CurrentImageIndicatorActions, + handlers: [ // move marker to current image... [ 'focusImage.post', @@ -1589,6 +1610,9 @@ module.CurrentImageIndicator = Feature({ // XXX var ImageStateIndicator = module.ImageStateIndicator = Feature({ + title: '', + doc: '', + tag: 'ui-image-state-indicator', }) @@ -1598,6 +1622,9 @@ module.ImageStateIndicator = Feature({ // XXX var GlobalStateIndicator = module.GlobalStateIndicator = Feature({ + title: '', + doc: '', + tag: 'ui-global-state-indicator', })