diff --git a/js/src/baseInput.js b/js/src/baseInput.js index 87c64d1a..d149117b 100644 --- a/js/src/baseInput.js +++ b/js/src/baseInput.js @@ -7,9 +7,7 @@ const BaseInput = (($) => { required: false }, mdbFormGroup: { - template: ``, - required: true, // strongly recommended not to override - autoCreate: true // strongly recommended not to override + template: `` }, requiredClasses: [], invalidComponentMatches: [], @@ -30,8 +28,8 @@ const BaseInput = (($) => { } const FormControlSizeConversions = { - 'form-control-lg': 'form-group-lg', - 'form-control-sm': 'form-group-sm' + 'form-control-lg': 'mdb-form-group-lg', + 'form-control-sm': 'mdb-form-group-sm' } /** @@ -65,16 +63,15 @@ const BaseInput = (($) => { // Enforce required classes for a consistent rendering this._rejectWithoutRequiredClasses() - if (this.config.mdbFormGroup.autoCreate) { - // Will create form-group if necessary - this.autoCreateMdbFormGroup() - } - - // different components have different rules, always run this separately - this.$mdbFormGroup = this.findMdbFormGroup(this.config.mdbFormGroup.required) + // Resolve the form-group first, it will be used for mdb-form-group if possible + // note: different components have different rules this.$formGroup = this.findFormGroup(this.config.formGroup.required) - this._convertFormControlSizeVariations() + // Will add mdb-form-group to form-group or create an mdb-form-group + this.$mdbFormGroup = this.resolveMdbFormGroup() + + // Signal to the mdb-form-group that a form-control-* variation is being used + this.resolveMdbFormGroupSizing() this.addFocusListener() this.addChangeListener() @@ -164,12 +161,27 @@ const BaseInput = (($) => { return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '') } - // 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) + // Will add mdb-form-group to form-group or create a mdb-form-group if necessary + resolveMdbFormGroup() { + let mfg = this.findMdbFormGroup(false) + if (mfg === undefined || mfg.length === 0) { + if (this.$formGroup === undefined || this.$formGroup.length === 0) { + // If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label). + // note: it's possible to make this smarter, but I need to see valid cases before adding any complexity. + this.outerElement().wrap(this.config.mdbFormGroup.template) + } else { + // a form-group does exist, add our marker class to it + this.$formGroup.addClass(ClassName.MDB_FORM_GROUP) + + // OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable + // A form-group does exist, so add an mdb-form-group wrapping it's internal contents + //fg.wrapInner(this.config.mdbFormGroup.template) + } + + mfg = this.findMdbFormGroup(true) } + + return mfg } // Demarcation element (e.g. first child of a form-group) @@ -196,6 +208,22 @@ const BaseInput = (($) => { return fg } + // Due to the interconnected nature of labels/inputs/help-blocks, signal the mdb-form-group-* size variation based on + // a found form-control-* size + resolveMdbFormGroupSizing() { + if (!this.config.convertInputSizeVariations) { + return + } + + // Modification - Change text-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants) + for (let inputSize in FormControlSizeConversions) { + if (this.$element.hasClass(inputSize)) { + //this.$element.removeClass(inputSize) + this.$mdbFormGroup.addClass(FormControlSizeConversions[inputSize]) + } + } + } + // ------------------------------------------------------------------------ // private _rejectInvalidComponentMatches() { @@ -228,20 +256,6 @@ const BaseInput = (($) => { } } - _convertFormControlSizeVariations() { - if (!this.config.convertInputSizeVariations) { - return - } - - // Modification - Change text-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants) - for (let inputSize in FormControlSizeConversions) { - if (this.$element.hasClass(inputSize)) { - this.$element.removeClass(inputSize) - this.$mdbFormGroup.addClass(FormControlSizeConversions[inputSize]) - } - } - } - // ------------------------------------------------------------------------ // static diff --git a/js/src/text.js b/js/src/text.js index 9acf6304..8af457d8 100644 --- a/js/src/text.js +++ b/js/src/text.js @@ -60,21 +60,6 @@ const Text = (($) => { // ------------------------------------------------------------------------ // protected - // Find or create a mdb-form-group if necessary - autoCreateMdbFormGroup() { - let mfg = this.findMdbFormGroup(false) - if (mfg === null || mfg.length === 0) { - let fg = this.$formGroup - - if (fg === undefined || fg.length === 0) { - // if a form-group doesn't exist (not recommended), just wrap the element. - this.outerElement().wrap(this.config.mdbFormGroup.template) - } else { - // a form-group does exist, so add an mdb-form-group wrapping it's internal contents - fg.wrapInner(this.config.mdbFormGroup.template) - } - } - } // ------------------------------------------------------------------------ // private