first implementation of fun stats site

1 files changed, 122 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/js/baseLayout.js b/templates/assets/bootstrap-material-design/js/baseLayout.js
new file mode 100644
index 0000000..8dc87ed
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/js/baseLayout.js
@@ -0,0 +1,122 @@
+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