showoff 0.12.0 → 0.12.1

data/lib/showoff/version.rb

@@ -1,3 +1,3 @@
 # No namespace here since ShowOff is a class and I'd have to inherit from
 # Sinatra::Application (which we don't want to load here)
-SHOWOFF_VERSION = '0.12.0'
+SHOWOFF_VERSION = '0.12.1'

data/lib/showoff_utils.rb

@@ -32,7 +32,7 @@ class ShowOffUtils
   end
 
   def self.create(dirname,create_samples,dir='one')
-    Dir.mkdir(dirname) if !File.exists?(dirname)
+    Dir.mkdir(dirname) if !File.exist?(dirname)
     Dir.chdir(dirname) do
       if create_samples
         # create section
@@ -52,6 +52,28 @@ class ShowOffUtils
     end
   end
 
+  def self.skeleton(config)
+    if config
+      FileUtils.cp(config, '.')
+      ShowOffUtils.presentation_config_file = File.basename(config)
+    end
+
+    self.showoff_sections('.').each do |filename|
+      next if File.exist? filename
+
+      puts "Creating: #{filename}"
+      if filename.downcase.end_with? '.md'
+        FileUtils.mkdir_p File.dirname(filename)
+
+        File.open(filename, 'w+') do |f|
+          f.puts make_slide("#{filename.sub(/\.md$/, '')}")
+        end
+      else
+        FileUtils.mkdir_p filename
+      end
+    end
+  end
+
   HEROKU_GEMS_FILE = '.gems'
   HEROKU_BUNDLER_GEMS_FILE = 'Gemfile'
   HEROKU_CONFIG_FILE = 'config.ru'
@@ -99,6 +121,7 @@ class ShowOffUtils
   # generate a static version of the site into the gh-pages branch
   def self.github
     ShowOff.do_static(nil)
+    FileUtils.touch 'static/.nojekyll'
     `git add -f static`
     sha = `git write-tree`.chomp
     tree_sha = `git rev-parse #{sha}:static`.chomp
@@ -152,7 +175,7 @@ class ShowOffUtils
   # [:type] - the type of slide to create
   def self.add_slide(options)
 
-    add_new_dir(options[:dir]) if options[:dir] && !File.exists?(options[:dir])
+    add_new_dir(options[:dir]) if options[:dir] && !File.exist?(options[:dir])
 
     options[:type] = 'code' if options[:code]
 
@@ -273,10 +296,15 @@ class ShowOffUtils
     [code,lines,width]
   end
 
-  def self.showoff_sections(dir,logger)
+  def self.showoff_sections(dir, logger = nil)
+    unless logger
+      logger = Logger.new(STDOUT)
+      logger.level = Logger::WARN
+    end
+
     index = File.join(dir, ShowOffUtils.presentation_config_file)
     sections = nil
-    if File.exists?(index)
+    if File.exist?(index)
       data = JSON.parse(File.read(index))
       logger.debug data
       if data.is_a?(Hash)
@@ -330,7 +358,7 @@ class ShowOffUtils
 
   def self.get_config_option(dir, option, default = nil)
     index = File.join(dir, ShowOffUtils.presentation_config_file)
-    if File.exists?(index)
+    if File.exist?(index)
       data = JSON.parse(File.read(index))
       if data.is_a?(Hash)
         if default.is_a?(Hash)
@@ -393,7 +421,7 @@ class ShowOffUtils
   #
   # Returns true if the file was created
   def self.create_file_if_needed(filename,force)
-    if !File.exists?(filename) || force
+    if !File.exist?(filename) || force
       File.open(filename, 'w+') do |f|
         yield f
       end
@@ -409,44 +437,53 @@ end
 # file
 module MarkdownConfig
   def self.setup(dir_name)
-    # Load markdown configuration
-    case ShowOffUtils.showoff_markdown(dir_name)
+    require 'tilt'
+    require 'tilt/erb'
+
+    renderer = ShowOffUtils.showoff_markdown(dir_name)
+    begin
+      # Load markdown configuration
+      case renderer
+      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_output_png]    = true
+          MaRuKu::Globals[:html_math_engine]        = 'none'
+          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 'rdiscount'
-      Tilt.prefer Tilt::RDiscountTemplate, "markdown"
+      when 'bluecloth'
+        Tilt.prefer Tilt::BlueClothTemplate, "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 'kramdown'
+        Tilt.prefer Tilt::KramdownTemplate, "markdown"
 
-    when 'bluecloth'
-      Tilt.prefer Tilt::BlueClothTemplate, "markdown"
+      when 'commonmarker'
+        Tilt.prefer Tilt::CommonMarkerTemplate, "markdown"
 
-    when 'kramdown'
-      Tilt.prefer Tilt::KramdownTemplate, "markdown"
-
-    else
-      Tilt.prefer Tilt::RedcarpetTemplate, "markdown"
-      require 'tilt'
-      require 'tilt/erb'
+      else
+        Tilt.prefer Tilt::RedcarpetTemplate, "markdown"
 
+      end
+    rescue LoadError
+      puts "ERROR: The #{renderer} markdown rendering engine does not appear to be installed correctly."
+      exit! 1
     end
   end
 

data/public/css/TimeCircles.css

@@ -0,0 +1,42 @@
+/**
+ *	This element is created inside your target element
+ *	It is used so that your own element will not need to be altered
+ **/
+.time_circles {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+/**
+ *	This is all the elements used to house all text used
+ * in time circles
+ **/
+.time_circles > div {
+    position: absolute;
+    text-align: center;
+}
+
+/**
+ *	Titles (Days, Hours, etc)
+ **/
+.time_circles > div > h4 {
+    margin: 0px;
+    padding: 0px;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: 'Century Gothic', Arial;
+}
+
+/**
+ *	Time numbers, ie: 12
+ **/
+.time_circles > div > span {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-family: 'Century Gothic', Arial;
+    font-size: 300%;
+    margin-top: 0.4em;
+    font-weight: bold;
+}

data/public/css/presenter.css

@@ -17,30 +17,46 @@
 }
 
 #topbar {
+  display: flex;
+  flex-flow: row;
   line-height: 24px;
+  height: 24px;
   background: #222222;
   font-size: .55em;
   color: #fff;
-  padding: 0 1em;
 }
 
   #topbar a {
     text-decoration: none;
     color: #fff;
-    padding: .35em;
   }
 
   #topbar a:hover{
     background-color: #555;
   }
 
+  #topbar .fa {
+    color: #8affeb;
+  }
+
+  #slideSource {
+    display: flex;
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 0.5em;
+  }
+
   #links {
-    float: right;
+    display: flex;
+    flex-shrink: 0;
+    margin: 0 0 0 auto;
   }
 
   #links a {
     border: 1px solid #ccc;
     border-radius: 0.5em;
+    padding: .35em;
   }
 
   #links a.enabled {
@@ -52,13 +68,29 @@
   }
 
   .desktop span {
-    margin: 0 1em;
+    margin: 0 0.5em;
   }
 
 #presenterPopup {
-  font-size: 0.5em;
+  display: none;
+  position: absolute;
+  z-index: 2147483647;
+  top: 24px;
+  left: 25%;
+  max-height: 80%;
+  width: 50%;
+  border-radius: 0 0 .5em .5em;
+  border-bottom: 8px solid #222222;
+  background-color: #222222;
+  color: #ffffff;
+  font-size: .8em;
+  overflow: auto;
 }
 
+  #presenterPopup a {
+    color: #ffffff;
+  }
+
 #center {
   display: -webkit-flex;
   display:         flex;
@@ -86,25 +118,58 @@
   }
     #timerSection {
       margin-bottom: 0.25em;
-      padding-left: 0.5em;
       height: 2.15em;
       min-height: 2.15em;
       line-height: 2.15em;
       vertical-align: middle;
     }
+    #timerSection.open {
+      height: 100px;
+      min-height: 100px;
+    }
+
+    #timerDisplay {
+      height: 100px;
+      width: 100px;
+    }
 
-    #timerInfo {
-      margin-left: 25px;
+    #timerDisplay.paused {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      opacity: 0.25;
     }
 
     #timerSection input[type='button'] {
+      margin: 2px 0px;
+    }
+
+    #timerSection #pauseTimer {
+      float: left;
+      display: none;
+    }
+    #timerSection #stopTimer {
       float: right;
+      display: none;
+    }
+    #timerSection #timerDisplay {
+      display: none;
+      margin: 0 auto;
     }
 
-    .tBlue   { background: #79d; }
-    .tGreen  { background: #9d9; }
-    .tRed    { background: #d99; }
-    .tYellow { background: #dd9; }
+    .intervalHalf,
+    .intervalQuarter,
+    .intervalWarning,
+    .intervalCritical {
+      -webkit-transition: background-color 1000ms linear;
+      -moz-transition:    background-color 1000ms linear;
+      -o-transition:      background-color 1000ms linear;
+      -ms-transition:     background-color 1000ms linear;
+      transition:         background-color 1000ms linear;
+    }
+    .intervalHalf     { background: #99ff99; }
+    .intervalQuarter  { background: #ffff66; }
+    .intervalWarning  { background: #ffcc66; }
+    .intervalCritical { background: #ffcccc; }
 
     #feedbackPace {
       height: 40px;
@@ -218,7 +283,7 @@
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
-  height: 150px;
+  height: 180px;
   background: #F5ED9B;
   border-top: 1px solid #ccc;
 }
@@ -234,17 +299,26 @@
     height: 100%;
   }
 
-  #questions ul {
-    margin-left: 1.5em;
-    margin-right: 0.25em;
+  #questions #answered li {
+    text-decoration: line-through;
+    color: #ccc;
+  }
+
+  #questions #unanswered li:hover {
+    background-color: #dedede;
+  }
+  #questions #unanswered li:hover:after {
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+    padding: 0 8px;
+    float: right;
+    content: "\f058"; /* fa-check-circle */
   }
 
-  #questions li:hover {
-    background: #dedede url(close.png) no-repeat top right;
-    -moz-border-radius: 0.25em;
-    -webkit-border-radius: 0.25em;
-    -khtml-border-radius: 0.25em;
-    border-radius: 0.25em;
+  #questions li {
+    cursor: default;
   }
 
   #notes {
@@ -254,33 +328,46 @@
             order: 1;
     overflow: auto;
     height: 100%;
+    padding: 0 1em;
+    display: block;
+  }
+
+  #notes > :first-child:before {
+    display: none;
   }
-  #notes p,
-  #notes h1,
-  #notes h2,
-  #notes h3,
-  #notes h4,
-  #notes ol,
-  #notes ul {
-    margin-right: 0.75em;
-    padding-left: 0.25em;
+
+  #notes ul.section-selector {
+    padding: 0;
+    margin: 0 0 0 -1.25em;         /* compensate for the border on #notes. 1/0.8 em */
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    font-size: 0.8em;
+    position: absolute;
+    background-color: #F5ED9B;
   }
-  #notes p {
-    padding: 0.25em;
-    margin-bottom: 0.5em;
+  #notes ul.section-selector li {
+    display: none;
+    padding: 0 1em;
   }
-  #notes ol, #notes ul {
-    padding-left: 2em;
-    padding-top: 0.25em;
-    margin-bottom: 0.5em;
+  #notes ul.section-selector li:hover {
+    background-color: #b9b9b9;
+    transition-duration: 0.5s;
   }
-  #notes ol {
-    list-style-type: decimal;
+  #notes ul.section-selector li.selected {
+    display: inline;
+    background-color: #ccc;
   }
-  #notes ul {
-    list-style-type: disc;
+  #notes ul.section-selector:hover li {
+    display: inline;
   }
 
+  #notes ul.section-selector li a {
+    text-decoration: none;
+  }
+
+  #notes ol { list-style-type: decimal; }
+  #notes ul { list-style-type: disc; }
+
   #notes .element {
     display: inline-block;
     width: 90%;
@@ -288,9 +375,8 @@
 
   #notes .count {
     display: inline-block;
-    background-color: #27ae60;
+    background-color: #2e2e2e;
     color: #ffffff;
-    padding: 0 8px;
     font-size: 2.5em;
     vertical-align: top;
     border-radius: .2em;
@@ -302,7 +388,7 @@
     border-bottom: 4px solid #999;
     border-radius: 0 0 0 0.5em;
     padding: 0.1em 0 0.25em 0.25em;
-    margin: 0 0 1em 1em;
+    margin: 0 -1em 1em 1em;                  /* compensate for the padding in the #notes section */
     background: #eee;
     max-width: 25%;
   }
@@ -313,6 +399,11 @@
     font-size: 1.5em;
   }
 
+  #notes .pagebreak {
+    display: none;
+  }
+
+
 a.controls {
   text-decoration: none;
   padding: 0 0.25em 0.1em 0.25em;
@@ -324,6 +415,25 @@ a.controls {
   border-radius: 0.5em;
 }
 
+/* hide some elements when the screen is too small */
+@media screen and (max-width: 1000px)
+{
+  #slideSource label {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px)
+{
+  #topbar .fa {
+    display: none;
+  }
+  .desktop a {
+    margin-right: 0.25em;
+  }
+}
+
+
 /* iPhone */
 /* Portrait */
 @media screen and (max-width: 480px)
@@ -438,3 +548,9 @@ a.controls {
     padding: 0;
   }
 }
+@media screen and (pointer: coarse)
+{
+  #buttonNav {
+    position: initial;
+  }
+}