Version 4.0.0

README.md

@@ -11,6 +11,12 @@ You'll find the documentation on a Ruban: http://loicfrering.github.io/ruban/.
 Changelog
 ---------
 
+### 0.4.0
+
+* Add `fontRatio` attribute
+* Add to 'c' shortcut to toggle comments on screen version
+* Fix some bugs in printed css
+
 ### 0.3.1
 
 * Add `first()` and `last()` functions to go to the first and last slide.

coffee/ruban.coffee

@@ -7,13 +7,14 @@ class Ruban
     @toc()
     @current(@$sections.first())
     @pagination()
-    @checkHash()
     @highlight()
     @resize()
     @bind()
     @$ruban.css('transition-property', 'transform')
     @$ruban.css('-webkit-transition-property', '-webkit-transform')
-    @$ruban.css('transition-duration', @options.transitionDuration)
+    setTimeout(=>
+      @checkHash()
+    , 250)
 
   initOptions: () ->
     @options.ratio              ?= 4/3
@@ -24,6 +25,7 @@ class Ruban
     @options.stripHtmlInToc     ?= false
     @options.bindClicks         ?= false
     @options.bindMouseWheel     ?= false
+    @options.fontRatio          ?= 0.4
 
   bind: ->
     @bindKeys()
@@ -39,6 +41,7 @@ class Ruban
     key('left, up, backspace, k, h, pageup', @prev)
     key('home', @first)
     key('last', @last)
+    key('c', @toggleDetails)
 
   bindGestures: ->
     Hammer(document, {
@@ -77,7 +80,7 @@ class Ruban
     if outerWidth > @options.ratio * outerHeight
       min = outerHeight
       paddingV = @options.minPadding
-      @$ruban.parent().css('font-size', "#{min * 0.4}%")
+      @$ruban.parent().css('font-size', "#{min * @options.fontRatio}%")
       @$sections.css(
         'padding-top':    paddingV,
         'padding-bottom': paddingV
@@ -92,7 +95,7 @@ class Ruban
     else
       min = outerWidth / @options.ratio
       paddingH = @options.minPadding
-      @$ruban.parent().css('font-size', "#{min * 0.4}%")
+      @$ruban.parent().css('font-size', "#{min * @options.fontRatio}%")
       @$sections.css(
         'padding-left':  paddingH,
         'padding-right': paddingH
@@ -108,7 +111,7 @@ class Ruban
   checkHash: =>
     hash = window.location.hash
     if slide = hash.substr(2)
-      @go(slide)
+      @go(slide, {immediate: true})
 
   highlight: ->
     hljs.initHighlightingOnLoad()
@@ -141,6 +144,9 @@ class Ruban
     else
       @prevSlide()
 
+  toggleDetails: =>
+    @$current.find('details').toggleClass 'opened'
+
   last: =>
     @lastSlide()
 
@@ -195,22 +201,22 @@ class Ruban
     if $section.length and (options.force or not $section.is(@$current))
       @checkSteps($section, options.direction)
       @navigate($section)
-      @translate($section)
+      @translate($section, options.immediate)
       @current($section)
       @pagination()
 
   navigate: ($section) ->
     window.location.hash = "/#{$section.attr('id') || $section.index() + 1}"
 
-  translate: ($section) ->
+  translate: ($section, immediate = false) ->
     y = $section.prevAll().map(->
       $(@).outerHeight()
     ).get().reduce((memo, height) ->
       memo + height
     , 0)
+    @$ruban.css('transition-duration', if immediate then 0 else @options.transitionDuration)
     @$ruban.css('transform', "translateY(-#{y}px)")
 
-
   current: ($section) ->
     @$current.removeClass('active').trigger('inactive') if @$current?
     $section.addClass('active').trigger('active')

css/ruban-print.css

@@ -1,6 +1,6 @@
 html,
 body {
-  font-size: 13pt;
+  font-size: 13pt !important;
   width: auto;
   height: auto;
   border: 0;
@@ -34,8 +34,13 @@ section {
 }
 section details {
   display: block;
+  opacity: 1;
   border-top: 2px solid;
 }
+.step,
+.steps > * {
+  display: inherit !important;
+}
 .pagination {
   display: none;
 }

css/ruban-print.min.css

@@ -1,8 +1,8 @@
 /**
- * ruban v0.3.1
+ * ruban v0.4.0
  *
  * Copyright (c) 2013 Loïc Frering <[email protected]>
  * Distributed under the MIT license
  */
 
-html,body{font-size:13pt;width:auto;height:auto;border:0;margin:0 5%;padding:0;float:none!important;overflow:visible}.ruban{height:auto;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;transform:none!important}section{background:#fff;padding:0!important;position:static;width:auto;height:auto;left:auto;top:auto;margin-left:auto;margin-top:auto;border:0!important;overflow:visible;text-align:left;page-break-after:always!important;display:block!important}section details{display:block;border-top:2px solid}.pagination{display:none}
+html,body{font-size:13pt!important;width:auto;height:auto;border:0;margin:0 5%;padding:0;float:none!important;overflow:visible}.ruban{height:auto;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;transform:none!important}section{background:#fff;padding:0!important;position:static;width:auto;height:auto;left:auto;top:auto;margin-left:auto;margin-top:auto;border:0!important;overflow:visible;text-align:left;page-break-after:always!important;display:block!important}section details{display:block;opacity:1;border-top:2px solid}.step,.steps>*{display:inherit!important}.pagination{display:none}

css/ruban.css

@@ -15,6 +15,8 @@ body {
 }
 section {
   display: table;
+  position: relative;
+  z-index: 0;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
@@ -34,8 +36,30 @@ section h1:only-child {
   text-align: center;
 }
 section details {
+  transition: bottom .5s;
+  opacity: 0;
+  bottom: -100%;
+}
+section details summary::-webkit-details-marker {
   display: none;
 }
+section details p {
+  margin: 0 0 .5em 0;
+}
+section details.opened {
+  position: absolute;
+  z-index: 1;
+  opacity: 1;
+  bottom: 10px;
+  right: 10px;
+  left: 10px;
+  max-height: 75%;
+  overflow: auto;
+  background: #EEE;
+  box-shadow: 0 0 4px #434343;
+  padding: .5em 1.5em;
+  font-size: 60%;
+}
 .pagination {
   position: fixed;
   right: 1em;
@@ -73,3 +97,6 @@ code strong {
   background: #ddd;
   font-weight: 600;
 }
+.hidden {
+  display: none;
+}

index.html

@@ -13,29 +13,23 @@
       border-left: 1em solid #434343;
       border-right: 1em solid #434343;
     }
-
     .pagination {
       right: 2.6em;
     }
-
     pre code {
       background-color: inherit;
     }
-
     pre .xml .javascript {
       opacity: 1;
     }
-
     #examples ul {
       padding-left: 0;
     }
-
     #getting-started-unleash-your-power {
       color: white;
       background-color: #0071B5;
       border-color: white;
     }
-
     #getting-started-unleash-your-power strong {
       text-shadow: 0.06em 0.06em 0 #0071B5, 0.07em 0.07em 0 #fff;
     }
@@ -236,7 +230,7 @@ <h1>Details</h1>
       <li>
         Add details &amp; speaker notes to your slides
         <ul>
-          <li>Hidden on the Ruban</li>
+          <li>Hidden on the Ruban (toggle with 'c' key)</li>
           <li>Displayed in the printed version</li>
         </ul>
       </li>
@@ -268,9 +262,11 @@ <h1>Options</h1>
   </section>
   <section id="options-list">
     <h1>Options</h1>
-    <dl style="font-size: 50%;">
+    <dl style="font-size: 40%;">
       <dt><strong>ratio</strong> (default: 4/3)</dt>
       <dd>The desired ratio for your slides</dd>
+      <dt><strong>fontRatio</strong> (default: 0.4)</dt>
+      <dd>Font size is linked to slide height, default to 0.4%</dd>
       <dt><strong>minPadding</strong> (default: '0.4em')</dt>
       <dd>The minimum padding around your slides</dd>
       <dt><strong>transitionDuration</strong> (default: '1s')</dt>
@@ -352,9 +348,7 @@ <h1>Contributing</h1>
       }
       return ruban;
     }
-
     var timeoutId, i = 0;
-
     $('#ruban').on({
       active: function() {
         var $pre = $(this).find('pre');
@@ -367,7 +361,6 @@ <h1>Contributing</h1>
         clearInterval(timeoutId);
       }
     });
-
     $('#events').on({
       active: function() {
         $(this).find('h1').stop().animate({marginLeft: '2em'}, 2000);
@@ -376,11 +369,9 @@ <h1>Contributing</h1>
         $(this).find('h1').stop().animate({marginLeft: 0});
       }
     });
-
-
     var ruban = new Ruban({
       pagination: true
     });
   </script>
 </body>
-</html>
+</html>