flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

some minor fixes and cleanup...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-04-25 04:40:10 +03:00
parent 4e68345ffe
commit 5461a266ab
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui (gen4)/features/ui-single-image.js
View File

@ -19,9 +19,10 @@ var core = require('features/core')
/*********************************************************************/ /*********************************************************************/
// helper... // helper...
// XXX an ideal case would be: // Change image proportions depending on scale...
//
// A) Small image -- min(screenwidth, screenheight) > threshold
// //
// A)
// viewer // viewer
// +---------------+ // +---------------+
// | image | - small image // | image | - small image
@ -32,7 +33,8 @@ var core = require('features/core')
// +---------------+ // +---------------+
// //
// //
// B) // B) min(screenwidth, screenheight) <= threshold
//
// viewer // viewer
// +---------------+ // +---------------+
// | +-----------+ | - bigger image // | +-----------+ | - bigger image
@ -43,7 +45,8 @@ var core = require('features/core')
// +---------------+ proportions and can be done in bulk // +---------------+ proportions and can be done in bulk
// //
// //
// C) // C) fullscreen -- min(screenwidth, screenheight) == 1
//
// viewer // viewer
// +---------------+ // +---------------+
// | image | - image block same size as viewer // | image | - image block same size as viewer
@ -54,7 +57,8 @@ var core = require('features/core')
// +---------------+ // +---------------+
// //
// //
// D) // D) zoomed in -- min(screenwidth, screenheight) < 1 (blocked, no drag)
//
// image // image
// + - - - - - - - - - + // + - - - - - - - - - +
// . . // . .
@ -62,12 +66,13 @@ var core = require('features/core')
// . | viewer | . - image bigger than viewer // . | viewer | . - image bigger than viewer
// . | | . - image block same proportion as image // . | | . - image block same proportion as image
// . | | . - we just change scale // . | | . - we just change scale
// . | | . - drag enabled // . | | . - drag enabled (XXX not implemented)
// . | | . XXX not done... // . | | . - next/prev image keeps drag position
// . +---------------+ . // . +---------------+ .
// . . // . .
// + - - - - - - - - - + // + - - - - - - - - - +
// //
// XXX might be a good idea to use tiles for zoomed in images...
// //
// XXX should this be an action??? // XXX should this be an action???
// XXX alignment issues in rotated images... // XXX alignment issues in rotated images...
@ -75,6 +80,7 @@ var core = require('features/core')
// do things incorreclty in single image mode... // do things incorreclty in single image mode...
// NOTE: they do their job correctly on rectangular images in // NOTE: they do their job correctly on rectangular images in
// ribbon view! // ribbon view!
// XXX this makes exiting single image mode align image incorrectly...
function updateImageProportions(){ function updateImageProportions(){
var that = this var that = this
var threshold = this.config['single-image-proportions-threshold'] var threshold = this.config['single-image-proportions-threshold']
@ -144,9 +150,9 @@ function updateImageProportions(){
}) })
} }
that.ribbons.centerImage() that.ribbons
.centerImage()
that.ribbons.restoreTransitions(true) .restoreTransitions(true)
}) })
// reset proportions to square... // reset proportions to square...
@ -162,9 +168,9 @@ function updateImageProportions(){
img.style.height = '' img.style.height = ''
}) })
that.ribbons.centerImage() that.ribbons
.centerImage()
that.ribbons.restoreTransitions(true) .restoreTransitions(true)
}) })
} }
} }
@ -247,11 +253,16 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
// ribbon mode -- restore original image size... // ribbon mode -- restore original image size...
} else { } else {
this.ribbons.viewer.find('.image:not(.clone)').css({ this.ribbons.viewer.find('.image:not(.clone)')
width: '', .each(function(_, img){
height: '' img.style.width = ''
img.style.height = ''
}) })
// XXX this still does not align correctly with
// rotated current image...
this.ribbons.centerImage()
// update scale... // update scale...
if(state != pre_state){ if(state != pre_state){
var w = this.screenwidth var w = this.screenwidth