(function(window, document, framework) { var x, lockInWidthStyles, isLockInWidthSet, isPanelOpen, panelReferences = {}, timeout, className, 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 touchEnd(e) { if(click(e)) { e.preventDefault(); e.stopPropagation(); return false; } } function autoClose() { if(isPanelOpen) { 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; } } function closePanel() { logEvent("closePanel"); // there is a panel already open, so close it isPanelOpen = false; // note: do not remove the panel-active class from panel // the panel should stay displayed as it panel closes // find the element with panel-open class var openedPanels = document.getElementsByClassName(PANEL_OPENED); // remove the panel-opened css classes from each of the previously opened panels for(x=0; x that no panels should be open className = document.body.className.replace(PANEL_OPENED, "").trim(); document.body.className = className; // remove the locked in widths timeout = setTimeout(removeLockInWidthStyles, 300); } function setLockInWidthStyles() { if(isLockInWidthSet) return; clearTimeout(timeout); var styles = "section>header,section>main,section>footer {width:" + document.width + "px !important}"; if(!lockInWidthStyles) { lockInWidthStyles = document.createElement("style"); lockInWidthStyles.innerHTML = styles; document.head.appendChild(lockInWidthStyles); } else { lockInWidthStyles.innerHTML = styles; } isLockInWidthSet = true; } function removeLockInWidthStyles() { lockInWidthStyles.innerHTML = ""; isLockInWidthSet = false; } function getPanelElement(panelId) { // used to minimize DOM lookups if( !panelReferences[panelId] ) { panelReferences[panelId] = document.querySelector( "[data-panel='" + panelId + "']" ); } return panelReferences[panelId]; } var logEvent = function(data) { var e = document.getElementById('event-log'); var l = document.createElement('div'); l.innerHTML = data; if(e.childNodes.length > 10) { e.innerHTML = ""; } e.appendChild(l); } window.addEventListener('click', click, false); window.addEventListener('touchend', touchEnd, false); window.addEventListener("resize", autoClose, false); window.addEventListener("popstate", autoClose, false); })(this, document, FM = this.FM || {});