From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/extensions/anim/deck.anim.js | 176 ++++++++++++++++ deck.js/extensions/bundle-maker/README.txt | 24 +++ deck.js/extensions/bundle-maker/make-bundle.sh | 26 +++ deck.js/extensions/bundle-maker/presentation.html | 140 +++++++++++++ deck.js/extensions/clone/deck.clone.js | 127 ++++++++++++ deck.js/extensions/events/README.md | 64 ++++++ deck.js/extensions/events/deck.events.js | 23 +++ deck.js/extensions/fit/deck.fit-fs.css | 14 ++ deck.js/extensions/fit/deck.fit.js | 171 ++++++++++++++++ deck.js/extensions/goto/deck.goto.css | 41 ++++ deck.js/extensions/goto/deck.goto.html | 7 + deck.js/extensions/goto/deck.goto.js | 170 ++++++++++++++++ deck.js/extensions/goto/deck.goto.scss | 46 +++++ deck.js/extensions/hash/deck.hash.css | 13 ++ deck.js/extensions/hash/deck.hash.html | 2 + deck.js/extensions/hash/deck.hash.js | 142 +++++++++++++ deck.js/extensions/hash/deck.hash.scss | 15 ++ deck.js/extensions/menu/deck.menu.css | 47 +++++ deck.js/extensions/menu/deck.menu.js | 187 +++++++++++++++++ deck.js/extensions/menu/deck.menu.scss | 58 ++++++ deck.js/extensions/navigation/deck.navigation.css | 43 ++++ deck.js/extensions/navigation/deck.navigation.html | 3 + deck.js/extensions/navigation/deck.navigation.js | 92 +++++++++ deck.js/extensions/navigation/deck.navigation.scss | 56 +++++ deck.js/extensions/scale/deck.scale.css | 28 +++ deck.js/extensions/scale/deck.scale.js | 170 ++++++++++++++++ deck.js/extensions/scale/deck.scale.scss | 31 +++ deck.js/extensions/simplemath/deck.simplemath.js | 25 +++ deck.js/extensions/smartsyntax/deck.smartsyntax.js | 226 +++++++++++++++++++++ deck.js/extensions/status/deck.status.css | 25 +++ deck.js/extensions/status/deck.status.html | 6 + deck.js/extensions/status/deck.status.js | 120 +++++++++++ deck.js/extensions/status/deck.status.scss | 22 ++ deck.js/extensions/step/deck.step.js | 119 +++++++++++ deck.js/extensions/svg/deck.svg.js | 115 +++++++++++ 35 files changed, 2574 insertions(+) create mode 100644 deck.js/extensions/anim/deck.anim.js create mode 100644 deck.js/extensions/bundle-maker/README.txt create mode 100755 deck.js/extensions/bundle-maker/make-bundle.sh create mode 100644 deck.js/extensions/bundle-maker/presentation.html create mode 100644 deck.js/extensions/clone/deck.clone.js create mode 100644 deck.js/extensions/events/README.md create mode 100644 deck.js/extensions/events/deck.events.js create mode 100644 deck.js/extensions/fit/deck.fit-fs.css create mode 100644 deck.js/extensions/fit/deck.fit.js create mode 100644 deck.js/extensions/goto/deck.goto.css create mode 100644 deck.js/extensions/goto/deck.goto.html create mode 100644 deck.js/extensions/goto/deck.goto.js create mode 100755 deck.js/extensions/goto/deck.goto.scss create mode 100644 deck.js/extensions/hash/deck.hash.css create mode 100644 deck.js/extensions/hash/deck.hash.html create mode 100644 deck.js/extensions/hash/deck.hash.js create mode 100644 deck.js/extensions/hash/deck.hash.scss create mode 100644 deck.js/extensions/menu/deck.menu.css create mode 100644 deck.js/extensions/menu/deck.menu.js create mode 100755 deck.js/extensions/menu/deck.menu.scss create mode 100644 deck.js/extensions/navigation/deck.navigation.css create mode 100644 deck.js/extensions/navigation/deck.navigation.html create mode 100644 deck.js/extensions/navigation/deck.navigation.js create mode 100755 deck.js/extensions/navigation/deck.navigation.scss create mode 100644 deck.js/extensions/scale/deck.scale.css create mode 100644 deck.js/extensions/scale/deck.scale.js create mode 100644 deck.js/extensions/scale/deck.scale.scss create mode 100644 deck.js/extensions/simplemath/deck.simplemath.js create mode 100644 deck.js/extensions/smartsyntax/deck.smartsyntax.js create mode 100644 deck.js/extensions/status/deck.status.css create mode 100644 deck.js/extensions/status/deck.status.html create mode 100644 deck.js/extensions/status/deck.status.js create mode 100755 deck.js/extensions/status/deck.status.scss create mode 100644 deck.js/extensions/step/deck.step.js create mode 100644 deck.js/extensions/svg/deck.svg.js (limited to 'deck.js/extensions') 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'); + diff --git a/deck.js/extensions/bundle-maker/README.txt b/deck.js/extensions/bundle-maker/README.txt new file mode 100644 index 0000000..f58232f --- /dev/null +++ b/deck.js/extensions/bundle-maker/README.txt @@ -0,0 +1,24 @@ + +PRESENTATION FILE +================= +An bare example file including most used extensions is given in the current folder as "presentation.html". +This files references and uses the files from the "deck.js" folder. +If you want to reduce the overall size of the "deck.js" folder, you can safely remove the "deck.js/samples" directory (if you don't need the samples obviously). + + + +RESOURCES +========= +Example presentations can be found in the the deck.js/samples folder. +You can also consult online examples, see http://home.heeere.com/tech-deckjs-ext.html + + + +NOTE FOR USE WITH CHROME/CHROMIUM +================================= +To allow the presentation page to load all the resources when stored locally, you must start chrome/chromium with a special command line option. +Use "chromium-browser --disable-web-security " to do so. + + + + diff --git a/deck.js/extensions/bundle-maker/make-bundle.sh b/deck.js/extensions/bundle-maker/make-bundle.sh new file mode 100755 index 0000000..30f740b --- /dev/null +++ b/deck.js/extensions/bundle-maker/make-bundle.sh @@ -0,0 +1,26 @@ +#!/bin/sh + +N=deckjs-bundle +W=$(basename $(dirname $(readlink -f $0))) + +SCRATCH=/tmp +test -d /media/ramdisk && SCRATCH=/media/ramdisk + +if test -d .git +then + pwd=$(pwd) + cd $SCRATCH + tmp=,,for-$N + rm -rf $tmp + git clone $pwd $tmp + tmp=$(pwd)/$tmp + cd - + rm -rf $N $N.zip + mkdir -p $N/deck.js + cp -t $N/deck.js -r $tmp/core/ $tmp/extensions/ $tmp/libs/ $tmp/samples/ $tmp/themes/ $tmp/modernizr.custom.js $tmp/jquery-1.7.2.min.js + cp -t $N $tmp/extensions/$W/README.txt $tmp/extensions/$W/presentation.html + cat $tmp/.git/refs/heads/master >> $N/README.txt + zip -r $N.zip $N +else + echo "This script is designed to be run from the root of the git repository" +fi diff --git a/deck.js/extensions/bundle-maker/presentation.html b/deck.js/extensions/bundle-maker/presentation.html new file mode 100644 index 0000000..1561c35 --- /dev/null +++ b/deck.js/extensions/bundle-maker/presentation.html @@ -0,0 +1,140 @@ + + + + + + + + + + ZZZZ A Deck.js Presentation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This text should not be displayed if everything goes well: use left/right arrow keys to browse the presentation.
+ +
+ + +
+ ==New Presentation With deck.js and Extensions==[title-slide] + + =Hello= + * Hi, ..... + * Todo + ** Write you presentation + ** Rehearse a little + * See also + ** online samples + ** local samples + + ==Thank you for your attention==[end-slide] + +
+ + + + + + + +# + +

+ footer − + + / + +

+ +
+ + + + +
+ +← +→ + +
+ +
+ + + + +
+ + + diff --git a/deck.js/extensions/clone/deck.clone.js b/deck.js/extensions/clone/deck.clone.js new file mode 100644 index 0000000..847d8f8 --- /dev/null +++ b/deck.js/extensions/clone/deck.clone.js @@ -0,0 +1,127 @@ +/*! +Deck JS - deck.clone +Copyright (c) 2011 Remi BARRAQUAND +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module provides a support for cloning the deck. +*/ + +(function($, deck, undefined) { + var $d = $(document); + var clones = new Array(); + + $.extend(true, $[deck].defaults, { + selectors: { + clonepointer: ".clonepointer" + }, + classes: { + hasClones: 'has-clones' + }, + keys: { + clone: 67 // c + } + }); + + var cleanClones = function() { + var opts = $[deck]('getOptions'); + // remove closed windows + $.each(clones, function(index, clone) { + if (clone.closed()) { + clones.splice(index, 1); // remove element "index" + } + }); + // tag/untag the current container depending on the presence of clones + if (clones.length > 0) { + $("body").addClass(opts.classes.hasClones); + } else { + $("body").removeClass(opts.classes.hasClones); + } + }; + /* + jQuery.deck('addClone') + + Create a clone of this window and add it to the clones list. + */ + $[deck]('extend', 'addClone', function() { + clone = new DeckClone(); + clones.push(clone); + cleanClones(); + return clone; + }); + $[deck]('extend', 'pointerAt', function(rx, ry) { + var opts = $[deck]('getOptions'); + var r = $(".deck-current").get(0).getBoundingClientRect(); + var x = r.left + r.width * rx; + var y = r.top + r.height * ry; + var pos = {left: x, top: y}; + var current = $(".deck-current").get(0); + var pointers = $(opts.selectors.clonepointer); + if (pointers.get(0).parentNode != current) { // move them within the new slide if it changed + pointers.show().appendTo(".deck-current"); + } + pointers.offset(pos); + }); + + /* + jQuery.deck('Init') + */ + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'); + var container = $[deck]('getContainer'); + + $(opts.selectors.clonepointer).hide(); + + /* Bind key events */ + $d.unbind('keydown.deckclone').bind('keydown.deckclone', function(e) { + if (e.which === opts.keys.clone || $.inArray(e.which, opts.keys.clone) > -1) { + $[deck]('addClone'); + e.preventDefault(); + } + }); + }) + /* Update current slide number with each change event */ + .bind('deck.change', function(e, from, to) { + var opts = $[deck]('getOptions'); + var slideTo = $[deck]('getSlide', to); + var container = $[deck]('getContainer'); + cleanClones(); + $.each(clones, function(index, clone) { + clone.deck('go', to); + }); + }) + /* Do the animations locally */ + .bind('deck.step', function(e, delta) { + cleanClones(); + $.each(clones, function(index, clone) { + if (delta == -1) clone.deck('stepPrev'); + else if (delta == 1) clone.deck('stepNext'); + }); + }) + /* Replicate mouse cursor */ + .bind('mousemove', function(e) { + var r = $(".deck-current").get(0).getBoundingClientRect(); + var x = (e.clientX - r.left) / r.width; + var y = (e.clientY - r.top) / r.height; + cleanClones(); + $.each(clones, function(index, clone) { + clone.deck('pointerAt', x, y); + }); + }); + + /* + Simple Clone manager (must be improved, by for instance adding cloning + option e.g. propagate change, etc.) + */ + var DeckClone = function() { + var clone = window.open(window.location); + this.closed = function() {return clone.closed;} + this.deck = function() { + if (clone.closed) return; + if (clone['$']) clone['$'].deck.apply(clone['$'], arguments) + } + } +})(jQuery, 'deck'); \ No newline at end of file diff --git a/deck.js/extensions/events/README.md b/deck.js/extensions/events/README.md new file mode 100644 index 0000000..22d003e --- /dev/null +++ b/deck.js/extensions/events/README.md @@ -0,0 +1,64 @@ +# deck.events.js + +An extension for [deck.js][] allowing you to execute Javascript when a + slide becomes/leaves the current, next, or previous slide. + +## Requirements + +[deck.js][] + +## Events + +Each event is triggered "on" the slide on which the event occurs (see _Example_) + and given a single argument -- the direction (see _Direction_) + +* **deck.becameCurrent**: Triggered when a slide becomes the current one + (`to` in `deck.change`). +* **deck.lostCurrent**: The slide is no longer "current" + (`from` in `deck.change`). +* **deck.becamePrevious**: The slide (by order) just before the current slide. + (`to - 1` in `deck.change`). +* **deck.becameNext**: The slide (by order) just after the current slide. + (`to + 1` in `deck.change`). +* **deck.lostPrevious**: The slide (by order) just before the last current slide. + (`from - 1` in `deck.change`). +* **deck.lostNext**: The slide (by order) just after the last current slide. + (`from + 1` in `deck.change`). + + +## Direction + +Each event is given a direction that helps determine whether the user is + moving forward or backward in the slide stack. It is provided as an argument + for the event and can be either `forward` or `reverse`. Essentially: + +``` + if(from < to){ + direction = "forward"; + } + else{ + direction = "reverse"; + } +``` + + +## Example + +If you put a placeholder slide `
` into + your source, this event will display a Javascript graph when you visit the + slide (forward) and remove it if you hit the back arrow and return to + the slide. + +``` +$("#showGraph").bind('deck.becameCurrent', function(ev, direction) { + if(direction == "forward"){ + animateGraphIn(); + } + else{ + animateGraphOut(); + } +}); +``` + + +[deck.js]: https://github.com/imakewebthings/deck.js diff --git a/deck.js/extensions/events/deck.events.js b/deck.js/extensions/events/deck.events.js new file mode 100644 index 0000000..e00d28d --- /dev/null +++ b/deck.js/extensions/events/deck.events.js @@ -0,0 +1,23 @@ +(function($, deck, undefined) { + $(document).bind('deck.change', function(e, from, to) { + var $prev = $[deck]('getSlide', to-1), + $next = $[deck]('getSlide', to+1), + $oldprev = $[deck]('getSlide', from-1), + $oldnext = $[deck]('getSlide', from+1); + + var direction = "forward"; + if(from > to){ + direction = "reverse"; + } + + $[deck]('getSlide', to).trigger('deck.becameCurrent', [direction, from, to]); + $[deck]('getSlide', from).trigger('deck.lostCurrent', [direction, from, to]); + + $prev && $prev.trigger('deck.becamePrevious', [direction, from, to]); + $next && $next.trigger('deck.becameNext', [direction, from, to]); + + $oldprev && $oldprev.trigger('deck.lostPrevious', [direction, from, to]); + $oldnext && $oldnext.trigger('deck.lostNext', [direction, from, to]); + }); +})(jQuery, 'deck'); + diff --git a/deck.js/extensions/fit/deck.fit-fs.css b/deck.js/extensions/fit/deck.fit-fs.css new file mode 100644 index 0000000..fd58665 --- /dev/null +++ b/deck.js/extensions/fit/deck.fit-fs.css @@ -0,0 +1,14 @@ + +.deck-container { + width: 100%; height: 100%; /* to get a proper filling of the parent */ + margin: 0; padding: 0; /* any margin is handled by the parent or the fit extension */ + position: absolute; + left:0; top:0; width:100%; height:100%; + border: 0; +} +.deck-container>.slide { + width: 100%; height: 100%; /* to get a proper filling of the parent */ + min-width:0; min-height:0; /* undoing some hurting style in the defaults of deck.js */ + overflow: hidden; /* don't show slides outside of their box */ + /* margin:0; padding:0; /* remove possible margins */ +} diff --git a/deck.js/extensions/fit/deck.fit.js b/deck.js/extensions/fit/deck.fit.js new file mode 100644 index 0000000..ea71ef9 --- /dev/null +++ b/deck.js/extensions/fit/deck.fit.js @@ -0,0 +1,171 @@ +/*! + Deck JS - deck.fit + Copyright (c) 2012 Rémi Emonet + Dual licensed under the MIT license and GPL license. + https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt + https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* + This extension provides a way of scaling the slides to fit the slide container. + A "design size" is used to do global scaling of all slides in the same way. + The default design size is 800x600. +*/ +(function($, deck, window, undefined) { + var $d = $(document), + $w = $(window), + timer, // Timeout id for debouncing + rootSlides, + + /* + Internal function to do all the dirty work of scaling the slides. + */ + scaleDeck = function() { + var opts = $[deck]('getOptions'); + var addMarginX = opts.fitMarginX * 2; + var addMarginY = opts.fitMarginY * 2; + var fitMode = opts.fitMode; + var sdw = opts.designWidth; + var sdh = opts.designHeight; + var $container = $[deck]('getContainer'); + var scaleX = $container.hasClass(opts.classes.globalscale) ? $container.innerWidth() / (sdw+addMarginX) : 1; + var scaleY = $container.hasClass(opts.classes.globalscale) ? $container.innerHeight() / (sdh+addMarginY) : 1; + var truescaleX = $container.hasClass(opts.classes.globalscale) ? $container.innerWidth() / (sdw) : 1; + var truescaleY = $container.hasClass(opts.classes.globalscale) ? $container.innerHeight() / (sdh) : 1; + var scale = scaleX < scaleY ? scaleX : scaleY; + var rootSlides = []; + var slideTest = $.map([opts.classes.before, opts.classes.previous, opts.classes.current, opts.classes.next, opts.classes.after], + function(el, i) {return '.' + el;}).join(', '); + + $.each($[deck]('getSlides'), function(i, $el) { + if (!$el.parentsUntil(opts.selectors.container).length) { + rootSlides.push($el); + } + }); + $.each(rootSlides, function(i, $slide) { + $slide.width(sdw); + $slide.height(sdh); + $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) { + if (scale == 1) { + $slide.css(prefix + 'Transform', ''); + } else { + if (fitMode == "left top" || fitMode == "top left") { + // ok align left/top (ok with the percents) + $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%,50%) translate('+(addMarginX/2)+'px,'+(addMarginY/2)+'px)'); + } else if (fitMode == "center middle") { + // ok align center/middle + $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%, 50%) translate('+($container.innerWidth()/2/scale - sdw/2)+'px,'+($container.innerHeight()/2/scale - sdh/2)+'px)'); + } else if (fitMode == "right bottom" || fitMode == "bottom right") { + // ok align right/bottom + $slide.css(prefix + 'Transform', 'translate(-50%,-50%) scale(' + scale + ' , ' + scale + ') translate(50%, 50%) translate('+($container.innerWidth()/scale - sdw - addMarginX/2)+'px,'+($container.innerHeight()/scale - sdh - addMarginY/2)+'px)'); + } else if (fitMode == "stretched") { + // ok stretched (with respect of the margin, i.e., it is center/middle) + $slide.css(prefix + 'Transform', 'scale(' + scaleX + ' , ' + scaleY + ') translate('+(($container.innerWidth()-sdw)/2/scaleX)+'px,'+(($container.innerHeight()-sdh)/2/scaleY)+'px)'); + } + } + }); + }); + + } + + /* + Extends defaults/options. + + options.designWidth + Defaults to 800. You may instead specify a width as a number + of px and all slides will be scaled in the same way, considering their + size is the provided one. + + options.designHeight + Defaults to 600. You may instead specify a height as a number + of px and all slides will be scaled in the same way, considering their + size is the provided one. + + options.fitMode + How to adapt the slide to the container. + Only the following combinations are available for now: + "center middle", "top left", "bottom right", "stretched" + + options.fitMarginX + options.fitMarginY + Defaults to 5. Adds some margin in design space units. + E.g., if the designe width is 800 and the margin is 5, the slide will be + 810 pixel wide before rescaling. + + options.scaleDebounce + Scaling on the browser resize event is debounced. This number is the + threshold in milliseconds. You can learn more about debouncing here: + http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + + */ + $.extend(true, $[deck].defaults, { + classes: { + globalscale: 'deck-globalscale' + }, + keys: { + scale: 83 // s + }, + + designWidth: 800, + designHeight: 600, + fitMode: "center middle", + fitMarginX: 5, + fitMarginY: 5, + scaleDebounce: 200 + }); + + /* + jQuery.deck('disableScale') + + Disables scaling and removes the scale class from the deck container. + */ + $[deck]('extend', 'disableScale', function() { + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.globalscale); + scaleDeck(); + }); + + /* + jQuery.deck('enableScale') + + Enables scaling and adds the scale class to the deck container. + */ + $[deck]('extend', 'enableScale', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.globalscale); + scaleDeck(); + }); + + /* + jQuery.deck('toggleScale') + + Toggles between enabling and disabling scaling. + */ + $[deck]('extend', 'toggleScale', function() { + var $c = $[deck]('getContainer'); + $[deck]($c.hasClass($[deck]('getOptions').classes.globalscale) ? + 'disableScale' : 'enableScale'); + }); + + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'); + + // Debounce the resize scaling + $w.unbind('resize.deckscale').bind('resize.deckscale', function() { + window.clearTimeout(timer); + timer = window.setTimeout(scaleDeck, opts.scaleDebounce); + }) + // Scale once on load, in case images or something change layout + .unbind('load.deckscale').bind('load.deckscale', scaleDeck); + + // Bind key events + $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) { + if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) { + $[deck]('toggleScale'); + e.preventDefault(); + } + }); + + // Enable scale on init + $[deck]('enableScale'); + }); +})(jQuery, 'deck', this); + diff --git a/deck.js/extensions/goto/deck.goto.css b/deck.js/extensions/goto/deck.goto.css new file mode 100644 index 0000000..108e4f9 --- /dev/null +++ b/deck.js/extensions/goto/deck.goto.css @@ -0,0 +1,41 @@ +.deck-container .goto-form { + position: absolute; + z-index: 3; + bottom: 10px; + left: 50%; + height: 1.75em; + margin: 0 0 0 -9.125em; + line-height: 1.75em; + padding: 0.625em; + display: none; + background: #ccc; + overflow: hidden; +} +.borderradius .deck-container .goto-form { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +.deck-container .goto-form label { + font-weight: bold; +} +.deck-container .goto-form label, .deck-container .goto-form input { + display: inline-block; + font-family: inherit; +} + +.deck-goto .goto-form { + display: block; +} + +#goto-slide { + width: 8.375em; + margin: 0 0.625em; + height: 1.4375em; +} + +@media print { + .goto-form, #goto-slide { + display: none !important; + } +} diff --git a/deck.js/extensions/goto/deck.goto.html b/deck.js/extensions/goto/deck.goto.html new file mode 100644 index 0000000..e3b6a18 --- /dev/null +++ b/deck.js/extensions/goto/deck.goto.html @@ -0,0 +1,7 @@ + +
+ + + + +
\ No newline at end of file diff --git a/deck.js/extensions/goto/deck.goto.js b/deck.js/extensions/goto/deck.goto.js new file mode 100644 index 0000000..eedba10 --- /dev/null +++ b/deck.js/extensions/goto/deck.goto.js @@ -0,0 +1,170 @@ +/*! +Deck JS - deck.goto +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds the necessary methods and key bindings to show and hide a form +for jumping to any slide number/id in the deck (and processes that form +accordingly). The form-showing state is indicated by the presence of a class on +the deck container. +*/ +(function($, deck, undefined) { + var $d = $(document); + + /* + Extends defaults/options. + + options.classes.goto + This class is added to the deck container when showing the Go To Slide + form. + + options.selectors.gotoDatalist + The element that matches this selector is the datalist element that will + be populated with options for each of the slide ids. In browsers that + support the datalist element, this provides a drop list of slide ids to + aid the user in selecting a slide. + + options.selectors.gotoForm + The element that matches this selector is the form that is submitted + when a user hits enter after typing a slide number/id in the gotoInput + element. + + options.selectors.gotoInput + The element that matches this selector is the text input field for + entering a slide number/id in the Go To Slide form. + + options.keys.goto + The numeric keycode used to show the Go To Slide form. + + options.countNested + If false, only top level slides will be counted when entering a + slide number. + */ + $.extend(true, $[deck].defaults, { + classes: { + goto: 'deck-goto' + }, + + selectors: { + gotoDatalist: '#goto-datalist', + gotoForm: '.goto-form', + gotoInput: '#goto-slide' + }, + + keys: { + goto: 71 // g + }, + + countNested: true + }); + + /* + jQuery.deck('showGoTo') + + Shows the Go To Slide form by adding the class specified by the goto class + option to the deck container. + */ + $[deck]('extend', 'showGoTo', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.goto); + $($[deck]('getOptions').selectors.gotoInput).focus(); + }); + + /* + jQuery.deck('hideGoTo') + + Hides the Go To Slide form by removing the class specified by the goto class + option from the deck container. + */ + $[deck]('extend', 'hideGoTo', function() { + $($[deck]('getOptions').selectors.gotoInput).blur(); + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto); + }); + + /* + jQuery.deck('toggleGoTo') + + Toggles between showing and hiding the Go To Slide form. + */ + $[deck]('extend', 'toggleGoTo', function() { + $[deck]($[deck]('getContainer').hasClass($[deck]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo'); + }); + + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'), + $datalist = $(opts.selectors.gotoDatalist), + slideTest = $.map([ + opts.classes.before, + opts.classes.previous, + opts.classes.current, + opts.classes.next, + opts.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '), + rootCounter = 1; + + // Bind key events + $d.unbind('keydown.deckgoto').bind('keydown.deckgoto', function(e) { + var key = $[deck]('getOptions').keys.goto; + + if (e.which === key || $.inArray(e.which, key) > -1) { + e.preventDefault(); + $[deck]('toggleGoTo'); + } + }); + + /* Populate datalist and work out countNested*/ + $.each($[deck]('getSlides'), function(i, $slide) { + var id = $slide.attr('id'), + $parentSlides = $slide.parentsUntil(opts.selectors.container, slideTest); + + if (id) { + $datalist.append('