From 7fc490e32a7eb4cdf59345c57f23244969a0665b Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 3 Jun 2013 22:45:01 +0400 Subject: [PATCH] fixed a biggish align bug... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 7 ++++--- ui/base.js | 34 +++++++++++++++------------------- ui/index.html | 3 ++- ui/lib/jli.js | 12 ++++++++++-- ui/modes.js | 4 ++-- 5 files changed, 33 insertions(+), 27 deletions(-) diff --git a/ui/TODO.otl b/ui/TODO.otl index 1e437ba7..aa1a20b4 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -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... diff --git a/ui/base.js b/ui/base.js index 9ba9cb06..26cf2c66 100755 --- a/ui/base.js +++ b/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 } diff --git a/ui/index.html b/ui/index.html index 189348cb..9593f9df 100755 --- a/ui/index.html +++ b/ui/index.html @@ -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() }) diff --git a/ui/lib/jli.js b/ui/lib/jli.js index 15f8eb89..1d9956b9 100755 --- a/ui/lib/jli.js +++ b/ui/lib/jli.js @@ -33,11 +33,13 @@ // - : 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 can be: // - : explicitly set the state to index in class_list // - : explicitly set a class from the list +// - '!' : reload current state, same as toggler(toggler('?')) // - '?' : return current state ('on'|'off') // // In the third form the 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... diff --git a/ui/modes.js b/ui/modes.js index cbdce918..f36a317b 100755 --- a/ui/modes.js +++ b/ui/modes.js @@ -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){