mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
some refacoring and preparations for gen4...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2498f7c10a
commit
ece95ff30f
120
ui/actions.js
120
ui/actions.js
@ -7,6 +7,20 @@
|
||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
//
|
||||
// Might also be a good idea to add "relative terms" to be used as
|
||||
// arguments for actions (a-la jQuery collections):
|
||||
//
|
||||
// Image - current image
|
||||
// Images - all images
|
||||
// Ribbon - ribbon or ribbon images
|
||||
// Marked - marked images
|
||||
// Bookmarked - bookmarked images
|
||||
//
|
||||
// NOTE: these can also beused as a basis for actions...
|
||||
//
|
||||
//
|
||||
/*********************************************************************/
|
||||
|
||||
// NOTE: context is dynamic.
|
||||
@ -90,40 +104,6 @@ function Actions(context, names, actions){
|
||||
// actions chanined to it's main event.
|
||||
// - actions should accept arguments, both optional and required
|
||||
var BASE_ACTIONS = {
|
||||
// basic navigation...
|
||||
nextImage: 'Focus next image in current ribbon',
|
||||
nextRibbon: 'Focus next ribbon (down)',
|
||||
nextScreen: 'Show next screen width of images',
|
||||
|
||||
prevImage: 'Focus previous image in current ribbon',
|
||||
prevRibbon: 'Focus previous ribbon (up)',
|
||||
prevScreen: 'Show previous screen width of images',
|
||||
|
||||
firstImage: 'Focus first image in ribbon',
|
||||
lastImage: 'Focus last image in ribbon',
|
||||
|
||||
// zooming...
|
||||
zoomIn: 'Zoom in',
|
||||
zoomOut: 'Zoom out',
|
||||
|
||||
fitNImages: 'fit N images',
|
||||
|
||||
fitOne: ['Fit one image',{ fitNImages: 1, }],
|
||||
fitTwo: ['Fit two images', { fitNImages: 2, }],
|
||||
fitThree: ['Fit three images', { fitNImages: 3, }],
|
||||
fitFour: ['Fit four images', { fitNImages: 4, }],
|
||||
fitFive: ['Fit five images', { fitNImages: 5, }],
|
||||
fitSix: ['Fit six images', { fitNImages: 6, }],
|
||||
fitSeven: ['Fit seven images', { fitNImages: 7, }],
|
||||
fitEight: ['Fit eight images', { fitNImages: 8, }],
|
||||
fitNine: ['Fit nine images', { fitNImages: 9, }],
|
||||
|
||||
fitMax: 'Fit the maximum number of images',
|
||||
|
||||
fitSmall: 'Show small image',
|
||||
fitNormal: 'Show normal image',
|
||||
fitScreen: 'Fit image to screen',
|
||||
|
||||
// basic editing...
|
||||
shiftImageUp:
|
||||
'Shift image to the ribbon above current, creating one if '
|
||||
@ -142,8 +122,8 @@ var BASE_ACTIONS = {
|
||||
setAsBaseRibbon: '',
|
||||
|
||||
// image adjustments...
|
||||
rotateLeft: '',
|
||||
rotateRight: '',
|
||||
rotateCW: '',
|
||||
rotateCCW: '',
|
||||
flipVertical: '',
|
||||
flipHorizontal: '',
|
||||
|
||||
@ -157,6 +137,62 @@ var BASE_ACTIONS = {
|
||||
uncropView: '',
|
||||
uncropAll: '',
|
||||
|
||||
openURL: '',
|
||||
openHistory: '',
|
||||
|
||||
saveState: '',
|
||||
exportImages: '',
|
||||
|
||||
exit: '',
|
||||
}
|
||||
|
||||
|
||||
// XXX think of a better name...
|
||||
function setupBaseActions(context, actions){
|
||||
return Actions(context, BASE_ACTIONS, actions)
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var UI_ACTIONS = {
|
||||
// basic navigation...
|
||||
nextImage: 'Focus next image in current ribbon',
|
||||
nextRibbon: 'Focus next ribbon (down)',
|
||||
nextScreen: 'Show next screen width of images',
|
||||
|
||||
prevImage: 'Focus previous image in current ribbon',
|
||||
prevRibbon: 'Focus previous ribbon (up)',
|
||||
prevScreen: 'Show previous screen width of images',
|
||||
|
||||
firstImage: 'Focus first image in ribbon',
|
||||
lastImage: 'Focus last image in ribbon',
|
||||
|
||||
// zooming...
|
||||
zoomIn: 'Zoom in',
|
||||
zoomOut: 'Zoom out',
|
||||
|
||||
// NOTE: if this gets a count argument it will fit count images,
|
||||
// default is one.
|
||||
fitImage: 'Fit image',
|
||||
|
||||
// XXX should these be relative to screen rather than actual image counts?
|
||||
fitTwo: ['Fit two images', { fitImage: 2, }],
|
||||
fitThree: ['Fit three images', { fitImage: 3, }],
|
||||
fitFour: ['Fit four images', { fitImage: 4, }],
|
||||
fitFive: ['Fit five images', { fitImage: 5, }],
|
||||
fitSix: ['Fit six images', { fitImage: 6, }],
|
||||
fitSeven: ['Fit seven images', { fitImage: 7, }],
|
||||
fitEight: ['Fit eight images', { fitImage: 8, }],
|
||||
fitNine: ['Fit nine images', { fitImage: 9, }],
|
||||
|
||||
fitMax: 'Fit the maximum number of images',
|
||||
|
||||
fitSmall: 'Show small image',
|
||||
fitNormal: 'Show normal image',
|
||||
fitScreen: 'Fit image to screen',
|
||||
|
||||
// modes...
|
||||
singleImageMode: '',
|
||||
ribbonMode: '',
|
||||
@ -172,14 +208,6 @@ var BASE_ACTIONS = {
|
||||
showStatesPanel: '',
|
||||
showConsolePanel: '',
|
||||
|
||||
openURL: '',
|
||||
openHistory: '',
|
||||
|
||||
saveState: '',
|
||||
exportImages: '',
|
||||
|
||||
exit: '',
|
||||
|
||||
// developer actions...
|
||||
showConsole: '',
|
||||
showDevTools: '',
|
||||
@ -187,8 +215,8 @@ var BASE_ACTIONS = {
|
||||
|
||||
|
||||
// XXX think of a better name...
|
||||
function setupBaseActions(context, actions){
|
||||
return Actions(context, BASE_ACTIONS, actions)
|
||||
function setupUIActions(context, actions){
|
||||
return Actions(context, UI_ACTIONS, actions)
|
||||
}
|
||||
|
||||
|
||||
|
||||
60
ui/image.js
60
ui/image.js
@ -282,6 +282,66 @@ function updateImages(list, size, cmp){
|
||||
}
|
||||
|
||||
|
||||
// Compensate for viewer proportioned and rotated images.
|
||||
//
|
||||
// This will set the margins so as to make the rotated image offset the
|
||||
// same space as it is occupying visually...
|
||||
//
|
||||
// NOTE: this is not needed for square image blocks.
|
||||
// NOTE: if an image block is square, this will remove the margins.
|
||||
function correctImageProportionsForRotation(images, container){
|
||||
container = container == null ? $('.viewer') : container
|
||||
|
||||
var W = container.innerWidth()
|
||||
var H = container.innerHeight()
|
||||
|
||||
var viewer_p = W > H ? 'landscape' : 'portrait'
|
||||
|
||||
return $(images).each(function(i, e){
|
||||
var image = $(this)
|
||||
// orientation...
|
||||
var o = image.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
var w = image.outerWidth()
|
||||
var h = image.outerHeight()
|
||||
|
||||
// non-square image...
|
||||
if(w != h){
|
||||
|
||||
var image_p = w > h ? 'landscape' : 'portrait'
|
||||
|
||||
// when the image is turned 90deg/270deg and its
|
||||
// proportions are the same as the screen...
|
||||
if((o == 90 || o == 270) && image_p == viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin-top': -((w - h)/2),
|
||||
'margin-bottom': -((w - h)/2),
|
||||
'margin-left': (w - h)/2,
|
||||
'margin-right': (w - h)/2,
|
||||
})
|
||||
|
||||
} else if((o == 0 || o == 180) && image_p != viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
|
||||
// square image...
|
||||
} else {
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -908,68 +908,6 @@ function nextRibbon(){
|
||||
|
||||
/******************************************************** Rotating ***/
|
||||
|
||||
// Compensate for viewer proportioned and rotated images.
|
||||
//
|
||||
// This will set the margins so as to make the rotated image offset the
|
||||
// same space as it is occupying visually...
|
||||
//
|
||||
// NOTE: this is not needed for square image blocks.
|
||||
// NOTE: if an image block is square, this will remove the margins.
|
||||
function correctImageProportionsForRotation(images, container){
|
||||
container = container == null ? $('.viewer') : container
|
||||
|
||||
var W = container.innerWidth()
|
||||
var H = container.innerHeight()
|
||||
|
||||
var viewer_p = W > H ? 'landscape' : 'portrait'
|
||||
|
||||
return $(images).each(function(i, e){
|
||||
var image = $(this)
|
||||
// orientation...
|
||||
var o = image.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
var w = image.outerWidth()
|
||||
var h = image.outerHeight()
|
||||
|
||||
// non-square image...
|
||||
if(w != h){
|
||||
|
||||
var image_p = w > h ? 'landscape' : 'portrait'
|
||||
|
||||
// when the image is turned 90deg/270deg and its
|
||||
// proportions are the same as the screen...
|
||||
if((o == 90 || o == 270) && image_p == viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin-top': -((w - h)/2),
|
||||
'margin-bottom': -((w - h)/2),
|
||||
'margin-left': (w - h)/2,
|
||||
'margin-right': (w - h)/2,
|
||||
})
|
||||
|
||||
} else if((o == 0 || o == 180) && image_p != viewer_p){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
|
||||
// square image...
|
||||
} else {
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
var _cw = {
|
||||
null: 0,
|
||||
0: 90,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user