working panel

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 || {});