#822 allow marker class mdb-drawer-closed to force closed the drawer i.e. for use with js (overrides responsive marker class)

docs/_includes/footer-example.html

@@ -20,3 +20,8 @@
     $('body').bootstrapMaterialDesign()
   })
 </script>
+
+
+{% if page.js %}
+  <script src="{{ page.js }}"></script>
+{% endif %}

docs/examples/dashboard/example.js

@@ -1,46 +1,45 @@
 function clearDrawerClasses($container) {
-  var classes = [ "mdb-drawer-fixed-left", "mdb-drawer-fixed-right", "mdb-drawer-fixed-top", "mdb-drawer-fixed-bottom" ];
+  var classes = ["mdb-drawer-fixed-left", "mdb-drawer-fixed-right", "mdb-drawer-fixed-top", "mdb-drawer-fixed-bottom"];
 
-  $.each(classes, function(index, value) {
+  $.each(classes, function (index, value) {
     $container.removeClass(value)
   })
 }
 
-function setDrawerPosition(position){
+function setDrawerPosition(position) {
   var $container = $('.mdb-layout-container')
 
   clearDrawerClasses($container)
   $container.addClass(position)
 }
 
-(function() { // document ready is a little convoluted because this executes before jquery.
-  setTimeout(function() {
+$(document).ready(function() { // document ready is a little convoluted because this executes before jquery.
+  var buttons = ["drawer-fixed-left", "drawer-fixed-right", "drawer-fixed-top", "drawer-fixed-bottom"]
 
-    var buttons = ["drawer-fixed-left", "drawer-fixed-right", "drawer-fixed-top", "drawer-fixed-bottom"]
-
-    $.each(buttons, function(index, position) {
-      $('#'+position).click(function(){
-        setDrawerPosition('mdb-' + position)
-      })
+  $.each(buttons, function (index, position) {
+    $('#' + position).click(function() {
+      setDrawerPosition('mdb-' + position)
     })
+  })
 
-    // add a toggle for drawer visibility that shows anytime
-    $('#drawer-visibility').click(function(){
-      var $container = $('.mdb-layout-container')
+  // add a toggle for drawer visibility that shows anytime
+  $('#drawer-visibility').click(function () {
+    var $container = $('.mdb-layout-container')
 
-      // once clicked, just do away with responsive marker
-      //$container.removeClass('mdb-drawer-open-md')
+    // once clicked, just do away with responsive marker
+    //$container.removeClass('mdb-drawer-open-md')
 
-      var $icon = $(this).find('.material-icons')
-      if($icon.text() == 'visibility_off'){
-        $container.removeClass('mdb-drawer-open')
-        $icon.text('visibility')
-      }
-      else {
-        $container.addClass('mdb-drawer-open')
-        $icon.text('visibility_off')
-      }
-    })
+    var $icon = $(this).find('.material-icons')
+    if ($icon.text() == 'visibility_off') {
+      $container.addClass('mdb-drawer-closed')
+      $container.removeClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it close
+      $icon.text('visibility')
+    }
+    else {
+      $container.removeClass('mdb-drawer-closed')
+      $container.addClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it open
+      $icon.text('visibility_off')
+    }
+  })
+})
 
-  }, 100)
-})();

docs/examples/dashboard/index.html

@@ -2,13 +2,14 @@
 layout: example
 title: Dashboard Template
 group: material-design
+js: example.js
 ---
 
 <!-- Custom styles for this template -->
 <link href="example.css" rel="stylesheet">
 
 <div class="mdb-layout-canvas">
-  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-md">
+  <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-lg">
     <header class="mdb-layout-header">
       <!--
       <div class="collapse" id="navbar-header">
@@ -298,4 +299,4 @@ group: material-design
 </div>
 
 
-<script src="example.js"></script>
+<!--<script src="example.js"></script>-->

docs/examples/signin/example.js

@@ -0,0 +1,4 @@
+$(document).ready(function() {
+  $('#inputEmail').focus()
+})
+

docs/examples/signin/index.html

@@ -2,6 +2,7 @@
 layout: example
 title: Signin Template
 group: material-design
+js: example.js
 ---
 
 <!-- Custom styles for this template -->
@@ -29,22 +30,3 @@ group: material-design
   </form>
 
 </div>
-
-
-
-<script>
-
-  /*
-  $(function() { 
-    $('#inputEmail').focus()
-  })
-  */
-
-  // jquery not loaded yet due to the nature of this jekyll page rendering setup so this is more complicated than normally necessary!
-  document.addEventListener("DOMContentLoaded", function(event) { 
-    setTimeout(function(){
-      // hopefully by now jquery is initialized
-      $('#inputEmail').focus()
-    }, 1);
-  })
-</script>

scss/_drawer.scss

@@ -64,7 +64,7 @@
 
 // for top or bottom drawers, setup widths, heights and positions
 @each $side in (top bottom) {
-  .mdb-drawer-fixed-#{$side} {
+  .mdb-drawer-fixed-#{$side} { // style to force closed in all responsive cases
     > .mdb-layout-drawer {
       // position
       #{$side}: 0;
@@ -91,8 +91,15 @@
 //
 // To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
 //  `mdb-drawer-open` without a size (for triggered openings).  Since the xs size is 0,
-//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open` a.k.a always open.
+//  instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open`
+//  a.k.a always open.
 //  Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+//
+// mdb-drawer-closed
+//  Note that this also makes a provision for mdb-drawer-closed, a marker class that will _force_ the drawer closed,
+//  regardless of the responsive class present. If (for some strange reason) both mdb-drawer-closed and mdb-drawer-open
+//  are present, it appears that the closed option wins.
+//
 .mdb-drawer-open {
   @each $breakpoint in map-keys($grid-breakpoints) {
 
@@ -102,12 +109,15 @@
     }
 
     // e.g. &, &-sm, &-md, &-lg
-    #{unquote($name)} {
+    #{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
+
       @include media-breakpoint-up($breakpoint) {
 
         // mdb-drawer-fixed-(left and right) styles
         @each $side in (left right) {
-          &.mdb-drawer-fixed-#{$side} {
+
+          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
+            // 1. Push - drawer will push the header and content
             > .mdb-layout-header {
               width: calc(100% - #{$mdb-layout-drawer-size});
               margin-#{$side}: $mdb-layout-drawer-size;
@@ -121,7 +131,7 @@
               margin-#{$side}: $mdb-layout-drawer-size;
             }
 
-            // switch drawer to overlay instead of a content/header push at the pre-configured breakpoint
+            // 2. Overlay - drawer will overlay content/header push at the pre-configured breakpoint
             @include media-breakpoint-down($mdb-layout-drawer-x-overlay-breakpoint) {
               > .mdb-layout-header,
               > .mdb-layout-content {
@@ -135,7 +145,10 @@
 
         // mdb-drawer-fixed-(top and bottom) styles
         @each $side in (top bottom) {
-          &.mdb-drawer-fixed-#{$side} {
+
+          &.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
+
+            // 1. Push - drawer will push the header or content
             > .mdb-layout-header {
               //height: calc(100% - #{$mdb-layout-drawer-size});
               @if $side == top { // only add margin-top on a header when the drawer is at the top

scss/variables/_drawer.scss

@@ -3,6 +3,7 @@ $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
 $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
 // when media-breakpoint-down(md), make the drawer overlay instead of push the content/header (left right)
+// note: a good combo appears to be mdb-drawer-open-lg and md for the value below
 $mdb-layout-drawer-x-overlay-breakpoint: md;
 
 // Sizing