#822 drawer development - remove layout.js, functionality is provided by BaseLayout to Drawer. Auto create canvas element if necessary - preparing for multi-drawer

docs/examples/dashboard/index.html

@@ -8,8 +8,7 @@ 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-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
+<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
   <header class="mdb-layout-header">
     <div class="navbar navbar-light bg-faded navbar-static-top">
       <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
@@ -238,8 +237,8 @@ js: example.js
       </div>
     </div>
   </main>
-  </div>
 </div>
+
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
   <defs>
     <mask id="piemask" maskContentUnits="objectBoundingBox">
@@ -287,7 +286,3 @@ js: example.js
     </g>
   </defs>
 </svg>
-</div>
-
-
-<!--<script src="example.js"></script>-->

js/src/baseLayout.js

@@ -4,16 +4,23 @@ import Util from './util'
 const BaseLayout = (($) => {
 
   const ClassName = {
+    CANVAS: 'mdb-layout-canvas',
     CONTAINER: 'mdb-layout-container',
     BACKDROP: `mdb-layout-backdrop`
   }
 
   const Selector = {
+    CANVAS: `.${ClassName.CANVAS}`,
     CONTAINER: `.${ClassName.CONTAINER}`,
     BACKDROP: `.${ClassName.BACKDROP}`
   }
 
   const Default = {
+    canvas: {
+      create: true,
+      required: true,
+      template: `<div class="${ClassName.CANVAS}"></div>`
+    },
     backdrop: {
       create: true,
       required: true,
@@ -33,6 +40,7 @@ const BaseLayout = (($) => {
 
       this.$container = this.findContainer(true)
       this.$backdrop = this.resolveBackdrop()
+      this.resolveCanvas();
     }
 
     dispose(dataKey) {
@@ -44,6 +52,29 @@ const BaseLayout = (($) => {
     // ------------------------------------------------------------------------
     // protected
 
+    // Will wrap container in mdb-layout-canvas if necessary
+    resolveCanvas() {
+      let bd = this.findCanvas(false)
+      if (bd === undefined || bd.length === 0) {
+        if (this.config.canvas.create) {
+          this.$container.wrap(this.config.canvas.template)
+        }
+
+        bd = this.findCanvas(this.config.canvas.required)
+      }
+
+      return bd
+    }
+
+    // Find closest mdb-layout-container based on the given context
+    findCanvas(raiseError = true, context = this.$container) {
+      let canvas = context.closest(Selector.CANVAS)
+      if (canvas.length === 0 && raiseError) {
+        $.error(`Failed to find ${Selector.CANVAS} for ${Util.describe(context)}`)
+      }
+      return canvas
+    }
+
     // Will add mdb-layout-backdrop to mdb-layout-container if necessary
     resolveBackdrop() {
       let bd = this.findBackdrop(false)

js/src/index.js

@@ -22,8 +22,7 @@ import Switch from './switch'
 import Text from './text'
 import Textarea from './textarea'
 
-//import Layout from './layout'
-import DrawerToggle from './drawer'
+import Drawer from './drawer'
 
 import Ripples from './ripples'
 import Autofill from './autofill'

js/src/layout.js

@@ -1,92 +0,0 @@
-//import BaseLayout from './baseLayout'
-//
-//const Layout = (($) => {
-//
-//  /**
-//   * ------------------------------------------------------------------------
-//   * Constants
-//   * ------------------------------------------------------------------------
-//   */
-//  const NAME = 'layout'
-//  const DATA_KEY = `mdb.${NAME}`
-//  const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
-//  const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
-//
-//  //const ClassName = {
-//  //  CANVAS: 'mdb-layout-canvas',
-//  //  HEADER: 'mdb-layout-header',
-//  //  DRAWER: 'mdb-layout-drawer',
-//  //  CONTENT: 'mdb-layout-content',
-//  //  BACKDROP: 'mdb-layout-backdrop',
-//  //}
-//
-//  //const Selector = {
-//  //  DRAWER: `.${ClassName.DRAWER}`,
-//  //  HEADER: `.${ClassName.HEADER}`,
-//  //  CONTENT: `.${ClassName.CONTENT}`
-//  //}
-//
-//  const Default = {}
-//
-//  /**
-//   * ------------------------------------------------------------------------
-//   * Class Definition
-//   * ------------------------------------------------------------------------
-//   */
-//  class Layout extends BaseLayout {
-//
-//    constructor($element, config) {
-//      super($element, $.extend(true, {}, Default, config))
-//
-//      // FIXME: I'm not sure we want to auto-resolve a canvas....think about it and refactor this or delete it.
-//      // FIXME: with a goal of supporting two drawers, or even more, I'm not sure we want to auto-add the canvas because I think it's really only necessary if we have a fixed header...not sure.
-//
-//      // FIXME: if this part is not needed, it seems this component could be deleted because the drawer component does the rest.
-//
-//      //var canvas = document.createElement('div')
-//      //canvas.addClass(ClassName.CANVAS)
-//      //this.$element.parentElement.insertBefore(canvas, this.$element)
-//      //this.$element.parentElement.removeChild(this.$element)
-//      //canvas.appendChild(this.$element)
-//
-//      //this.$header = $element.find(`> ${Selector.HEADER}`)
-//      //this.$drawer = $element.find(`> ${Selector.DRAWER}`)
-//      //this.$content = $element.find(`> ${Selector.CONTENT}`)
-//    }
-//
-//    dispose() {
-//      super.dispose(DATA_KEY)
-//    }
-//
-//    // ------------------------------------------------------------------------
-//    // static
-//    static _jQueryInterface(config) {
-//      return this.each(function () {
-//        let $element = $(this)
-//        let data = $element.data(DATA_KEY)
-//
-//        if (!data) {
-//          data = new Layout($element, config)
-//          $element.data(DATA_KEY, data)
-//        }
-//      })
-//    }
-//  }
-//
-//  /**
-//   * ------------------------------------------------------------------------
-//   * jQuery
-//   * ------------------------------------------------------------------------
-//   */
-//  $.fn[JQUERY_NAME] = Layout._jQueryInterface
-//  $.fn[JQUERY_NAME].Constructor = Layout
-//  $.fn[JQUERY_NAME].noConflict = () => {
-//    $.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT
-//    return Layout._jQueryInterface
-//  }
-//
-//  return Layout
-//
-//})(jQuery)
-//
-//export default Layout