From 5a998eac39cfb3f6941ccb790e211a0ab536a9f1 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 24 Jul 2012 14:30:43 +0400 Subject: [PATCH] changed naming in the experiment to simplify migration... Signed-off-by: Alex A. Naanou --- ui/experiment-ribbon-navigation-n-zoom.html | 85 +++++++++++---------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html index f071f3dc..43d95bc0 100755 --- a/ui/experiment-ribbon-navigation-n-zoom.html +++ b/ui/experiment-ribbon-navigation-n-zoom.html @@ -18,7 +18,7 @@ XXX zoom animation is odd... $(document).ready(function(){ $('.square').click(squareClick) - containerSize(300, 200) + fieldSize(300, 200) $('.current.square').click() }) @@ -40,7 +40,7 @@ function squareClick(){ .parents('.ribbon') .addClass('current') - // position the container and ribbons... + // position the field and ribbons... centerSquare() } @@ -50,7 +50,7 @@ function squareClick(){ * 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 .container and the other is .meta-container, + * One of the squares is .field and the other is .container, * which is small or big is not important. * * +---------------+-------+ @@ -72,25 +72,25 @@ function squareClick(){ * Adding this distance to margins of one of the sqares will effectively * allign the two points. * - * NOTE: neither function accunts for container margins. + * NOTE: neither function accunts for field margins. * */ -// get the vertical offset of the center of square from center of meta-container -// NOTE: this does not account for container margins +// get the vertical offset of the center of square from center of container +// NOTE: this does not account for field margins function getCurrentVerticalOffset(square){ if(square == null){ square = $('.square.current') } - var zoom = $('.container').css('zoom') + var zoom = $('.field').css('zoom') var ribbons = $('.ribbon') var ribbon = square.parents('.ribbon') var squares = ribbon.children('.square') // vertical... - var H = $('.meta-container').height() + var H = $('.container').height() var h = ribbons.outerHeight(true) // margin... var mh = h - ribbons.outerHeight() @@ -99,26 +99,26 @@ function getCurrentVerticalOffset(square){ // XXX compensating for margin error buildup... really odd! // ...why is this still different for the first three ribbons?! // ....sub-pixel error? - // relative position to container... + // 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 meta-container -// NOTE: this does not account for container margins +// get the horizontal offset of the center of square from center of container +// NOTE: this does not account for field margins function getCurrentHorizontalOffset(square){ if(square == null){ square = $('.square.current') } - var zoom = $('.container').css('zoom') + var zoom = $('.field').css('zoom') var ribbon = square.parents('.ribbon') var squares = ribbon.children('.square') - var W = $('.meta-container').width() + var W = $('.container').width() var w = squares.outerWidth(true) // margin... // XXX do we need this? @@ -132,7 +132,7 @@ function getCurrentHorizontalOffset(square){ function centerSquare(){ - $('.container').css({ + $('.field').css({ 'margin-top': getCurrentVerticalOffset() }) @@ -151,10 +151,10 @@ function alignRibbon(square, position){ var ribbon = square.parents('.ribbon') - // account for margined container... + // account for margined field... // NOTE: this enables us to cheat and shift all the ribbons just - // by changing container margin-left... - var cml = parseFloat($('.container').css('margin-left')) + // by changing field margin-left... + var cml = parseFloat($('.field').css('margin-left')) if(!cml){ cml = 0 } @@ -180,25 +180,26 @@ function alignRibbon(square, position){ /*********************************************************************/ // XXX need to make this work for % values... -function containerSize(W, H){ - var oW = $('.meta-container').width() - var oH = $('.meta-container').height() +// XXX make this usable as an event handler for .resize(...) event... +function fieldSize(W, H){ + var oW = $('.container').width() + var oH = $('.container').height() - var zoom = $('.container').css('zoom') + var zoom = $('.field').css('zoom') - $('.meta-container').css({ + $('.container').css({ 'width': W, 'height': H }) // shift the field... - $('.container').css({ + $('.field').css({ // compensate top/left that get changed while zooming.... 'top': H/2 * 1/zoom - H/2, 'left': W/2 * 1/zoom - W/2, - 'margin-top': (parseFloat($('.container').css('margin-top')) + (H-oH)/2), - 'margin-left': (parseFloat($('.container').css('margin-left')) + (W-oW)/2) + 'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2), + 'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2) }) } @@ -208,27 +209,27 @@ function containerSize(W, H){ // XXX need to fix animation jumping around... // XXX try transition-origin instead of compensating by moving... function zoomContainerBy(factor){ - var zoom = $('.container').css('zoom')*factor + var zoom = $('.field').css('zoom')*factor setContainerZoom(zoom) } function setContainerZoom(zoom){ - var H = $('.meta-container').height() - var W = $('.meta-container').width() + var H = $('.container').height() + var W = $('.container').width() - $('.container').css({ + $('.field').css({ 'zoom': zoom, // this only shifts to account for zoom/scale change... - // ...we need to factor in the position of .current within the container + // ...we need to factor in the position of .current within the field 'top': H/2 * 1/zoom - H/2, 'left': W/2 * 1/zoom - W/2 }) } function fitImage(){ - var H = $('.meta-container').height() - var W = $('.meta-container').width() + var H = $('.container').height() + var W = $('.container').width() var h = $('.square.current').height() var w = $('.square.current').width() @@ -239,8 +240,8 @@ function fitImage(){ } function fitThreeImages(){ - var H = $('.meta-container').height() - var W = $('.meta-container').width() + var H = $('.container').height() + var W = $('.container').width() var h = $('.square.current').height() // XXX cheating, need to get three widths... @@ -262,7 +263,7 @@ function fitThreeImages(){ transition: all 0.5s ease; } -.meta-container { +.container { position: relative; border: solid gray 5px; width: 300px; @@ -288,7 +289,7 @@ function fitThreeImages(){ left: 50%; } -.container { +.field { position: relative; top: 0px; left: 0px; @@ -361,15 +362,15 @@ Zoom:
Size: - - - - + + + +

-
-
+
+
1
2