mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
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.
This commit is contained in:
Kevin Ross
parent
108da48a0b
commit
f7f064dff4
|
|
@ -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(`<div class='form-group'></div>`)
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
let app = new Application()
|
||||
app.displayTypographyProperties()
|
||||
app.initializeClipboard()
|
||||
app.fixMissingFormGroups()
|
||||
// $.bootstrapMaterialDesign()
|
||||
$('body').bootstrapMaterialDesign()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ const BaseInput = (($) => {
|
|||
|
||||
const Default = {
|
||||
formGroup: {
|
||||
template: `<div class='form-group'></div>`,
|
||||
required: true
|
||||
},
|
||||
mdbFormGroup: {
|
||||
template: `<div class='mdb-form-group'></div>`,
|
||||
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])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
3
js/src/bootstrapMaterialDesign.js
vendored
3
js/src/bootstrapMaterialDesign.js
vendored
|
|
@ -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]'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 <label>.`)
|
||||
Util.assert(this.outerElement().hasClass(ClassName.FILE), `${this.constructor.name}'s ${Util.describe(this.$element)} parent element ${Util.describe(this.outerElement())} should have class .${ClassName.FILE}.`)
|
||||
}
|
||||
|
||||
addFocusListener() {
|
||||
this.$formGroup
|
||||
this.$mdbFormGroup
|
||||
.on('focus', () => {
|
||||
this.addFormGroupFocus()
|
||||
})
|
||||
|
|
@ -84,7 +99,7 @@ const File = (($) => {
|
|||
} else {
|
||||
this.addIsEmpty()
|
||||
}
|
||||
this.$formGroup.find(Selector.FILENAMES).val(value)
|
||||
this.$mdbFormGroup.find(Selector.FILENAMES).val(value)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ const Text = (($) => {
|
|||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const Default = {
|
||||
formGroup: {
|
||||
required: false
|
||||
},
|
||||
template: `<span class='text-input-decorator'></span>`,
|
||||
requiredClasses: ['form-control']
|
||||
}
|
||||
|
|
@ -39,7 +42,7 @@ const Text = (($) => {
|
|||
}
|
||||
|
||||
// Add marker div the end of the form-group
|
||||
this.$formGroup.append(this.config.template)
|
||||
this.$mdbFormGroup.append(this.config.template)
|
||||
}
|
||||
|
||||
dispose(dataKey = DATA_KEY) {
|
||||
|
|
@ -59,6 +62,21 @@ 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user