From 3e7711e829ea0b4009a60528ac8568d8c14fa0c1 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 10 Aug 2012 18:31:32 +0400 Subject: [PATCH] some refactoring... Signed-off-by: Alex A. Naanou --- ui/gallery-prototype.js | 292 ++++++++++++++++++++++++++++++++++++++-- ui/keybindings.js | 3 + ui/ui.js | 254 +--------------------------------- 3 files changed, 285 insertions(+), 264 deletions(-) diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index d83575ea..d0cd6455 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -332,6 +332,138 @@ function loadJSON(data){ } +/* + * The folowing two functions will get the vertical and horizontal + * distance components between the pints a and A, centers of the small + * and large squares respectively. + * One of the squares is .field and the other is .container, + * which is small or big is not important. + * + * +---------------+-------+ + * | | | + * | | | + * | + a . . | . . . | . + + * | . | | +- getCurrentVerticalOffset(...) + * | . + A | . . . | . + + * +---------------+ | + * | . . | + * | . . | + * | . . | + * +-----------------------+ + * . . + * +-+-+ + * +------------------- getCurrentHorizontalOffset(...) + * + * + * Adding this distance to margins of one of the sqares will effectively + * allign the two points. + * + * NOTE: neither function accunts for field margins. + * + */ + +// get the vertical offset of the center of square from center of container +// NOTE: this does not account for field margins +function getCurrentVerticalOffset(image){ + if(image == null){ + image = $('.image.current') + } + + var scale = getElementScale($('.field')) + + var ribbons = $('.ribbon') + var ribbon = image.parents('.ribbon') + var images = ribbon.children('.image') + + // vertical... + var H = $('.container').height() + var h = ribbons.outerHeight(true) + // margin... + var mh = h - ribbons.outerHeight() + // current ribbon position (1-based) + var rn = ribbons.index(ribbon) + 1 + // XXX compensating for margin error buildup... really odd! + // ...why is this still different for the first three ribbons?! + // ....sub-pixel error? + // relative position to field... + // XXX is there a better way to get this? + var t = rn * (h - mh/2) + + return -t + H/2 + h/2 +} + +// get the horizontal offset of the center of square from center of container +// NOTE: this does not account for field margins +function getCurrentHorizontalOffset(image){ + if(image == null){ + image = $('.image.current') + } + + var ribbon = image.parents('.ribbon') + var images = ribbon.children('.image') + + var W = $('.container').width() + var w = images.outerWidth(true) + // margin... + // XXX do we need this? + var mw = w - images.outerWidth() + // current square position (1-based) + var sn = images.index(image) + 1 + var l = sn * (w - mw/2) + + return -l + W/2 + w/2 +} + + + +function centerSquare(){ + + $('.field').css({ + 'margin-top': getCurrentVerticalOffset() + }) + + // horizontal... + alignRibbon() + + centerCurrentImage() +} + + + +function alignRibbon(image, position){ + // default values... + if(image == null){ + image = $('.image.current') + } + if(position == null){ + position = 'center' + } + + var ribbon = image.parents('.ribbon') + + // account for margined field... + // NOTE: this enables us to cheat and shift all the ribbons just + // by changing field margin-left... + var cml = parseFloat($('.field').css('margin-left')) + if(!cml){ + cml = 0 + } + var h_offset = getCurrentHorizontalOffset(image) - cml + var w = $('.image').outerWidth(true) + + switch(position){ + case 'before': + ribbon.css({'margin-left': h_offset - w/2}) + return true + case 'center': + ribbon.css({'margin-left': h_offset}) + return true + case 'after': + ribbon.css({'margin-left': h_offset + w/2}) + return true + } + return false +} /*************************************************** Event Handlers **/ @@ -454,35 +586,35 @@ function makeKeyboardHandler(keybindings, unhandled){ // ribbon/single view modes... // global: stores the scale before we went into single image mode... // XXX HACK -var ORIGINAL_FIELD_SCALE = 1 +var _ORIGINAL_FIELD_SCALE = 1 // remember the default backgrounds for modes... // ...this effectively makes the modes independant... // NOTE: null represent the default value... // XXX HACK -var NORMAL_MODE_BG = null -var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1] +var _NORMAL_MODE_BG = null +var _SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1] var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode', // pre... function(action){ if(action == 'on'){ - NORMAL_MODE_BG = getBackgroundMode() - ORIGINAL_FIELD_SCALE = getElementScale($('.field')) + _NORMAL_MODE_BG = getBackgroundMode() + _ORIGINAL_FIELD_SCALE = getElementScale($('.field')) } else { - SINGLE_IMAGE_MODE_BG = getBackgroundMode() + _SINGLE_IMAGE_MODE_BG = getBackgroundMode() } }, // post... function(action){ if(action == 'on'){ fitImage() - setBackgroundMode(SINGLE_IMAGE_MODE_BG) + setBackgroundMode(_SINGLE_IMAGE_MODE_BG) } else { - setContainerScale(ORIGINAL_FIELD_SCALE) - setBackgroundMode(NORMAL_MODE_BG) + setContainerScale(_ORIGINAL_FIELD_SCALE) + setBackgroundMode(_NORMAL_MODE_BG) } clickAfterTransitionsDone() }) @@ -491,10 +623,10 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode' // wide view mode toggle... var toggleWideView = createCSSClassToggler('.viewer', 'wide-view-mode', function(action){ if(action == 'on'){ - ORIGINAL_FIELD_SCALE = getElementScale($('.field')) + _ORIGINAL_FIELD_SCALE = getElementScale($('.field')) setContainerScale(0.1) } else { - setContainerScale(ORIGINAL_FIELD_SCALE) + setContainerScale(_ORIGINAL_FIELD_SCALE) } }, function(){}) @@ -572,6 +704,43 @@ var disableTransitions = function(){toggleTransitions('off')} /********************************************************* Movement **/ +/* Set the transform-origin to the center of the current view... + */ +function centerOrigin(){ + var mt = parseFloat($('.field').css('margin-top')) + var ml = parseFloat($('.field').css('margin-left')) + var cml = parseFloat($('.current.ribbon').css('margin-left')) + + var t = parseFloat($('.field').css('top')) + var l = parseFloat($('.field').css('left')) + var w = $('.field').width() + var h = $('.field').height() + var W = $('.container').width() + var H = $('.container').height() + + //var ot = mt + H/2 + t + //var ol = ml + W/2 + l + + var ot = -getCurrentVerticalOffset() + H/2 - t + var ol = -ml + W/2 - l + + $('.field').css({ + 'transform-origin': ol + 'px ' + ot + 'px', + '-o-transform-origin': ol + 'px ' + ot + 'px', + '-moz-transform-origin': ol + 'px ' + ot + 'px', + '-webkit-transform-origin': ol + 'px ' + ot + 'px', + '-ms-transform-origin': ol + 'px ' + ot + 'px' + }) + + // XXX for debugging... + $('.origin-marker').css({ + 'top': ot, + 'left': ol + }) +} + + + // XXX for some odd reason these are not liner... something to do with origin? // XXX virtually identical, see of can be merged... function moveViewUp(){ @@ -593,6 +762,23 @@ function moveViewRight(){ +function centerCurrentImage(){ + $('.field') + .css({ + 'top': 0, + 'left': 0 + }) + // do this after animations are done... + .one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", centerOrigin) + // this is repeated intentionally... + // ...needed for small shifts, while the after-animation event + // is for large moves. + centerOrigin() +} + + + + /******************************************************* Navigation **/ @@ -640,6 +826,90 @@ function focusBelowRibbon(){ +/********************************************************** Zooming **/ + +// NOTE: this will only return a single scale value... +function getElementScale(elem){ + //var transform = elem.css('transform') + var vendors = ['o', 'moz', 'ms', 'webkit'] + var transform = elem.css('transform') + var res + + // go through vendor prefixes... (hate this!) + if(!transform || transform == 'none'){ + for(var i in vendors){ + transform = elem.css('-' + vendors[i] + '-transform') + if(transform && transform != 'none'){ + break + } + } + } + // no transform is set... + if(!transform || transform == 'none'){ + return 1 + } + // get the scale value -- first argument of scale/matrix... + return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2]) +} + + + +function setElementScale(elem, scale){ + elem.css({ + 'transform': 'scale('+scale+', '+scale+')', + '-moz-transform': 'scale('+scale+', '+scale+')', + '-o-transform': 'scale('+scale+', '+scale+')', + '-ms-transform': 'scale('+scale+', '+scale+')', + '-webkit-transform': 'scale('+scale+', '+scale+')', + }) +} + + + +function scaleContainerBy(factor){ + var scale = getElementScale($('.field'))*factor + + setContainerScale(scale) +} + + + +function setContainerScale(scale){ + return setElementScale($('.field'), scale) +} + + + +function fitImage(){ + var H = $('.container').height() + var W = $('.container').width() + + var h = $('.image.current').height() + var w = $('.image.current').width() + + var f = Math.min(H/h, W/w) + + setContainerScale(f) +} + + + +function fitThreeImages(){ + var H = $('.container').height() + var W = $('.container').width() + + var h = $('.image.current').height() + // NOTE: this is cheating, need to get actual three widths... + var w = $('.image.current').width()*3 + + var f = Math.min(H/h, W/w) + + setContainerScale(f) +} + + + + /********************************************************** Actions **/ // basic actions... // NOTE: below 'direction' argument is meant in the html sence, diff --git a/ui/keybindings.js b/ui/keybindings.js index e739181b..d8460a52 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -1,3 +1,4 @@ +/*********************************************************************/ var keybindings = { //72: toggleHelp, // ??? 70: toggleSingleImageMode, // f @@ -62,6 +63,7 @@ var keybindings = { 17: 16, 18: 16, } + /* XXX old bindings... close: [27, 88, 67], // ??? @@ -70,4 +72,5 @@ var keybindings = { demote: [46], // ??? */ +/*********************************************************************/ // vim:set ts=4 sw=4 nowrap : diff --git a/ui/ui.js b/ui/ui.js index 44fdf60d..bfcc0109 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -1,171 +1,3 @@ -/*********************************************************************/ - -/* - * The folowing two functions will get the vertical and horizontal - * distance components between the pints a and A, centers of the small - * and large squares respectively. - * One of the squares is .field and the other is .container, - * which is small or big is not important. - * - * +---------------+-------+ - * | | | - * | | | - * | + a . . | . . . | . + - * | . | | +- getCurrentVerticalOffset(...) - * | . + A | . . . | . + - * +---------------+ | - * | . . | - * | . . | - * | . . | - * +-----------------------+ - * . . - * +-+-+ - * +------------------- getCurrentHorizontalOffset(...) - * - * - * Adding this distance to margins of one of the sqares will effectively - * allign the two points. - * - * NOTE: neither function accunts for field margins. - * - */ - -// get the vertical offset of the center of square from center of container -// NOTE: this does not account for field margins -function getCurrentVerticalOffset(image){ - if(image == null){ - image = $('.image.current') - } - - var scale = getElementScale($('.field')) - - var ribbons = $('.ribbon') - var ribbon = image.parents('.ribbon') - var images = ribbon.children('.image') - - // vertical... - var H = $('.container').height() - var h = ribbons.outerHeight(true) - // margin... - var mh = h - ribbons.outerHeight() - // current ribbon position (1-based) - var rn = ribbons.index(ribbon) + 1 - // XXX compensating for margin error buildup... really odd! - // ...why is this still different for the first three ribbons?! - // ....sub-pixel error? - // relative position to field... - // XXX is there a better way to get this? - var t = rn * (h - mh/2) - - return -t + H/2 + h/2 -} - -// get the horizontal offset of the center of square from center of container -// NOTE: this does not account for field margins -function getCurrentHorizontalOffset(image){ - if(image == null){ - image = $('.image.current') - } - - var ribbon = image.parents('.ribbon') - var images = ribbon.children('.image') - - var W = $('.container').width() - var w = images.outerWidth(true) - // margin... - // XXX do we need this? - var mw = w - images.outerWidth() - // current square position (1-based) - var sn = images.index(image) + 1 - var l = sn * (w - mw/2) - - return -l + W/2 + w/2 -} - -function centerSquare(){ - - $('.field').css({ - 'margin-top': getCurrentVerticalOffset() - }) - - // horizontal... - alignRibbon() - - centerCurrentImage() -} - -function alignRibbon(image, position){ - // default values... - if(image == null){ - image = $('.image.current') - } - if(position == null){ - position = 'center' - } - - var ribbon = image.parents('.ribbon') - - // account for margined field... - // NOTE: this enables us to cheat and shift all the ribbons just - // by changing field margin-left... - var cml = parseFloat($('.field').css('margin-left')) - if(!cml){ - cml = 0 - } - var h_offset = getCurrentHorizontalOffset(image) - cml - var w = $('.image').outerWidth(true) - - switch(position){ - case 'before': - ribbon.css({'margin-left': h_offset - w/2}) - return true - case 'center': - ribbon.css({'margin-left': h_offset}) - return true - case 'after': - ribbon.css({'margin-left': h_offset + w/2}) - return true - } - return false -} - -/* Set the transform-origin to the center of the current view... - */ -function centerOrigin(){ - var mt = parseFloat($('.field').css('margin-top')) - var ml = parseFloat($('.field').css('margin-left')) - var cml = parseFloat($('.current.ribbon').css('margin-left')) - - var t = parseFloat($('.field').css('top')) - var l = parseFloat($('.field').css('left')) - var w = $('.field').width() - var h = $('.field').height() - var W = $('.container').width() - var H = $('.container').height() - - //var ot = mt + H/2 + t - //var ol = ml + W/2 + l - - var ot = -getCurrentVerticalOffset() + H/2 - t - var ol = -ml + W/2 - l - - $('.field').css({ - 'transform-origin': ol + 'px ' + ot + 'px', - '-o-transform-origin': ol + 'px ' + ot + 'px', - '-moz-transform-origin': ol + 'px ' + ot + 'px', - '-webkit-transform-origin': ol + 'px ' + ot + 'px', - '-ms-transform-origin': ol + 'px ' + ot + 'px' - }) - - // XXX for debugging... - $('.origin-marker').css({ - 'top': ot, - 'left': ol - }) -} - - - /*********************************************************************/ // XXX need to make this work for % values... @@ -188,91 +20,7 @@ function fieldSize(W, H){ }) } -function centerCurrentImage(){ - $('.field') - .css({ - 'top': 0, - 'left': 0 - }) - // do this after animations are done... - .one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", centerOrigin) - // this is repeated intentionally... - // ...needed for small shifts, while the after-animation event - // is for large moves. - centerOrigin() -} /*********************************************************************/ - -// NOTE: this will only return a single scale value... -function getElementScale(elem){ - //var transform = elem.css('transform') - var vendors = ['o', 'moz', 'ms', 'webkit'] - var transform = elem.css('transform') - var res - - // go through vendor prefixes... (hate this!) - if(!transform || transform == 'none'){ - for(var i in vendors){ - transform = elem.css('-' + vendors[i] + '-transform') - if(transform && transform != 'none'){ - break - } - } - } - // no transform is set... - if(!transform || transform == 'none'){ - return 1 - } - // get the scale value -- first argument of scale/matrix... - return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2]) -} -// XXX -function setElementScale(elem, scale){ -} - -function scaleContainerBy(factor){ - var scale = getElementScale($('.field'))*factor - - setContainerScale(scale) -} - -function setContainerScale(scale){ - var H = $('.container').height() - var W = $('.container').width() - - $('.field').css({ - 'transform': 'scale('+scale+', '+scale+')', - '-moz-transform': 'scale('+scale+', '+scale+')', - '-o-transform': 'scale('+scale+', '+scale+')', - '-ms-transform': 'scale('+scale+', '+scale+')', - '-webkit-transform': 'scale('+scale+', '+scale+')', - }) -} - -function fitImage(){ - var H = $('.container').height() - var W = $('.container').width() - - var h = $('.image.current').height() - var w = $('.image.current').width() - - var f = Math.min(H/h, W/w) - - setContainerScale(f) -} - -function fitThreeImages(){ - var H = $('.container').height() - var W = $('.container').width() - - var h = $('.image.current').height() - // NOTE: this is cheating, need to get actual three widths... - var w = $('.image.current').width()*3 - - var f = Math.min(H/h, W/w) - - setContainerScale(f) -} - +// vim:set ts=4 sw=4 nowrap :