summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--deck.js/extensions/automatic/VERSION1
-rw-r--r--deck.js/extensions/automatic/deck.automatic.css40
-rw-r--r--deck.js/extensions/automatic/deck.automatic.js185
-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">&#8592;</a>
-<a href="#" class="deck-next-link" title="Next">&#8594;</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 -->