diff --git a/ui/TODO.otl b/ui/TODO.otl index 2922e343..76b7efa5 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -1,5 +1,5 @@ Priority work - [_] 45% Preview II + [_] 39% Preview II [_] 55% sorted images in ribbons [X] 100% stage I: position the promoted/demoted image correctly | and correct positioning on promote/demote @@ -42,9 +42,8 @@ Priority work [X] basic actions [X] zooming [_] position other ribbons... - [_] 60% correct zooming and modes + [_] 75% correct zooming and modes [X] zooming in ribbon view - [_] dragging wile zoomed to more than screen width/height... [X] 100% zoom presets for ribbon view | other possible presets: | - five @@ -58,6 +57,11 @@ Priority work [X] one (with zooming) [_] single image mode with zooming | ribbons are hidden + [_] 0% drag action... + [_] basic infrastructure + [_] center current action + [_] while zoomed more than the screen + [_] while zoomed out (ribbon view) [_] 66% fix layout and animations [X] zooming [X] navigation diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html index 2c8fb284..500d1d8d 100755 --- a/ui/experiment-ribbon-navigation-n-zoom.html +++ b/ui/experiment-ribbon-navigation-n-zoom.html @@ -65,8 +65,8 @@ function imageClick(){ } .origin-marker-2 { position: relative; - top: -6px; - left: -6px; + top: -7px; + left: -7px; width: 5px; height: 5px; @@ -167,6 +167,10 @@ Size:

+ + +
+
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 2028f3b5..6a1b1e14 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -134,25 +134,35 @@ function handleImageClick(e) { +var ZOOM_FACTOR = 2 + // key configuration... // XXX need to make this handle modifiers gracefully... var keys = { - toggleHelpKeys: [72], + toggleHelp: [72], toggleRibbonView: [70], - closeKeys: [27, 88, 67], + close: [27, 88, 67], - firstKeys: [36], - lastKeys: [35], - previousKeys: [37, 80, 188, 8], - nextKeys: [39, 78, 190, 32], + // zooming... + zoomIn: [187], + zoomOut: [189], + // zoom presets... + zoomOriginal: [48], + fitOne: [49], + fitThree: [51], + + first: [36], + last: [35], + previous: [37, 80, 188, 8], + next: [39, 78, 190, 32], // these work with ctrl and shift modifiers... - downKeys: [40], - upKeys: [38], + down: [40], + up: [38], // these work with ctrl modifier... - promoteKeys: [45], - demoteKeys: [46], + promote: [45], + demote: [46], - ignoreKeys: [16, 17, 18], + ignore: [16, 17, 18], helpShowOnUnknownKey: true } @@ -160,24 +170,24 @@ var keys = { // XXX revise... function handleKeys(event){ var code = event.keyCode, fn = $.inArray; - var _ = (fn(code, keys.closeKeys) >= 0) ? function(){}() - : (fn(code, keys.firstKeys) >= 0) ? firstImage() - : (fn(code, keys.nextKeys) >= 0) ? nextImage() - : (fn(code, keys.previousKeys) >= 0) ? prevImage() - : (fn(code, keys.lastKeys) >= 0) ? lastImage() - : (fn(code, keys.promoteKeys) >= 0) ? function(){ + var _ = (fn(code, keys.close) >= 0) ? function(){}() + : (fn(code, keys.first) >= 0) ? firstImage() + : (fn(code, keys.next) >= 0) ? nextImage() + : (fn(code, keys.previous) >= 0) ? prevImage() + : (fn(code, keys.last) >= 0) ? lastImage() + : (fn(code, keys.promote) >= 0) ? function(){ if(event.ctrlKey){ createRibbon('next') } shiftImageDown() }() - : (fn(code, keys.demoteKeys) >= 0) ? function(){ + : (fn(code, keys.demote) >= 0) ? function(){ if(event.ctrlKey){ createRibbon('prev') } shiftImageUp() }() - : (fn(code, keys.downKeys) >= 0) ? function(){ + : (fn(code, keys.down) >= 0) ? function(){ if(event.shiftKey){ if(event.ctrlKey){ createRibbon('next') @@ -187,7 +197,7 @@ function handleKeys(event){ focusBelowRibbon() } }() - : (fn(code, keys.upKeys) >= 0) ? function(){ + : (fn(code, keys.up) >= 0) ? function(){ if(event.shiftKey){ if(event.ctrlKey){ createRibbon('prev') @@ -197,8 +207,16 @@ function handleKeys(event){ focusAboveRibbon() } }() + // zooming... + : (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR) + : (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR) + // zoom presets... + : (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1) + : (fn(code, keys.fitOne) >= 0) ? fitImage() + : (fn(code, keys.fitThree) >= 0) ? fitThreeImages() + : (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView() - : (fn(code, keys.ignoreKeys) >= 0) ? false + : (fn(code, keys.ignore) >= 0) ? false // XXX : (keys.helpShowOnUnknownKey) ? function(){alert(code)}() : false; diff --git a/ui/gallery.html b/ui/gallery.html index 4977cb9b..79ff4897 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -100,11 +100,11 @@ $(document).ready(setup);

- - - - - + + + + +

diff --git a/ui/ui.js b/ui/ui.js index c6683437..527a88df 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -95,7 +95,7 @@ function centerSquare(){ // horizontal... alignRibbon() - centerOrigin() + centerCurrentImage() } function alignRibbon(image, position){ @@ -175,6 +175,7 @@ function centerOrigin(){ // XXX need to make this work for % values... // XXX make this usable as an event handler for .resize(...) event... +// XXX this does not account for zoom correctly... function fieldSize(W, H){ var oW = $('.container').width() var oH = $('.container').height() @@ -189,15 +190,25 @@ function fieldSize(W, H){ // shift the field... $('.field').css({ - // compensate top/left that get changed while zooming.... - 'top': H/2 * 1/zoom - H/2, - 'left': W/2 * 1/zoom - W/2, - 'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2), 'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2) }) } +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() +} + /*********************************************************************/