mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
more refactoring and cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
ee3c3cdd8a
commit
e19816da67
@ -244,7 +244,7 @@ var DEBUG = true
|
||||
ImageGrid.GROUP('State',
|
||||
ImageGrid.OPTION({
|
||||
name: 'BACKGROUND_MODES',
|
||||
doc: 'list of available background styles.\n'+
|
||||
doc: 'list of available background styles.\n\n'+
|
||||
'NOTE: there is also a null mode that is what is set in the '+
|
||||
'main CSS.',
|
||||
display: false,
|
||||
@ -259,7 +259,7 @@ ImageGrid.GROUP('State',
|
||||
name: 'NORMAL_MODE_BG',
|
||||
display: false,
|
||||
value: null,
|
||||
doc: 'Background style in normal (ribbon) mode.\n'+
|
||||
doc: 'Background style in normal (ribbon) mode.\n\n'+
|
||||
'NOTE: This will get updated on background change in tuntime.\n'+
|
||||
'NOTE: null represents the default style.',
|
||||
callback: function(){
|
||||
@ -272,7 +272,7 @@ ImageGrid.GROUP('State',
|
||||
name: 'SINGLE_IMAGE_MODE_BG',
|
||||
display: false,
|
||||
value: 'black',
|
||||
doc: 'Background style in single image mode.\n'+
|
||||
doc: 'Background style in single image mode.\n\n'+
|
||||
'NOTE: This will get updated on background change in tuntime.\n'+
|
||||
'NOTE: null represents the default style.',
|
||||
callback: function(){
|
||||
@ -285,11 +285,11 @@ ImageGrid.GROUP('State',
|
||||
name: 'ORIGINAL_FIELD_SCALE',
|
||||
display: false,
|
||||
value: 1.0,
|
||||
doc: 'Scale of view in image mode.\n'+
|
||||
doc: 'Scale of view in image mode.\n\n'+
|
||||
'NOTE: this will change if changed at runtime.',
|
||||
callback: function(){
|
||||
if(ImageGrid.toggleSingleImageMode('?') == 'off'){
|
||||
setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
|
||||
ImageGrid.setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
|
||||
}
|
||||
}
|
||||
}))
|
||||
@ -375,6 +375,40 @@ function showInOverlay(obj){
|
||||
|
||||
|
||||
|
||||
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){
|
||||
return 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+')',
|
||||
})
|
||||
}
|
||||
|
||||
// this will create a function that will add/remove a css_class to elem
|
||||
// calling the optional callbacks before and/or after.
|
||||
//
|
||||
@ -775,12 +809,12 @@ function setupControlElements(){
|
||||
// XXX rename classes to "shift-image-up" and "shift-image-down"...
|
||||
$('.screen-button.demote').click(shiftImageUp)
|
||||
$('.screen-button.promote').click(shiftImageDown)
|
||||
$('.screen-button.zoom-in').click(function(){scaleContainerBy(ImageGrid.option.ZOOM_FACTOR)})
|
||||
$('.screen-button.zoom-out').click(function(){scaleContainerBy(1/ImageGrid.option.ZOOM_FACTOR)})
|
||||
$('.screen-button.zoom-in').click(ImageGrid.scaleContainerUp)
|
||||
$('.screen-button.zoom-out').click(ImageGrid.scaleContainerDown)
|
||||
// XXX
|
||||
$('.screen-button.toggle-wide').click(function(){scaleContainerBy(0.2)})
|
||||
$('.screen-button.toggle-wide').click(function(){ImageGrid.scaleContainerBy(0.2)})
|
||||
$('.screen-button.toggle-single').click(ImageGrid.toggleSingleImageMode)
|
||||
$('.screen-button.fit-three').click(fitThreeImages)
|
||||
$('.screen-button.fit-three').click(ImageGrid.fitThreeImages)
|
||||
$('.screen-button.show-controls').click(function(){ImageGrid.toggleControls('on')})
|
||||
$('.screen-button.settings').click(ImageGrid.showSetup)
|
||||
}
|
||||
@ -878,8 +912,6 @@ function loadJSON(data, set_order){
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
/*************************************************** Event Handlers **/
|
||||
|
||||
@ -1033,6 +1065,22 @@ function toggleBackgroundModes(){
|
||||
|
||||
|
||||
|
||||
ImageGrid.GROUP('Mode: All',
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleControls',
|
||||
title: 'Keyboard-oriented interface',
|
||||
doc: 'Toggle Touch/Keyboard UI controls.',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'hidden-controls')),
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleTransitions',
|
||||
title: 'Global transitions',
|
||||
doc: 'Toggle global transitions.',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'transitions-enabled')),
|
||||
|
||||
// XXX use order and priority of options...
|
||||
// XXX make history work for this...
|
||||
// XXX should this be a toggle??
|
||||
@ -1097,27 +1145,12 @@ function showSetup(){
|
||||
return false
|
||||
})
|
||||
showInOverlay(opts_container)
|
||||
})
|
||||
}),
|
||||
|
||||
|
||||
|
||||
|
||||
ImageGrid.GROUP('Mode: All',
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleControls',
|
||||
title: 'Keyboard-oriented interface',
|
||||
doc: 'Toggle Touch/Keyboard UI controls.',
|
||||
type: 'toggle',
|
||||
title: 'Close overlay'
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'hidden-controls')),
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleTransitions',
|
||||
title: 'Global transitions',
|
||||
doc: 'Toggle global transitions.',
|
||||
type: 'toggle',
|
||||
},
|
||||
createCSSClassToggler('.viewer', 'transitions-enabled')))
|
||||
|
||||
function closeOverlay(){ $('.overlay').click() }))
|
||||
|
||||
|
||||
|
||||
@ -1143,10 +1176,10 @@ ImageGrid.GROUP('Mode: Single Image',
|
||||
// post...
|
||||
function(action){
|
||||
if(action == 'on'){
|
||||
fitImage()
|
||||
ImageGrid.fitImage()
|
||||
setBackgroundMode(ImageGrid.option.SINGLE_IMAGE_MODE_BG)
|
||||
} else {
|
||||
setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
|
||||
ImageGrid.setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
|
||||
setBackgroundMode(ImageGrid.option.NORMAL_MODE_BG)
|
||||
}
|
||||
clickAfterTransitionsDone()
|
||||
@ -1377,56 +1410,52 @@ ImageGrid.GROUP('Navigation',
|
||||
|
||||
/********************************************************** 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){
|
||||
return 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+')',
|
||||
})
|
||||
}
|
||||
|
||||
ImageGrid.GROUP('Zooming',
|
||||
// XXX is this an action or a helper???
|
||||
ImageGrid.ACTION({
|
||||
title: 'Get element scale',
|
||||
doc: 'Return a scale value for the given element(s).\n\n'+
|
||||
'NOTE: this will only return a single scale value...',
|
||||
},
|
||||
getElementScale),
|
||||
ImageGrid.ACTION({
|
||||
title: 'Set element scale',
|
||||
doc: 'Set the scale value for the given element(s).'
|
||||
},
|
||||
setElementScale),
|
||||
|
||||
|
||||
ImageGrid.ACTION({
|
||||
title: 'Scale container by factor',
|
||||
},
|
||||
function scaleContainerBy(factor){
|
||||
return setContainerScale(getElementScale($('.field'))*factor)
|
||||
}
|
||||
|
||||
|
||||
return ImageGrid.setContainerScale(getElementScale($('.field'))*factor)
|
||||
}),
|
||||
ImageGrid.ACTION({
|
||||
title: 'Scale container up',
|
||||
},
|
||||
function scaleContainerUp(){
|
||||
return ImageGrid.scaleContainerBy(ImageGrid.option.ZOOM_FACTOR)
|
||||
}),
|
||||
ImageGrid.ACTION({
|
||||
title: 'Scale container down',
|
||||
},
|
||||
function scaleContainerDown(){
|
||||
return ImageGrid.scaleContainerBy(1/ImageGrid.option.ZOOM_FACTOR)
|
||||
}),
|
||||
|
||||
ImageGrid.ACTION({
|
||||
title: 'Set container scale',
|
||||
},
|
||||
function setContainerScale(scale){
|
||||
return setElementScale($('.field'), scale)
|
||||
}
|
||||
|
||||
}),
|
||||
|
||||
|
||||
ImageGrid.ACTION({
|
||||
title: 'Fit N images to container width/height',
|
||||
},
|
||||
function fitNImages(n){
|
||||
var H = $('.container').height()
|
||||
var W = $('.container').width()
|
||||
@ -1437,19 +1466,20 @@ function fitNImages(n){
|
||||
|
||||
var f = Math.min(H/h, W/w)
|
||||
|
||||
setContainerScale(f)
|
||||
}
|
||||
ImageGrid.setContainerScale(f)
|
||||
}),
|
||||
|
||||
|
||||
function fitImage(){fitNImages(1)}
|
||||
function fitTwoImages(){fitNImages(2)}
|
||||
function fitThreeImages(){fitNImages(3)}
|
||||
function fitFourImages(){fitNImages(4)}
|
||||
function fitFiveImages(){fitNImages(5)}
|
||||
function fitSixImages(){fitNImages(6)}
|
||||
function fitSevenImages(){fitNImages(7)}
|
||||
function fitEightImages(){fitNImages(8)}
|
||||
function fitNineImages(){fitNImages(9)}
|
||||
// the fit N image pack, for 1 <= N <= 9
|
||||
ImageGrid.ACTION({ title: 'Fit single image' }, function fitImage(){ImageGrid.fitNImages(1)}),
|
||||
ImageGrid.ACTION({ title: 'Fit two images' }, function fitTwoImages(){ImageGrid.fitNImages(2)}),
|
||||
ImageGrid.ACTION({ title: 'Fit three images' }, function fitThreeImages(){ImageGrid.fitNImages(3)}),
|
||||
ImageGrid.ACTION({ title: 'Fit four images' }, function fitFourImages(){ImageGrid.fitNImages(4)}),
|
||||
ImageGrid.ACTION({ title: 'Fit five images' }, function fitFiveImages(){ImageGrid.fitNImages(5)}),
|
||||
ImageGrid.ACTION({ title: 'Fit six images' }, function fitSixImages(){ImageGrid.fitNImages(6)}),
|
||||
ImageGrid.ACTION({ title: 'Fit seven images' }, function fitSevenImages(){ImageGrid.fitNImages(7)}),
|
||||
ImageGrid.ACTION({ title: 'Fit eight images' }, function fitEightImages(){ImageGrid.fitNImages(8)}),
|
||||
ImageGrid.ACTION({ title: 'Fit nine images' }, function fitNineImages(){ImageGrid.fitNImages(9)})
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -13,32 +13,26 @@ var keybindings = {
|
||||
77: toggleMarkers, // m
|
||||
|
||||
|
||||
27: [
|
||||
// XXX make this into a real action...
|
||||
function(){$('.overlay').click()}, // Esc
|
||||
'Hide overlay'
|
||||
],
|
||||
27: ImageGrid.closeOverlay(), // Esc
|
||||
|
||||
// zooming...
|
||||
// XXX make this into a real action...
|
||||
187: function(){scaleContainerBy(ImageGrid.option.ZOOM_FACTOR)}, // +
|
||||
// XXX make this into a real action...
|
||||
189: function(){scaleContainerBy(1/ImageGrid.option.ZOOM_FACTOR)}, // -
|
||||
187: ImageGrid.scaleContainerUp, // +
|
||||
189: ImageGrid.scaleContainerDown, // -
|
||||
// zoom presets...
|
||||
48: {
|
||||
'default': fitImage, // 0
|
||||
'default': ImageGrid.fitImage, // 0
|
||||
// XXX make this into a real action...
|
||||
'ctrl': function(){setContainerScale(1)}, // ctrl+0
|
||||
},
|
||||
49: fitImage, // 1
|
||||
50: fitTwoImages, // 2
|
||||
51: fitThreeImages, // 3
|
||||
52: fitFourImages, // 4
|
||||
53: fitFiveImages, // 5
|
||||
54: fitSixImages, // 6
|
||||
55: fitSevenImages, // 7
|
||||
56: fitEightImages, // 8
|
||||
57: fitNineImages, // 9
|
||||
49: ImageGrid.fitImage, // 1
|
||||
50: ImageGrid.fitTwoImages, // 2
|
||||
51: ImageGrid.fitThreeImages, // 3
|
||||
52: ImageGrid.fitFourImages, // 4
|
||||
53: ImageGrid.fitFiveImages, // 5
|
||||
54: ImageGrid.fitSixImages, // 6
|
||||
55: ImageGrid.fitSevenImages, // 7
|
||||
56: ImageGrid.fitEightImages, // 8
|
||||
57: ImageGrid.fitNineImages, // 9
|
||||
|
||||
|
||||
// navigation...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user