-
- This is an implementation of
- Material Design Lite's dashboard template. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
- (see license)
- . Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
-
-
-
-
-
-
-
-
-
+
+
+
+ 
+
+
+
+
+
+ hello@example.com
+
+
+
+
+
+
+ This is an implementation of
+ Material Design Lite's dashboard template. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
+ (see license)
+ . Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
+
+
+
+
-
-
-
+
+
+
-
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+ Updates
+
+
+
Non dolore elit adipisicing ea reprehenderit consectetur culpa.
+
-
-
-
-
-
diff --git a/js/src/baseLayout.js b/js/src/baseLayout.js
index dc5950fc..9db045ee 100644
--- a/js/src/baseLayout.js
+++ b/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: ``
+ },
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)
diff --git a/js/src/index.js b/js/src/index.js
index f3024a37..b12aa4e7 100644
--- a/js/src/index.js
+++ b/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'
diff --git a/js/src/layout.js b/js/src/layout.js
deleted file mode 100644
index dcfe8a0f..00000000
--- a/js/src/layout.js
+++ /dev/null
@@ -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
-
+
-
-
+