From 7a7641c2fc5e36bb823abc91de6aea74e7bdf20d Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 29 Apr 2016 03:49:18 +0300 Subject: [PATCH] fixed an align bug... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/ui-single-image.js | 15 +++---- ui (gen4)/features/ui.js | 56 ++++++++++++++++++--------- 2 files changed, 45 insertions(+), 26 deletions(-) diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js index d65d76fb..4f680999 100755 --- a/ui (gen4)/features/ui-single-image.js +++ b/ui (gen4)/features/ui-single-image.js @@ -101,6 +101,7 @@ function updateImageProportions(){ // change proportions... if(c < threshold){ var images = viewer.find('.ribbon .image') + var W = viewer.width() var H = viewer.height() @@ -121,6 +122,9 @@ function updateImageProportions(){ // new size... var n = di + d + // the amount to compensate ribbon offset for per image... + var x = n - dm + if(n == dm){ return @@ -160,10 +164,6 @@ function updateImageProportions(){ } }) - // XXX for some reason this is not working correctly... - //that.alignRibbons() - //that.ribbons.restoreTransitions(true) - that.ribbons .centerImage() .restoreTransitions(true) @@ -275,6 +275,7 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ var pre_state = this.toggleSingleImage('?') return function(){ + var that = this var state = this.toggleSingleImage('?') // singe image mode -- set image proportions... @@ -290,6 +291,7 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ // ribbon mode -- restore original image size... } else { + // reset image container size... this.ribbons.viewer.find('.image:not(.clone)') .each(function(_, img){ img.style.width = '' @@ -298,9 +300,8 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ img.style.margin = '' }) - this.ribbons.centerImage() - - // XXX need to correctly align other ribbons... + // align ribbons... + this.alignRibbons('now') // update scale... if(state != pre_state){ diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 93752036..5f65cd4e 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -337,7 +337,12 @@ module.ViewerActions = actions.Actions({ // order... // XXX skip off-screen ribbons (???) alignByOrder: ['Interface/Align ribbons by image order', - function(target){ + function(target, scale, now){ + if(target == 'now'){ + now = true + target = null + } + var ribbons = this.ribbons var data = this.data @@ -351,16 +356,11 @@ module.ViewerActions = actions.Actions({ // data into ribbons based on target gid... i.e. first // we know the section we need then align it vertically... this - .centerImage(gid) - .centerRibbon(gid) + .centerImage(gid, null, null, scale) + .centerRibbon(gid, null, null, scale) - // if we are going fast we might skip an update... - if(this._align_timeout != null){ - clearTimeout(this._align_timeout) - this._align_timeout = null - } var that = this - this._align_timeout = setTimeout(function(){ + var _align = function(){ this._align_timeout = null // align other ribbons... var ribbon = data.getRibbon(gid) @@ -381,15 +381,29 @@ module.ViewerActions = actions.Actions({ if(f == null){ continue } - that.centerImage(f, 'before') + that.centerImage(f, 'before', null, scale) } else { - that.centerImage(t, 'after') + that.centerImage(t, 'after', null, scale) } } - }, 50) + } + + if(now){ + _align() + + } else { + // if we are going fast we might skip an update... + if(this._align_timeout != null){ + clearTimeout(this._align_timeout) + this._align_timeout = null + } + this._align_timeout = setTimeout(_align, 50) + } }], alignByFirst: ['Interface/Align ribbons except current to first image', function(target){ + target = target == 'now' ? null : target + var ribbons = this.ribbons var data = this.data @@ -431,13 +445,13 @@ module.ViewerActions = actions.Actions({ // NOTE: this will align only a single image... // XXX do we need these low level primitives here??? centerImage: ['- Interface/Center an image in ribbon horizontally', - function(target, align){ + function(target, align, offset, scale){ target = target instanceof jQuery ? this.ribbons.getElemGID(target) : target // align current ribbon... - this.ribbons.centerImage(target, align) + this.ribbons.centerImage(target, align, offset, scale) }], centerRibbon: ['- Interface/Center a ribbon vertically', function(target){ @@ -1565,22 +1579,26 @@ module.AutoAlignRibbons = core.ImageGridFeatures.Feature({ actions: actions.Actions({ alignRibbons: ['Interface/Align ribbons', - function(){ + 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() + this.alignByOrder(target, scale, now) } else if(mode == 'first'){ - this.alignByFirst() + this.alignByFirst(target, scale, now) // manual... // XXX is this correct??? } else { this - .centerRibbon() - .centerImage() + .centerRibbon(target, null, null, scale) + .centerImage(target, null, null, scale) } }], toggleRibbonAlignMode : ['Interface/Toggle ribbon align mode',