Initial Commit

1 files changed, 176 insertions, 0 deletions

diff --git a/deck.js/extensions/anim/deck.anim.js b/deck.js/extensions/anim/deck.anim.js
new file mode 100644
index 0000000..8cf9e08
--- /dev/null
+++ b/deck.js/extensions/anim/deck.anim.js
@@ -0,0 +1,176 @@
+
+(function($, deck, undefined) {
+    // This next line is the color plugin from jquery
+    (function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);
+
+    var $d = $(document);
+    var may = function(o,f) {return f ? f.bind(o) : function() {}};
+
+    $.extend(true, $[deck].defaults, {
+        selectors: {
+            animShow: ".anim-show",
+            animHide: ".anim-hide",
+            animAddClass: ".anim-addclass",
+            animRemoveClass: ".anim-removeclass",
+            animAttribute: ".anim-attribute",
+            // specific ones
+            animPlay: ".anim-play",
+            animPause: ".anim-pause",
+            animViewboxAs: ".anim-viewboxas",
+            //
+            animContinue: ".anim-continue"
+        },
+        anim: {
+            duration: 400
+        }
+    });
+
+    var waitFor = 0
+    $[deck]('extend', 'animWaitMore', function(){ waitFor++ });
+    $[deck]('extend', 'animWaitLess', function(){ waitFor-- });
+
+    var doInitIfReady = function hoho() {
+        if (waitFor>0) {
+            setTimeout(doInitIfReady, 10) // retry until all is loaded
+            return;
+        }
+        // first we define some tools and grab some info from deck.js
+        var o = $[deck]('getOptions');
+        var context = function(el) {
+            return {
+                what: function() {return $(el).attr("data-what")},
+                dur: function() {return $(el).attr("data-dur")*1 || o.anim.duration},
+                classs: function() {return $(el).attr("data-class")},
+                attribute: function() {return $(el).attr("data-attr").split(':')[0]},
+                as: function() {return $(el).attr("data-as")},
+                value: function() {return $(el).attr("data-attr").split(':')[1]},
+                toplevel: function() {return $[deck]('getToplevelSlideOf', el).node},
+                all: function() {return $(this.what(),this.toplevel())}
+            }
+        };
+        var classical = function(selector, methods) {
+            $(selector).each(function(i, el) {
+                var c = context(el);
+                may(methods, methods.create)(c);
+                $(el).bind('deck.toplevelBecameCurrent', function(_, direction) {
+                    may(methods, methods.init)(c);
+                }).bind('deck.afterToplevelBecameCurrent', function(_, direction) {
+                    may(methods, methods.fast)(c);
+                }).bind('deck.lostCurrent', function(_, direction, from, to) {
+                    if (direction == 'forward' || Math.abs(from - to)>1 ) return; // if a big step, let the "step" extension do its job
+                    may(methods, methods.undo)(c);
+                }).bind('deck.becameCurrent', function(_, direction, from, to) {
+                    if (direction == 'reverse' || Math.abs(from - to)>1 ) return; // if a big step, let the "step" extension do its job
+                    may(methods, methods.doit)(c);
+                });
+            });
+        };
+        
+        // here come the real animations
+        classical(o.selectors.animShow, {
+            init: function(c) {c.all().animate({'opacity': 0.}, 0)},
+            undo: function(c) {c.all().animate({'opacity': 0.}, c.dur()/100)},
+            doit: function(c) {c.all().animate({'opacity': 1.}, c.dur())},
+            fast: function(c) {c.all().animate({'opacity': 1.}, 0)}
+        });
+        classical(o.selectors.animHide, {
+            init: function(c) {c.all().animate({'opacity': 1.}, 0)},
+            undo: function(c) {c.all().animate({'opacity': 1.}, c.dur()/100)},
+            doit: function(c) {c.all().animate({'opacity': 0.}, c.dur())},
+            fast: function(c) {c.all().animate({'opacity': 0.}, 0)}
+        });
+        classical(o.selectors.animAddClass, {
+            init: function(c) {c.all().removeClass(c.classs())},
+            undo: function(c) {c.all().removeClass(c.classs())},
+            doit: function(c) {c.all().addClass(c.classs())},
+            fast: function(c) {c.all().addClass(c.classs())}
+        });
+        classical(o.selectors.animRemoveClass, {
+            init: function(c) {c.all().addClass(c.classs())},
+            undo: function(c) {c.all().addClass(c.classs())},
+            doit: function(c) {c.all().removeClass(c.classs())},
+            fast: function(c) {c.all().removeClass(c.classs())}
+        });
+        classical(o.selectors.animAttribute, {
+            init: function(c) {
+                c.previousElement = [];
+                c.all().css(c.attribute(), '') // for the jquery anim to work the css attribute should not be defined in the element (in the html) so we suppose it is empty by default (and thus, if it is not empty, it means it has been set by jquery)
+            },
+            undo: function(c) {
+                var k = c.attribute()
+                for (i in c.previousElement) { // use the saved list of elements and values
+                    var whatTo = {}
+                    whatTo[k] = c.previousCss[i]
+                    $(c.previousElement[i]).animate(whatTo, 0)
+                }
+            },
+            doit: function(c, factor) {
+                if (factor === undefined) factor = 1
+                var k = c.attribute()
+                c.previousCss = []
+                c.previousElement = []
+                c.all().each( function(){c.previousElement.push(this); c.previousCss.push($(this).css(k))}) // save a list of elements and values
+                var whatTo = {}
+                whatTo[c.attribute()] = c.value()
+                c.all().animate(whatTo, c.dur()*factor)
+            },
+            fast: function(c) {this.doit(c,0)}
+        });
+        classical(o.selectors.animPlay, {
+            init: function(c) {c.all().each(function(){this.pause(); try{this.currentTime=0}catch(e){} })},
+            undo: function(c) {c.all().each(function(){this.pause()})},
+            doit: function(c) {c.all().each(function(){this.play()})},
+            fast: function(c) {c.all().each(function(){this.play()})}
+        });
+        classical(o.selectors.animPause, {
+            undo: function(c) {c.all().each(function(){this.play()})},
+            doit: function(c) {c.all().each(function(){this.pause()})},
+            fast: function(c) {c.all().each(function(){this.pause()})}
+        });
+        classical(o.selectors.animViewboxAs, {
+            create: function(c) {c.whatFrom = {}},
+            init: function(c) {this.undo(c)},
+            undo: function(c) {c.all().animate(c.whatFrom, 0)},
+            doit: function(c, factor) {
+                if (factor === undefined) factor = 1
+                var attr = "svgViewBox";
+                var whatTo = {};
+                var asWhat = $(c.as());
+                var a = function (i) {return asWhat.attr(i)}
+                // todo should do as with the generic attribute above (maintain a list)
+                c.whatFrom[attr] = c.all().first().get(0).attributes.getNamedItem('viewBox').nodeValue // custom access to the svg viewbox attribute
+                var toViewBox = a('x')+" "+a('y')+" "+a('width')+" "+a('height');
+                whatTo[attr] = toViewBox;
+                c.all().animate(whatTo, c.dur()*factor)
+            },
+            fast: function(c) {this.doit(c, 0)}
+        });
+        classical(o.selectors.animContinue, {
+            doit: function(c) {setTimeout(function(){$[deck]('next')}, 1)}
+            // do not do it in fast mode
+        });
+        // handle the chained undo for "anim-continue"
+        $(o.selectors.animContinue).each(function(i, curSlide) {
+            $(curSlide).bind('deck.becameCurrent', function(_, direction) {
+                if (direction == 'forward') return;
+                setTimeout(function(){$[deck]('prev')}, 1)
+            });
+
+        });
+
+        // finally force "refresh" (notification of slide change)
+        var current = $[deck]('getSlide')
+        var icur = 0
+        for (; icur < $[deck]('getSlides').length; icur++) {
+            if ($[deck]('getSlides')[icur] == current) break;                
+        }
+	$d.trigger("deck.change", [icur, 0]);
+	$d.trigger("deck.change", [0, icur]);
+
+    }
+    $(document).bind('deck.init', function() {
+        setTimeout(doInitIfReady, 10) // try the first time after init
+    });
+        
+})(jQuery, 'deck');
+