jquery3 migrtion: fixed blurry images + added post resize transition action...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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.config['single-image-scale'] 
-						this[this.config['single-image-scale-unit']]
+						= this[this.config['single-image-scale-unit']]
 
 				} else {
-					this.config['ribbon-scale'] = 
+					this.config['ribbon-scale'] 
-						this[this.config['ribbon-scale-unit']] 
+						= 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'] = 
+							// save ribbon state...
-								this[this.config['ribbon-scale-unit']] 
+							this.config['ribbon-scale']
+								= this[this.config['ribbon-scale-unit']] 
 
-							this[this.config['single-image-scale-unit']] =
+							// change state...
-								this.config['single-image-scale']
+							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'] = 
+							// save single image view state...
-								this[this.config['single-image-scale-unit']]
+							this.config['single-image-scale']
+								= this[this.config['single-image-scale-unit']]
 
-							this[this.config['ribbon-scale-unit']] =
+							// change state...
-								this.config['ribbon-scale']
+							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
-				}
-			}],
 	],
 })
 

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(){