diff --git a/dist/framework.css b/dist/framework.css index eb90b0e65f..4f4fed2230 100644 --- a/dist/framework.css +++ b/dist/framework.css @@ -221,26 +221,36 @@ a.list-item { margin-bottom: 0; line-height: 1.3; } -/* the container of panel content to show */ -.panel-content { - display: block; - width: 17em; +[data-panel] { + display: none; min-height: 100%; max-height: 100%; position: absolute; top: 0; z-index: 0; } +.panel-active { + display: block; + width: 270px; } + header, main, footer { + z-index: 100; left: 0; right: 0; - -webkit-transition: -webkit-transform 200ms ease; - -moz-transition: -moz-transform 200ms ease; - transition: transform 200ms ease; + -webkit-transition: -webkit-transform 300ms ease; + -moz-transition: -moz-transform 300ms ease; + transition: transform 300ms ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } +.panel-opened > section > header, +.panel-opened > section > main, +.panel-opened > section > footer { + -webkit-transform: translate3d(270px, 0, 0); + -moz-transform: translate3d(270px, 0, 0); + transform: translate3d(270px, 0, 0); } + .ptr-capable { -webkit-user-drag: element; } @@ -524,7 +534,7 @@ main { a.list-item { color: #333333; } -.panel-content { +[data-panel] { background: #eeeeee; border-right: 1px solid #bbbbbb; } diff --git a/example/panels.html b/example/panels.html index 74e7beb920..6167e6ab3b 100644 --- a/example/panels.html +++ b/example/panels.html @@ -5,32 +5,40 @@ - + -
- -
- Panel! -
+
+

Panels

-

A whole bunch of content

- Panel +

+

+
+

Panels

+
+ +
+ + +
+ This is my default left side panel! +
+ +
+ This is my other left side panel!
- - diff --git a/js/framework/framework-panel.js b/js/framework/framework-panel.js index bdce6bd6ee..586c29e83d 100644 --- a/js/framework/framework-panel.js +++ b/js/framework/framework-panel.js @@ -1,55 +1,153 @@ (function(window, document, framework) { var - el, - styleElement, - isPanelOpen; + x, + lockInWidthStyles, + isLockInWidthSet, + isPanelOpen, + panelReferences = {}, + timeout, + className, - 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); - } + PANEL_ACTIVE = "panel-active", + PANEL_OPENED = "panel-opened"; + + + function click(e) { + if(e.target.dataset.togglePanel) { + logEvent("click"); + if(isPanelOpen) { + // there's a panel open, close it if the page location changed + closePanel(); + } else { + openPanel(e.target.dataset.togglePanel); } + return true; } } - function togglePanel(e, el, panelName) { - var styles = ""; + function touchEnd(e) { + if(click(e)) { + e.preventDefault(); + e.stopPropagation(); + return false; + } + } + function autoClose() { 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); }"; + logEvent("autoClose"); + // there's a panel open, close it if the page location changed + closePanel(); + } + } + + function openPanel(panelId) { + logEvent("openPanel: " + panelId); + + // see if there is an element with this id + var panel = getPanelElement(panelId); + if(panel) { + // this element is a panel, open it! + + // find all the panels that are or were active + var panelsActive = document.getElementsByClassName(PANEL_ACTIVE); + + // remove the panel-active css classes from each of the previously opened panels + for(x=0; x that a panel is open + document.body.className += " " + PANEL_OPENED; + + // remember that a panel is currently open isPanelOpen = true; } - - setStyles(styles); } - function setStyles(styles) { - // get the