From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- README.txt | 25 + deck.js/core/deck.core.css | 407 ++++ deck.js/core/deck.core.js | 498 +++++ deck.js/core/deck.core.scss | 450 +++++ 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 ++ deck.js/jquery-1.7.2.min.js | 4 + deck.js/libs/display-latex2.user.js | 2056 ++++++++++++++++++++ deck.js/libs/jquerysvg/blank.svg | 3 + deck.js/libs/jquerysvg/jquery.svg.css | 15 + deck.js/libs/jquerysvg/jquery.svg.min.js | 20 + deck.js/libs/jquerysvg/jquery.svganim.min.js | 7 + deck.js/libs/jquerysvg/jquery.svgdom.min.js | 7 + deck.js/libs/jquerysvg/jquery.svgfilter.min.js | 7 + deck.js/libs/jquerysvg/jquery.svggraph.min.js | 7 + deck.js/libs/jquerysvg/jquery.svgplot.min.js | 7 + deck.js/modernizr.custom.js | 4 + deck.js/samples/circle.svg | 167 ++ deck.js/samples/deck-anim.html | 182 ++ deck.js/samples/deck-clone.html | 195 ++ deck.js/samples/deck-fit.html | 229 +++ deck.js/samples/deck-simplemath.html | 151 ++ deck.js/samples/deck-smartsyntax.html | 191 ++ deck.js/samples/deck-step.html | 174 ++ deck.js/samples/deck-svg.html | 368 ++++ deck.js/samples/rectangle.png | Bin 0 -> 216 bytes deck.js/samples/simple.ogv | Bin 0 -> 237046 bytes deck.js/samples/smiley.svg | 272 +++ deck.js/themes/style/neon.css | 123 ++ deck.js/themes/style/neon.scss | 155 ++ deck.js/themes/style/swiss.css | 84 + deck.js/themes/style/swiss.scss | 107 + deck.js/themes/style/web-2.0.css | 192 ++ deck.js/themes/style/web-2.0.scss | 250 +++ deck.js/themes/transition/fade.css | 43 + deck.js/themes/transition/fade.scss | 69 + deck.js/themes/transition/horizontal-slide.css | 76 + deck.js/themes/transition/horizontal-slide.scss | 90 + deck.js/themes/transition/vertical-slide.css | 94 + deck.js/themes/transition/vertical-slide.scss | 112 ++ logo.png | Bin 0 -> 425671 bytes presentation.html | 356 ++++ qrcode.png | Bin 0 -> 6463 bytes 76 files changed, 9771 insertions(+) create mode 100644 README.txt create mode 100644 deck.js/core/deck.core.css create mode 100644 deck.js/core/deck.core.js create mode 100755 deck.js/core/deck.core.scss 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 create mode 100644 deck.js/jquery-1.7.2.min.js create mode 100644 deck.js/libs/display-latex2.user.js create mode 100644 deck.js/libs/jquerysvg/blank.svg create mode 100644 deck.js/libs/jquerysvg/jquery.svg.css create mode 100644 deck.js/libs/jquerysvg/jquery.svg.min.js create mode 100644 deck.js/libs/jquerysvg/jquery.svganim.min.js create mode 100644 deck.js/libs/jquerysvg/jquery.svgdom.min.js create mode 100644 deck.js/libs/jquerysvg/jquery.svgfilter.min.js create mode 100644 deck.js/libs/jquerysvg/jquery.svggraph.min.js create mode 100644 deck.js/libs/jquerysvg/jquery.svgplot.min.js create mode 100644 deck.js/modernizr.custom.js create mode 100755 deck.js/samples/circle.svg create mode 100644 deck.js/samples/deck-anim.html create mode 100644 deck.js/samples/deck-clone.html create mode 100644 deck.js/samples/deck-fit.html create mode 100644 deck.js/samples/deck-simplemath.html create mode 100644 deck.js/samples/deck-smartsyntax.html create mode 100644 deck.js/samples/deck-step.html create mode 100644 deck.js/samples/deck-svg.html create mode 100644 deck.js/samples/rectangle.png create mode 100644 deck.js/samples/simple.ogv create mode 100755 deck.js/samples/smiley.svg create mode 100644 deck.js/themes/style/neon.css create mode 100644 deck.js/themes/style/neon.scss create mode 100644 deck.js/themes/style/swiss.css create mode 100644 deck.js/themes/style/swiss.scss create mode 100644 deck.js/themes/style/web-2.0.css create mode 100644 deck.js/themes/style/web-2.0.scss create mode 100644 deck.js/themes/transition/fade.css create mode 100644 deck.js/themes/transition/fade.scss create mode 100644 deck.js/themes/transition/horizontal-slide.css create mode 100644 deck.js/themes/transition/horizontal-slide.scss create mode 100644 deck.js/themes/transition/vertical-slide.css create mode 100644 deck.js/themes/transition/vertical-slide.scss create mode 100644 logo.png create mode 100644 presentation.html create mode 100644 qrcode.png diff --git a/README.txt b/README.txt new file mode 100644 index 0000000..c09a67a --- /dev/null +++ b/README.txt @@ -0,0 +1,25 @@ + +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. + + + + +04c1b457865731e05d153f7c0f70b585f9bdf2fb diff --git a/deck.js/core/deck.core.css b/deck.js/core/deck.core.css new file mode 100644 index 0000000..277192f --- /dev/null +++ b/deck.js/core/deck.core.css @@ -0,0 +1,407 @@ +html, body { + height: 100%; + padding: 0; + margin: 0; +} + +body.deck-container { + overflow-y: auto; + position: static; +} + +.deck-container { + position: relative; + min-height: 100%; + margin: 0 auto; + padding: 0 48px; + font-size: 16px; + line-height: 1.25; + overflow: hidden; + /* Resets and base styles from HTML5 Boilerplate */ + /* End HTML5 Boilerplate adaptations */ +} +.js .deck-container { + visibility: hidden; +} +.ready .deck-container { + visibility: visible; +} +.touch .deck-container { + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; +} +.deck-container div, .deck-container span, .deck-container object, .deck-container iframe, +.deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container h5, .deck-container h6, .deck-container p, .deck-container blockquote, .deck-container pre, +.deck-container abbr, .deck-container address, .deck-container cite, .deck-container code, .deck-container del, .deck-container dfn, .deck-container em, .deck-container img, .deck-container ins, .deck-container kbd, .deck-container q, .deck-container samp, +.deck-container small, .deck-container strong, .deck-container sub, .deck-container sup, .deck-container var, .deck-container b, .deck-container i, .deck-container dl, .deck-container dt, .deck-container dd, .deck-container ol, .deck-container ul, .deck-container li, +.deck-container fieldset, .deck-container form, .deck-container label, .deck-container legend, +.deck-container table, .deck-container caption, .deck-container tbody, .deck-container tfoot, .deck-container thead, .deck-container tr, .deck-container th, .deck-container td, +.deck-container article, .deck-container aside, .deck-container canvas, .deck-container details, .deck-container figcaption, .deck-container figure, +.deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section, .deck-container summary, +.deck-container time, .deck-container mark, .deck-container audio, .deck-container video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +.deck-container article, .deck-container aside, .deck-container details, .deck-container figcaption, .deck-container figure, +.deck-container footer, .deck-container header, .deck-container hgroup, .deck-container menu, .deck-container nav, .deck-container section { + display: block; +} +.deck-container blockquote, .deck-container q { + quotes: none; +} +.deck-container blockquote:before, .deck-container blockquote:after, .deck-container q:before, .deck-container q:after { + content: ""; + content: none; +} +.deck-container ins { + background-color: #ff9; + color: #000; + text-decoration: none; +} +.deck-container mark { + background-color: #ff9; + color: #000; + font-style: italic; + font-weight: bold; +} +.deck-container del { + text-decoration: line-through; +} +.deck-container abbr[title], .deck-container dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} +.deck-container table { + border-collapse: collapse; + border-spacing: 0; +} +.deck-container hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} +.deck-container input, .deck-container select { + vertical-align: middle; +} +.deck-container select, .deck-container input, .deck-container textarea, .deck-container button { + font: 99% sans-serif; +} +.deck-container pre, .deck-container code, .deck-container kbd, .deck-container samp { + font-family: monospace, sans-serif; +} +.deck-container a { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.deck-container a:hover, .deck-container a:active { + outline: none; +} +.deck-container ul, .deck-container ol { + margin-left: 2em; + vertical-align: top; +} +.deck-container ol { + list-style-type: decimal; +} +.deck-container nav ul, .deck-container nav li { + margin: 0; + list-style: none; + list-style-image: none; +} +.deck-container small { + font-size: 85%; +} +.deck-container strong, .deck-container th { + font-weight: bold; +} +.deck-container td { + vertical-align: top; +} +.deck-container sub, .deck-container sup { + font-size: 75%; + line-height: 0; + position: relative; +} +.deck-container sup { + top: -0.5em; +} +.deck-container sub { + bottom: -0.25em; +} +.deck-container textarea { + overflow: auto; +} +.ie6 .deck-container legend, .ie7 .deck-container legend { + margin-left: -7px; +} +.deck-container input[type="radio"] { + vertical-align: text-bottom; +} +.deck-container input[type="checkbox"] { + vertical-align: bottom; +} +.ie7 .deck-container input[type="checkbox"] { + vertical-align: baseline; +} +.ie6 .deck-container input { + vertical-align: text-bottom; +} +.deck-container label, .deck-container input[type="button"], .deck-container input[type="submit"], .deck-container input[type="image"], .deck-container button { + cursor: pointer; +} +.deck-container button, .deck-container input, .deck-container select, .deck-container textarea { + margin: 0; +} +.deck-container input:invalid, .deck-container textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} +.deck-container input:invalid .no-boxshadow, .deck-container textarea:invalid .no-boxshadow { + background-color: #f0dddd; +} +.deck-container button { + width: auto; + overflow: visible; +} +.ie7 .deck-container img { + -ms-interpolation-mode: bicubic; +} +.deck-container, .deck-container select, .deck-container input, .deck-container textarea { + color: #eee; +} +.deck-container a { + color: #607890; +} +.deck-container a:hover, .deck-container a:focus { + color: #036; +} +.deck-container a:link { + -webkit-tap-highlight-color: #fff; +} +.deck-container.deck-loading { + display: none; +} + +.slide { + width: auto; + min-height: 100%; + position: relative; +} +.slide h1 { + font-size: 4.5em; +} +.slide h1, .slide .vcenter { + font-weight: bold; + text-align: center; + padding-top: 1em; + max-height: 100%; +} +.csstransforms .slide h1, .csstransforms .slide .vcenter { + padding: 0 48px; + position: absolute; + left: 0; + right: 0; + top: 50%; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.slide .vcenter h1 { + position: relative; + top: auto; + padding: 0; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; +} +.slide h2 { + font-size: 2.25em; + font-weight: bold; + padding-top: .5em; + margin: 0 0 .66666em 0; + border-bottom: 3px solid #888; +} +.slide h3 { + font-size: 1.4375em; + font-weight: bold; + margin-bottom: .30435em; +} +.slide h4 { + font-size: 1.25em; + font-weight: bold; + margin-bottom: .25em; +} +.slide h5 { + font-size: 1.125em; + font-weight: bold; + margin-bottom: .2222em; +} +.slide h6 { + font-size: 1em; + font-weight: bold; +} +.slide img, .slide iframe, .slide video { + display: block; + max-width: 100%; +} +.slide video, .slide iframe, .slide img { + display: block; + margin: 0 auto; +} +.slide p, .slide blockquote, .slide iframe, .slide img, .slide ul, .slide ol, .slide pre, .slide video { + margin-bottom: 1em; +} +.slide pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + padding: 1em; + border: 1px solid #888; +} +.slide em { + font-style: italic; +} +.slide li { + padding: .25em 0; + vertical-align: middle; +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position: absolute; + left: -999em; + top: -999em; +} + +.deck-current { + z-index: 2; +} + +.slide .slide { + visibility: hidden; + position: static; + min-height: 0; +} + +.deck-child-current { + position: static; + z-index: 2; +} +.deck-child-current .slide { + visibility: hidden; +} +.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current { + visibility: visible; +} + +@media screen and (max-device-width: 480px) { + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} +@media print { + * { + background: transparent !important; + color: black !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + -webkit-box-reflect: none !important; + -moz-box-reflect: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + * :before, * :after { + display: none !important; + } + + a, a:visited { + color: #444 !important; + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; + } + + pre, blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; + } + + tr, img { + page-break-inside: avoid; + } + + @page { + margin: 0.5cm; +} + + p, h2, h3 { + orphans: 3; + widows: 3; + } + + h2, h3 { + page-break-after: avoid; + } + + .slide { + position: static !important; + visibility: visible !important; + display: block !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; + opacity: 1 !important; + } + + h1, .vcenter { + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; + padding: 0 !important; + position: static !important; + } + + .deck-container > .slide { + page-break-after: always; + } + + .deck-container { + width: 100% !important; + height: auto !important; + padding: 0 !important; + display: block !important; + } + + script { + display: none; + } +} diff --git a/deck.js/core/deck.core.js b/deck.js/core/deck.core.js new file mode 100644 index 0000000..997942c --- /dev/null +++ b/deck.js/core/deck.core.js @@ -0,0 +1,498 @@ +/*! +Deck JS - deck.core +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 +*/ + +/* +The deck.core module provides all the basic functionality for creating and +moving through a deck. It does so by applying classes to indicate the state of +the deck and its slides, allowing CSS to take care of the visual representation +of each state. It also provides methods for navigating the deck and inspecting +its state, as well as basic key bindings for going to the next and previous +slides. More functionality is provided by wholly separate extension modules +that use the API provided by core. +*/ +(function($, deck, document, undefined) { + var slides, // Array of all the uh, slides... + current, // Array index of the current slide + $container, // Keeping this cached + + events = { + /* + This event fires whenever the current slide changes, whether by way of + next, prev, or go. The callback function is passed two parameters, from + and to, equal to the indices of the old slide and the new slide + respectively. If preventDefault is called on the event within this handler + the slide change does not occur. + + $(document).bind('deck.change', function(event, from, to) { + alert('Moving from slide ' + from + ' to ' + to); + }); + */ + change: 'deck.change', + + /* + This event fires at the beginning of deck initialization, after the options + are set but before the slides array is created. This event makes a good hook + for preprocessing extensions looking to modify the deck. + */ + beforeInitialize: 'deck.beforeInit', + + /* + This event fires at the end of deck initialization. Extensions should + implement any code that relies on user extensible options (key bindings, + element selectors, classes) within a handler for this event. Native + events associated with Deck JS should be scoped under a .deck event + namespace, as with the example below: + + var $d = $(document); + $.deck.defaults.keys.myExtensionKeycode = 70; // 'h' + $d.bind('deck.init', function() { + $d.bind('keydown.deck', function(event) { + if (event.which === $.deck.getOptions().keys.myExtensionKeycode) { + // Rock out + } + }); + }); + */ + initialize: 'deck.init' + }, + + options = {}, + $d = $(document), + + /* + Internal function. Updates slide and container classes based on which + slide is the current slide. + */ + updateStates = function() { + var oc = options.classes, + osc = options.selectors.container, + old = $container.data('onSlide'), + $all = $(); + + // Container state + $container.removeClass(oc.onPrefix + old) + .addClass(oc.onPrefix + current) + .data('onSlide', current); + + // Remove and re-add child-current classes for nesting + $('.' + oc.current).parentsUntil(osc).removeClass(oc.childCurrent); + slides[current].parentsUntil(osc).addClass(oc.childCurrent); + + // Remove previous states + $.each(slides, function(i, el) { + $all = $all.add(el); + }); + $all.removeClass([ + oc.before, + oc.previous, + oc.current, + oc.next, + oc.after + ].join(" ")); + + // Add new states back in + slides[current].addClass(oc.current); + if (current > 0) { + slides[current-1].addClass(oc.previous); + } + if (current + 1 < slides.length) { + slides[current+1].addClass(oc.next); + } + if (current > 1) { + $.each(slides.slice(0, current - 1), function(i, el) { + el.addClass(oc.before); + }); + } + if (current + 2 < slides.length) { + $.each(slides.slice(current+2), function(i, el) { + el.addClass(oc.after); + }); + } + }, + + /* Methods exposed in the jQuery.deck namespace */ + methods = { + + /* + jQuery.deck(selector, options) + + selector: string | jQuery | array + options: object, optional + + Initializes the deck, using each element matched by selector as a slide. + May also be passed an array of string selectors or jQuery objects, in + which case each selector in the array is considered a slide. The second + parameter is an optional options object which will extend the default + values. + + $.deck('.slide'); + + or + + $.deck([ + '#first-slide', + '#second-slide', + '#etc' + ]); + */ + init: function(elements, opts) { + var startTouch, + tolerance, + esp = function(e) { + e.stopPropagation(); + }; + + options = $.extend(true, {}, $[deck].defaults, opts); + slides = []; + current = 0; + $container = $(options.selectors.container); + tolerance = options.touch.swipeTolerance; + + // Pre init event for preprocessing hooks + $d.trigger(events.beforeInitialize); + + // Hide the deck while states are being applied to kill transitions + $container.addClass(options.classes.loading); + + // Fill slides array depending on parameter type + if ($.isArray(elements)) { + $.each(elements, function(i, e) { + slides.push($(e)); + }); + } + else { + $(elements).each(function(i, e) { + slides.push($(e)); + }); + } + + /* Remove any previous bindings, and rebind key events */ + $d.unbind('keydown.deck').bind('keydown.deck', function(e) { + if (e.which === options.keys.next || $.inArray(e.which, options.keys.next) > -1) { + methods.next(); + e.preventDefault(); + } + else if (e.which === options.keys.previous || $.inArray(e.which, options.keys.previous) > -1) { + methods.prev(); + e.preventDefault(); + } + }) + /* Stop propagation of key events within editable elements */ + .undelegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp) + .delegate('input, textarea, select, button, meter, progress, [contentEditable]', 'keydown', esp); + + /* Bind touch events for swiping between slides on touch devices */ + $container.unbind('touchstart.deck').bind('touchstart.deck', function(e) { + if (!startTouch) { + startTouch = $.extend({}, e.originalEvent.targetTouches[0]); + } + }) + .unbind('touchmove.deck').bind('touchmove.deck', function(e) { + $.each(e.originalEvent.changedTouches, function(i, t) { + if (startTouch && t.identifier === startTouch.identifier) { + if (t.screenX - startTouch.screenX > tolerance || t.screenY - startTouch.screenY > tolerance) { + $[deck]('prev'); + startTouch = undefined; + } + else if (t.screenX - startTouch.screenX < -1 * tolerance || t.screenY - startTouch.screenY < -1 * tolerance) { + $[deck]('next'); + startTouch = undefined; + } + return false; + } + }); + e.preventDefault(); + }) + .unbind('touchend.deck').bind('touchend.deck', function(t) { + $.each(t.originalEvent.changedTouches, function(i, t) { + if (startTouch && t.identifier === startTouch.identifier) { + startTouch = undefined; + } + }); + }) + .scrollLeft(0).scrollTop(0); + + /* + Kick iframe videos, which dont like to redraw w/ transforms. + Remove this if Webkit ever fixes it. + */ + $.each(slides, function(i, $el) { + $el.unbind('webkitTransitionEnd.deck').bind('webkitTransitionEnd.deck', + function(event) { + if ($el.hasClass($[deck]('getOptions').classes.current)) { + var embeds = $(this).find('iframe').css('opacity', 0); + window.setTimeout(function() { + embeds.css('opacity', 1); + }, 100); + } + }); + }); + + if (slides.length) { + updateStates(); + } + + // Show deck again now that slides are in place + $container.removeClass(options.classes.loading); + $d.trigger(events.initialize); + }, + + /* + jQuery.deck('go', index) + + index: integer | string + + Moves to the slide at the specified index if index is a number. Index is + 0-based, so $.deck('go', 0); will move to the first slide. If index is a + string this will move to the slide with the specified id. If index is out + of bounds or doesn't match a slide id the call is ignored. + */ + go: function(index) { + var e = $.Event(events.change), + ndx; + + /* Number index, easy. */ + if (typeof index === 'number' && index >= 0 && index < slides.length) { + ndx = index; + } + /* Id string index, search for it and set integer index */ + else if (typeof index === 'string') { + $.each(slides, function(i, $slide) { + if ($slide.attr('id') === index) { + ndx = i; + return false; + } + }); + }; + + /* Out of bounds, id doesn't exist, illegal input, eject */ + if (typeof ndx === 'undefined') return; + + $d.trigger(e, [current, ndx]); + if (e.isDefaultPrevented()) { + /* Trigger the event again and undo the damage done by extensions. */ + $d.trigger(events.change, [ndx, current]); + } + else { + current = ndx; + updateStates(); + } + }, + + /* + jQuery.deck('next') + + Moves to the next slide. If the last slide is already active, the call + is ignored. + */ + next: function() { + methods.go(current+1); + }, + + /* + jQuery.deck('prev') + + Moves to the previous slide. If the first slide is already active, the + call is ignored. + */ + prev: function() { + methods.go(current-1); + }, + + /* + jQuery.deck('getSlide', index) + + index: integer, optional + + Returns a jQuery object containing the slide at index. If index is not + specified, the current slide is returned. + */ + getSlide: function(index) { + var i = typeof index !== 'undefined' ? index : current; + if (typeof i != 'number' || i < 0 || i >= slides.length) return null; + return slides[i]; + }, + + /* + jQuery.deck('getSlides') + + Returns all slides as an array of jQuery objects. + */ + getSlides: function() { + return slides; + }, + + /* + jQuery.deck('getContainer') + + Returns a jQuery object containing the deck container as defined by the + container option. + */ + getContainer: function() { + return $container; + }, + + /* + jQuery.deck('getOptions') + + Returns the options object for the deck, including any overrides that + were defined at initialization. + */ + getOptions: function() { + return options; + }, + + /* + jQuery.deck('extend', name, method) + + name: string + method: function + + Adds method to the deck namespace with the key of name. This doesn’t + give access to any private member data — public methods must still be + used within method — but lets extension authors piggyback on the deck + namespace rather than pollute jQuery. + + $.deck('extend', 'alert', function(msg) { + alert(msg); + }); + + // Alerts 'boom' + $.deck('alert', 'boom'); + */ + extend: function(name, method) { + methods[name] = method; + } + }; + + /* jQuery extension */ + $[deck] = function(method, arg) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } + else { + return methods.init(method, arg); + } + }; + + /* + The default settings object for a deck. All deck extensions should extend + this object to add defaults for any of their options. + + options.classes.after + This class is added to all slides that appear after the 'next' slide. + + options.classes.before + This class is added to all slides that appear before the 'previous' + slide. + + options.classes.childCurrent + This class is added to all elements in the DOM tree between the + 'current' slide and the deck container. For standard slides, this is + mostly seen and used for nested slides. + + options.classes.current + This class is added to the current slide. + + options.classes.loading + This class is applied to the deck container during loading phases and is + primarily used as a way to short circuit transitions between states + where such transitions are distracting or unwanted. For example, this + class is applied during deck initialization and then removed to prevent + all the slides from appearing stacked and transitioning into place + on load. + + options.classes.next + This class is added to the slide immediately following the 'current' + slide. + + options.classes.onPrefix + This prefix, concatenated with the current slide index, is added to the + deck container as you change slides. + + options.classes.previous + This class is added to the slide immediately preceding the 'current' + slide. + + options.selectors.container + Elements matched by this CSS selector will be considered the deck + container. The deck container is used to scope certain states of the + deck, as with the onPrefix option, or with extensions such as deck.goto + and deck.menu. + + options.keys.next + The numeric keycode used to go to the next slide. + + options.keys.previous + The numeric keycode used to go to the previous slide. + + options.touch.swipeTolerance + The number of pixels the users finger must travel to produce a swipe + gesture. + */ + $[deck].defaults = { + classes: { + after: 'deck-after', + before: 'deck-before', + childCurrent: 'deck-child-current', + current: 'deck-current', + loading: 'deck-loading', + next: 'deck-next', + onPrefix: 'on-slide-', + previous: 'deck-previous' + }, + + selectors: { + container: '.deck-container' + }, + + keys: { + // enter, space, page down, right arrow, down arrow, + next: [13, 32, 34, 39, 40], + // backspace, page up, left arrow, up arrow + previous: [8, 33, 37, 38] + }, + + touch: { + swipeTolerance: 60 + } + }; + + $d.ready(function() { + $('html').addClass('ready'); + }); + + /* + FF + Transforms + Flash video don't get along... + Firefox will reload and start playing certain videos after a + transform. Blanking the src when a previously shown slide goes out + of view prevents this. + */ + $d.bind('deck.change', function(e, from, to) { + var oldFrames = $[deck]('getSlide', from).find('iframe'), + newFrames = $[deck]('getSlide', to).find('iframe'); + + oldFrames.each(function() { + var $this = $(this), + curSrc = $this.attr('src'); + + if(curSrc) { + $this.data('deck-src', curSrc).attr('src', ''); + } + }); + + newFrames.each(function() { + var $this = $(this), + originalSrc = $this.data('deck-src'); + + if (originalSrc) { + $this.attr('src', originalSrc); + } + }); + }); +})(jQuery, 'deck', document); diff --git a/deck.js/core/deck.core.scss b/deck.js/core/deck.core.scss new file mode 100755 index 0000000..6721050 --- /dev/null +++ b/deck.js/core/deck.core.scss @@ -0,0 +1,450 @@ +html, body { + height:100%; + padding:0; + margin:0; +} + +body.deck-container { + overflow-y:auto; + position:static; +} + +.deck-container { + position:relative; + min-height:100%; + margin:0 auto; + padding:0 48px; + font-size:16px; + line-height:1.25; + overflow:hidden; + + .js & { + visibility:hidden; + } + + .ready & { + visibility:visible; + } + + .touch & { + -webkit-text-size-adjust:none; + -moz-text-size-adjust:none; + } + + /* Resets and base styles from HTML5 Boilerplate */ + div, span, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, + small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, figcaption, figure, + footer, header, hgroup, menu, nav, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + blockquote, q { + quotes:none; + + &:before, &:after { + content:""; + content:none; + } + } + + ins { + background-color:#ff9; + color:#000; + text-decoration:none; + } + + mark { + background-color:#ff9; + color:#000; + font-style:italic; + font-weight:bold; + } + + del { + text-decoration:line-through; + } + + abbr[title], dfn[title] { + border-bottom:1px dotted; + cursor:help; + } + + table { + border-collapse:collapse; + border-spacing:0; + } + + hr { + display:block; + height:1px; + border:0; + border-top:1px solid #ccc; + margin:1em 0; + padding:0; + } + + input, select { + vertical-align:middle; + } + + select, input, textarea, button { + font:99% sans-serif; + } + + pre, code, kbd, samp { + font-family:monospace, sans-serif; + } + + a { + -webkit-tap-highlight-color:rgba(0,0,0,0); + + &:hover, &:active { + outline:none; + } + } + + ul, ol { + margin-left:2em; + vertical-align:top; + } + + ol { + list-style-type:decimal; + } + + nav { + ul, li { + margin:0; + list-style:none; + list-style-image:none; + } + } + + small { + font-size:85%; + } + + strong, th { + font-weight:bold; + } + + td { + vertical-align:top; + } + + sub, sup { + font-size:75%; + line-height:0; + position:relative; + } + + sup { + top:-0.5em; + } + + sub { bottom: -0.25em; } + + textarea { + overflow:auto; + } + + legend { + .ie6 &, .ie7 & { + margin-left:-7px; + } + } + + input[type="radio"] { + vertical-align:text-bottom; + } + + input[type="checkbox"] { + vertical-align:bottom; + } + + .ie7 & input[type="checkbox"] { + vertical-align:baseline; + } + + .ie6 & input { + vertical-align:text-bottom; + } + + label, input[type="button"], input[type="submit"], input[type="image"], button { + cursor:pointer; + } + + button, input, select, textarea { + margin: 0; + } + + input, textarea { + &:invalid { + border-radius:1px; + -moz-box-shadow:0px 0px 5px red; + -webkit-box-shadow:0px 0px 5px red; + box-shadow: 0px 0px 5px red; + + .no-boxshadow { + background-color: #f0dddd; + } + } + } + + button { + width:auto; + overflow:visible; + } + + .ie7 & img { + -ms-interpolation-mode: bicubic; } + + &, select, input, textarea { + color:#444; + } + + a { + color:#607890; + + &:hover, &:focus { + color:#036; + } + + &:link { + -webkit-tap-highlight-color: #fff; + } + } + /* End HTML5 Boilerplate adaptations */ + + &.deck-loading { + display:none; + } +} + +.slide { + width:auto; + min-height:100%; + position:relative; + + h1 { + font-size:4.5em; + } + + h1, .vcenter { + font-weight:bold; + text-align:center; + padding-top:1em; + max-height:100%; + + .csstransforms & { + padding:0 48px; + position:absolute; + left:0; + right:0; + top:50%; + -webkit-transform:translate(0, -50%); + -moz-transform:translate(0, -50%); + -ms-transform:translate(0, -50%); + -o-transform:translate(0, -50%); + transform:translate(0, -50%); + } + } + + .vcenter h1 { + position:relative; + top:auto; + padding:0; + -webkit-transform:none; + -moz-transform:none; + -ms-transform:none; + -o-transform:none; + transform:none; + } + + h2 { + font-size:2.25em; + font-weight:bold; + padding-top:.5em; + margin:0 0 .66666em 0; + border-bottom:3px solid #888; + } + + h3 { + font-size:1.4375em; + font-weight:bold; + margin-bottom:.30435em; + } + + h4 { + font-size:1.25em; + font-weight:bold; + margin-bottom:.25em; + } + + h5 { + font-size:1.125em; + font-weight:bold; + margin-bottom:.2222em; + } + + h6 { + font-size:1em; + font-weight:bold; + } + + img, iframe, video { + display:block; + max-width:100%; + } + + video, iframe, img { + display:block; + margin:0 auto; + } + + p, blockquote, iframe, img, ul, ol, pre, video { + margin-bottom:1em; + } + + pre { + white-space:pre; + white-space:pre-wrap; + word-wrap:break-word; + padding: 1em; + border:1px solid #888; + } + + em { + font-style:italic; + } + + li { + padding:.25em 0; + vertical-align:middle; + } +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position:absolute; + left:-999em; + top:-999em; +} + +.deck-current { + z-index:2; +} + +.slide .slide { + visibility:hidden; + position:static; + min-height:0; +} + +.deck-child-current { + position:static; + z-index:2; + + .slide { + visibility:hidden; + } + + .deck-previous, .deck-before, .deck-current { + visibility:visible; + } +} + +@media all and (orientation:portrait) { + +} + +@media all and (orientation:landscape) { + +} + +@media screen and (max-device-width: 480px) { + + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +@media print { + * { + background: transparent !important; + color: black !important; + text-shadow: none !important; + filter:none !important; + -ms-filter: none !important; + -webkit-box-reflect:none !important; + -moz-box-reflect:none !important; + -webkit-box-shadow:none !important; + -moz-box-shadow:none !important; + box-shadow:none !important; + + :before, :after { + display:none !important; + } +} + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } + + .slide { + position:static !important; + visibility:visible !important; + display:block !important; + -webkit-transform:none !important; + -moz-transform:none !important; + -o-transform:none !important; + -ms-transform:none !important; + transform:none !important; + opacity:1 !important; + } + + h1, .vcenter { + -webkit-transform:none !important; + -moz-transform:none !important; + -o-transform:none !important; + -ms-transform:none !important; + transform:none !important; + padding:0 !important; + position:static !important; + } + + .deck-container > .slide { + page-break-after: always; + } + + .deck-container { + width:100% !important; + height:auto !important; + padding:0 !important; + display:block !important; + } + + script { + display:none; + } +} 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('