From 6a4ebcb0c8856c6f46c70bcc629f4cf5f9fa2467 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 4 Aug 2012 14:59:54 +0400 Subject: [PATCH] some refactoring... Signed-off-by: Alex A. Naanou --- ui/experiment-ribbon-navigation-n-zoom.html | 4 +-- ui/gallery-prototype.js | 24 +++++++++------ ui/gallery.html | 2 +- ui/ui.js | 33 ++++++++++----------- 4 files changed, 33 insertions(+), 30 deletions(-) diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html index 500d1d8d..c9720fb2 100755 --- a/ui/experiment-ribbon-navigation-n-zoom.html +++ b/ui/experiment-ribbon-navigation-n-zoom.html @@ -153,8 +153,8 @@ Guides:
Zoom: - - + + diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index e22e6dc0..79a53d29 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -42,7 +42,7 @@ function setupControlElements(){ $('.demote').click(shiftImageUp) $('.promote').click(shiftImageDown) $('.toggle-wide').click(toggleWideView) - $('.toggle-single').click(toggleRibbonView) + $('.toggle-single').click(toggleSingleImageMode) } @@ -111,7 +111,7 @@ var ZOOM_FACTOR = 2 // XXX need to make this handle modifiers gracefully... var keys = { toggleHelp: [72], - toggleRibbonView: [70], + toggleSingleImageMode: [70], close: [27, 88, 67], // zooming... @@ -187,10 +187,10 @@ function handleKeys(event){ } }() // zooming... - : (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR) - : (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR) + : (fn(code, keys.zoomIn) >= 0) ? scaleContainerBy(ZOOM_FACTOR) + : (fn(code, keys.zoomOut) >= 0) ? scaleContainerBy(1/ZOOM_FACTOR) // zoom presets... - : (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1) + : (fn(code, keys.zoomOriginal) >= 0) ? setContainerScale(1) : (fn(code, keys.fitOne) >= 0) ? fitImage() : (fn(code, keys.fitThree) >= 0) ? fitThreeImages() @@ -200,7 +200,7 @@ function handleKeys(event){ : (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft() : (fn(code, keys.moveViewRight) >= 0) ? moveViewRight() - : (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView() + : (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode() : (fn(code, keys.ignore) >= 0) ? false // XXX : (keys.helpShowOnUnknownKey) ? function(){alert(code)}() @@ -236,12 +236,18 @@ function setViewerMode(mode){ // ribbon/single view modes... + +var ORIGINAL_FIELD_SCALE = 1 + // XXX CSS broken... -function toggleRibbonView(){ +function toggleSingleImageMode(){ if($('.single-image-mode').length > 0){ unsetViewerMode('single-image-mode') + setContainerScale(ORIGINAL_FIELD_SCALE) } else { setViewerMode('single-image-mode') + ORIGINAL_FIELD_SCALE = getElementScale($('.field')) + fitImage() } } @@ -250,10 +256,10 @@ function toggleRibbonView(){ // wide view mode toggle... function toggleWideView(){ if($('.wide-view-mode').length > 0){ - setContainerZoom(1) + setContainerScale(1) $('.viewer').removeClass('wide-view-mode') } else { - setContainerZoom(0.1) + setContainerScale(0.1) $('.viewer').addClass('wide-view-mode') } } diff --git a/ui/gallery.html b/ui/gallery.html index c211824d..2d6987de 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -124,7 +124,7 @@ $(document).ready(setup); - + diff --git a/ui/ui.js b/ui/ui.js index 3db46236..9982ea37 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -37,8 +37,7 @@ function getCurrentVerticalOffset(image){ image = $('.image.current') } - //var zoom = $('.field').css('zoom') - var zoom = getElementScale($('.field')) + var scale = getElementScale($('.field')) var ribbons = $('.ribbon') var ribbon = image.parents('.ribbon') @@ -68,8 +67,7 @@ function getCurrentHorizontalOffset(image){ image = $('.image.current') } - //var zoom = $('.field').css('zoom') - var zoom = getElementScale($('.field')) + var scale = getElementScale($('.field')) var ribbon = image.parents('.ribbon') var images = ribbon.children('.image') @@ -175,13 +173,12 @@ function centerOrigin(){ // XXX need to make this work for % values... // XXX make this usable as an event handler for .resize(...) event... -// XXX this does not account for zoom correctly... +// XXX this does not account for scale correctly... function fieldSize(W, H){ var oW = $('.container').width() var oH = $('.container').height() - //var zoom = $('.field').css('zoom') - var zoom = getElementScale($('.field')) + var scale = getElementScale($('.field')) $('.container').css({ 'width': W, @@ -240,22 +237,22 @@ function setElementScale(elem, scale){ } // XXX this appears to be broken -- for some reason the current scale does not change... -function zoomContainerBy(factor){ - var zoom = getElementScale($('.field'))*factor +function scaleContainerBy(factor){ + var scale = getElementScale($('.field'))*factor - setContainerZoom(zoom) + setContainerScale(scale) } -function setContainerZoom(zoom){ +function setContainerScale(scale){ var H = $('.container').height() var W = $('.container').width() $('.field').css({ - 'transform': 'scale('+zoom+', '+zoom+')', - '-moz-transform': 'scale('+zoom+', '+zoom+')', - '-o-transform': 'scale('+zoom+', '+zoom+')', - '-ms-transform': 'scale('+zoom+', '+zoom+')', - '-webkit-transform': 'scale('+zoom+', '+zoom+')', + 'transform': 'scale('+scale+', '+scale+')', + '-moz-transform': 'scale('+scale+', '+scale+')', + '-o-transform': 'scale('+scale+', '+scale+')', + '-ms-transform': 'scale('+scale+', '+scale+')', + '-webkit-transform': 'scale('+scale+', '+scale+')', }) } @@ -268,7 +265,7 @@ function fitImage(){ var f = Math.min(H/h, W/w) - setContainerZoom(f) + setContainerScale(f) } function fitThreeImages(){ @@ -281,6 +278,6 @@ function fitThreeImages(){ var f = Math.min(H/h, W/w) - setContainerZoom(f) + setContainerScale(f) }