keydown 0.5.0

data/templates/generate/js/rocks.js

@@ -0,0 +1,415 @@
+(function() {
+  var doc = document;
+  var disableBuilds = true;
+
+  var ctr = 0;
+  var spaces = /\s+/, a1 = [''];
+
+  var toArray = function(list) {
+    return Array.prototype.slice.call(list || [], 0);
+  };
+
+  var byId = function(id) {
+    if (typeof id == 'string') {
+      return doc.getElementById(id);
+    }
+    return id;
+  };
+
+  var query = function(query, root) {
+    if (!query) {
+      return [];
+    }
+    if (typeof query != 'string') {
+      return toArray(query);
+    }
+    if (typeof root == 'string') {
+      root = byId(root);
+      if (!root) {
+        return [];
+      }
+    }
+
+    root = root || document;
+    var rootIsDoc = (root.nodeType == 9);
+    var doc = rootIsDoc ? root : (root.ownerDocument || document);
+
+    // rewrite the query to be ID rooted
+    if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
+      root.id = root.id || ('qUnique' + (ctr++));
+      query = '#' + root.id + ' ' + query;
+    }
+    // don't choke on something like ".yada.yada >"
+    if ('>~+'.indexOf(query.slice(-1)) >= 0) {
+      query += ' *';
+    }
+
+    return toArray(doc.querySelectorAll(query));
+  };
+
+  var strToArray = function(s) {
+    if (typeof s == 'string' || s instanceof String) {
+      if (s.indexOf(' ') < 0) {
+        a1[0] = s;
+        return a1;
+      } else {
+        return s.split(spaces);
+      }
+    }
+    return s;
+  };
+
+  var addClass = function(node, classStr) {
+    classStr = strToArray(classStr);
+    var cls = ' ' + node.className + ' ';
+    for (var i = 0, len = classStr.length, c; i < len; ++i) {
+      c = classStr[i];
+      if (c && cls.indexOf(' ' + c + ' ') < 0) {
+        cls += c + ' ';
+      }
+    }
+    node.className = cls.trim();
+  };
+
+  var removeClass = function(node, classStr) {
+    var cls;
+    if (classStr !== undefined) {
+      classStr = strToArray(classStr);
+      cls = ' ' + node.className + ' ';
+      for (var i = 0, len = classStr.length; i < len; ++i) {
+        cls = cls.replace(' ' + classStr[i] + ' ', ' ');
+      }
+      cls = cls.trim();
+    } else {
+      cls = '';
+    }
+    if (node.className != cls) {
+      node.className = cls;
+    }
+  };
+
+  var toggleClass = function(node, classStr) {
+    var cls = ' ' + node.className + ' ';
+    if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
+      removeClass(node, classStr);
+    } else {
+      addClass(node, classStr);
+    }
+  };
+
+  var ua = navigator.userAgent;
+  var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
+  var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
+  var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
+
+  var canTransition = (function() {
+    var ver = parseFloat(ua.split('Version/')[1]) || undefined;
+    // test to determine if this browser can handle CSS transitions.
+    var cachedCanTransition =
+            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
+    return function() {
+      return cachedCanTransition;
+    }
+  })();
+
+  //
+  // Slide class
+  //
+  var Slide = function(node, idx) {
+    this._node = node;
+    if (idx >= 0) {
+      this._count = idx + 1;
+    }
+    if (this._node) {
+      addClass(this._node, 'slide distant-slide');
+    }
+    this._makeCounter();
+    this._makeBuildList();
+  };
+
+  Slide.prototype = {
+    _node: null,
+    _count: 0,
+    _buildList: [],
+    _visited: false,
+    _currentState: '',
+    _states: [ 'distant-slide', 'far-past',
+      'past', 'current', 'future',
+      'far-future', 'distant-slide' ],
+    setState: function(state) {
+      if (typeof state != 'string') {
+        state = this._states[state];
+      }
+      if (state == 'current' && !this._visited) {
+        this._visited = true;
+        this._makeBuildList();
+      }
+      removeClass(this._node, this._states);
+      addClass(this._node, state);
+      this._currentState = state;
+
+      // delay first auto run. Really wish this were in CSS.
+      /*
+       this._runAutos();
+       */
+      var _t = this;
+      setTimeout(function() {
+        _t._runAutos();
+      }, 400);
+    },
+    _makeCounter: function() {
+      if (!this._count || !this._node) {
+        return;
+      }
+      var c = doc.createElement('span');
+      c.innerHTML = this._count;
+      c.className = 'counter';
+      this._node.appendChild(c);
+    },
+    _makeBuildList: function() {
+      this._buildList = [];
+      if (disableBuilds) {
+        return;
+      }
+      if (this._node) {
+        this._buildList = query('[data-build] > *', this._node);
+      }
+      this._buildList.forEach(function(el) {
+        addClass(el, 'to-build');
+      });
+    },
+    _runAutos: function() {
+      if (this._currentState != 'current') {
+        return;
+      }
+      // find the next auto, slice it out of the list, and run it
+      var idx = -1;
+      this._buildList.some(function(n, i) {
+        if (n.hasAttribute('data-auto')) {
+          idx = i;
+          return true;
+        }
+        return false;
+      });
+      if (idx >= 0) {
+        var elem = this._buildList.splice(idx, 1)[0];
+        var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
+        var _t = this;
+        if (canTransition()) {
+          var l = function(evt) {
+            elem.parentNode.removeEventListener(transitionEnd, l, false);
+            _t._runAutos();
+          };
+          elem.parentNode.addEventListener(transitionEnd, l, false);
+          removeClass(elem, 'to-build');
+        } else {
+          setTimeout(function() {
+            removeClass(elem, 'to-build');
+            _t._runAutos();
+          }, 400);
+        }
+      }
+    },
+    buildNext: function() {
+      if (!this._buildList.length) {
+        return false;
+      }
+      removeClass(this._buildList.shift(), 'to-build');
+      return true;
+    }
+  };
+
+  //
+  // SlideShow class
+  //
+  var SlideShow = function(slides) {
+    this._slides = (slides || []).map(function(el, idx) {
+      return new Slide(el, idx);
+    });
+
+    this.init();
+    var _t = this;
+    doc.addEventListener('keydown',
+                        function(e) {
+                          _t.handleKeys(e);
+                        }, false);
+    doc.addEventListener('mousewheel',
+                        function(e) {
+                          _t.handleWheel(e);
+                        }, false);
+    doc.addEventListener('DOMMouseScroll',
+                        function(e) {
+                          _t.handleWheel(e);
+                        }, false);
+    doc.addEventListener('touchstart',
+                        function(e) {
+                          _t.handleTouchStart(e);
+                        }, false);
+    doc.addEventListener('touchend',
+                        function(e) {
+                          _t.handleTouchEnd(e);
+                        }, false);
+    window.addEventListener('popstate',
+                           function(e) {
+                             if (e.state === null) {
+                               _t.init();
+                             } else {
+                               _t.current = e.state;
+                             }
+                             _t.go();
+                           }, false);
+    this._update();
+  };
+
+  SlideShow.prototype = {
+    _slides: [],
+    _update: function(dontPush) {
+      document.querySelector('#presentation-counter').innerText = this.current;
+      if (history.pushState) {
+        if (!dontPush) {
+          history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
+        }
+      } else {
+        window.location.hash = 'slide' + this.current;
+      }
+      for (var x = this.current - 1; x < this.current + 7; x++) {
+        if (this._slides[x - 4]) {
+          this._slides[x - 4].setState(Math.max(0, x - this.current));
+        }
+      }
+    },
+
+    current: 0,
+    init: function() {
+      var h = window.location.hash;
+      try {
+        this.current = parseInt(h.split('#slide')[1], 10);
+      } catch (e) { /* squeltch */
+      }
+      this.current = current = isNaN(this.current) ? 1 : this.current;
+    },
+    next: function() {
+      if (!this._slides[this.current - 1].buildNext()) {
+        this.current = Math.min(this.current + 1, this._slides.length);
+        this._update();
+      }
+    },
+    prev: function() {
+      this.current = Math.max(this.current - 1, 1);
+      this._update();
+    },
+    go: function() {
+      this._update(true);
+    },
+
+    _notesOn: false,
+    showNotes: function() {
+      var isOn = this._notesOn = !this._notesOn;
+      query('.notes').forEach(function(el) {
+        el.style.display = (notesOn) ? 'block' : 'none';
+      });
+    },
+    switch3D: function() {
+      toggleClass(document.body, 'three-d');
+    },
+    handleWheel: function(e) {
+      var delta = 0;
+      if (e.wheelDelta) {
+        delta = e.wheelDelta / 120;
+        if (isOpera) {
+          delta = -delta;
+        }
+      } else if (e.detail) {
+        delta = -e.detail / 3;
+      }
+
+      if (delta > 0) {
+        this.prev();
+        return;
+      }
+      if (delta < 0) {
+        this.next();
+        return;
+      }
+    },
+    handleKeys: function(e) {
+
+      if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
+
+      switch (e.keyCode) {
+        case 37: // left arrow
+          this.prev(); break;
+        case 39: // right arrow
+        case 32: // space
+          this.next(); break;
+        case 50: // 2
+          this.showNotes(); break;
+        case 51: // 3
+          this.switch3D(); break;
+      }
+    },
+    _touchStartX: 0,
+    handleTouchStart: function(e) {
+      this._touchStartX = e.touches[0].pageX;
+    },
+    handleTouchEnd: function(e) {
+      var delta = this._touchStartX - e.changedTouches[0].pageX;
+      var SWIPE_SIZE = 150;
+      if (delta > SWIPE_SIZE) {
+        this.next();
+      } else if (delta < -SWIPE_SIZE) {
+        this.prev();
+      }
+    }
+  };
+
+  // Initialize
+  var slideshow = new SlideShow(query('.slide'));
+
+  document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
+  document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
+  document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
+  document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);
+
+  var counters = document.querySelectorAll('.counter');
+  var slides = document.querySelectorAll('.slide');
+
+  function toggleCounter() {
+    toArray(counters).forEach(function(el) {
+      el.style.display = (el.offsetHeight) ? 'none' : 'block';
+    });
+  }
+
+  function toggleSize() {
+    toArray(slides).forEach(function(el) {
+      if (!/reduced/.test(el.className)) {
+        addClass(el, 'reduced');
+      }
+      else {
+        removeClass(el, 'reduced');
+      }
+    });
+  }
+
+  function toggleTransitions() {
+    toArray(slides).forEach(function(el) {
+      if (!/no-transitions/.test(el.className)) {
+        addClass(el, 'no-transitions');
+      }
+      else {
+        removeClass(el, 'no-transitions');
+      }
+    });
+  }
+
+  function toggleGradients() {
+    toArray(slides).forEach(function(el) {
+      if (!/no-gradients/.test(el.className)) {
+        addClass(el, 'no-gradients');
+      }
+      else {
+        removeClass(el, 'no-gradients');
+      }
+    });
+  }
+})();

data/templates/keydown.css.erb

@@ -0,0 +1,104 @@
+/* To show bullests in unordered lists */
+section.bulleted ul {
+  padding-left: 30px;
+}
+
+/* Full slide backgrounds */
+.slide.full-background {
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  background-position: center;
+}
+<% backgrounds.each do |background| %>
+.<%= background[:classname] %> {
+  background-image: url(../<%= background[:path] %>);
+}
+<% end %>
+
+.attribution {
+  font-size: 24px;
+  position: fixed;
+  bottom: 8px;
+  left: 40px;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  background-size: contain;
+}
+
+.attribution.flickr {
+  background: url(../images/flickr.png) left top no-repeat;
+  padding-left: 60px;
+}
+
+.attribution.cc {
+  background: url(../images/cc.large.png) left top no-repeat;
+  padding-left: 36px;
+}
+
+/* Happy generic hiding class */
+.hidden {
+  display: none;
+}
+
+/* - Pygments sytles for code fragments - */
+pre { background: none; }
+pre .c { color: #999988; font-style: italic } /* Comment */
+pre .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+pre .k { font-weight: bold } /* Keyword */
+pre .o { font-weight: bold } /* Operator */
+pre .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+pre .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+pre .c1 { color: #999988; font-style: italic } /* Comment.Single */
+pre .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+pre .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+pre .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+pre .ge { font-style: italic } /* Generic.Emph */
+pre .gr { color: #aa0000 } /* Generic.Error */
+pre .gh { color: #999999 } /* Generic.Heading */
+pre .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+pre .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+pre .go { color: #888888 } /* Generic.Output */
+pre .gp { color: #555555 } /* Generic.Prompt */
+pre .gs { font-weight: bold } /* Generic.Strong */
+pre .gu { color: #aaaaaa } /* Generic.Subheading */
+pre .gt { color: #aa0000 } /* Generic.Traceback */
+pre .kc { font-weight: bold } /* Keyword.Constant */
+pre .kd { font-weight: bold } /* Keyword.Declaration */
+pre .kp { font-weight: bold } /* Keyword.Pseudo */
+pre .kr { font-weight: bold } /* Keyword.Reserved */
+pre .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+pre .m { color: #009999 } /* Literal.Number */
+pre .s { color: #d14 } /* Literal.String */
+pre .na { color: #008080 } /* Name.Attribute */
+pre .nb { color: #0086B3 } /* Name.Builtin */
+pre .nc { color: #445588; font-weight: bold } /* Name.Class */
+pre .no { color: #008080 } /* Name.Constant */
+pre .ni { color: #800080 } /* Name.Entity */
+pre .ne { color: #990000; font-weight: bold } /* Name.Exception */
+pre .nf { color: #990000; font-weight: bold } /* Name.Function */
+pre .nn { color: #555555 } /* Name.Namespace */
+pre .nt { color: #000080 } /* Name.Tag */
+pre .nv { color: #008080 } /* Name.Variable */
+pre .ow { font-weight: bold } /* Operator.Word */
+pre .w { color: #bbbbbb } /* Text.Whitespace */
+pre .mf { color: #009999 } /* Literal.Number.Float */
+pre .mh { color: #009999 } /* Literal.Number.Hex */
+pre .mi { color: #009999 } /* Literal.Number.Integer */
+pre .mo { color: #009999 } /* Literal.Number.Oct */
+pre .sb { color: #d14 } /* Literal.String.Backtick */
+pre .sc { color: #d14 } /* Literal.String.Char */
+pre .sd { color: #d14 } /* Literal.String.Doc */
+pre .s2 { color: #d14 } /* Literal.String.Double */
+pre .se { color: #d14 } /* Literal.String.Escape */
+pre .sh { color: #d14 } /* Literal.String.Heredoc */
+pre .si { color: #d14 } /* Literal.String.Interpol */
+pre .sx { color: #d14 } /* Literal.String.Other */
+pre .sr { color: #009926 } /* Literal.String.Regex */
+pre .s1 { color: #d14 } /* Literal.String.Single */
+pre .ss { color: #990073 } /* Literal.String.Symbol */
+pre .bp { color: #999999 } /* Name.Builtin.Pseudo */
+pre .vc { color: #008080 } /* Name.Variable.Class */
+pre .vg { color: #008080 } /* Name.Variable.Global */
+pre .vi { color: #008080 } /* Name.Variable.Instance */
+pre .il { color: #009999 } /* Literal.Number.Integer.Long */

data/templates/rocks/index.rhtml

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+  Original Project, HTML5 Rocks 'Slides Template' Copyright 2010 Google Inc.
+ 
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+     http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Original slides: Marcin Wichary (mwichary@google.com)
+  Modifications: Ernest Delgado (ernestd@google.com)
+                 Alex Russell (slightlyoff@chromium.org)
+                 Brad Neuberg
+
+  Keydown generates an HTML5 Rocks-style presentation from a Markdown file, adding
+  the ability to full screen backgrounds, CSS overrides, and additional JavaScript.
+
+  Keydown (http://infews.github.com/keydown), Copyright 2010 Infews LLC
+-->
+<html manifest="cache.manifest">
+<head>
+  <!--[if gte IE 9]>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <![endif]-->
+
+  <!--[if lt IE 9]>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
+  <![endif]-->
+
+  <meta charset="utf-8"/>
+  <title><%= title %></title>
+  <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css"/>
+
+  <!--
+    Original HTML5 Rocks CSS extracted for readability
+  -->
+  <link href="css/rocks.css" rel="stylesheet" type="text/css"/>
+
+  <!--
+    Keydown provided CSS & your custom CSS
+  -->
+  <% css_files.each do |css_file| %>
+    <link href="<%= css_file %>" rel="stylesheet" type="text/css"/>
+  <% end %>
+
+</head>
+<body>
+<div class="presentation">
+  <div id="presentation-counter"></div>
+  <div class="slides">
+    <!--
+      First slide has Title, Instructions & options. Remove (or display:none) this slide if you like
+    -->
+    <div class="slide">
+      <section class="middle">
+        <h1><%= title %></h1>
+        <p>
+          Press <span class="key"><b>&rarr;</b></span>, scroll, or swipe to advance
+        </p>
+        <h3>
+          Options
+        </h3>
+        <ul>
+          <li>
+            <input type="checkbox" id="toggle-size" />
+            <label for="toggle-size">
+              <span>Grow</span>
+            </label>
+          </li>
+          <li>
+            <input type="checkbox" id="toggle-transitions" checked/>
+            <label for="toggle-transitions">
+              <span>Transitions</span>
+            </label>
+          </li>
+          <li>
+            <input type="checkbox" id="toggle-gradients" checked/>
+            <label for="toggle-gradients">
+              <span>Gradients</span>
+            </label>
+          </li>
+          <li>
+            <input type="checkbox" id="toggle-counter" checked/>
+            <label for="toggle-counter">
+              <span>Slide numbers</span>
+            </label>
+          </li>
+        </ul>
+        <p>
+          Made with <a href="http://infews.github.com/keydown"><b>Keydown</b></a>
+        </p>
+      </section>
+    </div>
+    <% slides.each do |slide| %>
+      <%= slide.to_html %>
+    <% end %>
+  </div>
+</div>
+
+<!--
+  Original HTML5 Rocks JavaScript extracted for readability
+-->
+<script src="js/rocks.js" type="text/javascript"></script>
+
+<!--[if lt IE 9]>
+<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
+<script>CFInstall.check({ mode: "overlay" });</script>
+<![endif]-->
+
+<!--
+  Keydown puts your custom JS here
+-->
+<% js_files.each do |js_file| %>
+<script src="<%= js_file %>" type="text/javascript"></script>
+<% end %>
+
+</body>
+</html>

data/templates/rocks/slide.rhtml

@@ -0,0 +1,10 @@
+<div class="<%= container_classnames %>">
+  <section<%= " class=\"#{classnames}\"" unless classnames.empty? %>>
+    <%= html_content %>
+  </section>
+  <div class="<%= background_attribution_classnames %>">
+    <a href="<%= background_image[:attribution_link] %>">
+      <%= background_image[:attribution_text] %>
+    </a>
+  </div>
+</div>