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

9
example/panels.html
View File

@ -14,12 +14,13 @@
<section data-default-panel="my-left-panel">
<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>
<button class="button" data-panel-toggle="my-right-panel" data-panel-direction="right"></button>
</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>
</main>
@ -34,6 +35,10 @@
This is my default left side panel!
</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">
This is my other left side panel!
</section>

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

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

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

@ -5,19 +5,23 @@
isPanelOpen,
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 = {
toggle: function(panelId) {
toggle: function(panelId, options) {
if(isPanelOpen) {
this.close();
} else {
this.open(panelId);
this.open(panelId, options);
}
},
open: function(panelId) {
open: function(panelId, options) {
// see if there is an element with this id
var panel = document.getElementById(panelId);
if(panel) {
@ -38,7 +42,14 @@
panel.classList.add(PANEL_ACTIVE);
// 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;
// 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%;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
.ion-panel-active-left {
left: 0;
}
.ion-panel-active-right {
right: 0;
}
.ion-panel-active {
display: block;
width: $panelOpenWidth;
@ -26,11 +36,20 @@
transform: translate3d(0, 0, 0);
}
.ion-panel-opened .bar-header,
.ion-panel-opened .content,
.ion-panel-opened .bar-footer
.ion-panel-left .bar-header,
.ion-panel-left .content,
.ion-panel-left .bar-footer
{
-webkit-transform: translate3d($panelOpenWidth, 0,0 );
-moz-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 {
background: $panelBackgroundColor;
}
.ion-panel-left .ion-panel {
border-right: 1px solid $panelInsetBorderColor;
}
.ion-panel-right .ion-panel {
border-left: 1px solid $panelInsetBorderColor;
}