diff --git a/ui/fullscreen.html b/ui/fullscreen.html index 0a8d1af3..41668643 100755 --- a/ui/fullscreen.html +++ b/ui/fullscreen.html @@ -52,7 +52,7 @@ function setup(){ setDefaultInitialState() // XXX - setBackgroundMode('dark') + toggleSingleImageMode('off') enableTransitions() // setup event handlers... @@ -68,11 +68,6 @@ function setup(){ // XXX STUB loadImages(image_list) - // setup the dragging framework... - // XXX make this work seamlessly with touchSwipe... - // XXX cancel clicks while dragging... - $('.field').draggable() - // set the default position and init... $('.current.image').click() diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index d0cd6455..1fcc7280 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -1,6 +1,8 @@ // XXX need a uniform way to address images (filename?) /******************************************* Setup Data and Globals **/ +var DEBUG = true + // the list of style modes... // these are swithched through in order by toggleBackgroundModes() var BACKGROUND_MODES = [ @@ -9,29 +11,50 @@ var BACKGROUND_MODES = [ ] +// remember the default backgrounds for modes... +// ...this effectively makes the modes independant... +// NOTE: null represent the default value... +// NOTE: these will change if changed in runtime... +var NORMAL_MODE_BG = 'dark' +var SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1] + + +// ribbon/single view modes... +// store the scale before we went into single image mode... +// NOTE: these will change if changed in runtime... +var ORIGINAL_FIELD_SCALE = 1.0 + + // this sets the zooming factor used in manual zooming... var ZOOM_FACTOR = 2 -// sets the amoun of move when a key is pressed... +// sets the amount of move when a key is pressed... var MOVE_DELTA = 50 + + /********************************************************** Helpers **/ // this will create a function that will add/remove a css_class to elem -// calling the callbacks before and/or after. -// NOTE: of only one callback is given then it will be called after the -// class change... -// a way around this is to pass an empty function as callback_b +// calling the optional callbacks before and/or after. +// +// elem is a jquery compatible object; default use-case: a css selector. +// // the resulting function understands the folowing arguments: // - 'on' : switch mode on // - 'off' : switch mode off // - '?' : return current state ('on'|'off') // - no arguments : toggle the state +// +// NOTE: of only one callback is given then it will be called after the +// class change... +// a way around this is to pass an empty function as callback_b +// function createCSSClassToggler(elem, css_class, callback_a, callback_b){ // prepare the pre/post callbacks... if(callback_b == null){ @@ -204,9 +227,13 @@ function setupEvents(){ $('.current.image').click() }) // keyboard... - $(document) - .keydown(makeKeyboardHandler(keybindings, function(k){alert(k)})) - //.keydown(handleKeys) + if(DEBUG){ + $(document) + .keydown(makeKeyboardHandler(keybindings, function(k){alert(k)})) + } else { + $(document) + .keydown(makeKeyboardHandler(keybindings)) + } // swipe... $('.viewer') .swipe({ @@ -215,13 +242,19 @@ function setupEvents(){ swipeUp: shiftImageUp, swipeDown: shiftImageDown }) + // dragging... + // XXX make this work seamlessly with touchSwipe... + // XXX cancel clicks while dragging... + // XXX this does not work on android... + $('.field').draggable() + } function setupControlElements(){ // images... - $(".image").click(setCurrentImage) + $(".image").click(handleImageClick) // buttons... $('.screen-button.next-image').click(nextImage) @@ -259,7 +292,7 @@ function loadImages(json){ .css({ 'background-image': 'url('+images[i]+')' }) // set a unique id for each image... .attr({'id': i}) - .click(setCurrentImage) + .click(handleImageClick) .appendTo(ribbon) } ribbon.children().first().click() @@ -324,7 +357,7 @@ function loadJSON(data){ $('
') .css({ 'background-image': 'url('+image.attr('url')+')' }) .attr({'id': j}) - .click(setCurrentImage) + .click(handleImageClick) .appendTo(ribbon) } } @@ -332,9 +365,10 @@ 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 + * distance components between the points 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. @@ -382,9 +416,6 @@ function getCurrentVerticalOffset(image){ 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) @@ -465,9 +496,13 @@ function alignRibbon(image, position){ return false } + + + /*************************************************** Event Handlers **/ -function setCurrentImage(){ +// handle click for images... +function handleImageClick(){ // set classes... $('.current').removeClass('current') $(this) @@ -524,7 +559,7 @@ function alignRibbons(){ * Basic key format: * : , * : { - * default: [, ], + * 'default': , * // a modifier can be any single modifier, like shift or a * // combination of modifers like 'ctrl+shift', given in order * // of priority. @@ -570,7 +605,7 @@ function makeKeyboardHandler(keybindings, unhandled){ return false } } else { - // callback... + // simple callback... handler() return false } @@ -583,52 +618,39 @@ function makeKeyboardHandler(keybindings, unhandled){ /************************************************************ Modes **/ -// ribbon/single view modes... -// global: stores the scale before we went into single image mode... -// XXX HACK -var _ORIGINAL_FIELD_SCALE = 1 - - -// remember the default backgrounds for modes... -// ...this effectively makes the modes independant... -// NOTE: null represent the default value... -// XXX HACK -var _NORMAL_MODE_BG = null -var _SINGLE_IMAGE_MODE_BG = BACKGROUND_MODES[BACKGROUND_MODES.length-1] - - var toggleSingleImageMode = createCSSClassToggler('.viewer', 'single-image-mode', // pre... function(action){ if(action == 'on'){ - _NORMAL_MODE_BG = getBackgroundMode() - _ORIGINAL_FIELD_SCALE = getElementScale($('.field')) + NORMAL_MODE_BG = getBackgroundMode() + ORIGINAL_FIELD_SCALE = getElementScale($('.field')) } else { - _SINGLE_IMAGE_MODE_BG = getBackgroundMode() + SINGLE_IMAGE_MODE_BG = getBackgroundMode() } }, // post... function(action){ if(action == 'on'){ fitImage() - setBackgroundMode(_SINGLE_IMAGE_MODE_BG) + setBackgroundMode(SINGLE_IMAGE_MODE_BG) } else { - setContainerScale(_ORIGINAL_FIELD_SCALE) - setBackgroundMode(_NORMAL_MODE_BG) + setContainerScale(ORIGINAL_FIELD_SCALE) + setBackgroundMode(NORMAL_MODE_BG) } clickAfterTransitionsDone() -}) + }) // wide view mode toggle... -var toggleWideView = createCSSClassToggler('.viewer', 'wide-view-mode', function(action){ - if(action == 'on'){ - _ORIGINAL_FIELD_SCALE = getElementScale($('.field')) - setContainerScale(0.1) - } else { - setContainerScale(_ORIGINAL_FIELD_SCALE) - } -}, function(){}) +var toggleWideView = createCSSClassToggler('.viewer', 'wide-view-mode', + function(action){ + if(action == 'on'){ + ORIGINAL_FIELD_SCALE = getElementScale($('.field')) + setContainerScale(0.1) + } else { + setContainerScale(ORIGINAL_FIELD_SCALE) + } + }, function(){}) @@ -741,7 +763,7 @@ function centerOrigin(){ -// XXX for some odd reason these are not liner... something to do with origin? +// XXX these work oddly when page is scaled in maxthon... // XXX virtually identical, see of can be merged... function moveViewUp(){ var t = parseInt($('.field').css('top')) @@ -784,20 +806,40 @@ function centerCurrentImage(){ // basic navigation... function firstImage(){ - $('.current.ribbon').children('.image').first().click() + return $('.current.ribbon').children('.image').first().click() } function prevImage(){ - $('.current.image').prev('.image').click() + return $('.current.image').prev('.image').click() } function nextImage(){ - $('.current.image').next('.image').click() + return $('.current.image').next('.image').click() } function lastImage(){ - $('.current.ribbon').children('.image').last().click() + return $('.current.ribbon').children('.image').last().click() } -// XXX add skip N images back and forth handlers... -// XXX + + +// add skip screen images in direction... +function skipScreenImages(direction){ + // calculate screen width in images... + var W = $('.viewer').width() + var w = $('.current.image').width() + var scale = getElementScale($('.field')) + var n = Math.max(Math.floor(W/(w*scale))-1, 0) + + var img = $('.current.image')[direction + 'All']('.image').eq(n) + if(img.length > 0){ + return img.click() + } else if(direction == 'next'){ + return lastImage() + } else if(direction == 'prev'){ + return firstImage() + } +} +var nextScreenImages = function(){ return skipScreenImages('next') } +var prevScreenImages = function(){ return skipScreenImages('prev') } + function focusRibbon(direction){ @@ -808,20 +850,16 @@ function focusRibbon(direction){ // NOTE: direction is accounted for to make the up/down shifts // symmetrical in the general case... if(next.length == 0 || direction == 'next'){ - prev.click() + return prev.click() } else { - next.click() + return next.click() } } else { - $('.current.ribbon')[direction]('.ribbon').children('.image').first().click() + return $('.current.ribbon')[direction]('.ribbon').children('.image').first().click() } } -function focusAboveRibbon(){ - focusRibbon('prev') -} -function focusBelowRibbon(){ - focusRibbon('next') -} +var focusAboveRibbon = function(){ return focusRibbon('prev') } +var focusBelowRibbon = function(){ return focusRibbon('next') } @@ -855,7 +893,7 @@ function getElementScale(elem){ function setElementScale(elem, scale){ - elem.css({ + return elem.css({ 'transform': 'scale('+scale+', '+scale+')', '-moz-transform': 'scale('+scale+', '+scale+')', '-o-transform': 'scale('+scale+', '+scale+')', @@ -867,9 +905,7 @@ function setElementScale(elem, scale){ function scaleContainerBy(factor){ - var scale = getElementScale($('.field'))*factor - - setContainerScale(scale) + return setContainerScale(getElementScale($('.field'))*factor) } @@ -1019,19 +1055,11 @@ function shiftImage(direction){ .detach() .prependTo($('.current.ribbon')[direction]('.ribbon')) } - } $('.current.image').click() } - - - -function shiftImageDown(){ - return shiftImage('next') -} -function shiftImageUp(){ - return shiftImage('prev') -} +var shiftImageDown = function(){ return shiftImage('next') } +var shiftImageUp = function(){ return shiftImage('prev') } diff --git a/ui/gallery.html b/ui/gallery.html index c13a5653..16134aee 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -48,7 +48,8 @@ function setup(){ setDefaultInitialState() // XXX - setBackgroundMode('dark') + // this will set the defaults... + toggleSingleImageMode('off') enableTransitions() // setup event handlers... @@ -64,11 +65,6 @@ function setup(){ // XXX STUB loadImages(image_list) - // setup the dragging framework... - // XXX make this work seamlessly with touchSwipe... - // XXX cancel clicks while dragging... - $('.field').draggable() - // set the default position and init... $('.current.image').click() diff --git a/ui/keybindings.js b/ui/keybindings.js index d8460a52..f7023de5 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -22,11 +22,21 @@ var keybindings = { 36: firstImage, // Home 35: lastImage, // End - 37: prevImage, // Left + //37: prevImage, // Left + 37: { + 'default': prevImage, // Right + 'ctrl': prevScreenImages, // ctrl-Right + 'alt': prevScreenImages, // alt-Right + }, 80: 37, // BkSp 188: 37, // p 8: 37, // < - 39: nextImage, // Right + //39: nextImage, // Right + 39: { + 'default': nextImage, // Left + 'ctrl': nextScreenImages, // ctrl-Left + 'alt': nextScreenImages, // alt-Left + }, 32: 39, // Space 190: 39, // m 78: 39, // >