From a08b5a2ee819a77ea0e848890bc9b0452d10beb0 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Fri, 8 Jan 2016 13:04:21 -0600 Subject: [PATCH] Initial implementation of collapseInline is complete and working on the test page. Need to integrate it into documentation. --- Gruntfile.js | 4 +- docs/material-design/test.md | 1 + js/src/autofill.js | 11 ++- js/src/base.js | 95 +++++++++++++++++++++++++ js/src/baseInput.js | 45 ++---------- js/src/bootstrapMaterialDesign.js | 48 +++++++------ js/src/checkbox.js | 16 ++--- js/src/collapseInline.js | 113 ++++++++++++++++++++++++++++++ js/src/file.js | 16 +++-- js/src/index.js | 21 +++--- js/src/radio.js | 14 ++-- js/src/select.js | 16 +++-- js/src/text.js | 16 +++-- js/src/textarea.js | 16 +++-- 14 files changed, 309 insertions(+), 123 deletions(-) create mode 100644 js/src/base.js create mode 100644 js/src/collapseInline.js 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.