mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
jquery3 migrtion: fixed blurry images + added post resize transition action...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
239ea3d346
commit
bd5fd9f505
@ -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
|
||||
}
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@ -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(){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user