deckrb 0.2.0 → 0.2.1

data/README.md

@@ -2,6 +2,7 @@
 
 *slides in markdown, using deck.js*
 
+Home: <http://github.com/alexch/deck.rb>
 
 ## Installation
 
@@ -28,7 +29,7 @@ Put this in a file named `meals.md`:
 
 then run this:
 
-    deck meals.md
+    deck run meals.md
 
 and you'll get a web server running on `http://localhost:4333` serving up a slide presentation with four slides:
 
@@ -43,22 +44,21 @@ and you'll get a web server running on `http://localhost:4333` serving up a slid
 
 * clean(ish) page skeleton allows you to focus on your slides, not the HTML/CSS infrastructure
 * multiple slide source formats, including
-  * Markdown
-* presentations can comprise several source files
+  * [Markdown](http://daringfireball.net/projects/markdown/)
+  * should be easy to add other formats
+* presentations can span several source files, and can be assembled piecemeal
 * source files look good as source, built HTML, preview HTML, or as a deck doc
-  * each H1 designates the beginning of a new slide
-  * explicit `!SLIDE` or `<!SLIDE>` directives can split slides too
-  * slide directives look like comments when rendered into HTML (e.g. as &lt;!SLIDE&gt;)
+  * each H1 (single hash) designates the beginning of a new slide
+  * explicit `!SLIDE` or `<!SLIDE>` directives can split slides too -- use `<!SLIDE>` so they look like comments when rendered into normal HTML
+  * links to image files are resolved relative to the source file -- no more broken images in markdown previews, and no need to put all your images in a separate directory!
+  * add CSS classes to slides inside the slide directive - - e.g. `<!SLIDE center>` gives `<section class="slide center">`
   * generated HTML is pretty-printed for easier "view source"
-  * links to auxiliary files (e.g. `img src`) are resolved relative to the source file -- no more broken images in markdown previews!
-  * add CSS classes to slides inside the slide directive -- e.g. `<!SLIDE center>` gives `<section class="slide center">`
-* uses deck.js` "swiss" theme and several extensions, including `goto`, `menu`, `navigation`, `status`, `hash`,  and `scale`
+* uses deck.js' "swiss" theme and several extensions, including `goto`, `menu`, `navigation`, `status`, `hash`,  and `scale`
 * uses RedCarpet markdown extensions, including
   * tables <http://michelf.com/projects/php-markdown/extra/#table>
   * fenced code blocks <http://michelf.com/projects/php-markdown/extra/#fenced-code-blocks>
-* mostly compatible with Showoff
-  * specifying 'showoff.json' on the command line loads all slides in its 'sections' section
-* if the parameter starts with '# ' then it's parsed as literal markdown, not a file
+* mostly backwards-compatible with Showoff, i.e. you can specify a `showoff.json` file on the command line
+* if the parameter (or 'sections' entry) starts with '# ' then it's parsed as literal markdown, not a file
 * code syntax highlighting using Coderay
   * specify language at the top of the block using either ::: or @@@
   * e.g. `@@@ ruby`
@@ -98,8 +98,9 @@ and you'll get a web server running on `http://localhost:4333` serving up a slid
 
 ### See Also
 
-* showoff by Scott Chacon
-* keydown by Davis Frank
+* [Web Slide Show GGroup](https://groups.google.com/group/webslideshow)
+* [Showoff](https://github.com/schacon/showoff) by Scott Chacon
+* [Keydown](https://github.com/infews/keydown) by Davis Frank
 
 ## Bugs and Limitations
 
@@ -110,12 +111,12 @@ and you'll get a web server running on `http://localhost:4333` serving up a slid
 * we use RedCarpet to process markdown, which doesn't work exactly the same as RDiscount... for example:
   * indented code blocks under a bullet point may need to be indented more
   * code blocks must be separated from the previous text by a newline
+* slide scaling isn't perfect; sometimes either resizing or reloading will improve the layout
 
 ## TODO
 
 * fix title tag (base it off of presentation name or something)
 * scale images to fit on the page
-
 * if no files are specified, use either './showoff.json' or all `.md` files under current directory
 * deck.json config file
 * config options:
@@ -146,12 +147,11 @@ and you'll get a web server running on `http://localhost:4333` serving up a slid
 * some way to build/rebuild a project that is deployable to heroku
 * PDF
 * rewrite internal links to files and serve them relative to current dir, not slide dir
+* custom `.css`, `.scss`, and `.js` files, which will get imported into all slides
 
 ## TODO (community)
 
 * submit theme-picker extension to deck.js
-* add to deck.js wiki https://github.com/imakewebthings/deck.js/wiki
-* announce on https://groups.google.com/forum/#!forum/webslideshow
 * mix with keydown https://github.com/infews/keydown
 * gh-pages documentation site
 * integrate with slideshow https://github.com/geraldb/slideshow-deck.js

data/lib/deck/version.rb

@@ -1,3 +1,3 @@
 module Deck
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

data/public/deck.js/README.md

@@ -42,6 +42,7 @@ Core includes stripped down black and white print styles for the standard slide
 - [dougireton](https://github.com/dougireton)
 - [awirick](https://github.com/awirick)
 - Daniel Knittl-Frank
+- [alexch](https://github.com/alexch)
 
 If you would like to contribute a patch to deck.js please do as much as you can of the following:
 

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

@@ -14,51 +14,57 @@ 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.
+
+	options.countNested
+		If false, only top level slides will be counted when entering a
+		slide number.
 	*/
 	$.extend(true, $[deck].defaults, {
 		classes: {
 			goto: 'deck-goto'
 		},
-		
+
 		selectors: {
 			gotoDatalist: '#goto-datalist',
 			gotoForm: '.goto-form',
 			gotoInput: '#goto-slide'
 		},
-		
+
 		keys: {
 			goto: 71 // g
-		}
+		},
+
+		countNested: true
 	});
 
 	/*
 	jQuery.deck('showGoTo')
-	
+
 	Shows the Go To Slide form by adding the class specified by the goto class
 	option to the deck container.
 	*/
@@ -69,7 +75,7 @@ the deck container.
 
 	/*
 	jQuery.deck('hideGoTo')
-	
+
 	Hides the Go To Slide form by removing the class specified by the goto class
 	option from the deck container.
 	*/
@@ -80,50 +86,80 @@ the deck container.
 
 	/*
 	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);
-		
+		$datalist = $(opts.selectors.gotoDatalist),
+		slideTest = $.map([
+			opts.classes.before,
+			opts.classes.previous,
+			opts.classes.current,
+			opts.classes.next,
+			opts.classes.after
+		], function(el, i) {
+			return '.' + el;
+		}).join(', '),
+		rootCounter = 1;
+
 		// 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 */
+
+		/* Populate datalist and work out countNested*/
 		$.each($[deck]('getSlides'), function(i, $slide) {
-			var id = $slide.attr('id');
-			
+			var id = $slide.attr('id'),
+			$parentSlides = $slide.parentsUntil(opts.selectors.container, slideTest);
+
 			if (id) {
 				$datalist.append('<option value="' + id + '">');
 			}
+
+			if ($parentSlides.length) {
+				$slide.removeData('rootIndex');
+			}
+			else if (!opts.countNested) {
+				$slide.data('rootIndex', rootCounter);
+				++rootCounter;
+			}
 		});
-		
+
 		// 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);
+			ndx = parseInt($field.val(), 10);
+
+			if (!$[deck]('getOptions').countNested) {
+			  if (ndx >= rootCounter) return false;
+				$.each($[deck]('getSlides'), function(i, $slide) {
+					if ($slide.data('rootIndex') === ndx) {
+						ndx = i + 1;
+						return false;
+					}
+				});
+			}
+
+			$[deck]('go', isNaN(ndx) ? $field.val() : ndx - 1);
 			$[deck]('hideGoTo');
 			$field.val('');
-			
+
 			e.preventDefault();
 		});
-		
+
+		// Dont let keys in the input trigger deck actions
 		$(opts.selectors.gotoInput)
 		.unbind('keydown.deckgoto')
 		.bind('keydown.deckgoto', function(e) {

data/public/deck.js/extensions/menu/deck.menu.css

@@ -17,11 +17,11 @@
   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: scale(0.22) !important;
+  -moz-transform: scale(0.22) !important;
+  -o-transform: scale(0.22) !important;
+  -ms-transform: scale(0.22) !important;
+  transform: scale(0.22) !important;
   -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -o-transform-origin: 0 0;

data/public/deck.js/extensions/menu/deck.menu.scss

@@ -21,11 +21,11 @@
 		}
 		
 		.csstransforms & {
-			-webkit-transform:scale(.22);
-			-moz-transform:scale(.22);
-			-o-transform:scale(.22);
-			-ms-transform:scale(.22);
-			transform:scale(.22);
+			-webkit-transform:scale(.22) !important;
+			-moz-transform:scale(.22) !important;
+			-o-transform:scale(.22) !important;
+			-ms-transform:scale(.22) !important;
+			transform:scale(.22) !important;
 			-webkit-transform-origin:0 0;
 			-moz-transform-origin:0 0;
 			-o-transform-origin:0 0;

data/public/deck.js/extensions/scale/deck.scale.css

@@ -1,13 +1,22 @@
-.csstransforms .deck-container.deck-scale section.slide {
-	width:auto;
-	-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-scale:not(.deck-menu) {
+  overflow: hidden;
 }
-.csstransforms .deck-container.deck-scale.deck-menu {
-  width: 70%;
+.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;

data/public/deck.js/extensions/scale/deck.scale.js

@@ -1,20 +1,19 @@
 /*!
 Deck JS - deck.scale
-Copyright (c) 2011 Caleb Troughton
+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.  It should only be used on
-standalone decks where the body is the deck container. Slides are scaled down
-using CSS transforms to fit within the browser window. If the browser window
-is big enough to hold the slides without scaling, no scaling occurs. The user
+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 make Flash videos render incorrectly.  Presenters that
-need to use video will want to disable scaling to play them.  HTML5 video
+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) {
@@ -22,44 +21,35 @@ works fine.
 	$w = $(window),
 	baseHeight, // Value to scale against
 	timer, // Timeout id for debouncing
+	rootSlides,
 
 	/*
-	Internal function to do all the dirty work of scaling the deck container.
+	Internal function to do all the dirty work of scaling the slides.
 	*/
 	scaleDeck = function() {
-		var obh = $[deck]('getOptions').baseHeight,
+		var opts = $[deck]('getOptions'),
+		obh = opts.baseHeight,
 		$container = $[deck]('getContainer'),
-		height = $w.height(),
-		slides = $[deck]('getSlides'),
-		scale,
-		transform;
-
-		// Don't scale if scaling disabled
-		if (!$container.hasClass($[deck]('getOptions').classes.scale)) {
-			scale = 1;
-		}
-		else {
-			// Use window height as base height if not set manually
-			baseHeight = obh ? obh : (function() {
-				var slop = 40; /* for padding */
-			  var windowHeight = $(window).height();
-				return windowHeight - slop;
-			})();
-		}
+		baseHeight = obh ? obh : $container.height();
 
 		// Scale each slide down if necessary (but don't scale up)
-		$.each(slides, function(i, $slide) {
-		  var slideHeight = $slide.innerHeight();
-		  var scale = baseHeight / slideHeight;
-
-		  if (scale < 1) {
-		    transform = 'scale(' + scale + ')';
-  		  $.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
-  			  $slide.css(prefix + 'Transform', transform);
-  		  });
-		  }
-	  });
-  }
+		$.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.
@@ -68,14 +58,18 @@ works fine.
 		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 slides.  You may instead specify
-		a height, and the deck will be scaled against this height regardless
-		of the actual content height.
+		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
@@ -85,7 +79,8 @@ works fine.
 	*/
 	$.extend(true, $[deck].defaults, {
 		classes: {
-			scale: 'deck-scale'
+			scale: 'deck-scale',
+			scaleSlideWrapper: 'deck-slide-scaler'
 		},
 
 		keys: {
@@ -128,10 +123,29 @@ works fine.
 	});
 
 	$d.bind('deck.init', function() {
-		var opts = $[deck]('getOptions');
+		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);
+			}
+		});
 
-		// Scaling enabled at start
-		$[deck]('getContainer').addClass(opts.classes.scale);
+		// 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() {
@@ -149,8 +163,8 @@ works fine.
 			}
 		});
 
-		// Scale once on init
-		scaleDeck();
+		// Enable scale on init
+		$[deck]('enableScale');
 	});
 })(jQuery, 'deck', this);