working panel

dist/framework.css

@@ -23,16 +23,6 @@ ul {
   margin: 0;
   padding: 0; }
 
-body > section {
-  position: relative;
-  z-index: 100;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%; }
-
 main {
   position: fixed;
   top: 0;
@@ -40,6 +30,7 @@ main {
   bottom: 0;
   left: 0;
   overflow: auto;
+  width: 100%;
   -webkit-overflow-scrolling: touch; }
 
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
@@ -230,24 +221,25 @@ a.list-item {
   margin-bottom: 0;
   line-height: 1.3; }
 
-/* the page content the panel should move around */
-.panel-page-container > * {
-  width: 400px;
-  left: 100px; }
-
 /* the container of panel content to show */
 .panel-content {
+  display: block;
   width: 17em;
   min-height: 100%;
   max-height: 100%;
-  border-width: 0;
   position: absolute;
   top: 0;
-  display: block; }
+  z-index: 0; }
 
-.panel-reveal {
-  z-index: 0;
-  left: -17em; }
+header, main, footer {
+  left: 0;
+  right: 0;
+  -webkit-transition: -webkit-transform 200ms ease;
+  -moz-transition: -moz-transform 200ms ease;
+  transition: transform 200ms ease;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0); }
 
 .ptr-capable {
   -webkit-user-drag: element; }
@@ -533,7 +525,8 @@ a.list-item {
   color: #333333; }
 
 .panel-content {
-  background: #eeeeee; }
+  background: #eeeeee;
+  border-right: 1px solid #bbbbbb; }
 
 .ptr-content {
   background: #eee; }

example/panels.html

@@ -13,20 +13,24 @@
 
     <section class="panel-page-container">
 
+      <section data-panel="left-panel" class="panel-content">
+        Panel!
+      </section>
+
       <header class="bar bar-header bar-dark">
         <h1 class="title">Panels</h1>
       </header>
 
       <main class="content-padded has-header">
         <p>A whole bunch of content</p>
-        <a class="button button-primary" href="#">Panel</a>
+        <a class="button button-primary" data-toggle-panel="left-panel" href="#">Panel</a>
       </main>
 
     </section>
 
-    <section class="panel-content panel-reveal">
-      Panel!
-    </section>
 
+    <script src="../../js/framework/framework-gestures.js"></script>
+    <script src="../../js/framework/framework-events.js"></script>
+    <script src="../../js/framework/framework-panel.js"></script>
   </body>
 </html>

js/framework/framework-panel.js

@@ -0,0 +1,55 @@
+(function(window, document, framework) {
+
+  var 
+  el,
+  styleElement,
+  isPanelOpen;
+
+  function onTap(e) {
+    if(e.target) {
+      el = e.target;
+      if(el.dataset.togglePanel) {
+        return togglePanel(e, el, el.dataset.togglePanel);
+      }
+      while(el.parentElement) {
+        el = el.parentElement;
+        if(el.dataset.togglePanel) {
+          return togglePanel(e, el, el.dataset.togglePanel);
+        }
+      }
+    }
+  }
+
+  function togglePanel(e, el, panelName) {
+    var styles = "";
+
+    if(isPanelOpen) {
+      // there is a panel already open, so close it
+      isPanelOpen = false;
+    } else {
+      // open the panel
+      styles = "section .panel-content ~ * { width:" + document.width + "px !important; \
+                -webkit-transform: translate3d(17em,0,0); \
+                -moz-transform: translate3d(17em,0,0); \
+                transform: translate3d(17em,0,0); }";
+      isPanelOpen = true;
+    }
+
+    setStyles(styles);
+  }
+
+  function setStyles(styles) {
+    // get the <style> from the head that will be used by the panel
+    if(!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.id = "panel-styles";
+      styleElement.innerHTML = styles;
+      document.head.appendChild(styleElement);
+    } else {
+      styleElement.innerHTML = styles;
+    }
+  }
+  
+  framework.on("click", onTap);
+
+})(this, document, FM = this.FM || {});

scss/framework/_theme-variables.scss

@@ -108,4 +108,5 @@ $infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
 
 
 // Panels
-$panelBackground:         #eee;
+$panelBackgroundColor:    #eee;
+$panelInsetBorderColor:   #bbb;

scss/framework/structure/_base.scss

@@ -27,17 +27,6 @@ a {
 
 ul { margin: 0; padding: 0; }
 
-body > section {
-  position: relative;
-  z-index: 100;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-}
-
 main {
 	position: fixed;
   top: 0;
@@ -45,6 +34,7 @@ main {
   bottom: 0;
   left: 0;
   overflow: auto;
+  width: 100%;
    -webkit-overflow-scrolling: touch;
 }
 

scss/framework/structure/_panel.scss

@@ -1,28 +1,27 @@
 
 
-/* the page content the panel should move around */
-.panel-page-container > * {
-  width: 400px;
-  left: 100px;
-}
-
-
 /* the container of panel content to show */
 .panel-content {
+  display: block;
   width: $panelViewWidth;
   min-height: 100%;
   max-height: 100%;
-  border-width: 0;
   position: absolute;
   top: 0;
-  display: block;
-}
-
-.panel-reveal {
   z-index: 0;
-  left: $panelViewWidth * -1;
-}
-
-.panel-reveal-open {
 
 }
+
+header, main, footer {
+
+  left: 0;
+  right: 0;
+  
+  -webkit-transition: -webkit-transform 200ms ease;
+  -moz-transition: -moz-transform 200ms ease;
+  transition: transform 200ms ease;
+
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}

scss/framework/theme/_panel.scss

@@ -1,4 +1,5 @@
 
 .panel-content {
-  background: $panelBackground;
+  background: $panelBackgroundColor;
+  border-right: 1px solid $panelInsetBorderColor;
 }