From f7f064dff4cedb5de4b91e5fdec7def51a625105 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Sat, 5 Dec 2015 18:55:29 -0600 Subject: [PATCH] switched es6 structurally to generate a wrapping .mdb-form-group instead of altering anything with the BS .form-group in an attempt to avoid any side effects to margin/padding/spacing since we only need it to be a marker div. --- docs/assets/js/src/application.js | 11 ++++++ js/src/baseInput.js | 58 ++++++++++++++++++++----------- js/src/baseToggle.js | 8 ++--- js/src/bootstrapMaterialDesign.js | 3 ++ js/src/file.js | 25 ++++++++++--- js/src/text.js | 20 ++++++++++- 6 files changed, 94 insertions(+), 31 deletions(-) diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js index 85120191..0bbe10dc 100644 --- a/docs/assets/js/src/application.js +++ b/docs/assets/js/src/application.js @@ -107,12 +107,23 @@ class Application { .tooltip('_fixTitle') }) } + + fixMissingFormGroups() { + //let selectors = [ + // '#search-input', + // `input.form-control[placeholder='Readonly input here…']` + //] + //for( let selector of selectors){ + // $(selector).parent().wrapInner(`
`) + //} + } } $(() => { let app = new Application() app.displayTypographyProperties() app.initializeClipboard() + app.fixMissingFormGroups() // $.bootstrapMaterialDesign() $('body').bootstrapMaterialDesign() }) diff --git a/js/src/baseInput.js b/js/src/baseInput.js index 529d49a9..93a3beb0 100644 --- a/js/src/baseInput.js +++ b/js/src/baseInput.js @@ -4,7 +4,10 @@ const BaseInput = (($) => { const Default = { formGroup: { - template: `
`, + required: true + }, + mdbFormGroup: { + template: `
`, required: true, autoCreate: true }, @@ -15,12 +18,15 @@ const BaseInput = (($) => { const ClassName = { FORM_GROUP: 'form-group', + MDB_FORM_GROUP: 'mdb-form-group', HAS_ERROR: 'has-error', - IS_EMPTY: 'is-empty' + IS_EMPTY: 'is-empty', + IS_FOCUSED: 'is-focused' } const Selector = { - FORM_GROUP: `.${ClassName.FORM_GROUP}` //, + FORM_GROUP: `.${ClassName.FORM_GROUP}`, + MDB_FORM_GROUP: `.${ClassName.MDB_FORM_GROUP}` } const FormControlSizeConversions = { @@ -48,12 +54,13 @@ const BaseInput = (($) => { // Enforce required classes for a consistent rendering this._rejectWithoutRequiredClasses() - if (this.config.formGroup.autoCreate) { + if (this.config.mdbFormGroup.autoCreate) { // Will create form-group if necessary - this.autoCreateFormGroup() + this.autoCreateMdbFormGroup() } // different components have different rules, always run this separately + this.$mdbFormGroup = this.findMdbFormGroup(this.config.mdbFormGroup.required) this.$formGroup = this.findFormGroup(this.config.formGroup.required) this._convertFormControlSizeVariations() @@ -65,7 +72,7 @@ const BaseInput = (($) => { dispose(dataKey) { $.removeData(this.$element, dataKey) this.$element = null - this.$formGroup = null + this.$mdbFormGroup = null this.config = null } @@ -119,38 +126,38 @@ const BaseInput = (($) => { } addFormGroupFocus() { - this.$formGroup.addClass(ClassName.IS_FOCUSED) + this.$mdbFormGroup.addClass(ClassName.IS_FOCUSED) } removeFormGroupFocus() { - this.$formGroup.removeClass(ClassName.IS_FOCUSED) + this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED) } addHasError() { - this.$formGroup.addClass(ClassName.HAS_ERROR) + this.$mdbFormGroup.addClass(ClassName.HAS_ERROR) } removeHasError() { - this.$formGroup.removeClass(ClassName.HAS_ERROR) + this.$mdbFormGroup.removeClass(ClassName.HAS_ERROR) } addIsEmpty() { - this.$formGroup.addClass(ClassName.IS_EMPTY) + this.$mdbFormGroup.addClass(ClassName.IS_EMPTY) } removeIsEmpty() { - this.$formGroup.removeClass(ClassName.IS_EMPTY) + this.$mdbFormGroup.removeClass(ClassName.IS_EMPTY) } isEmpty() { return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '') } - // Find or create a form-group if necessary - autoCreateFormGroup() { - let fg = this.findFormGroup(false) - if (fg === null || fg.length === 0) { - this.outerElement().wrap(this.config.formGroup.template) + // Find or create a mdb-form-group if necessary + autoCreateMdbFormGroup() { + let fg = this.findMdbFormGroup(false) + if (fg === undefined || fg.length === 0) { + this.outerElement().wrap(this.config.mdbFormGroup.template) } } @@ -160,11 +167,20 @@ const BaseInput = (($) => { return this.$element } - // Find expected form-group + // 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) // note that form-group may be grandparent in the case of an input-group + let fg = this.$element.closest(Selector.FORM_GROUP) if (fg.length === 0 && raiseError) { - $.error(`Failed to find form-group for ${Util.describe(this.$element)}`) + $.error(`Failed to find ${Selector.FORM_GROUP} for ${Util.describe(this.$element)}`) } return fg } @@ -210,7 +226,7 @@ const BaseInput = (($) => { for (let inputSize in FormControlSizeConversions) { if (this.$element.hasClass(inputSize)) { this.$element.removeClass(inputSize) - this.$formGroup.addClass(FormControlSizeConversions[inputSize]) + this.$mdbFormGroup.addClass(FormControlSizeConversions[inputSize]) } } } diff --git a/js/src/baseToggle.js b/js/src/baseToggle.js index 9c8cf93c..597b73b6 100644 --- a/js/src/baseToggle.js +++ b/js/src/baseToggle.js @@ -9,6 +9,9 @@ const BaseToggle = (($) => { * ------------------------------------------------------------------------ */ const Default = { + formGroup: { + required: false + } } const Selector = { @@ -48,12 +51,9 @@ const BaseToggle = (($) => { Util.assert(this.outerElement().hasClass(this.outerClass), `${this.constructor.name}'s ${this.$element} grandparent element should have class .${this.outerClass}.`) } - // ------------------------------------------------------------------------ - // protected - addFocusListener() { // checkboxes didn't appear to bubble to the document, so we'll bind these directly - this.$formGroup.find(Selector.LABEL).hover(() => { + this.$mdbFormGroup.find(Selector.LABEL).hover(() => { this.addFormGroupFocus() }, () => { this.removeFormGroupFocus() diff --git a/js/src/bootstrapMaterialDesign.js b/js/src/bootstrapMaterialDesign.js index 39fe0d22..96ce5857 100644 --- a/js/src/bootstrapMaterialDesign.js +++ b/js/src/bootstrapMaterialDesign.js @@ -47,6 +47,9 @@ const BootstrapMaterialDesign = (($) => { checkbox: { selector: '.checkbox > label > input[type=checkbox]' }, + //checkboxInline: { + // selector: 'label.checkbox-inline > input[type=checkbox]' + //}, switch: { selector: '.switch > label > input[type=checkbox]' }, diff --git a/js/src/file.js b/js/src/file.js index 7a09c886..66a52439 100644 --- a/js/src/file.js +++ b/js/src/file.js @@ -18,7 +18,14 @@ const File = (($) => { const DATA_KEY = `mdb.${NAME}` const JQUERY_NO_CONFLICT = $.fn[NAME] + const Default = { + formGroup: { + required: false + } + } + const ClassName = { + FILE: NAME, IS_FILE: 'is-file' } @@ -34,9 +41,9 @@ const File = (($) => { class File extends BaseInput { constructor(element, config) { - super(element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, config)) + super(element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, Default, config)) - this.$formGroup.addClass(ClassName.IS_FILE) + this.$mdbFormGroup.addClass(ClassName.IS_FILE) } dispose() { @@ -57,12 +64,20 @@ const File = (($) => { // ------------------------------------------------------------------------ // protected + // Demarcation element (e.g. first child of a form-group) + outerElement() { + // label.file > input[type=file] + return this.$element + } + rejectWithoutRequiredStructure() { - // FIXME: implement this once we determine how we want to implement files since BS4 has tried to take a shot at this + // label.file > input[type=file] + Util.assert(this.outerElement().prop('tagName') === 'label', `${this.constructor.name}'s ${Util.describe(this.$element)} parent element ${Util.describe(this.outerElement())} should be