mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
split the experiment code into ui.js...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5a998eac39
commit
c73f313d2a
@ -13,6 +13,8 @@ XXX zoom animation is odd...
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
|
<script src="ui.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
@ -44,214 +46,6 @@ function squareClick(){
|
|||||||
centerSquare()
|
centerSquare()
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************************************/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 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(square){
|
|
||||||
if(square == null){
|
|
||||||
square = $('.square.current')
|
|
||||||
}
|
|
||||||
|
|
||||||
var zoom = $('.field').css('zoom')
|
|
||||||
|
|
||||||
var ribbons = $('.ribbon')
|
|
||||||
var ribbon = square.parents('.ribbon')
|
|
||||||
var squares = ribbon.children('.square')
|
|
||||||
|
|
||||||
// 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(square){
|
|
||||||
if(square == null){
|
|
||||||
square = $('.square.current')
|
|
||||||
}
|
|
||||||
|
|
||||||
var zoom = $('.field').css('zoom')
|
|
||||||
|
|
||||||
var ribbon = square.parents('.ribbon')
|
|
||||||
var squares = ribbon.children('.square')
|
|
||||||
|
|
||||||
var W = $('.container').width()
|
|
||||||
var w = squares.outerWidth(true)
|
|
||||||
// margin...
|
|
||||||
// XXX do we need this?
|
|
||||||
var mw = w - squares.outerWidth()
|
|
||||||
// current square position (1-based)
|
|
||||||
var sn = squares.index(square) + 1
|
|
||||||
var l = sn * (w - mw/2)
|
|
||||||
|
|
||||||
return -l + W/2 + w/2
|
|
||||||
}
|
|
||||||
|
|
||||||
function centerSquare(){
|
|
||||||
|
|
||||||
$('.field').css({
|
|
||||||
'margin-top': getCurrentVerticalOffset()
|
|
||||||
})
|
|
||||||
|
|
||||||
// horizontal...
|
|
||||||
alignRibbon()
|
|
||||||
}
|
|
||||||
|
|
||||||
function alignRibbon(square, position){
|
|
||||||
// default values...
|
|
||||||
if(square == null){
|
|
||||||
square = $('.square.current')
|
|
||||||
}
|
|
||||||
if(position == null){
|
|
||||||
position = 'center'
|
|
||||||
}
|
|
||||||
|
|
||||||
var ribbon = square.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(square) - cml
|
|
||||||
var w = $('.square').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
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
|
||||||
|
|
||||||
// XXX need to make this work for % values...
|
|
||||||
// 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 = $('.field').css('zoom')
|
|
||||||
|
|
||||||
$('.container').css({
|
|
||||||
'width': W,
|
|
||||||
'height': H
|
|
||||||
})
|
|
||||||
|
|
||||||
// shift the field...
|
|
||||||
$('.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($('.field').css('margin-top')) + (H-oH)/2),
|
|
||||||
'margin-left': (parseFloat($('.field').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){
|
|
||||||
var zoom = $('.field').css('zoom')*factor
|
|
||||||
|
|
||||||
setContainerZoom(zoom)
|
|
||||||
}
|
|
||||||
|
|
||||||
function setContainerZoom(zoom){
|
|
||||||
var H = $('.container').height()
|
|
||||||
var W = $('.container').width()
|
|
||||||
|
|
||||||
$('.field').css({
|
|
||||||
'zoom': zoom,
|
|
||||||
// this only shifts to account for zoom/scale change...
|
|
||||||
// ...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 = $('.container').height()
|
|
||||||
var W = $('.container').width()
|
|
||||||
|
|
||||||
var h = $('.square.current').height()
|
|
||||||
var w = $('.square.current').width()
|
|
||||||
|
|
||||||
var f = Math.min(H/h, W/w)
|
|
||||||
|
|
||||||
setContainerZoom(f)
|
|
||||||
}
|
|
||||||
|
|
||||||
function fitThreeImages(){
|
|
||||||
var H = $('.container').height()
|
|
||||||
var W = $('.container').width()
|
|
||||||
|
|
||||||
var h = $('.square.current').height()
|
|
||||||
// XXX cheating, need to get three widths...
|
|
||||||
var w = $('.square.current').width()*3
|
|
||||||
|
|
||||||
var f = Math.min(H/h, W/w)
|
|
||||||
|
|
||||||
setContainerZoom(f)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
208
ui/ui.js
Executable file
208
ui/ui.js
Executable file
@ -0,0 +1,208 @@
|
|||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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(square){
|
||||||
|
if(square == null){
|
||||||
|
square = $('.square.current')
|
||||||
|
}
|
||||||
|
|
||||||
|
var zoom = $('.field').css('zoom')
|
||||||
|
|
||||||
|
var ribbons = $('.ribbon')
|
||||||
|
var ribbon = square.parents('.ribbon')
|
||||||
|
var squares = ribbon.children('.square')
|
||||||
|
|
||||||
|
// 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(square){
|
||||||
|
if(square == null){
|
||||||
|
square = $('.square.current')
|
||||||
|
}
|
||||||
|
|
||||||
|
var zoom = $('.field').css('zoom')
|
||||||
|
|
||||||
|
var ribbon = square.parents('.ribbon')
|
||||||
|
var squares = ribbon.children('.square')
|
||||||
|
|
||||||
|
var W = $('.container').width()
|
||||||
|
var w = squares.outerWidth(true)
|
||||||
|
// margin...
|
||||||
|
// XXX do we need this?
|
||||||
|
var mw = w - squares.outerWidth()
|
||||||
|
// current square position (1-based)
|
||||||
|
var sn = squares.index(square) + 1
|
||||||
|
var l = sn * (w - mw/2)
|
||||||
|
|
||||||
|
return -l + W/2 + w/2
|
||||||
|
}
|
||||||
|
|
||||||
|
function centerSquare(){
|
||||||
|
|
||||||
|
$('.field').css({
|
||||||
|
'margin-top': getCurrentVerticalOffset()
|
||||||
|
})
|
||||||
|
|
||||||
|
// horizontal...
|
||||||
|
alignRibbon()
|
||||||
|
}
|
||||||
|
|
||||||
|
function alignRibbon(square, position){
|
||||||
|
// default values...
|
||||||
|
if(square == null){
|
||||||
|
square = $('.square.current')
|
||||||
|
}
|
||||||
|
if(position == null){
|
||||||
|
position = 'center'
|
||||||
|
}
|
||||||
|
|
||||||
|
var ribbon = square.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(square) - cml
|
||||||
|
var w = $('.square').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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
// XXX need to make this work for % values...
|
||||||
|
// 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 = $('.field').css('zoom')
|
||||||
|
|
||||||
|
$('.container').css({
|
||||||
|
'width': W,
|
||||||
|
'height': H
|
||||||
|
})
|
||||||
|
|
||||||
|
// shift the field...
|
||||||
|
$('.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($('.field').css('margin-top')) + (H-oH)/2),
|
||||||
|
'margin-left': (parseFloat($('.field').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){
|
||||||
|
var zoom = $('.field').css('zoom')*factor
|
||||||
|
|
||||||
|
setContainerZoom(zoom)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setContainerZoom(zoom){
|
||||||
|
var H = $('.container').height()
|
||||||
|
var W = $('.container').width()
|
||||||
|
|
||||||
|
$('.field').css({
|
||||||
|
'zoom': zoom,
|
||||||
|
// this only shifts to account for zoom/scale change...
|
||||||
|
// ...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 = $('.container').height()
|
||||||
|
var W = $('.container').width()
|
||||||
|
|
||||||
|
var h = $('.square.current').height()
|
||||||
|
var w = $('.square.current').width()
|
||||||
|
|
||||||
|
var f = Math.min(H/h, W/w)
|
||||||
|
|
||||||
|
setContainerZoom(f)
|
||||||
|
}
|
||||||
|
|
||||||
|
function fitThreeImages(){
|
||||||
|
var H = $('.container').height()
|
||||||
|
var W = $('.container').width()
|
||||||
|
|
||||||
|
var h = $('.square.current').height()
|
||||||
|
// XXX cheating, need to get three widths...
|
||||||
|
var w = $('.square.current').width()*3
|
||||||
|
|
||||||
|
var f = Math.min(H/h, W/w)
|
||||||
|
|
||||||
|
setContainerZoom(f)
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user