flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-07 10:51:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed naming in the experiment to simplify migration...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-24 14:30:43 +04:00
parent 65ac6a179f
commit 5a998eac39
1 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui/experiment-ribbon-navigation-n-zoom.html
View File

@ -18,7 +18,7 @@ XXX zoom animation is odd...
$(document).ready(function(){ $(document).ready(function(){
$('.square').click(squareClick) $('.square').click(squareClick)
containerSize(300, 200) fieldSize(300, 200)
$('.current.square').click() $('.current.square').click()
}) })
@ -40,7 +40,7 @@ function squareClick(){
.parents('.ribbon') .parents('.ribbon')
.addClass('current') .addClass('current')
// position the container and ribbons... // position the field and ribbons...
centerSquare() centerSquare()
} }
@ -50,7 +50,7 @@ function squareClick(){
* The folowing two functions will get the vertical and horizontal * The folowing two functions will get the vertical and horizontal
* distance components between the pints a and A, centers of the small * distance components between the pints a and A, centers of the small
* and large squares respectively. * 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. * 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 * Adding this distance to margins of one of the sqares will effectively
* allign the two points. * 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 // get the vertical offset of the center of square from center of container
// NOTE: this does not account for container margins // NOTE: this does not account for field margins
function getCurrentVerticalOffset(square){ function getCurrentVerticalOffset(square){
if(square == null){ if(square == null){
square = $('.square.current') square = $('.square.current')
} }
var zoom = $('.container').css('zoom') var zoom = $('.field').css('zoom')
var ribbons = $('.ribbon') var ribbons = $('.ribbon')
var ribbon = square.parents('.ribbon') var ribbon = square.parents('.ribbon')
var squares = ribbon.children('.square') var squares = ribbon.children('.square')
// vertical... // vertical...
var H = $('.meta-container').height() var H = $('.container').height()
var h = ribbons.outerHeight(true) var h = ribbons.outerHeight(true)
// margin... // margin...
var mh = h - ribbons.outerHeight() var mh = h - ribbons.outerHeight()
@ -99,26 +99,26 @@ function getCurrentVerticalOffset(square){
// XXX compensating for margin error buildup... really odd! // XXX compensating for margin error buildup... really odd!
// ...why is this still different for the first three ribbons?! // ...why is this still different for the first three ribbons?!
// ....sub-pixel error? // ....sub-pixel error?
// relative position to container... // relative position to field...
// XXX is there a better way to get this? // XXX is there a better way to get this?
var t = rn * (h - mh/2) var t = rn * (h - mh/2)
return -t + H/2 + h/2 return -t + H/2 + h/2
} }
// get the horizontal offset of the center of square from center of meta-container // get the horizontal offset of the center of square from center of container
// NOTE: this does not account for container margins // NOTE: this does not account for field margins
function getCurrentHorizontalOffset(square){ function getCurrentHorizontalOffset(square){
if(square == null){ if(square == null){
square = $('.square.current') square = $('.square.current')
} }
var zoom = $('.container').css('zoom') var zoom = $('.field').css('zoom')
var ribbon = square.parents('.ribbon') var ribbon = square.parents('.ribbon')
var squares = ribbon.children('.square') var squares = ribbon.children('.square')
var W = $('.meta-container').width() var W = $('.container').width()
var w = squares.outerWidth(true) var w = squares.outerWidth(true)
// margin... // margin...
// XXX do we need this? // XXX do we need this?
@ -132,7 +132,7 @@ function getCurrentHorizontalOffset(square){
function centerSquare(){ function centerSquare(){
$('.container').css({ $('.field').css({
'margin-top': getCurrentVerticalOffset() 'margin-top': getCurrentVerticalOffset()
}) })
@ -151,10 +151,10 @@ function alignRibbon(square, position){
var ribbon = square.parents('.ribbon') 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 // NOTE: this enables us to cheat and shift all the ribbons just
// by changing container margin-left... // by changing field margin-left...
var cml = parseFloat($('.container').css('margin-left')) var cml = parseFloat($('.field').css('margin-left'))
if(!cml){ if(!cml){
cml = 0 cml = 0
} }
@ -180,25 +180,26 @@ function alignRibbon(square, position){
/*********************************************************************/ /*********************************************************************/
// XXX need to make this work for % values... // XXX need to make this work for % values...
function containerSize(W, H){ // XXX make this usable as an event handler for .resize(...) event...
var oW = $('.meta-container').width() function fieldSize(W, H){
var oH = $('.meta-container').height() 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, 'width': W,
'height': H 'height': H
}) })
// shift the field... // shift the field...
$('.container').css({ $('.field').css({
// compensate top/left that get changed while zooming.... // compensate top/left that get changed while zooming....
'top': H/2 * 1/zoom - H/2, 'top': H/2 * 1/zoom - H/2,
'left': W/2 * 1/zoom - W/2, 'left': W/2 * 1/zoom - W/2,
'margin-top': (parseFloat($('.container').css('margin-top')) + (H-oH)/2), 'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2),
'margin-left': (parseFloat($('.container').css('margin-left')) + (W-oW)/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 need to fix animation jumping around...
// XXX try transition-origin instead of compensating by moving... // XXX try transition-origin instead of compensating by moving...
function zoomContainerBy(factor){ function zoomContainerBy(factor){
var zoom = $('.container').css('zoom')*factor var zoom = $('.field').css('zoom')*factor
setContainerZoom(zoom) setContainerZoom(zoom)
} }
function setContainerZoom(zoom){ function setContainerZoom(zoom){
var H = $('.meta-container').height() var H = $('.container').height()
var W = $('.meta-container').width() var W = $('.container').width()
$('.container').css({ $('.field').css({
'zoom': zoom, 'zoom': zoom,
// this only shifts to account for zoom/scale change... // 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, 'top': H/2 * 1/zoom - H/2,
'left': W/2 * 1/zoom - W/2 'left': W/2 * 1/zoom - W/2
}) })
} }
function fitImage(){ function fitImage(){
var H = $('.meta-container').height() var H = $('.container').height()
var W = $('.meta-container').width() var W = $('.container').width()
var h = $('.square.current').height() var h = $('.square.current').height()
var w = $('.square.current').width() var w = $('.square.current').width()
@ -239,8 +240,8 @@ function fitImage(){
} }
function fitThreeImages(){ function fitThreeImages(){
var H = $('.meta-container').height() var H = $('.container').height()
var W = $('.meta-container').width() var W = $('.container').width()
var h = $('.square.current').height() var h = $('.square.current').height()
// XXX cheating, need to get three widths... // XXX cheating, need to get three widths...
@ -262,7 +263,7 @@ function fitThreeImages(){
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.meta-container { .container {
position: relative; position: relative;
border: solid gray 5px; border: solid gray 5px;
width: 300px; width: 300px;
@ -288,7 +289,7 @@ function fitThreeImages(){
left: 50%; left: 50%;
} }
.container { .field {
position: relative; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -361,15 +362,15 @@ Zoom:
<br> <br>
Size: Size:
<button onclick="containerSize($('.meta-container').width()*1.5, $('.meta-container').height()*1.5)">+</button> <button onclick="fieldSize($('.container').width()*1.5, $('.container').height()*1.5)">+</button>
<button onclick="containerSize($('.meta-container').width()*0.75, $('.meta-container').height()*0.75)">-</button> <button onclick="fieldSize($('.container').width()*0.75, $('.container').height()*0.75)">-</button>
<button onclick="containerSize(300, 200)">300x200</button> <button onclick="fieldSize(300, 200)">300x200</button>
<button onclick="containerSize(600, 400)">600x400</button> <button onclick="fieldSize(600, 400)">600x400</button>
<br> <br>
<br> <br>
<div class="meta-container animated"> <div class="container animated">
<div class="container"> <div class="field">
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="square">1</div>
<div class="square">2</div> <div class="square">2</div>