deckrb 0.1.0

data/deck/extensions/goto/deck.goto.html

@@ -0,0 +1,7 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<form action="." method="get" class="goto-form">
+	<label for="goto-slide">Go to slide:</label>
+	<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
+	<datalist id="goto-datalist"></datalist>
+	<input type="submit" value="Go">
+</form>

data/deck/extensions/goto/deck.goto.js

@@ -0,0 +1,134 @@
+/*!
+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.
+	*/
+	$.extend(true, $[deck].defaults, {
+		classes: {
+			goto: 'deck-goto'
+		},
+		
+		selectors: {
+			gotoDatalist: '#goto-datalist',
+			gotoForm: '.goto-form',
+			gotoInput: '#goto-slide'
+		},
+		
+		keys: {
+			goto: 71 // g
+		}
+	});
+
+	/*
+	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);
+		
+		// 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 */
+		$.each($[deck]('getSlides'), function(i, $slide) {
+			var id = $slide.attr('id');
+			
+			if (id) {
+				$datalist.append('<option value="' + id + '">');
+			}
+		});
+		
+		// Process form submittal, go to the slide entered
+		$(opts.selectors.gotoForm)
+		.unbind('submit.deckgoto')
+		.bind('submit.deckgoto', function(e) {
+			var $field = $($[deck]('getOptions').selectors.gotoInput),
+			i = parseInt($field.val(), 10);
+			
+			$[deck]('go', isNaN(i) ? $field.val() : i - 1);
+			$[deck]('hideGoTo');
+			$field.val('');
+			
+			e.preventDefault();
+		});
+		
+		$(opts.selectors.gotoInput)
+		.unbind('keydown.deckgoto')
+		.bind('keydown.deckgoto', function(e) {
+			e.stopPropagation();
+		});
+	});
+})(jQuery, 'deck');
+

data/deck/extensions/goto/deck.goto.scss

@@ -0,0 +1,46 @@
+.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 & {
+			-webkit-border-radius:10px;
+			-moz-border-radius:10px;
+			border-radius:10px;
+		}
+	
+		label {
+			font-weight:bold;
+		}
+	
+		label, 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;
+	}
+}

data/deck/extensions/hash/deck.hash.css

@@ -0,0 +1,13 @@
+.deck-container .deck-permalink {
+  display: none;
+  position: absolute;
+  z-index: 4;
+  bottom: 30px;
+  right: 0;
+  width: 48px;
+  text-align: center;
+}
+
+.no-history .deck-container:hover .deck-permalink {
+  display: block;
+}

data/deck/extensions/hash/deck.hash.html

@@ -0,0 +1,2 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

data/deck/extensions/hash/deck.hash.js

@@ -0,0 +1,129 @@
+/*!
+Deck JS - deck.hash
+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 deep linking to individual slides, enables internal links
+to slides within decks, and updates the address bar with the hash as the user
+moves through the deck. A permalink anchor is also updated. Standard themes
+hide this link in browsers that support the History API, and show it for
+those that do not. Slides that do not have an id are assigned one according to
+the hashPrefix option. In addition to the on-slide container state class
+kept by core, this module adds an on-slide state class that uses the id of each
+slide.
+*/
+(function ($, deck, window, undefined) {
+	var $d = $(document),
+	$window = $(window),
+	
+	/* Collection of internal fragment links in the deck */
+	$internals,
+	
+	/*
+	Internal only function.  Given a string, extracts the id from the hash,
+	matches it to the appropriate slide, and navigates there.
+	*/
+	goByHash = function(str) {
+		var id = str.substr(str.indexOf("#") + 1),
+		slides = $[deck]('getSlides');
+		
+		$.each(slides, function(i, $el) {
+			if ($el.attr('id') === id) {
+				$[deck]('go', i);
+				return false;
+			}
+		});
+		
+		// If we don't set these to 0 the container scrolls due to hashchange
+		$[deck]('getContainer').scrollLeft(0).scrollTop(0);
+	};
+	
+	/*
+	Extends defaults/options.
+	
+	options.selectors.hashLink
+		The element matching this selector has its href attribute updated to
+		the hash of the current slide as the user navigates through the deck.
+		
+	options.hashPrefix
+		Every slide that does not have an id is assigned one at initialization.
+		Assigned ids take the form of hashPrefix + slideIndex, e.g., slide-0,
+		slide-12, etc.
+	*/
+	$.extend(true, $[deck].defaults, {
+		selectors: {
+			hashLink: '.deck-permalink'
+		},
+		
+		hashPrefix: 'slide-'
+	});
+	
+	
+	$d.bind('deck.init', function() {
+	   var opts = $[deck]('getOptions');
+		$internals = $(),
+		slides = $[deck]('getSlides');
+		
+		$.each(slides, function(i, $el) {
+			var hash;
+			
+			/* Hand out ids to the unfortunate slides born without them */
+			if (!$el.attr('id') || $el.data('deckAssignedId') === $el.attr('id')) {
+				$el.attr('id', opts.hashPrefix + i);
+				$el.data('deckAssignedId', opts.hashPrefix + i);
+			}
+			
+			hash ='#' + $el.attr('id');
+			
+			/* Deep link to slides on init */
+			if (hash === window.location.hash) {
+				$[deck]('go', i);
+			}
+			
+			/* Add internal links to this slide */
+			$internals = $internals.add('a[href="' + hash + '"]');
+		});
+		
+		if (!Modernizr.hashchange) {
+			/* Set up internal links using click for the poor browsers
+			without a hashchange event. */
+			$internals.unbind('click.deckhash').bind('click.deckhash', function(e) {
+				goByHash($(this).attr('href'));
+			});
+		}
+		
+		/* Set up first id container state class */
+		if (slides.length) {
+			$[deck]('getContainer').addClass(opts.classes.onPrefix + $[deck]('getSlide').attr('id'));
+		};
+	})
+	/* Update permalink, address bar, and state class on a slide change */
+	.bind('deck.change', function(e, from, to) {
+		var hash = '#' + $[deck]('getSlide', to).attr('id'),
+		opts = $[deck]('getOptions'),
+		osp = opts.classes.onPrefix,
+		$c = $[deck]('getContainer');
+		
+		$c.removeClass(osp + $[deck]('getSlide', from).attr('id'));
+		$c.addClass(osp + $[deck]('getSlide', to).attr('id'));
+		
+		$(opts.selectors.hashLink).attr('href', hash);
+		if (Modernizr.history) {
+			window.history.replaceState({}, "", hash);
+		}
+	});
+	
+	/* Deals with internal links in modern browsers */
+	$window.bind('hashchange.deckhash', function(e) {
+		if (e.originalEvent && e.originalEvent.newURL) {
+			goByHash(e.originalEvent.newURL);
+		}
+		else {
+			goByHash(window.location.hash);
+		}
+	});
+})(jQuery, 'deck', this);

data/deck/extensions/hash/deck.hash.scss

@@ -0,0 +1,15 @@
+.deck-container {
+	.deck-permalink {
+		display:none;
+		position:absolute;
+		z-index:4;
+		bottom:30px;
+		right:0;
+		width:48px;
+		text-align:center;
+	}
+}
+
+.no-history .deck-container:hover .deck-permalink {
+	display:block;
+}

data/deck/extensions/menu/deck.menu.css

@@ -0,0 +1,47 @@
+.deck-menu .slide {
+  background: #eee;
+  position: relative;
+  left: 0;
+  top: 0;
+  visibility: visible;
+  cursor: pointer;
+}
+.no-csstransforms .deck-menu > .slide {
+  float: left;
+  width: 22%;
+  height: 22%;
+  min-height: 0;
+  margin: 1%;
+  font-size: 0.22em;
+  overflow: hidden;
+  padding: 0 0.5%;
+}
+.csstransforms .deck-menu > .slide {
+  -webkit-transform: scale(0.22);
+  -moz-transform: scale(0.22);
+  -o-transform: scale(0.22);
+  -ms-transform: scale(0.22);
+  transform: scale(0.22);
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 0 48px;
+  margin: 12px;
+}
+.deck-menu iframe, .deck-menu img, .deck-menu video {
+  max-width: 100%;
+}
+.deck-menu .deck-current, .no-touch .deck-menu .slide:hover {
+  background: #ddf;
+}
+.deck-menu.deck-container:hover .deck-prev-link, .deck-menu.deck-container:hover .deck-next-link {
+  display: none;
+}

data/deck/extensions/menu/deck.menu.js

@@ -0,0 +1,187 @@
+/*!
+Deck JS - deck.menu
+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 methods and key binding to show and hide a menu of all
+slides in the deck. The deck menu state is indicated by the presence of a class
+on the deck container.
+*/
+(function($, deck, undefined) {
+	var $d = $(document),
+	rootSlides; // Array of top level slides
+	
+	/*
+	Extends defaults/options.
+	
+	options.classes.menu
+		This class is added to the deck container when showing the slide menu.
+	
+	options.keys.menu
+		The numeric keycode used to toggle between showing and hiding the slide
+		menu.
+		
+	options.touch.doubletapWindow
+		Two consecutive touch events within this number of milliseconds will
+		be considered a double tap, and will toggle the menu on touch devices.
+	*/
+	$.extend(true, $[deck].defaults, {
+		classes: {
+			menu: 'deck-menu'
+		},
+		
+		keys: {
+			menu: 77 // m
+		},
+		
+		touch: {
+			doubletapWindow: 400
+		}
+	});
+
+	/*
+	jQuery.deck('showMenu')
+	
+	Shows the slide menu by adding the class specified by the menu class option
+	to the deck container.
+	*/
+	$[deck]('extend', 'showMenu', function() {
+		var $c = $[deck]('getContainer'),
+		opts = $[deck]('getOptions');
+		
+		if ($c.hasClass(opts.classes.menu)) return;
+		
+		// Hide through loading class to short-circuit transitions (perf)
+		$c.addClass([opts.classes.loading, opts.classes.menu].join(' '));
+		
+		/* Forced to do this in JS until CSS learns second-grade math. Save old
+		style value for restoration when menu is hidden. */
+		if (Modernizr.csstransforms) {
+			$.each(rootSlides, function(i, $slide) {
+				$slide.data('oldStyle', $slide.attr('style'));
+				$slide.css({
+					'position': 'absolute',
+					'left': ((i % 4) * 25) + '%',
+					'top': (Math.floor(i / 4) * 25) + '%'
+				});
+			});
+		}
+		
+		// Need to ensure the loading class renders first, then remove
+		window.setTimeout(function() {
+			$c.removeClass(opts.classes.loading)
+				.scrollTop($[deck]('getSlide').offset().top);
+		}, 0);
+	});
+
+	/*
+	jQuery.deck('hideMenu')
+	
+	Hides the slide menu by removing the class specified by the menu class
+	option from the deck container.
+	*/
+	$[deck]('extend', 'hideMenu', function() {
+		var $c = $[deck]('getContainer'),
+		opts = $[deck]('getOptions');
+		
+		if (!$c.hasClass(opts.classes.menu)) return;
+		
+		$c.removeClass(opts.classes.menu);
+		$c.addClass(opts.classes.loading);
+		
+		/* Restore old style value */
+		if (Modernizr.csstransforms) {
+			$.each(rootSlides, function(i, $slide) {
+				var oldStyle = $slide.data('oldStyle');
+
+				$slide.attr('style', oldStyle ? oldStyle : '');
+			});
+		}
+		
+		window.setTimeout(function() {
+			$c.removeClass(opts.classes.loading).scrollTop(0);
+		}, 0);
+	});
+
+	/*
+	jQuery.deck('toggleMenu')
+	
+	Toggles between showing and hiding the slide menu.
+	*/
+	$[deck]('extend', 'toggleMenu', function() {
+		$[deck]('getContainer').hasClass($[deck]('getOptions').classes.menu) ?
+		$[deck]('hideMenu') : $[deck]('showMenu');
+	});
+
+	$d.bind('deck.init', function() {
+		var opts = $[deck]('getOptions'),
+		touchEndTime = 0,
+		currentSlide,
+		slideTest = $.map([
+			opts.classes.before,
+			opts.classes.previous,
+			opts.classes.current,
+			opts.classes.next,
+			opts.classes.after
+		], function(el, i) {
+			return '.' + el;
+		}).join(', ');
+		
+		// Build top level slides array
+		rootSlides = [];
+		$.each($[deck]('getSlides'), function(i, $el) {
+			if (!$el.parentsUntil(opts.selectors.container, slideTest).length) {
+				rootSlides.push($el);
+			}
+		});
+		
+		// Bind key events
+		$d.unbind('keydown.deckmenu').bind('keydown.deckmenu', function(e) {
+			if (e.which === opts.keys.menu || $.inArray(e.which, opts.keys.menu) > -1) {
+				$[deck]('toggleMenu');
+				e.preventDefault();
+			}
+		});
+		
+		// Double tap to toggle slide menu for touch devices
+		$[deck]('getContainer').unbind('touchstart.deckmenu').bind('touchstart.deckmenu', function(e) {
+			currentSlide = $[deck]('getSlide');
+		})
+		.unbind('touchend.deckmenu').bind('touchend.deckmenu', function(e) {
+			var now = Date.now();
+			
+			// Ignore this touch event if it caused a nav change (swipe)
+			if (currentSlide !== $[deck]('getSlide')) return;
+			
+			if (now - touchEndTime < opts.touch.doubletapWindow) {
+				$[deck]('toggleMenu');
+				e.preventDefault();
+			}
+			touchEndTime = now;
+		});
+		
+		// Selecting slides from the menu
+		$.each($[deck]('getSlides'), function(i, $s) {
+			$s.unbind('click.deckmenu').bind('click.deckmenu', function(e) {
+				if (!$[deck]('getContainer').hasClass(opts.classes.menu)) return;
+
+				$[deck]('go', i);
+				$[deck]('hideMenu');
+				e.stopPropagation();
+				e.preventDefault();
+			});
+		});
+	})
+	.bind('deck.change', function(e, from, to) {
+		var container = $[deck]('getContainer');
+		
+		if (container.hasClass($[deck]('getOptions').classes.menu)) {
+			container.scrollTop($[deck]('getSlide', to).offset().top);
+		}
+	});
+})(jQuery, 'deck');
+