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

more refactoring and cleanup...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-19 20:12:40 +04:00
parent ee3c3cdd8a
commit e19816da67
2 changed files with 190 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
ui/gallery-prototype.js
View File

@ -244,7 +244,7 @@ var DEBUG = true
ImageGrid.GROUP('State', ImageGrid.GROUP('State',
ImageGrid.OPTION({ ImageGrid.OPTION({
name: 'BACKGROUND_MODES', 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 '+ 'NOTE: there is also a null mode that is what is set in the '+
'main CSS.', 'main CSS.',
display: false, display: false,
@ -259,7 +259,7 @@ ImageGrid.GROUP('State',
name: 'NORMAL_MODE_BG', name: 'NORMAL_MODE_BG',
display: false, display: false,
value: null, 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: This will get updated on background change in tuntime.\n'+
'NOTE: null represents the default style.', 'NOTE: null represents the default style.',
callback: function(){ callback: function(){
@ -272,7 +272,7 @@ ImageGrid.GROUP('State',
name: 'SINGLE_IMAGE_MODE_BG', name: 'SINGLE_IMAGE_MODE_BG',
display: false, display: false,
value: 'black', 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: This will get updated on background change in tuntime.\n'+
'NOTE: null represents the default style.', 'NOTE: null represents the default style.',
callback: function(){ callback: function(){
@ -285,11 +285,11 @@ ImageGrid.GROUP('State',
name: 'ORIGINAL_FIELD_SCALE', name: 'ORIGINAL_FIELD_SCALE',
display: false, display: false,
value: 1.0, 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.', 'NOTE: this will change if changed at runtime.',
callback: function(){ callback: function(){
if(ImageGrid.toggleSingleImageMode('?') == 'off'){ 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 // this will create a function that will add/remove a css_class to elem
// calling the optional callbacks before and/or after. // 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"... // XXX rename classes to "shift-image-up" and "shift-image-down"...
$('.screen-button.demote').click(shiftImageUp) $('.screen-button.demote').click(shiftImageUp)
$('.screen-button.promote').click(shiftImageDown) $('.screen-button.promote').click(shiftImageDown)
$('.screen-button.zoom-in').click(function(){scaleContainerBy(ImageGrid.option.ZOOM_FACTOR)}) $('.screen-button.zoom-in').click(ImageGrid.scaleContainerUp)
$('.screen-button.zoom-out').click(function(){scaleContainerBy(1/ImageGrid.option.ZOOM_FACTOR)}) $('.screen-button.zoom-out').click(ImageGrid.scaleContainerDown)
// XXX // 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.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.show-controls').click(function(){ImageGrid.toggleControls('on')})
$('.screen-button.settings').click(ImageGrid.showSetup) $('.screen-button.settings').click(ImageGrid.showSetup)
} }
@ -878,8 +912,6 @@ function loadJSON(data, set_order){
/*********************************************************************/
/*************************************************** Event Handlers **/ /*************************************************** Event Handlers **/
@ -1033,14 +1065,30 @@ function toggleBackgroundModes(){
// XXX use order and priority of options... ImageGrid.GROUP('Mode: All',
// XXX make history work for this... ImageGrid.ACTION({
// XXX should this be a toggle?? id: 'toggleControls',
ImageGrid.ACTION({ 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??
ImageGrid.ACTION({
title: 'Settings', title: 'Settings',
doc: 'Show setup interface.', doc: 'Show setup interface.',
}, },
function showSetup(){ function showSetup(){
var opts = ImageGrid.option var opts = ImageGrid.option
var opt_ps = ImageGrid.option_props var opt_ps = ImageGrid.option_props
var groups = {} var groups = {}
@ -1097,27 +1145,12 @@ function showSetup(){
return false return false
}) })
showInOverlay(opts_container) showInOverlay(opts_container)
}) }),
ImageGrid.GROUP('Mode: All',
ImageGrid.ACTION({ ImageGrid.ACTION({
id: 'toggleControls', title: 'Close overlay'
title: 'Keyboard-oriented interface',
doc: 'Toggle Touch/Keyboard UI controls.',
type: 'toggle',
}, },
createCSSClassToggler('.viewer', 'hidden-controls')), function closeOverlay(){ $('.overlay').click() }))
ImageGrid.ACTION({
id: 'toggleTransitions',
title: 'Global transitions',
doc: 'Toggle global transitions.',
type: 'toggle',
},
createCSSClassToggler('.viewer', 'transitions-enabled')))
@ -1143,10 +1176,10 @@ ImageGrid.GROUP('Mode: Single Image',
// post... // post...
function(action){ function(action){
if(action == 'on'){ if(action == 'on'){
fitImage() ImageGrid.fitImage()
setBackgroundMode(ImageGrid.option.SINGLE_IMAGE_MODE_BG) setBackgroundMode(ImageGrid.option.SINGLE_IMAGE_MODE_BG)
} else { } else {
setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE) ImageGrid.setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
setBackgroundMode(ImageGrid.option.NORMAL_MODE_BG) setBackgroundMode(ImageGrid.option.NORMAL_MODE_BG)
} }
clickAfterTransitionsDone() clickAfterTransitionsDone()
@ -1377,57 +1410,53 @@ ImageGrid.GROUP('Navigation',
/********************************************************** Zooming **/ /********************************************************** 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!) ImageGrid.GROUP('Zooming',
if(!transform || transform == 'none'){ // XXX is this an action or a helper???
for(var i in vendors){ ImageGrid.ACTION({
transform = elem.css('-' + vendors[i] + '-transform') title: 'Get element scale',
if(transform && transform != 'none'){ doc: 'Return a scale value for the given element(s).\n\n'+
break 'NOTE: this will only return a single scale value...',
} },
} getElementScale),
} ImageGrid.ACTION({
// no transform is set... title: 'Set element scale',
if(!transform || transform == 'none'){ doc: 'Set the scale value for the given element(s).'
return 1 },
} setElementScale),
// get the scale value -- first argument of scale/matrix...
return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
}
ImageGrid.ACTION({
title: 'Scale container by factor',
},
function scaleContainerBy(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)
}),
function setElementScale(elem, scale){ ImageGrid.ACTION({
return elem.css({ title: 'Set container scale',
'transform': 'scale('+scale+', '+scale+')', },
'-moz-transform': 'scale('+scale+', '+scale+')', function setContainerScale(scale){
'-o-transform': 'scale('+scale+', '+scale+')',
'-ms-transform': 'scale('+scale+', '+scale+')',
'-webkit-transform': 'scale('+scale+', '+scale+')',
})
}
function scaleContainerBy(factor){
return setContainerScale(getElementScale($('.field'))*factor)
}
function setContainerScale(scale){
return setElementScale($('.field'), scale) return setElementScale($('.field'), scale)
} }),
ImageGrid.ACTION({
function fitNImages(n){ title: 'Fit N images to container width/height',
},
function fitNImages(n){
var H = $('.container').height() var H = $('.container').height()
var W = $('.container').width() var W = $('.container').width()
@ -1437,19 +1466,20 @@ function fitNImages(n){
var f = Math.min(H/h, W/w) var f = Math.min(H/h, W/w)
setContainerScale(f) ImageGrid.setContainerScale(f)
} }),
// the fit N image pack, for 1 <= N <= 9
function fitImage(){fitNImages(1)} ImageGrid.ACTION({ title: 'Fit single image' }, function fitImage(){ImageGrid.fitNImages(1)}),
function fitTwoImages(){fitNImages(2)} ImageGrid.ACTION({ title: 'Fit two images' }, function fitTwoImages(){ImageGrid.fitNImages(2)}),
function fitThreeImages(){fitNImages(3)} ImageGrid.ACTION({ title: 'Fit three images' }, function fitThreeImages(){ImageGrid.fitNImages(3)}),
function fitFourImages(){fitNImages(4)} ImageGrid.ACTION({ title: 'Fit four images' }, function fitFourImages(){ImageGrid.fitNImages(4)}),
function fitFiveImages(){fitNImages(5)} ImageGrid.ACTION({ title: 'Fit five images' }, function fitFiveImages(){ImageGrid.fitNImages(5)}),
function fitSixImages(){fitNImages(6)} ImageGrid.ACTION({ title: 'Fit six images' }, function fitSixImages(){ImageGrid.fitNImages(6)}),
function fitSevenImages(){fitNImages(7)} ImageGrid.ACTION({ title: 'Fit seven images' }, function fitSevenImages(){ImageGrid.fitNImages(7)}),
function fitEightImages(){fitNImages(8)} ImageGrid.ACTION({ title: 'Fit eight images' }, function fitEightImages(){ImageGrid.fitNImages(8)}),
function fitNineImages(){fitNImages(9)} ImageGrid.ACTION({ title: 'Fit nine images' }, function fitNineImages(){ImageGrid.fitNImages(9)})
)

32
ui/keybindings.js
View File

@ -13,32 +13,26 @@ var keybindings = {
77: toggleMarkers, // m 77: toggleMarkers, // m
27: [ 27: ImageGrid.closeOverlay(), // Esc
// XXX make this into a real action...
function(){$('.overlay').click()}, // Esc
'Hide overlay'
],
// zooming... // zooming...
// XXX make this into a real action... 187: ImageGrid.scaleContainerUp, // +
187: function(){scaleContainerBy(ImageGrid.option.ZOOM_FACTOR)}, // + 189: ImageGrid.scaleContainerDown, // -
// XXX make this into a real action...
189: function(){scaleContainerBy(1/ImageGrid.option.ZOOM_FACTOR)}, // -
// zoom presets... // zoom presets...
48: { 48: {
'default': fitImage, // 0 'default': ImageGrid.fitImage, // 0
// XXX make this into a real action... // XXX make this into a real action...
'ctrl': function(){setContainerScale(1)}, // ctrl+0 'ctrl': function(){setContainerScale(1)}, // ctrl+0
}, },
49: fitImage, // 1 49: ImageGrid.fitImage, // 1
50: fitTwoImages, // 2 50: ImageGrid.fitTwoImages, // 2
51: fitThreeImages, // 3 51: ImageGrid.fitThreeImages, // 3
52: fitFourImages, // 4 52: ImageGrid.fitFourImages, // 4
53: fitFiveImages, // 5 53: ImageGrid.fitFiveImages, // 5
54: fitSixImages, // 6 54: ImageGrid.fitSixImages, // 6
55: fitSevenImages, // 7 55: ImageGrid.fitSevenImages, // 7
56: fitEightImages, // 8 56: ImageGrid.fitEightImages, // 8
57: fitNineImages, // 9 57: ImageGrid.fitNineImages, // 9
// navigation... // navigation...