diff options
Diffstat (limited to 'deck.js/extensions/anim')
| -rw-r--r-- | deck.js/extensions/anim/deck.anim.js | 176 |
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'); + |