mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
some refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
770d662ec8
commit
3e7711e829
@ -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 **/
|
/*************************************************** Event Handlers **/
|
||||||
|
|
||||||
@ -454,35 +586,35 @@ function makeKeyboardHandler(keybindings, unhandled){
|
|||||||
// ribbon/single view modes...
|
// ribbon/single view modes...
|
||||||
// global: stores the scale before we went into single image mode...
|
// global: stores the scale before we went into single image mode...
|
||||||
// XXX HACK
|
// XXX HACK
|
||||||
var ORIGINAL_FIELD_SCALE = 1
|
var _ORIGINAL_FIELD_SCALE = 1
|
||||||
|
|
||||||
|
|
||||||
// remember the default backgrounds for modes...
|
// remember the default backgrounds for modes...
|
||||||
// ...this effectively makes the modes independant...
|
// ...this effectively makes the modes independant...
|
||||||
// NOTE: null represent the default value...
|
// NOTE: null represent the default value...
|
||||||
// XXX HACK
|
// XXX HACK
|
||||||
var NORMAL_MODE_BG = null
|
var _NORMAL_MODE_BG = null
|
||||||
var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1]
|
var _SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1]
|
||||||
|
|
||||||
|
|
||||||
var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode',
|
var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode',
|
||||||
// pre...
|
// pre...
|
||||||
function(action){
|
function(action){
|
||||||
if(action == 'on'){
|
if(action == 'on'){
|
||||||
NORMAL_MODE_BG = getBackgroundMode()
|
_NORMAL_MODE_BG = getBackgroundMode()
|
||||||
ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
_ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
||||||
} else {
|
} else {
|
||||||
SINGLE_IMAGE_MODE_BG = getBackgroundMode()
|
_SINGLE_IMAGE_MODE_BG = getBackgroundMode()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// post...
|
// post...
|
||||||
function(action){
|
function(action){
|
||||||
if(action == 'on'){
|
if(action == 'on'){
|
||||||
fitImage()
|
fitImage()
|
||||||
setBackgroundMode(SINGLE_IMAGE_MODE_BG)
|
setBackgroundMode(_SINGLE_IMAGE_MODE_BG)
|
||||||
} else {
|
} else {
|
||||||
setContainerScale(ORIGINAL_FIELD_SCALE)
|
setContainerScale(_ORIGINAL_FIELD_SCALE)
|
||||||
setBackgroundMode(NORMAL_MODE_BG)
|
setBackgroundMode(_NORMAL_MODE_BG)
|
||||||
}
|
}
|
||||||
clickAfterTransitionsDone()
|
clickAfterTransitionsDone()
|
||||||
})
|
})
|
||||||
@ -491,10 +623,10 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode'
|
|||||||
// wide view mode toggle...
|
// wide view mode toggle...
|
||||||
var toggleWideView = createCSSClassToggler('.viewer', 'wide-view-mode', function(action){
|
var toggleWideView = createCSSClassToggler('.viewer', 'wide-view-mode', function(action){
|
||||||
if(action == 'on'){
|
if(action == 'on'){
|
||||||
ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
_ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
||||||
setContainerScale(0.1)
|
setContainerScale(0.1)
|
||||||
} else {
|
} else {
|
||||||
setContainerScale(ORIGINAL_FIELD_SCALE)
|
setContainerScale(_ORIGINAL_FIELD_SCALE)
|
||||||
}
|
}
|
||||||
}, function(){})
|
}, function(){})
|
||||||
|
|
||||||
@ -572,6 +704,43 @@ var disableTransitions = function(){toggleTransitions('off')}
|
|||||||
|
|
||||||
/********************************************************* Movement **/
|
/********************************************************* 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 for some odd reason these are not liner... something to do with origin?
|
||||||
// XXX virtually identical, see of can be merged...
|
// XXX virtually identical, see of can be merged...
|
||||||
function moveViewUp(){
|
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 **/
|
/******************************************************* 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 **/
|
/********************************************************** Actions **/
|
||||||
// basic actions...
|
// basic actions...
|
||||||
// NOTE: below 'direction' argument is meant in the html sence,
|
// NOTE: below 'direction' argument is meant in the html sence,
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
/*********************************************************************/
|
||||||
var keybindings = {
|
var keybindings = {
|
||||||
//72: toggleHelp, // ???
|
//72: toggleHelp, // ???
|
||||||
70: toggleSingleImageMode, // f
|
70: toggleSingleImageMode, // f
|
||||||
@ -62,6 +63,7 @@ var keybindings = {
|
|||||||
17: 16,
|
17: 16,
|
||||||
18: 16,
|
18: 16,
|
||||||
}
|
}
|
||||||
|
|
||||||
/* XXX old bindings...
|
/* XXX old bindings...
|
||||||
close: [27, 88, 67], // ???
|
close: [27, 88, 67], // ???
|
||||||
|
|
||||||
@ -70,4 +72,5 @@ var keybindings = {
|
|||||||
demote: [46], // ???
|
demote: [46], // ???
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
// vim:set ts=4 sw=4 nowrap :
|
// vim:set ts=4 sw=4 nowrap :
|
||||||
|
|||||||
254
ui/ui.js
254
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...
|
// 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()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
// vim:set ts=4 sw=4 nowrap :
|
||||||
// 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)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user