From da1e197905242eb5119dd6c5809d6be141358c1e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 28 Aug 2013 16:50:38 -0500 Subject: [PATCH] right side panels --- dist/framework.css | 27 ++++++++++++++++++++++---- example/panels.html | 9 +++++++-- js/framework/handlers/panel-handler.js | 10 ++++++++-- js/framework/ion-panel.js | 25 ++++++++++++++++++------ scss/framework/structure/_panel.scss | 25 +++++++++++++++++++++--- scss/framework/theme/_panel.scss | 7 +++++++ 6 files changed, 86 insertions(+), 17 deletions(-) diff --git a/dist/framework.css b/dist/framework.css index 3fa899d3c0..beeba103d8 100644 --- a/dist/framework.css +++ b/dist/framework.css @@ -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; } diff --git a/example/panels.html b/example/panels.html index 4837527f0b..24c3e7a77c 100644 --- a/example/panels.html +++ b/example/panels.html @@ -14,12 +14,13 @@
- +

Panels

+
-

+

@@ -34,6 +35,10 @@ This is my default left side panel!
+
+ This is my right side panel! +
+
This is my other left side panel!
diff --git a/js/framework/handlers/panel-handler.js b/js/framework/handlers/panel-handler.js index 94a8f356e7..cb39679ffd 100644 --- a/js/framework/handlers/panel-handler.js +++ b/js/framework/handlers/panel-handler.js @@ -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; diff --git a/js/framework/ion-panel.js b/js/framework/ion-panel.js index dfffa083e2..470254751a 100644 --- a/js/framework/ion-panel.js +++ b/js/framework/ion-panel.js @@ -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 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 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; } } diff --git a/scss/framework/structure/_panel.scss b/scss/framework/structure/_panel.scss index ba1c75f3d7..c58642efa2 100644 --- a/scss/framework/structure/_panel.scss +++ b/scss/framework/structure/_panel.scss @@ -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 ); } \ No newline at end of file diff --git a/scss/framework/theme/_panel.scss b/scss/framework/theme/_panel.scss index 65de719d04..7253d1e78c 100644 --- a/scss/framework/theme/_panel.scss +++ b/scss/framework/theme/_panel.scss @@ -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; } \ No newline at end of file