mdb-ui-kit/js/baseLayout.js

import Base from './base'
import Util from './util'

const BaseLayout = (($) => {

  const ClassName = {
    CANVAS: 'bmd-layout-canvas',
    CONTAINER: 'bmd-layout-container',
    BACKDROP: `bmd-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,
      template: `<div class="${ClassName.BACKDROP}"></div>`
    }
  }

  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */
  class BaseLayout extends Base {

    constructor($element, config, properties = {}) {
      super($element, $.extend(true, {}, Default, config), properties)

      this.$container = this.findContainer(true)
      this.$backdrop = this.resolveBackdrop()
      this.resolveCanvas();
    }

    dispose(dataKey) {
      super.dispose(dataKey)
      this.$container = null
      this.$backdrop = null
    }

    // ------------------------------------------------------------------------
    // protected

    // Will wrap container in bmd-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 bmd-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 bmd-layout-backdrop to bmd-layout-container if necessary
    resolveBackdrop() {
      let bd = this.findBackdrop(false)
      if (bd === undefined || bd.length === 0) {
        if (this.config.backdrop.create) {
          this.$container.append(this.config.backdrop.template)
        }

        bd = this.findBackdrop(this.config.backdrop.required)
      }

      return bd
    }

    // Find closest bmd-layout-container based on the given context
    findBackdrop(raiseError = true, context = this.$container) {
      let backdrop = context.find(`> ${Selector.BACKDROP}`)
      if (backdrop.length === 0 && raiseError) {
        $.error(`Failed to find ${Selector.BACKDROP} for ${Util.describe(context)}`)
      }
      return backdrop
    }

    // Find closest bmd-layout-container based on the given context
    findContainer(raiseError = true, context = this.$element) {
      let container = context.closest(Selector.CONTAINER)
      if (container.length === 0 && raiseError) {
        $.error(`Failed to find ${Selector.CONTAINER} for ${Util.describe(context)}`)
      }
      return container
    }

    // ------------------------------------------------------------------------
    // private

    // ------------------------------------------------------------------------
    // static

  }

  return BaseLayout

})(jQuery)

export default BaseLayout