Merged upstream changes

.gitignore

@@ -19,3 +19,4 @@ rdoc
 pkg
 
 ## PROJECT::SPECIFIC
+dist

README.txt

@@ -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)
@@ -68,18 +68,18 @@ the following contents:
 
   # My Presentation #
 
-  !SLIDE bullets incremental
+  !SLIDE bullets incremental transition=fade
 
   # Bullet Points #
 
   * first point
   * 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"}
@@ -109,6 +109,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

TODO.txt

@@ -1,19 +1,12 @@
 TODO
 =================
 
-- static output
-  - single html file
-  - pdf
-- showoff.json in each subdir
+- can have showoff.json in each subdir
 - showoff add
   - add new slide/section
   - add slides of images directory (refactor script/import_images.rb)
 - simple highlighting (highlight region of slide / click to highlight)
-- simple transitions
 - presenter tools
-  - show/hide timer
-  - warning when time is up or pace is too slow
-    - part of plugin system of things that can be running outside of slideshow
   - notes view (quick polling)
 - audience interface
   - slide download / git clone

example/one/slidesA.md

@@ -2,7 +2,7 @@
 
 # First Slide #
 
-!SLIDE bullets incremental
+!SLIDE bullets incremental transition=fade
 
 # Second Slide #
 
@@ -11,3 +11,7 @@
 * a third thing
 * a fourth thing
 * a fifth thing
+
+!SLIDE center transition=scrollUp
+
+![octocat](octocat.png)

lib/showoff.rb

@@ -46,7 +46,7 @@ def js_files
       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 = ''
@@ -55,21 +55,30 @@ def process_markdown(name, content, wrap = false)
       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
@@ -118,7 +127,7 @@ def update_commandline_code(slide)
       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)
@@ -132,7 +141,7 @@ def get_slides_html(wrap = false)
         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
@@ -183,12 +192,12 @@ def inline_js(jses, pre = nil)
   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

public/css/onepage.css

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

public/css/pdf.css

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

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;
+}

public/css/showoff.css

@@ -1,61 +1,41 @@
 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;
     margin-right:auto;
 }
 
 .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;
     padding: 25px;
 }
 
 .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,16 +82,22 @@ 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 {
     background: #9f9;
     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;