showoff 0.1.0 → 0.1.1

data/README.txt

@@ -2,13 +2,13 @@ ShowOff Presentation Software
 =============================
 
 ShowOff is a Sinatra web app that reads simple configuration files for a
-presentation.  It is sort of like a Keynote web app engine - think S5 + 
-Slidedown.  I am using it to do all my talks in 2010, because I have a deep 
+presentation.  It is sort of like a Keynote web app engine - think S5 +
+Slidedown.  I am using it to do all my talks in 2010, because I have a deep
 hatred in my heart for Keynote and yet it is by far the best in the field.
 
 The idea is that you setup your markdown slide files in section subdirectories
 and then startup the showoff server in that directory.  It will read in your
-showoff.json file for which sections go in which order and then will give 
+showoff.json file for which sections go in which order and then will give
 you a URL to present from.
 
 It can:
@@ -20,10 +20,10 @@ It can:
  * re-enact command line interactions
  * call up a menu of sections/slides at any time to jump around
  * execute javascript or ruby live and display results
+ * do simple transitions (instant, fade, slide in)
 
 It might will can:
 
- * do simple transitions (instant, fade, slide in)
  * show a timer - elapsed / remaining
  * perform simple animations of images moving between keyframes
  * show syncronized, hidden notes on another browser (like an iphone)
@@ -48,7 +48,7 @@ it has a showoff.json file and a number of sections (subdirectories) with markdo
   $ cd (showoff-repo)
   $ showoff serve
 
-If you run 'showoff' in the ShowOff directory itself, it will show an example 
+If you run 'showoff' in the ShowOff directory itself, it will show an example
 presentation from the 'example' subdirectory, so you can see what it's like.
 
 Slide Format
@@ -60,7 +60,7 @@ your showoff.json file for any markdown files (.md).  Each markdown file can
 have any number of slides in it, seperating each slide with the '!SLIDE'
 keyword and optional slide styles.
 
-For example, if you run 'showoff create my_new_pres' it will create a new 
+For example, if you run 'showoff create my_new_pres' it will create a new
 starter presentation for you with one .md file at one/slide.md which will have
 the following contents:
 
@@ -68,7 +68,7 @@ the following contents:
 
   # My Presentation #
 
-  !SLIDE bullets incremental
+  !SLIDE bullets incremental transition=fade
 
   # Bullet Points #
 
@@ -76,17 +76,17 @@ the following contents:
   * second point
   * third point
 
-That represents two slides, one with just a large title and one with three
-bullets that are incrementally updated when the slide is shown. In order for
-ShowOff to see those slides, your showoff.json file needs to look something 
-like this:
+That represents two slides, the first contains just a large title, and the
+second is faded into view showing the title and three bullets that are then
+incrementally shown. In order for ShowOff to see those slides, your 
+showoff.json file needs to look something like this:
 
-  [ 
-    {"section":"one"} 
+  [
+    {"section":"one"}
   ]
 
-If you have multiple sections in your talk, you can make this json array 
-include all the sections you want to show in which order you want to show 
+If you have multiple sections in your talk, you can make this json array
+include all the sections you want to show in which order you want to show
 them.
 
 Some useful styles for each slide are:
@@ -96,7 +96,7 @@ Some useful styles for each slide are:
 * smbullets - sizes and seperates more bullets (smaller, closer together)
 * subsection - creates a different background for titles
 * command - monospaces h1 title slides
-* commandline - for pasted commandline sections 
+* commandline - for pasted commandline sections
     (needs leading '$' for commands, then output on subsequent lines)
 * code - monospaces everything on the slide
 * incremental - can be used with 'bullets' and 'commandline' styles,
@@ -108,6 +108,43 @@ Some useful styles for each slide are:
 
 Check out the example directory included to see examples of most of these.
 
+Transitions can be supplied through the use of transition=tname on the !SLIDE
+definition, where tname is one of the following supported transitions:
+
+ * blindX
+ * blindY
+ * blindZ
+ * cover
+ * curtainX
+ * curtainY
+ * fade
+ * fadeZoom
+ * growX
+ * growY
+ * none (this is the default)
+ * scrollUp
+ * scrollDown
+ * scrollLeft
+ * scrollRight
+ * scrollHorz
+ * scrollVert
+ * shuffle
+ * slideX
+ * slideY
+ * toss
+ * turnUp
+ * turnDown
+ * turnLeft
+ * turnRight
+ * uncover
+ * wipe
+ * zoom
+
+The transitions are provided by jQuery Cycle plugin. See
+http://www.malsup.com/jquery/cycle/browser.html to view the effects and 
+http://www.malsup.com/jquery/cycle/adv2.html for how to add
+custom effects.
+
 You can manage the presentation with the following keys:
 
  * space, cursor right: next slide
@@ -115,7 +152,7 @@ You can manage the presentation with the following keys:
  * d: debug mode
  * c: table of contents (vi)
  * f: toggle footer
- * z: toggle help 
+ * z: toggle help
 
 Real World Usage
 ====================
@@ -134,6 +171,18 @@ So far, ShowOff has been used in the following presentations:
 * LRUG's February meeting - Showing Off with Ruby - Joel Chippindale
   http://github.com/mocoso/showing-off-with-ruby
 
+* PyCon 2010 - Hg and Git; Can't we all just get along? - Scott Chacon
+  http://github.com/schacon/pycon-hg-git
+
+* PdxJs Tech Talk - Asynchronous Coding For My Tiny Ruby Brain - Rick Olson
+  http://github.com/technoweenie/pdxjs-twitter-node
+
+* RORO Perth Talk - Rails 3; A Brief Introduction — Darcy Laycock
+  http://github.com/Sutto/roro-perth-rails-3
+
+* PDXRB Tech Talk - Here's Sinatra - Jesse Cooke
+  http://github.com/jc00ke/pdxrb_sinatra
+
 If you use it for something, please let me know so I can add it.
 
 Future Plans

data/lib/showoff.rb

@@ -3,13 +3,7 @@ require 'sinatra/base'
 require 'json'
 require 'nokogiri'
 require 'showoff_utils'
-
-begin
-  require 'prawn'
-  require 'princely'
-rescue LoadError
-  puts 'pdf generation disabled - install prawn'
-end
+require 'princely'
 
 begin 
   require 'rdiscount'
@@ -52,7 +46,7 @@ class ShowOff < Sinatra::Application
       Dir.glob("#{options.pres_dir}/*.js").map { |path| File.basename(path) }
     end
 
-    def process_markdown(name, content, wrap = false)
+    def process_markdown(name, content)
       slides = content.split(/^!SLIDE/)
       slides.delete('')
       final = ''
@@ -61,21 +55,30 @@ class ShowOff < Sinatra::Application
       end
       slides.each do |slide|
         md = ''
+        # extract content classes
         lines = slide.split("\n")
-        classes = lines.shift
+        content_classes = lines.shift.split
         slide = lines.join("\n")
-        md += '<div class="' + wrap + '">' if wrap
+        # add content class too
+        content_classes.unshift "content"
+        # extract transition, defaulting to none
+        transition = 'none'
+        content_classes.delete_if { |x| x =~ /^transition=(.+)/ && transition = $1 }
+        puts "classes: #{content_classes.inspect}"
+        puts "transition: #{transition}"
+        # create html
+        md += "<div class=\"slide\" data-transition=\"#{transition}\">"
         if seq
-          md += "<div class=\"slide #{classes}\" ref=\"#{name}/#{seq.to_s}\">\n"
+          md += "<div class=\"#{content_classes.join(' ')}\" ref=\"#{name}/#{seq.to_s}\">\n"
           seq += 1
         else
-          md += "<div class=\"slide #{classes}\" ref=\"#{name}\">\n"
+          md += "<div class=\"#{content_classes.join(' ')}\" ref=\"#{name}\">\n"
         end
         sl = Markdown.new(slide).to_html 
         sl = update_image_paths(name, sl)
         md += sl
         md += "</div>\n"
-        md += "</div>\n" if wrap
+        md += "</div>\n"
         final += update_commandline_code(md)
       end
       final
@@ -124,7 +127,7 @@ class ShowOff < Sinatra::Application
       html.root.to_s
     end
     
-    def get_slides_html(wrap = false)
+    def get_slides_html
       index = File.join(options.pres_dir, 'showoff.json')
       files = []
       if File.exists?(index)
@@ -138,7 +141,7 @@ class ShowOff < Sinatra::Application
         data = ''
         files.each do |f|
           fname = f.gsub(options.pres_dir + '/', '').gsub('.md', '')
-          data += process_markdown(fname, File.read(f), wrap)
+          data += process_markdown(fname, File.read(f))
         end
       end
       data
@@ -189,12 +192,12 @@ class ShowOff < Sinatra::Application
   end
 
   get '/onepage' do
-    @slides = get_slides_html('preso')
+    @slides = get_slides_html
     erb :onepage
   end
 
   get '/pdf' do
-    @slides = get_slides_html('preso')
+    @slides = get_slides_html
     @no_js = true
     html = erb :onepage
     p = Princely.new

data/public/css/onepage.css

@@ -1,4 +1,4 @@
-.preso { 
+.slide {
     margin: 10px;
     padding: 0;
     width: 1020px;

data/public/css/pdf.css

@@ -1,4 +1,4 @@
-.preso { 
+.slide {
     margin: 0;
     padding: 0;
     width: 100%;

data/public/css/reset.css

@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

data/public/css/showoff.css

@@ -1,33 +1,25 @@
 body {
     font-family: "Gill Sans", Helvetica, Arial, sans-serif;
-    padding: 0;
-    margin: 0;
-    border: 0;
 }
 
-#preso { 
-    margin: 0;
-    padding: 0;
+#preso, .slide {
+    background: #fff;
     width: 1020px;
     height: 740px;
-    margin-left:auto; 
+    margin-left:auto;
     margin-right:auto;
     overflow:hidden;
 }
-#footer { 
+
+#footer {
     background: #eee;
-    margin: 0;
     padding: 2px;
     width: 1010px;
     height: 20px;
-    margin-left:auto; 
+    margin-left:auto;
     margin-right:auto;
 }
 
-.slide {
-    border: 1px solid #fff;
-}
-
 .center img {
     display:block;
     margin-left:auto;
@@ -35,13 +27,7 @@ body {
 }
 
 .bullets ul {
-    display: block;
-    height: 600px;
     font-size: 3em;
-    list-style: none;
-    margin-left: 0;
-    padding-left: 1em;
-    text-indent: -1em;
 }
 .bullets ul li {
     text-align: center;
@@ -49,13 +35,7 @@ body {
 }
 
 .smbullets ul {
-    display: block;
-    height: 600px;
     font-size: 2em;
-    list-style: none;
-    margin-left: 0;
-    padding-left: 1em;
-    text-indent: -1em;
 }
 .smbullets ul li {
     text-align: center;
@@ -102,9 +82,14 @@ h1 { font-size: 5em; font-weight: normal; text-align: center;}
 h2 { font-size: 3em; font-weight: normal; text-align: center; }
 h3 { font-size: 2em; font-weight: normal; text-align: center; }
 
+h1, h2, h3 {
+  margin: 0.5em 0;
+}
+
 pre { margin-left: 40px; font-size: 2.8em; }
 
 .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
+.offscreen { position:absolute; top:0; left:-9999px; overflow:hidden; }
 #debugInfo { margin-left: 30px; }
 
 #help {
@@ -112,6 +97,7 @@ pre { margin-left: 40px; font-size: 2.8em; }
     position: absolute;
     right: 80px;
     display: none;
+    z-index: 2147483647; //max, see http://www.puidokas.com/max-z-index/
 }
 #help table tr td.key {
     text-align: right;
@@ -120,6 +106,10 @@ pre { margin-left: 40px; font-size: 2.8em; }
     font-weight: bold;
 }
 
+.fg-menu-container {
+    z-index: 2147483647; //max, see http://www.puidokas.com/max-z-index/
+}
+
 .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
 .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
 a.fg-button { float:left; }
@@ -190,7 +180,7 @@ a.fg-button { float:left; }
 .code .vi { color: #008080 } /* Name.Variable.Instance */
 .code .il { color: #009999 } /* Literal.Number.Integer.Long */
 
-.results { 
+.results {
   background-color:#002200;
   color:#00AA00;
   font-size:2em;

data/public/js/jquery.batchImageLoad.js

@@ -0,0 +1,56 @@
+/**
+ *  Plugin which is applied on a list of img objects and calls
+ *  the specified callback function, only when all of them are loaded (or errored).
+ *  @author:  H. Yankov (hristo.yankov at gmail dot com)
+ *  @version: 1.0.0 (Feb/22/2010)
+ *	http://yankov.us
+ */
+
+(function($) {
+$.fn.batchImageLoad = function(options) {
+	var images = $(this);
+	var originalTotalImagesCount = images.size();
+	var totalImagesCount = originalTotalImagesCount;
+	var elementsLoaded = 0;
+
+	// Init
+	$.fn.batchImageLoad.defaults = {
+		loadingCompleteCallback: null,
+		imageLoadedCallback: null
+	}
+  var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);
+
+	// Start
+	images.each(function() {
+		// The image has already been loaded (cached)
+		if ($(this)[0].complete) {
+			totalImagesCount--;
+			if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+		// The image is loading, so attach the listener
+		} else {
+			$(this).load(function() {
+				elementsLoaded++;
+
+				if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+
+				// An image has been loaded
+				if (elementsLoaded >= totalImagesCount)
+					if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+			});
+			$(this).error(function() {
+				elementsLoaded++;
+
+				if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+
+				// The image has errored
+				if (elementsLoaded >= totalImagesCount)
+					if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+			});
+		}
+	});
+
+	// There are no unloaded images
+	if (totalImagesCount <= 0)
+		if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+};
+})(jQuery);