mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
fixed a biggish align bug...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
9e9198fb72
commit
7fc490e32a
@ -89,8 +89,8 @@ Roadmap
|
||||
|
||||
|
||||
|
||||
[_] 24% Gen 3 current todo
|
||||
[_] 49% High priority
|
||||
[_] 25% Gen 3 current todo
|
||||
[_] 51% High priority
|
||||
[_] BUG: sometimes duplicate images get loaded...
|
||||
| this happens when jumping back and forth on the mid ribbon until
|
||||
| the last element shows up and then moving left until the frame
|
||||
@ -121,7 +121,7 @@ Roadmap
|
||||
| prior sizing after recycling...
|
||||
| ...check if centerRibbon(...) and correctImageProportionsForRotation(...)
|
||||
| are called in right sequence...
|
||||
[_] BUG: changing window size (F11) in single image modes messes things up...
|
||||
[X] BUG: changing window size (F11) in single image modes messes things up...
|
||||
| some images are of different sizes (newly loaded) and aligned in a wrong way...
|
||||
|
|
||||
| appears not to affect square-fit view...
|
||||
@ -136,6 +136,7 @@ Roadmap
|
||||
| appears to be a state leak, this affects:
|
||||
| - correctImageProportionsForRotation(image) -- mis-alignes images
|
||||
| while after cycling single image mode, behaves correctly...
|
||||
| - affects finNImages(...) -- uses old size of viewer...
|
||||
[_] BUG: jumping screen images does not load the adjacent ribbons...
|
||||
| positioning is OK but ribbons are not fully visible...
|
||||
[_] ASAP: test on Android...
|
||||
|
||||
34
ui/base.js
34
ui/base.js
@ -924,26 +924,17 @@ function nextRibbon(mode){
|
||||
|
||||
/******************************************************** Rotating ***/
|
||||
|
||||
// Compensate for viewer proportioned and rotated images.
|
||||
//
|
||||
// NOTE: this is not neede for square image blocks.
|
||||
function correctImageProportionsForRotation(images){
|
||||
var viewer = $('.viewer')
|
||||
var W = viewer.innerWidth()
|
||||
var H = viewer.innerHeight()
|
||||
// NOTE: this is here because we are comparing proportions of two
|
||||
// very differently sized elements, and though the proportions
|
||||
// may be the same, the actual result may be vastly different
|
||||
// due of pixel rounding...
|
||||
// Real example:
|
||||
// Viewer: 826x601
|
||||
// Image: 413x300
|
||||
// ratio 1: W/H - w/h = -0.002290626733222556
|
||||
// ratio 2: W/w - H/h = -0.0033333333333334103
|
||||
// NOTE: this might get out of hand for close to square viewer...
|
||||
// ...one way to cheat out of this is to round any ratio
|
||||
// close to 1 to 1.
|
||||
// XXX find a better way out of this, avoiding floats...
|
||||
var rounding_error = 0.007
|
||||
|
||||
$(images).each(function(i, e){
|
||||
var viewer_p = W > H ? 'landscape' : 'portrait'
|
||||
|
||||
return $(images).each(function(i, e){
|
||||
var image = $(this)
|
||||
// orientation...
|
||||
var o = image.attr('orientation')
|
||||
@ -953,11 +944,12 @@ function correctImageProportionsForRotation(images){
|
||||
|
||||
// non-square image...
|
||||
if(w != h){
|
||||
var proportions = W/H - w/h
|
||||
|
||||
var image_p = w > h ? 'landscape' : 'portrait'
|
||||
|
||||
// when the image is turned 90deg/270deg and its
|
||||
// proportions are the same as the screen...
|
||||
if((o == 90 || o == 270) && Math.abs(proportions) < rounding_error ){
|
||||
if((o == 90 || o == 270) && image_p == viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
@ -968,7 +960,8 @@ function correctImageProportionsForRotation(images){
|
||||
'margin-left': (w - h)/2,
|
||||
'margin-right': (w - h)/2,
|
||||
})
|
||||
} else if((o == 0 || o == 180) && Math.abs(proportions) > rounding_error ){
|
||||
|
||||
} else if((o == 0 || o == 180) && image_p != viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
@ -1053,13 +1046,16 @@ function fitNImages(n){
|
||||
var W = viewer.innerWidth()
|
||||
var H = viewer.innerHeight()
|
||||
|
||||
// XXX this may not work correctly for portrait proportioned viewers...
|
||||
var scale = Math.min(W / (w * n), H / h)
|
||||
|
||||
// NOTE: if animating, the next two likes must be animated together...
|
||||
setElementScale($('.ribbon-set'), scale)
|
||||
centerView(image, 'css')
|
||||
|
||||
$('.viewer').trigger('fittingImages', [n])
|
||||
viewer.trigger('fittingImages', [n])
|
||||
|
||||
return scale
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -54,7 +54,8 @@ $(function(){
|
||||
// XXX in single image mode this still causes problems...
|
||||
// this can be resolved by cycling to ribbon mode and back...
|
||||
.resize(function() {
|
||||
correctImageProportionsForRotation('.images')
|
||||
|
||||
toggleImageProportions('!')
|
||||
centerView()
|
||||
})
|
||||
|
||||
|
||||
@ -33,11 +33,13 @@
|
||||
// - <index> : 0 for 'off' and 1 for 'on' (see below)
|
||||
// - 'on' : switch mode on -- add class
|
||||
// - 'off' : switch mode off -- remove class
|
||||
// - '!' : reload current state, same as toggler(toggler('?'))
|
||||
// - '?' : return current state ('on'|'off')
|
||||
//
|
||||
// In forms 2 and 3, if class_list is a list of strings, the <action> can be:
|
||||
// - <index> : explicitly set the state to index in class_list
|
||||
// - <class-name> : explicitly set a class from the list
|
||||
// - '!' : reload current state, same as toggler(toggler('?'))
|
||||
// - '?' : return current state ('on'|'off')
|
||||
//
|
||||
// In the third form the <target> is a jquery-compatible object.
|
||||
@ -122,7 +124,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
|
||||
}
|
||||
}
|
||||
// we need to get the current state...
|
||||
if(action == null || action == '?'){
|
||||
if(action == null || action == '?' || action == '!'){
|
||||
// get current state...
|
||||
var cur = 'none'
|
||||
for(var i=0; i < class_list.length; i++){
|
||||
@ -136,6 +138,11 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
|
||||
return bool_action ? (cur == 'none' ? 'off' : 'on') : cur
|
||||
}
|
||||
|
||||
// force reload of current state...
|
||||
if(action == '!'){
|
||||
action = bool_action ? (cur == 'none' ? 'off' : 'on') : cur
|
||||
}
|
||||
|
||||
// invalid action...
|
||||
} else if((bool_action && ['on', 'off'].indexOf(action) == -1)
|
||||
|| (!bool_action && class_list.indexOf(action) == -1)){
|
||||
@ -163,7 +170,8 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
|
||||
if(callback_pre != null){
|
||||
if(callback_pre.call(this, action) === false){
|
||||
// XXX should we return action here???
|
||||
return
|
||||
//return
|
||||
return action
|
||||
}
|
||||
}
|
||||
// update the element...
|
||||
|
||||
@ -159,7 +159,7 @@ var toggleSingleImageMode = createCSSClassToggler(
|
||||
w = SETTINGS['screen-images-ribbon-mode']
|
||||
w = w == null ? DEFAULT_SCREEN_IMAGES : w
|
||||
|
||||
toggleImageProportions('fit-square')
|
||||
toggleImageProportions('none')
|
||||
fitNImages(w)
|
||||
var i = SETTINGS['image-info-ribbon-mode'] == 'on' ? 'on' : 'off'
|
||||
toggleImageInfo(i)
|
||||
@ -260,7 +260,7 @@ var toggleInlineImageInfo = createCSSClassToggler(
|
||||
var toggleImageProportions = createCSSClassToggler(
|
||||
'.viewer',
|
||||
[
|
||||
'fit-square',
|
||||
'none',
|
||||
'fit-viewer'
|
||||
],
|
||||
function(action){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user