showoff 0.7.0 → 0.9.7

data/lib/showoff_utils.rb

@@ -1,4 +1,28 @@
 class ShowOffUtils
+
+  # Helper method to parse a comma separated options string and stores
+  # the result in a dictionrary
+  #
+  # Example:
+  #
+  #    "tpl=hpi,title=Over the rainbow"
+  #
+  #    will be stored as
+  #
+  #      { "tpl" => "hpi", "title" => "Over the rainbow" }
+  def self.parse_options(option_string="")
+    result = {}
+
+    if option_string
+      option_string.split(",").each do |element|
+        pair = element.split("=")
+        result[pair[0]] = pair.size > 1 ? pair[1] : nil
+      end
+    end
+
+    result
+  end
+
   def self.presentation_config_file
     @presentation_config_file ||= 'showoff.json'
   end
@@ -274,11 +298,49 @@ class ShowOffUtils
   end
 
   def self.showoff_title(dir = '.')
-    index = File.join(dir, ShowOffUtils.presentation_config_file )
-    order = nil
+    get_config_option(dir, 'name', "Presentation")
+  end
+
+  def self.pause_msg(dir = '.')
+    get_config_option(dir, 'pause_msg', 'PAUSED')
+  end
+
+  def self.default_style(dir = '.')
+    get_config_option(dir, 'style', '')
+  end
+
+  def self.default_style?(style, dir = '.')
+    default = default_style(dir)
+    style.split('/').last.sub(/\.css$/, '') == default
+  end
+
+  def self.showoff_pdf_options(dir = '.')
+    opts = get_config_option(dir, 'pdf_options', {:page_size => 'Letter', :orientation => 'Landscape'})
+    Hash[opts.map {|k, v| [k.to_sym, v]}] # keys must be symbols
+  end
+
+  def self.showoff_markdown(dir = ".")
+    get_config_option(dir, "markdown", "redcarpet")
+  end
+
+  def self.showoff_renderer_options(dir = '.', default_options = {})
+    opts = get_config_option(dir, showoff_markdown(dir), default_options)
+    Hash[opts.map {|k, v| [k.to_sym, v]}] if opts    # keys must be symbols
+  end
+
+  def self.get_config_option(dir, option, default = nil)
+    index = File.join(dir, ShowOffUtils.presentation_config_file)
     if File.exists?(index)
       data = JSON.parse(File.read(index))
-      data.is_a?(Hash) && data['name'] || "Presentation"
+      if data.is_a?(Hash)
+        if default.is_a?(Hash)
+          default.merge(data[option] || {})
+        else
+          data[option] || default
+        end
+      end
+    else
+      default
     end
   end
 
@@ -294,7 +356,7 @@ class ShowOffUtils
     EXTENSIONS[ext] || ext
   end
 
-  REQUIRED_GEMS = %w(bluecloth nokogiri showoff gli heroku)
+  REQUIRED_GEMS = %w(redcarpet showoff heroku)
 
   # Creates the file that lists the gems for heroku
   #
@@ -342,3 +404,47 @@ class ShowOffUtils
     end
   end
 end
+
+# Load the configuration for the markdown engine from the showoff.json
+# file
+module MarkdownConfig
+  def self.setup(dir_name)
+    # Load markdown configuration
+    case ShowOffUtils.showoff_markdown(dir_name)
+
+    when 'rdiscount'
+      Tilt.prefer Tilt::RDiscountTemplate, "markdown"
+
+    when 'maruku'
+      Tilt.prefer Tilt::MarukuTemplate, "markdown"
+      # Now check if we can go for latex mode
+      require 'maruku'
+      require 'maruku/ext/math'
+
+      # Load maruku options
+      opts = ShowOffUtils.showoff_renderer_options(dir_name,
+                                                   { :use_tex => false,
+                                                     :png_dir => 'images',
+                                                     :html_png_url => '/file/images/'})
+
+      if opts[:use_tex]
+        MaRuKu::Globals[:html_math_output_mathml] = false
+        MaRuKu::Globals[:html_math_engine] = 'none'
+        MaRuKu::Globals[:html_math_output_png] = true
+        MaRuKu::Globals[:html_png_engine] =  'blahtex'
+        MaRuKu::Globals[:html_png_dir] = opts[:png_dir]
+        MaRuKu::Globals[:html_png_url] = opts[:html_png_url]
+      end
+
+    when 'bluecloth'
+      Tilt.prefer Tilt::BlueClothTemplate, "markdown"
+
+    when 'kramdown'
+      Tilt.prefer Tilt::KramdownTemplate, "markdown"
+
+    else
+      Tilt.prefer Tilt::RedcarpetTemplate, "markdown"
+
+    end
+  end
+end

data/public/css/onepage.css

@@ -1,5 +1,9 @@
 /* Screen */
 @media screen {
+  body {
+    overflow: scroll;
+  }
+
   .slide {
       margin: 10px;
       padding: 0;
@@ -9,6 +13,7 @@
       margin-left:auto; 
       margin-right:auto;
       overflow:hidden;
+      position: relative;
       border: 1px solid #333;
       page-break-after: always
   }
@@ -23,6 +28,7 @@
       height: 600px;
       overflow:hidden;
       border: none;
+      position: relative;
       page-break-after: always
   }
 }

data/public/css/presenter.css

@@ -1,66 +1,356 @@
+/* Sizes must be defined for child elements to use them in fluid calculations. */
+#main {
+  height: 100%;
+  min-width: 630px;
+}
+
 div.zoomed {
   zoom: 50%;
-  -moz-transform: scale(50%);
+  -moz-transform: scale(0.5);
+  -moz-transform-origin: 0 0;
 }
 
-#preso { margin-top: 20px; }
+#preso { margin: 2% auto; }
 
-#main h2 { 
-  text-align: left;
-  font-size: 1.5em;
+#topbar {
+  height: 5%;
+  min-height: 24px;
+  background: #cfcfcf;
+  vertical-align: middle;
+  text-align: right;
+  color: #fff;
+  font-size: 0.8em;
 }
+  #slideSource {
+    float: left;
+    margin: 0.5em 0 0 0.5em;
+  }
+  #links {
+    position: relative;
+    top: 0.7em;
+    font-size: 0.65em;
+    padding: 0 1em;
+  }
+  #links a {
+    color: #fff;
+    padding: 0.35em;
+    text-decoration: none;
+    border: 1px solid #ccc;
+    -moz-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+    -khtml-border-radius: 0.5em;
+    border-radius: 0.5em;
+  }
+  #links a:hover {
+    background-color: #555;
+  }
+
+  #topbar #links .mobile {
+    display: none;
+  }
 
-#progress {
-  padding: 10px;
-}
-#slideSource {
-  padding: 10px;
-  background: #9d9;
-}
 
-#preview {
-  min-height: 430px;
-  background: #777;
+#center {
+  height: 75%;
+  background-color: #fff;
 }
+  #sidebar {
+    width: 25%;
+    min-width: 210px;
+    height: 100%;
+    float: left;
+    padding: 0;
+    margin: 0;
+    border-right: 2px solid #ccc;
+  }
+    #timerSection {
+      height: 5%;
+      margin-left: 0.5em;
+      min-height: 25px;
+    }
 
-#links {
-  background: #fff;
-  padding: 10px;
-  text-align: right;
+    #timerSection input[type='button'] {
+      float: right;
+    }
+
+    .tBlue   { background: #79d; }
+    .tGreen  { background: #9d9; }
+    .tRed    { background: #d99; }
+    .tYellow { background: #dd9; }
+
+#sidebar #feedbackPace {
+  height: 10%;
+  position: relative;
+  background: transparent url(pace.png) no-repeat center bottom;
+}
+#sidebar #feedbackPace #paceFast,
+#sidebar #feedbackPace #paceSlow {
+  font-size: 1.5em;
+  font-weight: bold;
+  display: none;
+}
+#sidebar #feedbackPace #paceFast {
+  float: left;
+  margin-left: 1em;
+}
+#sidebar #feedbackPace #paceSlow {
+  float: right;
+  margin-right: 1em;
 }
-#links a { color: #000; }
+#sidebar #feedbackPace #paceMarker {
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, 0);
+  -moz-transform: translate(-50%, 0);
+	-ms-transform: translate(-50%, 0);
+	-o-transform: translate(-50%, 0);
 
-#slidemenu {
-  background: #fff;
-  padding: 10px;
 }
-#slidemenu ul li {
-  padding: 5px;
+
+    #slidemenu {
+      height: 85%;
+      background-color: #fff;
+    }
+    #slidemenu ul li {
+      padding: 5px;
+    }
+
+    .menu {
+      height: 100%;
+      max-height: 100%;
+      overflow:auto;
+    }
+
+    .menu a {
+      display: block;
+      color: #000;
+      margin: 1px;
+      padding: 0.25em;
+      -moz-border-radius: 0.25em;
+      -webkit-border-radius: 0.25em;
+      -khtml-border-radius: 0.25em;
+      border-radius: 0.25em;
+    }
+    .menu a:hover {
+      margin: 0;
+      border: 1px solid #ccc;
+      background-color: #dedede;
+    }
+    .menu > ul > li > ul {
+      padding-left: 20px;
+      font-size: 80%;
+    }
+    .menu > ul > li > a {
+      padding: 10px;
+      background: #eee;
+    }
+
+
+  #preview {
+    height: 95%;
+    overflow: auto;
+    background: #eee;
+  }
+
+img#disconnected {
+  margin: 0.5em 1em;
 }
 
-#sidebar { background: #ddd; }
+  #statusbar {
+    height: 5%;
+    vertical-align: middle;
+  }
+    #progress {
+      margin-left: 1em;
+    }
+    #debugInfo {
+      display: inline;
+    }
+    #enableFollower,
+    #enableRemote {
+      float: right;
+      border: 1px solid #ccc;
+      margin: 1px;
+      padding: 0.1em;
+      -moz-border-radius: 0.25em;
+      -webkit-border-radius: 0.25em;
+      -khtml-border-radius: 0.25em;
+      border-radius: 0.25em;
+    }
+    #enableRemote.active {
+      background-color: #fff8bf;
+      -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
+      -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
+      box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
+    }
+    #zoomer {
+      float: right;
+    }
 
-#notes { 
-  background: #ff9;
-  font-size: 1.5em;
-  min-height: 150px;
-  padding: 20px;
+#separator {
+  clear: both;
+  border-bottom: 2px solid #ccc;
 }
 
-.menu {
-  height: 350px;
-  max-height: 350px;
-  overflow:auto;
+#bottom {
+  height: 20%;
+  background: #ff9;
 }
 
-.menu a {
-  display: block;
-  color: #000;
+  #questions {
+    float: left;
+    width: 25%;
+    min-width: 210px;
+    border-right: 2px solid #ccc;
+    font-size: 1.5em;
+    overflow: auto;
+    height: 100%;
+  }
+  #questions h3 {
+    font-size: 1.25em;
+  }
+  #questions ul {
+    margin-left: 1.5em;
+  }
+  #questions ul li {
+    list-style-type: disc;
+  }
+
+  #notes {
+    float: right;
+    width: 74%;
+    font-size: 1.5em;
+    overflow: auto;
+    height: 100%;
+  }
+  #notes p,
+  #notes h1,
+  #notes h2,
+  #notes h3,
+  #notes h4,
+  #notes ol,
+  #notes ul {
+    margin-right: 0.75em;
+  }
+  #notes p {
+    padding: 0.1em inherit;
+    margin-bottom: 0.5em;
+  }
+  #notes ol, #notes ul {
+    padding-left: 2em;
+  }
+  #notes ol {
+    list-style-type: decimal;
+  }
+  #notes ul {
+    list-style-type: disc;
+  }
+
+#topbar {
+  background: #4c4c4c; /* Old browsers */
+  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzFjMWMxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+  background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-8 */
 }
-.menu > ul > li > ul {
-  padding-left: 20px;
+
+
+a.controls {
+  text-decoration: none;
+  padding: 0 0.25em 0.1em 0.25em;
+  background-color: #fff2ce;
+  border: 1px solid #ccc;
+  -moz-border-radius: 0.5em;
+  -webkit-border-radius: 0.5em;
+  -khtml-border-radius: 0.5em;
+  border-radius: 0.5em;
 }
-.menu > ul > li > a {
-  padding: 10px;
-  background: #eee;
+
+/* iPhone */
+/* Portrait */
+@media screen and (max-width: 320px)
+{
+  #topbar,#main,#center,#preview,#bottom,#sidebar {
+    min-width: 320px !important;
+    max-width: 320px !important;
+    width: 320px !important;
+    margin: 0;
+    padding: 0;
+  }
+  #topbar #slideSource {
+    max-width: 256px;
+    overflow: hidden;
+  }
+  #topbar #slideSource #slideFile {
+    display: inline-block;
+    width: 205px;
+    max-width: 205px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  #topbar #links .desktop,
+  #zoomer,
+  #separator,
+  #stylepicker {
+    display: none !important;
+  }
+  #topbar #links {
+    top: 0.5em;
+    padding: 0 0.5em;
+  }
+  #topbar #links .mobile {
+    display: inline;
+  }
+  #center {
+    height: 267px;
+  }
+  #statusbar {
+    vertical-align: top;
+    font-size: 0.75em;
+  }
+  #statusbar * {
+    vertical-align: top;
+  }
+  #statusbar #enableRemote,
+  #statusbar #enableFollower {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+  #statusbar #remoteToggle,
+  #statusbar #followerToggle {
+    line-height: 1em;
+    height: 1em;
+    margin: 0 0 0 0.25em;
+    padding: 0;
+  }
+  #bottom {
+    height: 245px;
+    overflow: auto;
+  }
+  #sidebar {
+    position: absolute;
+    top: 534px;
+    float: none;
+    height: auto;
+  }
+  #preso {
+    width: 976px;
+    margin: 0;
+    padding: 0;
+    margin-left:auto;
+    margin-right:auto;
+  }
+  #preso .slide {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
 }

data/public/css/sh_style.css

@@ -64,3 +64,18 @@ pre.sh_sourceCode .sh_value { color: darkgreen; font-style: italic; }
 pre.sh_sourceCode .sh_section { color: black; font-weight: bold; }
 pre.sh_sourceCode .sh_paren { color: red; }
 pre.sh_sourceCode .sh_attribute { color: darkgreen; }
+
+/* for Puppet */
+pre.sh_sourceCode .sh_puppet_uri { color: blue; }
+pre.sh_sourceCode .sh_ensure { color: magenta; }
+pre.sh_sourceCode .sh_hashrocket { color: brown; }
+pre.sh_sourceCode .sh_param { color: purple; font-weight: bold; }
+pre.sh_sourceCode .sh_reference { color: orange; }
+
+/* for Puppet Output */
+pre.sh_sourceCode.sh_puppet_output { background-color: black; color: white; }
+pre.sh_sourceCode .sh_info { color: green; }
+pre.sh_sourceCode .sh_notice { color: cyan; }
+pre.sh_sourceCode .sh_warning { color: red; }
+
+