add automatic extension

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 -->