hyla 1.0 → 1.0.1

data/lib/resources/deck.js/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');
+

data/lib/resources/deck.js/extensions/navigation/deck.navigation.css

@@ -0,0 +1,43 @@
+.deck-container .deck-prev-link, .deck-container .deck-next-link {
+  display: none;
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  width: 32px;
+  height: 32px;
+  margin-top: -16px;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 32px;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
+  color: #fff;
+  background: #888;
+}
+.borderradius .deck-container .deck-prev-link, .borderradius .deck-container .deck-next-link {
+  -webkit-border-radius: 16px;
+  -moz-border-radius: 16px;
+  border-radius: 16px;
+}
+.deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited {
+  color: #fff;
+}
+.deck-container .deck-prev-link {
+  left: 8px;
+}
+.deck-container .deck-next-link {
+  right: 8px;
+}
+.deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link {
+  display: block;
+}
+.deck-container:hover .deck-prev-link.deck-nav-disabled, .touch .deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link.deck-nav-disabled, .touch .deck-container:hover .deck-next-link {
+  display: none;
+}
+
+@media print {
+  .deck-prev-link, .deck-next-link {
+    display: none !important;
+  }
+}

data/lib/resources/deck.js/extensions/navigation/deck.navigation.html

@@ -0,0 +1,3 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a>

data/lib/resources/deck.js/extensions/navigation/deck.navigation.js

@@ -0,0 +1,92 @@
+/*!
+Deck JS - deck.navigation
+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 clickable previous and next links to the deck.
+*/
+(function($, deck, undefined) {
+	var $d = $(document),
+	
+	/* Updates link hrefs, and disabled states if last/first slide */
+	updateButtons = function(e, from, to) {
+		var opts = $[deck]('getOptions'),
+		last = $[deck]('getSlides').length - 1,
+		prevSlide = $[deck]('getSlide', to - 1),
+		nextSlide = $[deck]('getSlide', to + 1),
+		hrefBase = window.location.href.replace(/#.*/, ''),
+		prevId = prevSlide ? prevSlide.attr('id') : undefined,
+		nextId = nextSlide ? nextSlide.attr('id') : undefined;
+		
+		$(opts.selectors.previousLink)
+			.toggleClass(opts.classes.navDisabled, !to)
+			.attr('href', hrefBase + '#' + (prevId ? prevId : ''));
+		$(opts.selectors.nextLink)
+			.toggleClass(opts.classes.navDisabled, to === last)
+			.attr('href', hrefBase + '#' + (nextId ? nextId : ''));
+	};
+	
+	/*
+	Extends defaults/options.
+	
+	options.classes.navDisabled
+		This class is added to a navigation link when that action is disabled.
+		It is added to the previous link when on the first slide, and to the
+		next link when on the last slide.
+		
+	options.selectors.nextLink
+		The elements that match this selector will move the deck to the next
+		slide when clicked.
+		
+	options.selectors.previousLink
+		The elements that match this selector will move to deck to the previous
+		slide when clicked.
+	*/
+	$.extend(true, $[deck].defaults, {
+		classes: {
+			navDisabled: 'deck-nav-disabled'
+		},
+		
+		selectors: {
+			nextLink: '.deck-next-link',
+			previousLink: '.deck-prev-link'
+		}
+	});
+
+	$d.bind('deck.init', function() {
+		var opts = $[deck]('getOptions'),
+		slides = $[deck]('getSlides'),
+		$current = $[deck]('getSlide'),
+		ndx;
+		
+		// Setup prev/next link events
+		$(opts.selectors.previousLink)
+		.unbind('click.decknavigation')
+		.bind('click.decknavigation', function(e) {
+			$[deck]('prev');
+			e.preventDefault();
+		});
+		
+		$(opts.selectors.nextLink)
+		.unbind('click.decknavigation')
+		.bind('click.decknavigation', function(e) {
+			$[deck]('next');
+			e.preventDefault();
+		});
+		
+		// Find where we started in the deck and set initial states
+		$.each(slides, function(i, $slide) {
+			if ($slide === $current) {
+				ndx = i;
+				return false;
+			}
+		});
+		updateButtons(null, ndx, ndx);
+	})
+	.bind('deck.change', updateButtons);
+})(jQuery, 'deck');
+

data/lib/resources/deck.js/extensions/scale/deck.scale.css

@@ -0,0 +1,28 @@
+/* Remove this line if you are embedding deck.js in a page and
+using the scale extension. */
+.csstransforms {
+  overflow: hidden;
+}
+
+.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide {
+  -webkit-box-sizing: padding-box;
+  -moz-box-sizing: padding-box;
+  box-sizing: padding-box;
+  width: 100%;
+  padding-bottom: 20px;
+}
+.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide > .deck-slide-scaler {
+  -webkit-transform-origin: 50% 0;
+  -moz-transform-origin: 50% 0;
+  -o-transform-origin: 50% 0;
+  -ms-transform-origin: 50% 0;
+  transform-origin: 50% 0;
+}
+
+.csstransforms .deck-container.deck-menu .deck-slide-scaler {
+  -webkit-transform: none !important;
+  -moz-transform: none !important;
+  -o-transform: none !important;
+  -ms-transform: none !important;
+  transform: none !important;
+}

data/lib/resources/deck.js/extensions/scale/deck.scale.js

@@ -0,0 +1,170 @@
+/*!
+Deck JS - deck.scale
+Copyright (c) 2011-2012 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 automatic scaling to the deck.  Slides are scaled down
+using CSS transforms to fit within the deck container. If the container is
+big enough to hold the slides without scaling, no scaling occurs. The user
+can disable and enable scaling with a keyboard shortcut.
+
+Note: CSS transforms may make Flash videos render incorrectly.  Presenters
+that need to use video may want to disable scaling to play them.  HTML5 video
+works fine.
+*/
+(function($, deck, window, undefined) {
+	var $d = $(document),
+	$w = $(window),
+	baseHeight, // Value to scale against
+	timer, // Timeout id for debouncing
+	rootSlides,
+
+	/*
+	Internal function to do all the dirty work of scaling the slides.
+	*/
+	scaleDeck = function() {
+		var opts = $[deck]('getOptions'),
+		obh = opts.baseHeight,
+		$container = $[deck]('getContainer'),
+		baseHeight = obh ? obh : $container.height();
+
+		// Scale each slide down if necessary (but don't scale up)
+		$.each(rootSlides, function(i, $slide) {
+			var slideHeight = $slide.innerHeight(),
+			$scaler = $slide.find('.' + opts.classes.scaleSlideWrapper),
+			scale = $container.hasClass(opts.classes.scale) ?
+				baseHeight / slideHeight :
+				1;
+			
+			$.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
+				if (scale === 1) {
+					$scaler.css(prefix + 'Transform', '');
+				}
+				else {
+					$scaler.css(prefix + 'Transform', 'scale(' + scale + ')');
+				}
+			});
+		});
+	}
+
+	/*
+	Extends defaults/options.
+
+	options.classes.scale
+		This class is added to the deck container when scaling is enabled.
+		It is enabled by default when the module is included.
+	
+	options.classes.scaleSlideWrapper
+		Scaling is done using a wrapper around the contents of each slide. This
+		class is applied to that wrapper.
+
+	options.keys.scale
+		The numeric keycode used to toggle enabling and disabling scaling.
+
+	options.baseHeight
+		When baseHeight is falsy, as it is by default, the deck is scaled in
+		proportion to the height of the deck container. You may instead specify
+		a height as a number of px, and slides will be scaled against this
+		height regardless of the container size.
+
+	options.scaleDebounce
+		Scaling on the browser resize event is debounced. This number is the
+		threshold in milliseconds. You can learn more about debouncing here:
+		http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+
+	*/
+	$.extend(true, $[deck].defaults, {
+		classes: {
+			scale: 'deck-scale',
+			scaleSlideWrapper: 'deck-slide-scaler'
+		},
+
+		keys: {
+			scale: 83 // s
+		},
+
+		baseHeight: null,
+		scaleDebounce: 200
+	});
+
+	/*
+	jQuery.deck('disableScale')
+
+	Disables scaling and removes the scale class from the deck container.
+	*/
+	$[deck]('extend', 'disableScale', function() {
+		$[deck]('getContainer').removeClass($[deck]('getOptions').classes.scale);
+		scaleDeck();
+	});
+
+	/*
+	jQuery.deck('enableScale')
+
+	Enables scaling and adds the scale class to the deck container.
+	*/
+	$[deck]('extend', 'enableScale', function() {
+		$[deck]('getContainer').addClass($[deck]('getOptions').classes.scale);
+		scaleDeck();
+	});
+
+	/*
+	jQuery.deck('toggleScale')
+
+	Toggles between enabling and disabling scaling.
+	*/
+	$[deck]('extend', 'toggleScale', function() {
+		var $c = $[deck]('getContainer');
+		$[deck]($c.hasClass($[deck]('getOptions').classes.scale) ?
+			'disableScale' : 'enableScale');
+	});
+
+	$d.bind('deck.init', function() {
+		var opts = $[deck]('getOptions'),
+		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);
+			}
+		});
+		
+		// Use a wrapper on each slide to handle content scaling
+		$.each(rootSlides, function(i, $slide) {
+			$slide.children().wrapAll('<div class="' + opts.classes.scaleSlideWrapper + '"/>');
+		});
+
+		// Debounce the resize scaling
+		$w.unbind('resize.deckscale').bind('resize.deckscale', function() {
+			window.clearTimeout(timer);
+			timer = window.setTimeout(scaleDeck, opts.scaleDebounce);
+		})
+		// Scale once on load, in case images or something change layout
+		.unbind('load.deckscale').bind('load.deckscale', scaleDeck);
+
+		// Bind key events
+		$d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
+			if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
+				$[deck]('toggleScale');
+				e.preventDefault();
+			}
+		});
+
+		// Enable scale on init
+		$[deck]('enableScale');
+	});
+})(jQuery, 'deck', this);
+