#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

@@ -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')
     }

js/src/drawerToggle.js

@@ -61,6 +61,8 @@ const DrawerToggle = (($) => {
       this.$layoutContainer = null
     }
 
+
+
     // ------------------------------------------------------------------------
     // private
 

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
 

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,8 +65,6 @@
 //
 // 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) {
 
   @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
@@ -80,16 +73,15 @@
   @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
+// 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 <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
+// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
-////
+//
-//.kitchen-sink-drawer:not(.mdb-drawer-out) {
+//.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
+// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
-////
+//
-//// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
+// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
-////
+//
-//.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
+//.kitchen-sink-drawer-triggered {
-//  @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
+//  @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
 //}

scss/mixins/_drawer.scss

@@ -2,27 +2,27 @@
 //
 
 //----
-// 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 <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
+// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
 //
-//    .kitchen-sink-drawer:not(.mdb-drawer-out) {
+//.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);
 //  }
-//      // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
+//  // Create a responsive overlay at mdb-drawer-overlay-md-down - 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 <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
 //
-//    .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
+//.kitchen-sink-drawer-triggered {
-//      @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
+//  @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
 //}