mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
(function(window, document, ion) {
|
|
|
|
var
|
|
x,
|
|
isPanelOpen,
|
|
|
|
PANEL_ACTIVE = "ion-panel-active",
|
|
PANEL_ACTIVE_LEFT = "ion-panel-active-left",
|
|
PANEL_ACTIVE_RIGHT = "ion-panel-active-right",
|
|
|
|
PANEL_OPEN_LEFT = "ion-panel-left",
|
|
PANEL_OPEN_RIGHT = "ion-panel-right";
|
|
|
|
ion.Panel = {
|
|
|
|
toggle: function(panelId, options) {
|
|
if(isPanelOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open(panelId, options);
|
|
}
|
|
},
|
|
|
|
open: function(panelId, options) {
|
|
// see if there is an element with this id
|
|
var panel = document.getElementById(panelId);
|
|
if(panel) {
|
|
// this element is a panel, open it!
|
|
|
|
// remember that a panel is currently open
|
|
isPanelOpen = true;
|
|
|
|
// find all the panels that are or were once active
|
|
var panelsActive = document.getElementsByClassName(PANEL_ACTIVE);
|
|
|
|
// remove the panel-active css classes from each of the previously active panels
|
|
for(x=0; x<panelsActive.length; x++) {
|
|
panelsActive[x].classList.remove(PANEL_ACTIVE);
|
|
}
|
|
|
|
// activate the panel we want open by adding the panel-active css classes
|
|
panel.classList.add(PANEL_ACTIVE);
|
|
|
|
// add to <body> that there is a panel open
|
|
if(options && options.direction === "right") {
|
|
panel.classList.add(PANEL_ACTIVE_RIGHT);
|
|
document.body.classList.add(PANEL_OPEN_RIGHT);
|
|
} else {
|
|
// left is the default
|
|
panel.classList.add(PANEL_ACTIVE_LEFT);
|
|
document.body.classList.add(PANEL_OPEN_LEFT);
|
|
}
|
|
}
|
|
},
|
|
|
|
close: function() {
|
|
if(isPanelOpen) {
|
|
// there is a panel already open, so close it
|
|
isPanelOpen = false;
|
|
|
|
// remove from <body> so that no panels should be open
|
|
// using the replace method so that it changes the classnames in one go
|
|
document.body.className = document.body.className
|
|
.replace(PANEL_OPEN_LEFT, "")
|
|
.replace(PANEL_OPEN_RIGHT, "")
|
|
.trim();
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
window.addEventListener("popstate", ion.Panel.close, false);
|
|
|
|
})(this, document, ion = this.ion || {});
|