diff options
| -rw-r--r-- | deck.js/extensions/automatic/VERSION | 1 | ||||
| -rw-r--r-- | deck.js/extensions/automatic/deck.automatic.css | 40 | ||||
| -rw-r--r-- | deck.js/extensions/automatic/deck.automatic.js | 185 | ||||
| -rw-r--r-- | index.html (renamed from presentation.html) | 33 |
4 files changed, 244 insertions, 15 deletions
diff --git a/deck.js/extensions/automatic/VERSION b/deck.js/extensions/automatic/VERSION new file mode 100644 index 0000000..afaf360 --- /dev/null +++ b/deck.js/extensions/automatic/VERSION @@ -0,0 +1 @@ +1.0.0
\ No newline at end of file diff --git a/deck.js/extensions/automatic/deck.automatic.css b/deck.js/extensions/automatic/deck.automatic.css new file mode 100644 index 0000000..8977540 --- /dev/null +++ b/deck.js/extensions/automatic/deck.automatic.css @@ -0,0 +1,40 @@ +.deck-container .deck-automatic-link { + position:absolute; + z-index:3; + bottom: 0; + left:49%; + margin-top:-16px; + font-size:20px; + font-weight:bold; + line-height:32px; + vertical-align:middle; + text-align:center; + text-decoration:none; + cursor: pointer; +} + +.deck-container .deck-automatic-link.deck-automatic-running { + color: green; +} + +.deck-container .deck-automatic-link.deck-automatic-stopped { + color: red; +} + +.borderradius .deck-container .deck-automatic-link { + border-radius(10px); +} + +.deck-container .deck-automatic-link:hover { + background-color: lightgrey; +} + +.deck-container .deck-automatic-link:active { + background-color: grey; +} + +@media print { + .deck-automatic-link { + display:none !important; + } +}
\ No newline at end of file diff --git a/deck.js/extensions/automatic/deck.automatic.js b/deck.js/extensions/automatic/deck.automatic.js new file mode 100644 index 0000000..6a32209 --- /dev/null +++ b/deck.js/extensions/automatic/deck.automatic.js @@ -0,0 +1,185 @@ +/*! +Deck JS - deck.navigation +Copyright (c) 2012 Romain Champourlier +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 automatic control of the deck. +*/ +(function($, deck, undefined) { + var $d = $(document); + var running = false; + + clearAutomaticTimeout = function() { + if ($[deck].automatic && $[deck].automatic.timeout) { + window.clearTimeout($[deck].automatic.timeout); + } + }; + + // from and to are set with the values of the slide event calling + // this method, not the changes this method should trigger. + setTimeoutIfNeeded = function(e, from, to) { + // Clear previous timeout (necessary in cases the user generates deck's change + // events, for example by changing slides manually). + clearAutomaticTimeout(); + + var opts = $[deck]('getOptions'); + + if (running) { + // Slideshow running. + + var elem = $[deck]('getSlide', to); + + var duration = opts.automatic.slideDuration; + + // Iterate over element's classes to + // match against classdata + $.each(elem.attr('class').split(/\s+/), function(idx, cls){ + $.each(opts.classdata, function(feat_cls, features){ + if(cls == feat_cls && features.duration){ + duration = features.duration; + } + }); + }); + + var customDuration = elem.attr('data-duration'); + if(customDuration){ + duration = customDuration; + } + + // If duration is negative, don't set a timeout + if(duration >= 0){ + if (to == $[deck]('getSlides').length-1) { + // setTimeout... called when going to last slide. + // If cycling, set a timeout to go to first slide, else don't set a timeout, and set + // state to stopped. + if (opts.automatic.cycle) { + $[deck].automatic = { + timeout: window.setTimeout(function() { + $[deck]('go', 0); + if (e) e.preventDefault(); + }, duration) + }; + } + else { + $(opts.selectors.automaticLink).removeClass(opts.classes.automaticRunning); + $(opts.selectors.automaticLink).addClass(opts.classes.automaticStopped); + } + } + else { + // Running, not yet on last slide. + $[deck].automatic = { + timeout: window.setTimeout(function() { + $[deck]('next'); + if (e) e.preventDefault(); + }, duration) + }; + } + } + } + }; + + /* + Extends defaults/options. + + options.classes.automaticRunning + This class is added to the automatic link when the deck is currently in running + state. + + options.classes.automaticStopped + This class is added to the automatic link when the deck is currently in stopped + state. + + options.selectors.automaticLink + The elements that match this selector will toggle automatic run of the deck + when clicked. + */ + $.extend(true, $[deck].defaults, { + classes: { + automaticRunning: 'deck-automatic-running', + automaticStopped: 'deck-automatic-stopped' + }, + + selectors: { + automaticLink: '.deck-automatic-link' + }, + + classdata: { + /* // Example duration class-feature + * // Sets the duration of all elements with + * // bullet-point-timing class to 500ms. + * 'bullet-point-timing': { + * duration: 500 + * } + */ + }, + + automatic: { + startRunning: true, + cycle: true, + slideDuration: 3000 + } + }); + + // Lets others detect when slideshow is running automatically + $[deck]('extend', 'isRunning', function(){ + return running; + }); + + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'), + slides = $[deck]('getSlides'), + $current = $[deck]('getSlide'), + ndx; + + // Extension function to play the slideshow + $[deck]('extend', 'play', function(){ + var slides = $[deck]('getSlides'); + if (slides[slides.length-1] == $[deck]('getSlide')) { + // Stopped on last slide. Clicking to play/pause will rewind to first slide, and play. + $.deck('go', 0); + } + running = true; + $(opts.selectors.automaticLink).addClass(opts.classes.automaticRunning); + $(opts.selectors.automaticLink).removeClass(opts.classes.automaticStopped); + $d.trigger('deck.onPlayToggle', true); + $d.trigger('deck.onPlay'); + setTimeoutIfNeeded(null, slides.length, 0); + }); + + // Extension function to pause the slideshow + $[deck]('extend', 'pause', function(){ + running = false; + $(opts.selectors.automaticLink).addClass(opts.classes.automaticStopped); + $(opts.selectors.automaticLink).removeClass(opts.classes.automaticRunning); + $d.trigger('deck.onPlayToggle', true); + $d.trigger('deck.onPause'); + clearAutomaticTimeout(); + }); + + // Setup initial state + if (opts.automatic.startRunning) { + $[deck]('play'); + } + else { + $[deck]('pause'); + } + setTimeoutIfNeeded(null, ndx, 0); + + // Setup automatic link toggle events + $(opts.selectors.automaticLink) + .unbind('click.deckautomatic') + .bind('click.deckautomatic', function(e) { + if (!running) { + $[deck]('play'); + } + else { + $[deck]('pause'); + } + }); + }) + .bind('deck.change', setTimeoutIfNeeded); +})(jQuery, 'deck'); diff --git a/presentation.html b/index.html index a670be2..8c22e93 100644 --- a/presentation.html +++ b/index.html @@ -44,9 +44,6 @@ <!-- slide number indicator (uses "status snippet" at the end of the page) --> <link rel="stylesheet" href="deck.js/extensions/status/deck.status.css"> <script src="deck.js/extensions/status/deck.status.js"></script> - <!-- navigation buttons (uses "navigation snippet" at the end of the page) --> - <link rel="stylesheet" href="deck.js/extensions/navigation/deck.navigation.css"> - <script src="deck.js/extensions/navigation/deck.navigation.js"></script> <!-- slide selector by typing 'm' --> <script src="deck.js/extensions/menu/deck.menu.js"></script> <link rel="stylesheet" href="deck.js/extensions/menu/deck.menu.css"> @@ -61,13 +58,22 @@ <script src="deck.js/libs/jquerysvg/jquery.svganim.min.js"></script> <script src="deck.js/extensions/svg/deck.svg.js"></script> + <link rel="stylesheet" href="deck.js/extensions/automatic/deck.automatic.css"></link> + <script src="deck.js/extensions/automatic/deck.automatic.js"></script> <!-- Deck.js options (advanced) --> - <script>$(function() {$.deck('.slide', { - // fitMarginX:100, fitMarginY:100, // uncomment to tune margin - // fitMode: "stretched", // uncomment to strech - dummy:"" - });}); + <script> + $(function() { + $.deck('.slide', { + // fitMarginX:100, fitMarginY:100, // uncomment to tune margin + // fitMode: "stretched", // uncomment to strech + automatic: { + startRunning: true, + cycle: true, + slideDuration: 10000 + } + }); + }); </script> <!-- override some style here if needed (or in an external file) --> @@ -105,8 +111,8 @@ This text should not be displayed if everything goes well: use left/right arrow <div class="deck-container"> <!-- this presentation uses smart syntax --> - <section class="slide" id="logo"> - <img width="100%" src="logo.png" alt="Cryptocon 13"/> + <section class="slide" id="logo" data-duration="5000"> + <img width="100%" src="logo.png" alt="Cryptocon 13"></img> </section> <section class="slide" id="friday"> <p class="location">Lounge</p> @@ -317,8 +323,8 @@ This text should not be displayed if everything goes well: use left/right arrow </tr> </table> </section> -<section class="slide" id="epilog"> - <img width="40%" src="qrcode.png" alt="http://sublab.org/cryptocon13" style="margin-top: 10%;"/> +<section class="slide" id="epilog" data-duration="5000"> + <img width="40%" src="qrcode.png" alt="http://sublab.org/cryptocon13" style="margin-top: 10%;"></img> <p style="text-align: center">http://sublab.org/cryptocon13</p> </section> <!-- end of the presentation --> @@ -339,9 +345,6 @@ Infodesk an der Bar − Programm unter http://sublab.org/cryptocon13 <datalist id="goto-datalist"></datalist> <input type="submit" value="Go"> </form> -<!-- deck.navigation snippet --> -<a href="#" class="deck-prev-link" title="Previous">←</a> -<a href="#" class="deck-next-link" title="Next">→</a> <!-- deck.clone snippet: simple red box with top-left corner as cursor position --> <div class="clonepointer" style="position:absolute; width:20px; height:20px; background:red; z-index:10"></div> <!-- deck.clone snippet: simple green box with center as cursor position --> |