Navigation Drawer component

Gruntfile.js

@@ -55,7 +55,8 @@ module.exports = function(grunt) {
           'js/push.js',
           'js/segmented-controllers.js',
           'js/sliders.js',
-          'js/toggles.js'
+          'js/toggles.js',
+          'js/drawers.js'
         ],
         dest: '<%= meta.distPath %>js/<%= pkg.name %>.js'
       }

dist/css/ratchet.css

@@ -1088,6 +1088,44 @@ select {
   border-radius: 6px;
 }
 
+.drawer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  padding: inherit;
+  background-color: transparent;
+  -webkit-transition: background-color .2s linear, left 0 linear .2s;
+     -moz-transition: background-color .2s linear, left 0 linear .2s;
+          transition: background-color .2s linear, left 0 linear .2s;
+}
+
+.drawer.active {
+  left: 0;
+  background-color: rgba(0, 0, 0, .3);
+  -webkit-transition: background-color .2s linear;
+     -moz-transition: background-color .2s linear;
+          transition: background-color .2s linear;
+}
+
+.drawer > .drawer-inner {
+  position: relative;
+  left: -100%;
+  width: 80%;
+  height: 100%;
+  overflow: hidden;
+  background: white;
+  box-shadow: 1px 0 2px rgba(0, 0, 0, .3);
+  -webkit-transition: left .2s linear;
+     -moz-transition: left .2s linear;
+          transition: left .2s linear;
+}
+
+.drawer.active > .drawer-inner {
+  left: 0;
+}
+
 .modal {
   position: fixed;
   top: 0;

dist/js/ratchet.js

@@ -962,3 +962,51 @@
   });
 
 }());
+
+/* ========================================================================
+ * Ratchet: drawer.js v2.0.2
+ * http://goratchet.com/components#drawer
+ * ========================================================================
+ * Copyright 2014 Connor Sears
+ * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
+ * ======================================================================== */
+
+!(function () {
+  'use strict';
+
+  var findDrawers = function (target) {
+    var i;
+    var drawers = document.querySelectorAll('a');
+
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = drawers.length; i--;) {
+        if (drawers[i] === target) {
+          return target;
+        }
+      }
+    }
+  };
+
+  var getDrawer = function (event) {
+    var drawerToggle = findDrawers(event.target);
+    if (drawerToggle && drawerToggle.hash) {
+      return document.querySelector(drawerToggle.hash);
+    }
+  };
+
+  window.addEventListener('touchend', function (event) {
+    if (event.target.classList.contains('drawer')) {
+      // click directly on the drawer, but not on it's inner element
+      event.target.classList.remove('active');
+      return;
+    }
+
+    var drawer = getDrawer(event);
+    if (drawer) {
+      if (drawer && drawer.classList.contains('drawer')) {
+        drawer.classList.toggle('active');
+      }
+      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
+    }
+  });
+}());

docs/_includes/jump.html

@@ -16,6 +16,7 @@
   <a class="docs-component-item" href="#popovers" data-ignore="push">Popovers</a>
   <a class="docs-component-item" href="#modals" data-ignore="push">Modals</a>
   <a class="docs-component-item" href="#sliders" data-ignore="push">Sliders</a>
+  <a class="docs-component-item" href="#drawers" data-ignore="push">Drawers</a>
   <a class="docs-component-item" href="#push" data-ignore="push">Push</a>
   <a class="docs-component-item" href="#ratchicons" data-ignore="push">Ratchicons</a>
 </div>

docs/assets/css/docs.css

@@ -820,6 +820,10 @@ code {
   margin: 10px;
 }
 
+#drawersInDevice #iwindow > .btn {
+  margin: 10px;
+}
+
 @media screen and (min-width: 768px) {
   .slider .slide {
     cursor: -webkit-grab;

docs/components.html

@@ -1191,6 +1191,37 @@ <h3 class="component-title">Sliders</h3>
 
     </article>
 
+
+    <article class="component" id="drawers">
+      <h3 class="component-title">Drawers</h3>
+      <p class="component-description">Overlapping navigation drawer</p>
+
+      <div class="component-example">
+        <a href="#myDrawer" class="btn">Open Drawer</a>
+        <nav class="drawer" id="myDrawer">
+          <div class="drawer-inner">
+            <ul class="table-view">
+              <li class="table-view-cell">Home</li>
+              <li class="table-view-cell">Settings</li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+
+{% highlight html %}
+<a href="#myDrawer" class="btn">Open Drawer</a>
+<nav class="drawer" id="myDrawer">
+  <div class="drawer-inner">
+    <ul class="table-view">
+      <li class="table-view-cell">Home</li>
+      <li class="table-view-cell">Settings</li>
+    </ul>
+  </div>
+</nav>
+{% endhighlight %}
+
+    </article>
+
     <!-- Push docs -->
     <article class="component" id="push">
       <h3 class="component-title">Push</h3>

docs/dist/css/ratchet.css

@@ -1088,6 +1088,44 @@ select {
   border-radius: 6px;
 }
 
+.drawer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  padding: inherit;
+  background-color: transparent;
+  -webkit-transition: background-color .2s linear, left 0 linear .2s;
+     -moz-transition: background-color .2s linear, left 0 linear .2s;
+          transition: background-color .2s linear, left 0 linear .2s;
+}
+
+.drawer.active {
+  left: 0;
+  background-color: rgba(0, 0, 0, .3);
+  -webkit-transition: background-color .2s linear;
+     -moz-transition: background-color .2s linear;
+          transition: background-color .2s linear;
+}
+
+.drawer > .drawer-inner {
+  position: relative;
+  left: -100%;
+  width: 80%;
+  height: 100%;
+  overflow: hidden;
+  background: white;
+  box-shadow: 1px 0 2px rgba(0, 0, 0, .3);
+  -webkit-transition: left .2s linear;
+     -moz-transition: left .2s linear;
+          transition: left .2s linear;
+}
+
+.drawer.active > .drawer-inner {
+  left: 0;
+}
+
 .modal {
   position: fixed;
   top: 0;

docs/dist/js/ratchet.js

@@ -962,3 +962,51 @@
   });
 
 }());
+
+/* ========================================================================
+ * Ratchet: drawer.js v2.0.2
+ * http://goratchet.com/components#drawer
+ * ========================================================================
+ * Copyright 2014 Connor Sears
+ * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
+ * ======================================================================== */
+
+!(function () {
+  'use strict';
+
+  var findDrawers = function (target) {
+    var i;
+    var drawers = document.querySelectorAll('a');
+
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = drawers.length; i--;) {
+        if (drawers[i] === target) {
+          return target;
+        }
+      }
+    }
+  };
+
+  var getDrawer = function (event) {
+    var drawerToggle = findDrawers(event.target);
+    if (drawerToggle && drawerToggle.hash) {
+      return document.querySelector(drawerToggle.hash);
+    }
+  };
+
+  window.addEventListener('touchend', function (event) {
+    if (event.target.classList.contains('drawer')) {
+      // click directly on the drawer, but not on it's inner element
+      event.target.classList.remove('active');
+      return;
+    }
+
+    var drawer = getDrawer(event);
+    if (drawer) {
+      if (drawer && drawer.classList.contains('drawer')) {
+        drawer.classList.toggle('active');
+      }
+      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
+    }
+  });
+}());

js/drawers.js

@@ -0,0 +1,47 @@
+/* ========================================================================
+ * Ratchet: drawer.js v2.0.2
+ * http://goratchet.com/components#drawer
+ * ========================================================================
+ * Copyright 2014 Connor Sears
+ * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
+ * ======================================================================== */
+
+!(function () {
+  'use strict';
+
+  var findDrawers = function (target) {
+    var i;
+    var drawers = document.querySelectorAll('a');
+
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = drawers.length; i--;) {
+        if (drawers[i] === target) {
+          return target;
+        }
+      }
+    }
+  };
+
+  var getDrawer = function (event) {
+    var drawerToggle = findDrawers(event.target);
+    if (drawerToggle && drawerToggle.hash) {
+      return document.querySelector(drawerToggle.hash);
+    }
+  };
+
+  window.addEventListener('touchend', function (event) {
+    if (event.target.classList.contains('drawer')) {
+      // click directly on the drawer, but not on it's inner element
+      event.target.classList.remove('active');
+      return;
+    }
+
+    var drawer = getDrawer(event);
+    if (drawer) {
+      if (drawer && drawer.classList.contains('drawer')) {
+        drawer.classList.toggle('active');
+      }
+      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
+    }
+  });
+}());

sass/docs.scss

@@ -847,6 +847,13 @@ code {
   }
 }
 
+// Drawer
+#drawersInDevice {
+  #iwindow > .btn {
+    margin: 10px;
+  }
+}
+
 // Sliders
 @media screen and (min-width: 768px) {
   .slider .slide {

sass/drawer.scss

@@ -0,0 +1,38 @@
+//
+// DRAWER
+// --------------------------------------------------
+
+
+.drawer {
+  position: absolute;
+  padding: inherit;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0);
+
+  // wait for the drawer-inner animation to finish before hiding the backdrop
+  @include transition(background-color .25s linear, left 0 linear .25s);
+}
+
+.drawer.active {
+  left: 0;
+  background-color: rgba(0,0,0,.3);
+  @include transition(background-color .25s linear);
+}
+
+.drawer > .drawer-inner {
+  position: relative;
+  left: -100%;
+  width: 80%;
+  height: 100%;
+  background: white;
+  overflow: hidden;
+  @include box-shadow(1px 0 2px rgba(0,0,0,.3));
+  @include transition(left .25s linear);
+}
+
+.drawer.active > .drawer-inner {
+  left: 0;
+}

sass/ratchet.scss

@@ -19,6 +19,7 @@
 @import "forms.scss";
 @import "segmented-controls.scss";
 @import "popovers.scss";
+@import "drawer.scss";
 
 // Javascript components
 @import "modals.scss";