javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

right side panels

Browse Source
This commit is contained in:
Adam Bradley
2013-08-28 16:50:38 -05:00
parent d64381f903
commit da1e197905
6 changed files with 86 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
dist/framework.css vendored
View File

@ -227,8 +227,15 @@ a.list-item {
max-height: 100%; max-height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0;
z-index: 0; } z-index: 0; }
.ion-panel-active-left {
left: 0; }
.ion-panel-active-right {
right: 0; }
.ion-panel-active { .ion-panel-active {
display: block; display: block;
width: 270px; } width: 270px; }
@ -244,13 +251,20 @@ a.list-item {
-moz-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
.ion-panel-opened .bar-header, .ion-panel-left .bar-header,
.ion-panel-opened .content, .ion-panel-left .content,
.ion-panel-opened .bar-footer { .ion-panel-left .bar-footer {
-webkit-transform: translate3d(270px, 0, 0); -webkit-transform: translate3d(270px, 0, 0);
-moz-transform: translate3d(270px, 0, 0); -moz-transform: translate3d(270px, 0, 0);
transform: translate3d(270px, 0, 0); } transform: translate3d(270px, 0, 0); }
.ion-panel-right .bar-header,
.ion-panel-right .content,
.ion-panel-right .bar-footer {
-webkit-transform: translate3d(-270px, 0, 0);
-moz-transform: translate3d(-270px, 0, 0);
transform: translate3d(-270px, 0, 0); }
.ptr-capable { .ptr-capable {
-webkit-user-drag: element; } -webkit-user-drag: element; }
@ -535,9 +549,14 @@ a.list-item {
color: #333333; } color: #333333; }
.ion-panel { .ion-panel {
background: #eeeeee; background: #eeeeee; }
.ion-panel-left .ion-panel {
border-right: 1px solid #bbbbbb; } border-right: 1px solid #bbbbbb; }
.ion-panel-right .ion-panel {
border-left: 1px solid #bbbbbb; }
.ptr-content { .ptr-content {
background: #eee; } background: #eee; }

9
example/panels.html
View File

@ -14,12 +14,13 @@
<section data-default-panel="my-left-panel"> <section data-default-panel="my-left-panel">
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<button class="button" data-toggle-panel="my-left-panel"></button> <button class="button" data-panel-toggle="my-left-panel"></button>
<h1 class="title">Panels</h1> <h1 class="title">Panels</h1>
<button class="button" data-panel-toggle="my-right-panel" data-panel-direction="right"></button>
</header> </header>
<main class="content content-padded has-header"> <main class="content content-padded has-header">
<p><button class="button button-primary" data-toggle-panel="my-other-left-panel">Other Left Side Panel</button></p> <p><button class="button button-primary" data-panel-toggle="my-other-left-panel">Other Left Side Panel</button></p>
<p id="event-log"></p> <p id="event-log"></p>
</main> </main>
@ -34,6 +35,10 @@
This is my default left side panel! This is my default left side panel!
</section> </section>
<section id="my-right-panel" class="ion-panel">
This is my right side panel!
</section>
<section id="my-other-left-panel" class="ion-panel"> <section id="my-other-left-panel" class="ion-panel">
This is my other left side panel! This is my other left side panel!
</section> </section>

10
js/framework/handlers/panel-handler.js
View File

@ -1,8 +1,14 @@
(function(window, document, ion) { (function(window, document, ion) {
function click(e) { function click(e) {
if(e.target.dataset.togglePanel) { if(e.target.dataset.panelToggle) {
ion.Panel.toggle(e.target.dataset.togglePanel);
var options = {
direction: (e.target.dataset.panelDirection === "right" ? "right" : "left")
};
ion.Panel.toggle(e.target.dataset.panelToggle, options);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return false; return false;

25
js/framework/ion-panel.js
View File

@ -5,19 +5,23 @@
isPanelOpen, isPanelOpen,
PANEL_ACTIVE = "ion-panel-active", PANEL_ACTIVE = "ion-panel-active",
PANEL_OPENED = "ion-panel-opened"; 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 = { ion.Panel = {
toggle: function(panelId) { toggle: function(panelId, options) {
if(isPanelOpen) { if(isPanelOpen) {
this.close(); this.close();
} else { } else {
this.open(panelId); this.open(panelId, options);
} }
}, },
open: function(panelId) { open: function(panelId, options) {
// see if there is an element with this id // see if there is an element with this id
var panel = document.getElementById(panelId); var panel = document.getElementById(panelId);
if(panel) { if(panel) {
@ -38,7 +42,14 @@
panel.classList.add(PANEL_ACTIVE); panel.classList.add(PANEL_ACTIVE);
// add to <body> that there is a panel open // add to <body> that there is a panel open
document.body.classList.add(PANEL_OPENED); 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);
}
} }
}, },
@ -48,7 +59,9 @@
isPanelOpen = false; isPanelOpen = false;
// remove from <body> so that no panels should be open // remove from <body> so that no panels should be open
document.body.classList.remove(PANEL_OPENED); var className = document.body.className;
className = className.replace(PANEL_OPEN_LEFT, "").replace(PANEL_OPEN_RIGHT, "").trim();
document.body.className = className;
} }
} }

25
scss/framework/structure/_panel.scss
View File

@ -5,8 +5,18 @@
max-height: 100%; max-height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0;
z-index: 0; z-index: 0;
} }
.ion-panel-active-left {
left: 0;
}
.ion-panel-active-right {
right: 0;
}
.ion-panel-active { .ion-panel-active {
display: block; display: block;
width: $panelOpenWidth; width: $panelOpenWidth;
@ -26,11 +36,20 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.ion-panel-opened .bar-header, .ion-panel-left .bar-header,
.ion-panel-opened .content, .ion-panel-left .content,
.ion-panel-opened .bar-footer .ion-panel-left .bar-footer
{ {
-webkit-transform: translate3d($panelOpenWidth, 0,0 ); -webkit-transform: translate3d($panelOpenWidth, 0,0 );
-moz-transform: translate3d($panelOpenWidth, 0,0 ); -moz-transform: translate3d($panelOpenWidth, 0,0 );
transform: translate3d($panelOpenWidth, 0,0 ); transform: translate3d($panelOpenWidth, 0,0 );
}
.ion-panel-right .bar-header,
.ion-panel-right .content,
.ion-panel-right .bar-footer
{
-webkit-transform: translate3d( ($panelOpenWidth * -1), 0,0 );
-moz-transform: translate3d( ($panelOpenWidth * -1), 0,0 );
transform: translate3d( ($panelOpenWidth * -1), 0,0 );
} }

7
scss/framework/theme/_panel.scss
View File

@ -1,5 +1,12 @@
.ion-panel { .ion-panel {
background: $panelBackgroundColor; background: $panelBackgroundColor;
}
.ion-panel-left .ion-panel {
border-right: 1px solid $panelInsetBorderColor; border-right: 1px solid $panelInsetBorderColor;
}
.ion-panel-right .ion-panel {
border-left: 1px solid $panelInsetBorderColor;
} }