From bd5fd9f505835baf687608b3bdb0367f201660c3 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 18 Jun 2016 20:07:19 +0300 Subject: [PATCH] jquery3 migrtion: fixed blurry images + added post resize transition action... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/ui-single-image.js | 71 ++++++++------------------- ui (gen4)/features/ui.js | 61 +++++++++++++++++++++-- 2 files changed, 79 insertions(+), 53 deletions(-) diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js index 3eb18ea4..5da13a2d 100755 --- a/ui (gen4)/features/ui-single-image.js +++ b/ui (gen4)/features/ui-single-image.js @@ -264,7 +264,9 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ actions: SingleImageActions, handlers:[ - ['resizing.post', + // update config... + //['resizing.post', + ['resizingDone', function(){ // prevent this from doing anything while no viewer... if(!this.ribbons @@ -277,12 +279,12 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ if(this.toggleSingleImage('?') == 'on'){ this.updateImageProportions() - this.config['single-image-scale'] = - this[this.config['single-image-scale-unit']] + this.config['single-image-scale'] + = this[this.config['single-image-scale-unit']] } else { - this.config['ribbon-scale'] = - this[this.config['ribbon-scale-unit']] + this.config['ribbon-scale'] + = this[this.config['ribbon-scale-unit']] } }], // update new images... @@ -308,11 +310,14 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ if(state == 'on'){ // update scale... if(state != pre_state){ - this.config['ribbon-scale'] = - this[this.config['ribbon-scale-unit']] + // save ribbon state... + this.config['ribbon-scale'] + = this[this.config['ribbon-scale-unit']] - this[this.config['single-image-scale-unit']] = - this.config['single-image-scale'] + // change state... + this[this.config['single-image-scale-unit']] + = this.config['single-image-scale'] + = this.config['single-image-scale'] || this[this.config['single-image-scale-unit']] } @@ -334,53 +339,19 @@ module.SingleImageView = core.ImageGridFeatures.Feature({ // update scale... if(state != pre_state){ - this.config['single-image-scale'] = - this[this.config['single-image-scale-unit']] + // save single image view state... + this.config['single-image-scale'] + = this[this.config['single-image-scale-unit']] - this[this.config['ribbon-scale-unit']] = - this.config['ribbon-scale'] + // change state... + this[this.config['ribbon-scale-unit']] + = this.config['ribbon-scale'] + = this.config['ribbon-scale'] || this[this.config['ribbon-scale-unit']] } } } }], - - // Force browser to redraw off-screen images... - // - // This appears that chrome cheats by not resizing off-screen - // images properly after changing scale... - // - // XXX this is still not perfect... - // ...if needed do a .reload() / ctrl-r - [[ - 'resizing.post', - 'toggleSingleImage.pre', - ], - function(){ - this.__did_resize = true - }], - [[ - 'focusImage', - 'toggleSingleImage', - ], - function(){ - var img = this.ribbons.getImage() - var d = Math.max(img.attr('preview-width')*1, img.attr('preview-width')*1) - var D = this.ribbons.getVisibleImageSize('max') - - if(this.config['-single-image-redraw-on-focus'] - && this.toggleSingleImage('?') == 'on' - && this.__did_resize - // only when close to original preview size - && Math.abs(D-d)/D < 0.30){ - - // this forces chrome to redraw off-screen images... - this.scale = this.scale - - // reset the resize flag... - delete this.__did_resize - } - }], ], }) diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index 222494c3..362793ad 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -140,11 +140,18 @@ module.ViewerActions = actions.Actions({ // and current fit-overflow added. 'zoom-step': 1.2, - // added to odd number of images to fit to indicate scroll ability... + // Added to odd number of images to fit to indicate scroll ability... // ...this effectively sets the closest distance an image can be from // the viewer edge... 'fit-overflow': 0.2, + // Time to wait after resize is done for transitionend event to call + // .resizingDone(..) action. + // + // NOTE: this should be as short as possible but longer than the + // transition. + 'resize-done-timeout': 300, + // Theme to set on startup... 'theme': null, @@ -628,9 +635,11 @@ module.ViewerActions = actions.Actions({ // // This will enable clients to attach to a single in/out point. // + // NOTE: to account for CSS transitions use .resizingDone() // NOTE: not intended for direct use... // // XXX hide from user action list... (???) + // XXX need to check if a transition is running and delay timeout... resizing: ['- Zoom/Zoom/scale root protocol action (not for direct use)', 'This is called by zoom/scale protocol compliant actions and ' +'intended for use as an trigger for handlers, and not as ' @@ -642,11 +651,54 @@ module.ViewerActions = actions.Actions({ // functions. // // As an example see: .setScale(..) + + var that = this + // stop currently running transition... + this.ribbons.scale(this.ribbons.scale()) + + // transitionend handler... + if(!this.__resize_handler){ + this.__resize_handler = function(){ + that.__post_resize + && that.resizingDone() + delete that.__post_resize + } + } + this.ribbons.getRibbonSet() + .off('transitionend', this.__resize_handler) + .on('transitionend', this.__resize_handler) + + // timeout handler... + this.__post_resize && clearTimeout(this.__post_resize) + return function(){ + this.__post_resize = setTimeout( + this.__resize_handler, + this.config['resize-done-timeout'] || 300) + } + })], + + // Zooming/scaling post-transition action... + // + // NOTE: this will be called at least timeout after last resize action... + // NOTE: if several resize actions are called less than timeout apart + // this will be called only once, after the last action. + // NOTE: not intended for direct use... + resizingDone: ['- Zoom/scale post-transition protocol action ' + +'(not for direct use)', + 'This is called after zoom/scale protocol compliant actions are ' + +'done and intended for use as an trigger for handlers, and ' + +'not as a user-callable acation.', + core.notUserCallable(function(){ + // This is resizing protocol post resize action. + // + // This will be called either when a resize CSS transition + // is done or after a timeout, which ever happens first. + // + // NOTE: if a transition is longer than the timeout this will + // be called before the transition is done. })], // Zoom/scale protocol actions... - // - // XXX need to account for animations... setScale: ['- Zoom/', function(scale){ this.resizing.chainCall(this, function(){ @@ -914,6 +966,9 @@ module.Viewer = core.ImageGridFeatures.Feature({ delete this.__viewer_resize } }], + // force browser to redraw images after resize... + ['resizingDone', + function(){ this.scale = this.scale }], // manage the .crop-mode css class... ['crop uncrop', function(){