diff --git a/Gruntfile.js b/Gruntfile.js
index ec125f06..b4be5ed7 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -399,8 +399,8 @@ module.exports = function (grunt) {
files: 'js/src/*.js',
tasks: ['dist-js']
},
- docsjs: {
- files: ['docs/assets/js/src/*.js'],
+ docsjs: { // watch both the source and docs js
+ files: ['js/src/*.js', 'docs/assets/js/src/*.js'],
tasks: ['docs-js']
},
core: {
diff --git a/docs/material-design/test.md b/docs/material-design/test.md
index 3d80f990..7592fdfa 100644
--- a/docs/material-design/test.md
+++ b/docs/material-design/test.md
@@ -17,6 +17,7 @@ group: material-design
{% endexample %}
+
## With label-placeholder
Perhaps this isn't worth doing, considering the context. we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything?
{% example html %}
diff --git a/js/src/autofill.js b/js/src/autofill.js
index eba5a7a9..76d49e9b 100644
--- a/js/src/autofill.js
+++ b/js/src/autofill.js
@@ -1,3 +1,5 @@
+import Base from './base'
+
const Autofill = (($) => {
/**
@@ -17,20 +19,17 @@ const Autofill = (($) => {
* Class Definition
* ------------------------------------------------------------------------
*/
- class Autofill {
+ class Autofill extends Base {
constructor($element, config) {
- this.$element = $element
- this.config = $.extend(true, {}, Default, config)
+ super($element, $.extend(true, {}, Default, config))
this._watchLoading()
this._attachEventHandlers()
}
dispose() {
- $.removeData(this.$element, DATA_KEY)
- this.$element = null
- this.config = null
+ super.dispose(DATA_KEY)
}
// ------------------------------------------------------------------------
diff --git a/js/src/base.js b/js/src/base.js
new file mode 100644
index 00000000..e957a594
--- /dev/null
+++ b/js/src/base.js
@@ -0,0 +1,95 @@
+import Util from './util'
+
+const Base = (($) => {
+
+ const ClassName = {
+ //FORM_GROUP: 'form-group',
+ MDB_FORM_GROUP: 'mdb-form-group',
+ //MDB_LABEL: 'mdb-label',
+ //MDB_LABEL_STATIC: 'mdb-label-static',
+ //MDB_LABEL_PLACEHOLDER: 'mdb-label-placeholder',
+ //MDB_LABEL_FLOATING: 'mdb-label-floating',
+ //HAS_DANGER: 'has-danger',
+ IS_FILLED: 'is-filled',
+ IS_FOCUSED: 'is-focused'
+ }
+
+ const Selector = {
+ //FORM_GROUP: `.${ClassName.FORM_GROUP}`,
+ MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}`
+ }
+
+ const Default = {}
+
+ /**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+ class Base {
+
+ /**
+ *
+ * @param element
+ * @param config
+ * @param properties - anything that needs to be set as this[key] = value. Works around the need to call `super` before using `this`
+ */
+ constructor($element, config, properties = {}) {
+ this.$element = $element
+ this.config = $.extend(true, {}, Default, config)
+
+ // set properties for use in the constructor initialization
+ for (let key in properties) {
+ this[key] = properties[key]
+ }
+ }
+
+ dispose(dataKey) {
+ $.removeData(this.$element, dataKey)
+ this.$element = null
+ this.config = null
+ }
+
+ // ------------------------------------------------------------------------
+ // protected
+
+ addFormGroupFocus() {
+ if (!this.$element.prop('disabled')) {
+ this.$mdbFormGroup.addClass(ClassName.IS_FOCUSED)
+ }
+ }
+
+ removeFormGroupFocus() {
+ this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED)
+ }
+
+ removeIsFilled() {
+ this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
+ }
+
+ addIsFilled() {
+ this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
+ }
+
+ // Find mdb-form-group
+ findMdbFormGroup(raiseError = true) {
+ let mfg = this.$element.closest(Selector.MDB_FORM_GROUP)
+ if (mfg.length === 0 && raiseError) {
+ $.error(`Failed to find ${Selector.MDB_FORM_GROUP} for ${Util.describe(this.$element)}`)
+ }
+ return mfg
+ }
+
+ // ------------------------------------------------------------------------
+ // private
+
+ // ------------------------------------------------------------------------
+ // static
+
+ }
+
+ return Base
+
+})(jQuery)
+
+export default Base
diff --git a/js/src/baseInput.js b/js/src/baseInput.js
index 028a07d9..2fae5a8e 100644
--- a/js/src/baseInput.js
+++ b/js/src/baseInput.js
@@ -1,3 +1,4 @@
+import Base from './base'
import Util from './util'
const BaseInput = (($) => {
@@ -26,7 +27,7 @@ const BaseInput = (($) => {
required: false
},
mdbFormGroup: {
- template: ``,
+ template: ``,
create: true, // create a wrapper if form-group not found
required: true // not recommended to turn this off, only used for inline components
},
@@ -60,7 +61,7 @@ const BaseInput = (($) => {
* Class Definition
* ------------------------------------------------------------------------
*/
- class BaseInput {
+ class BaseInput extends Base {
/**
*
@@ -69,13 +70,7 @@ const BaseInput = (($) => {
* @param properties - anything that needs to be set as this[key] = value. Works around the need to call `super` before using `this`
*/
constructor($element, config, properties = {}) {
- this.$element = $element
- this.config = $.extend(true, {}, Default, config)
-
- // set properties for use in the constructor initialization
- for (let key in properties) {
- this[key] = properties[key]
- }
+ super($element, $.extend(true, {}, Default, config), properties)
// Enforce no overlap between components to prevent side effects
this._rejectInvalidComponentMatches()
@@ -106,10 +101,9 @@ const BaseInput = (($) => {
}
dispose(dataKey) {
- $.removeData(this.$element, dataKey)
- this.$element = null
+ super.dispose(dataKey)
this.$mdbFormGroup = null
- this.config = null
+ this.$formGroup = null
}
// ------------------------------------------------------------------------
@@ -163,16 +157,6 @@ const BaseInput = (($) => {
})
}
- addFormGroupFocus() {
- if (!this.$element.prop('disabled')) {
- this.$mdbFormGroup.addClass(ClassName.IS_FOCUSED)
- }
- }
-
- removeFormGroupFocus() {
- this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED)
- }
-
addHasDanger() {
this.$mdbFormGroup.addClass(ClassName.HAS_DANGER)
}
@@ -181,14 +165,6 @@ const BaseInput = (($) => {
this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER)
}
- removeIsFilled() {
- this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
- }
-
- addIsFilled() {
- this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
- }
-
isEmpty() {
return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '')
}
@@ -264,15 +240,6 @@ const BaseInput = (($) => {
return label
}
- // Find mdb-form-group
- findMdbFormGroup(raiseError = true) {
- let mfg = this.$element.closest(Selector.MDB_FORM_GROUP)
- if (mfg.length === 0 && raiseError) {
- $.error(`Failed to find ${Selector.MDB_FORM_GROUP} for ${Util.describe(this.$element)}`)
- }
- return mfg
- }
-
// Find mdb-form-group
findFormGroup(raiseError = true) {
let fg = this.$element.closest(Selector.FORM_GROUP)
diff --git a/js/src/bootstrapMaterialDesign.js b/js/src/bootstrapMaterialDesign.js
index 3f679e70..89e773eb 100644
--- a/js/src/bootstrapMaterialDesign.js
+++ b/js/src/bootstrapMaterialDesign.js
@@ -37,6 +37,27 @@ const BootstrapMaterialDesign = (($) => {
className: 'mdb-label-static' // default style of label to be used if not specified in the html markup
}
},
+ autofill: {
+ selector: 'body'
+ },
+ checkbox: {
+ selector: '.checkbox > label > input[type=checkbox]'
+ },
+ checkboxInline: {
+ selector: 'label.checkbox-inline > input[type=checkbox]'
+ },
+ collapseInline: {
+ selector: '.mdb-collapse-inline [data-toggle="collapse"]'
+ },
+ file: {
+ selector: 'input[type=file]'
+ },
+ radio: {
+ selector: '.radio > label > input[type=radio]'
+ },
+ radioInline: {
+ selector: 'label.radio-inline > input[type=radio]'
+ },
ripples: {
//selector: ['.btn:not(.btn-link):not(.ripple-none)'] // testing only
selector: [
@@ -49,43 +70,26 @@ const BootstrapMaterialDesign = (($) => {
'.ripple' // generic marker class to add ripple to elements
]
},
- text: {
- // omit inputs we have specialized components to handle
- selector: [`input[type!='checkbox'][type!='radio'][type!='file']`]
- },
- file: {
- selector: 'input[type=file]'
- },
- checkbox: {
- selector: '.checkbox > label > input[type=checkbox]'
- },
- checkboxInline: {
- selector: 'label.checkbox-inline > input[type=checkbox]'
- },
- radio: {
- selector: '.radio > label > input[type=radio]'
- },
- radioInline: {
- selector: 'label.radio-inline > input[type=radio]'
- },
select: {
selector: ['select']
},
switch: {
selector: '.switch > label > input[type=checkbox]'
},
+ text: {
+ // omit inputs we have specialized components to handle
+ selector: [`input[type!='checkbox'][type!='radio'][type!='file']`]
+ },
textarea: {
selector: ['textarea']
},
- autofill: {
- selector: 'body'
- },
arrive: true,
// create an ordered component list for instantiation
instantiation: [
'ripples',
'checkbox',
'checkboxInline',
+ 'collapseInline',
'file',
'radio',
'radioInline',
diff --git a/js/src/checkbox.js b/js/src/checkbox.js
index 84969414..05e4d21c 100644
--- a/js/src/checkbox.js
+++ b/js/src/checkbox.js
@@ -1,9 +1,9 @@
import BaseSelection from './baseSelection'
-import Text from './text'
-import File from './file'
-import Radio from './radio'
-import Textarea from './textarea'
-import Select from './select'
+//import Text from './text'
+//import File from './file'
+//import Radio from './radio'
+//import Textarea from './textarea'
+//import Select from './select'
import Util from './util'
const Checkbox = (($) => {
@@ -30,9 +30,9 @@ const Checkbox = (($) => {
class Checkbox extends BaseSelection {
constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
- super($element, $.extend(true, {
- invalidComponentMatches: [File, Radio, Text, Textarea, Select]
- }, Default, config), properties)
+ super($element, $.extend(true,
+ //{invalidComponentMatches: [File, Radio, Text, Textarea, Select]},
+ Default, config), properties)
}
dispose(dataKey = DATA_KEY) {
diff --git a/js/src/collapseInline.js b/js/src/collapseInline.js
new file mode 100644
index 00000000..3c6efb03
--- /dev/null
+++ b/js/src/collapseInline.js
@@ -0,0 +1,113 @@
+import Base from './base'
+import Util from './util'
+
+const CollapseInline = (($) => {
+
+ /**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+ const NAME = 'collapseInline'
+ const DATA_KEY = `mdb.${NAME}`
+ const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+ const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
+
+ const Selector = {
+ ANY_INPUT: 'input, select, textarea'
+ }
+
+ const ClassName = {
+ IN: 'in',
+ COLLAPSE: 'collapse',
+ COLLAPSING: 'collapsing',
+ COLLAPSED: 'collapsed',
+ WIDTH: 'width'
+ }
+ const Default = {}
+
+ /**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+ class CollapseInline extends Base {
+
+ // $element is expected to be the trigger
+ // i.e.