flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor refactoring...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-19 17:42:47 +04:00
parent 5d78b6bf81
commit 57eb32af78
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ Goals:
- design a simple navigation system and structure
- make it animate correctly only via CSS
XXX zoom animation is odd...
-->
@ -22,30 +23,6 @@ $(document).ready(function(){
$('.current.square').click()
})
// XXX need to make this work for % values...
function containerSize(W, H){
var oW = $('.meta-container').width()
var oH = $('.meta-container').height()
var zoom = $('.container').css('zoom')
$('.meta-container').css({
'width': W,
'height': H
})
// shift the field...
$('.container').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)
})
}
function squareClick(){
// set classes...
$('.current').removeClass('current')
@ -58,6 +35,8 @@ function squareClick(){
centerSquare()
}
/*********************************************************************/
/*
* The folowing two functions will get the vertical and horizontal
* distance components between the pints a and A, centers of the small
@ -187,6 +166,36 @@ function alignRibbon(square, position){
return false
}
/*********************************************************************/
// XXX need to make this work for % values...
function containerSize(W, H){
var oW = $('.meta-container').width()
var oH = $('.meta-container').height()
var zoom = $('.container').css('zoom')
$('.meta-container').css({
'width': W,
'height': H
})
// shift the field...
$('.container').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)
})
}
/*********************************************************************/
// XXX need to fix animation jumping around...
// XXX try transition-origin instead of compensating by moving...
function zoomContainerBy(factor){