From 7ccd2b9d1b3ee8bdd9557f9209eb222ed68d4927 Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:49:43 +0200 Subject: add automatic extension --- deck.js/extensions/automatic/VERSION | 1 + deck.js/extensions/automatic/deck.automatic.css | 40 +++++ deck.js/extensions/automatic/deck.automatic.js | 185 ++++++++++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 deck.js/extensions/automatic/VERSION create mode 100644 deck.js/extensions/automatic/deck.automatic.css create mode 100644 deck.js/extensions/automatic/deck.automatic.js (limited to 'deck.js/extensions/automatic') 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'); -- cgit v1.2.1