From b1221f6c8f6bf53653afb606f1ea45dfc1a60b49 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 13 Oct 2014 06:33:22 +0400 Subject: [PATCH] added basic/experimental animations, started work on propper zooming... Signed-off-by: Alex A. Naanou --- ui (gen4)/index.html | 33 ++++++++++++++------ ui (gen4)/ribbons.js | 71 ++++++++++++++++++++++++++++++++++++++++++-- ui (gen4)/ui.js | 12 ++++++-- ui (gen4)/viewer.js | 47 +++++++++++++++++++++++++++-- 4 files changed, 146 insertions(+), 17 deletions(-) diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html index a6ef8d77..ed84346c 100755 --- a/ui (gen4)/index.html +++ b/ui (gen4)/index.html @@ -26,23 +26,38 @@ border-color: red; } +.shadow { + position: absolute; + overflow: visible; + width: auto; + height: auto; + background: black; + + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; +} +.image.moving { + visibility: hidden; +} + /* basic animation... */ .viewer:not(.no-transitions) .ribbon-set { - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; + -webkit-transition: all 0.2s ease, transform 0.2s linear; + -moz-transition: all 0.2s ease, transform 0.2s linear; + transition: all 0.2s ease, transform 0.2s linear; } .viewer:not(.no-transitions) .ribbon { - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; } .no-transitions { - -webkit-transition: none; - -moz-transition: none; - transition: none; + -webkit-transition: none; + -moz-transition: none; + transition: none; } diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 40197249..287c96e8 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -239,11 +239,73 @@ module.RibbonsPrototype = { getScale: function(){ return getElementScale(this.viewer.find('.ribbon-set')) }, - setScale: function(scale){ - setElementScale(this.viewer.find('.ribbon-set'), scale) + // XXX need work on alignment after scaling... + // ...this may require: + // - setting origin + // - using translate instead of top to position ribbon-set... + // + // Origin needs to be at the point on .ribbon-set that coresponds + // to the point on screen that we need to scale relative to (i.e. + // a fixed point). + // + // The problem here is that setting the origin messes up the + // positioning (removing the top/left css attrs), thus a different + // strategy is needed to control positioning... + // + // One of the folowing approaches might work: + // - use translate for placement of the .ribbon-set (prefered) + // - use an extra eleemnt for positioning and keep the + // .ribbon-set at (0,0) + setScale: function(scale, t, l){ + var ribbon_set = this.viewer.find('.ribbon-set') + + var s = this.getScale() + + if(t == null){ + var img = this.getImage() + t = img.offset() + l = t.left + (img.width()/s)/2 + t = t.top + (img.height()/s)/2 + } + + var ro = ribbon_set.offset() + + var ot = t - ro.top + var ol = l - ro.left + setElementOrigin(ribbon_set, ol+'px', ot+'px') + + setElementScale(ribbon_set, scale) return this }, + makeShadow: function(target, animate){ + var img = this.getImage(target) + var gid = this.getElemGID(img) + var shadow = $('
') + .addClass('shadow') + .append(img + .clone() + .removeClass('current') + .attr('gid', null)) + .css(img.offset()) + .appendTo(this.viewer) + img.addClass('moving') + var that = this + + return function(){ + var img = that.getImage(gid) + if(animate){ + shadow.css(img.offset()) + } + setTimeout(function(){ + img.removeClass('moving') + shadow.remove() + }, 200) + return img + } + }, + + // Contextual getters... @@ -1333,7 +1395,10 @@ module.RibbonsPrototype = { return this }, - // XXX + // XXX need work on alignment after scaling... + // ...this may require: + // - setting origin + // - using translate instead of top to position ribbon-set... fitImage: function(n){ n = n == null ? 1 : n diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index 848a52bc..234bcf06 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -114,11 +114,17 @@ module.GLOBAL_KEYBOARD = { End: function(){ a.lastImage() }, Left: { default: function(){ a.prevImage() }, - alt: function(){ a.shiftImageLeft() }, + alt: function(){ + event.preventDefault() + a.shiftImageLeft() + }, }, Right: { default: function(){ a.nextImage() }, - alt: function(){ a.shiftImageRight() }, + alt: function(){ + event.preventDefault() + a.shiftImageRight() + }, }, Up: { default: function(){ a.prevRibbon() }, @@ -156,6 +162,8 @@ $(function(){ })) window.a = testing.setupActions() + + viewer.setupAnimation(a) }) diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 65cbdfc4..28f6af17 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -262,7 +262,6 @@ actions.Actions({ this.data.newRibbon(target, 'below') this.shiftImageDown(target) }], - // XXX is tracking direction here correct??? shiftImageLeft: ['Shift image left', function(target){ if(target == null){ @@ -271,7 +270,6 @@ actions.Actions({ this.data.shiftImageLeft(target) this.focusImage() }], - // XXX is tracking direction here correct??? shiftImageRight: ['Shift image right', function(target){ if(target == null){ @@ -438,16 +436,28 @@ actions.Actions(Client, { function(){ }], fitOrig: ['Fit to original scale', - function(){ this.ribbons.setScale(1) }], + function(){ + //this.ribbons.preventTransitions() + + this.ribbons.setScale(1) + this.ribbons.updateImage('*') + + //this.focusImage() + //this.ribbons.restoreTransitions() + }], // NOTE: if this gets a count argument it will fit count images, // default is one. // XXX animation broken for this... fitImage: ['Fit image', function(count){ + //this.ribbons.preventTransitions() + this.ribbons.fitImage(count) this.ribbons.updateImage('*') + //this.focusImage() + //this.ribbons.restoreTransitions() }], // XXX should these be relative to screen rather than actual image counts? @@ -523,10 +533,41 @@ actions.Actions(Client, { }], + // basic image editing... + // + // XXX + rotateCW: [ + function(){ }], + rotateCCW: [ + function(){ }], + flipVertical: [ + function(){ }], + flipHorizontal: [ + function(){ }], + }) +var setupAnimation = +module.setupAnimation = +function setupAnimation(actions){ + var animate = function(target){ + var s = this.ribbons.makeShadow(target, true) + return function(){ s() } + } + var noanimate = function(target){ + var s = this.ribbons.makeShadow(target) + return function(){ s() } + } + return actions + .on('shiftImageUp.pre', animate) + .on('shiftImageDown.pre', animate) + .on('shiftImageLeft.pre', noanimate) + .on('shiftImageRight.pre', noanimate) +} + + /********************************************************************** * vim:set ts=4 sw=4 : */ return module })