From 0c073ef5ef3133ad54b3fa2d04981957418f8af8 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Tue, 19 Jan 2016 15:41:30 -0600 Subject: [PATCH] #822 drawer - removed mdb-drawer-out, it's always out unless it is a) responsively `in`, or b) marked with mdb-drawer-in --- docs/examples/dashboard/example.js | 2 -- js/src/drawerToggle.js | 2 ++ js/src/layout.js | 52 +++++++++++++++++++++++++++++- scss/_drawer.scss | 46 +++++++++++--------------- scss/mixins/_drawer.scss | 36 ++++++++++----------- 5 files changed, 90 insertions(+), 48 deletions(-) diff --git a/docs/examples/dashboard/example.js b/docs/examples/dashboard/example.js index 1f3f8d13..f46d1b3a 100644 --- a/docs/examples/dashboard/example.js +++ b/docs/examples/dashboard/example.js @@ -31,12 +31,10 @@ $(document).ready(function() { // document ready is a little convoluted because var $icon = $(this).find('.material-icons') if ($icon.text() == 'visibility_off') { - $container.addClass('mdb-drawer-out') $container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close $icon.text('visibility') } else { - $container.removeClass('mdb-drawer-out') $container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open $icon.text('visibility_off') } diff --git a/js/src/drawerToggle.js b/js/src/drawerToggle.js index 39b77ede..472c3d67 100644 --- a/js/src/drawerToggle.js +++ b/js/src/drawerToggle.js @@ -61,6 +61,8 @@ const DrawerToggle = (($) => { this.$layoutContainer = null } + + // ------------------------------------------------------------------------ // private diff --git a/js/src/layout.js b/js/src/layout.js index df9cf826..19675208 100644 --- a/js/src/layout.js +++ b/js/src/layout.js @@ -24,7 +24,9 @@ const Layout = (($) => { DRAWER: 'mdb-layout-drawer', CONTENT: 'mdb-layout-content', DRAWER_BTN: 'mdb-layout-drawer-button', // FIXME: swithch to data-drawer attr finder or something like that, see navbar toggler - BACKDROP: 'mdb-layout-backdrop' + BACKDROP: 'mdb-layout-backdrop', + + DRAWER_IN: `mdb-drawer-in` } const Selector = { @@ -119,6 +121,54 @@ const Layout = (($) => { //} } + + + toggleDrawer() { + if ($(this._element).hasClass(ClassName.DRAWER_IN)) { + this.hide() + } else { + this.show() + } + } + + show() { + if ($(this._element).hasClass(ClassName.IN)) { + return + } + + this._element.setAttribute('aria-expanded', true) + + if (this._triggerArray.length) { + $(this._triggerArray) + .removeClass(ClassName.COLLAPSED) + .attr('aria-expanded', true) + } + + $(this._element) + .removeClass(ClassName.COLLAPSING) + .addClass(ClassName.COLLAPSE) + .addClass(ClassName.IN) + } + + hide() { + if (this._isTransitioning || !$(this._element).hasClass(ClassName.IN)) { + return + } + + this._element.setAttribute('aria-expanded', false) + + if (this._triggerArray.length) { + $(this._triggerArray) + .addClass(ClassName.COLLAPSED) + .attr('aria-expanded', false) + } + + $(this._element) + .removeClass(ClassName.COLLAPSING) + .addClass(ClassName.COLLAPSE) + .trigger(Event.HIDDEN) + } + // ------------------------------------------------------------------------ // private diff --git a/scss/_drawer.scss b/scss/_drawer.scss index 2de14183..961e2118 100644 --- a/scss/_drawer.scss +++ b/scss/_drawer.scss @@ -55,11 +55,6 @@ // NOTE: mdb-drawer-in-* uses media-breakpoint-up() // // -// mdb-drawer-out -// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some -// strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins. -// -// // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg // We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`. // Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay. @@ -70,26 +65,23 @@ // // Drawer open positioning, and style options (push is default, overlay is optional) // - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above) -:not(.mdb-drawer-out) { +@each $breakpoint in map-keys($grid-breakpoints) { - @each $breakpoint in map-keys($grid-breakpoints) { + @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint); + @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint); - @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint); - @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint); - - @include mdb-drawer-x-overlay-down($breakpoint); - @include mdb-drawer-y-overlay-down($breakpoint); - } + @include mdb-drawer-x-overlay-down($breakpoint); + @include mdb-drawer-y-overlay-down($breakpoint); } -////---- -//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out -//// -//// Used with
-//// -//.kitchen-sink-drawer:not(.mdb-drawer-out) { +//---- +// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger +// +// Used with
+// +//.kitchen-sink-drawer { // @each $breakpoint in (xs lg) { -// // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay +// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay // @include mdb-drawer-x-closed(500px); // @include mdb-drawer-x-open-up(500px, $breakpoint); // } @@ -97,13 +89,13 @@ // @include mdb-drawer-x-overlay-down(md); //} // -////---- -//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out -//// -//// Used with
-//// -//.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) { -// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out +//---- +// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger +// +// Used with
+// +//.kitchen-sink-drawer-triggered { +// @include mdb-drawer-x-closed(500px); // closed by default // @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in // @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary //} diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss index 0d3aa243..e08e3b7b 100644 --- a/scss/mixins/_drawer.scss +++ b/scss/mixins/_drawer.scss @@ -2,30 +2,30 @@ // //---- -// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out +// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger // -// Used with
+// Used with
+// +//.kitchen-sink-drawer { +// @each $breakpoint in (xs lg) { +// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay +// @include mdb-drawer-x-closed(500px); +// @include mdb-drawer-x-open-up(500px, $breakpoint); +// } +// // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required +// @include mdb-drawer-x-overlay-down(md); +//} // -// .kitchen-sink-drawer:not(.mdb-drawer-out) { -// @each $breakpoint in (xs lg) { -// // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay -// @include mdb-drawer-x-closed(500px); -// @include mdb-drawer-x-open-up(500px, $breakpoint); -// } -// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required -// @include mdb-drawer-x-overlay-down(md); -// } - //---- -// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out +// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger // // Used with
// -// .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) { -// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out -// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in -// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary -// } +//.kitchen-sink-drawer-triggered { +// @include mdb-drawer-x-closed(500px); // closed by default +// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in +// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary +//} @mixin mdb-drawer-x-closed($size) { @each $side, $abbrev in (left: l, right: r) {