mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 03:24:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

migrated last part of instantiation to es6 class

Browse Source
This commit is contained in:
Kevin Ross 2015-12-02 12:12:45 -06:00
parent 23a7a4d77a
commit ca9406d97a
3 changed files with 121 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/autofill.js
View File

@ -20,7 +20,8 @@ const Autofill = (($) => {
*/ */
class Autofill { class Autofill {
constructor(config) { constructor(element, config) {
this.element = element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
this._watchLoading() this._watchLoading()
@ -29,6 +30,7 @@ const Autofill = (($) => {
dispose() { dispose() {
$.removeData(this.element, DATA_KEY) $.removeData(this.element, DATA_KEY)
this.element = null
this.config = null this.config = null
} }

72
js/src/bootstrapMaterialDesign.js vendored
View File

@ -24,23 +24,23 @@ const BootstrapMaterialDesign = (($) => {
/** /**
* *
* Default configuration for each component. * Default macro configuration for each component (primarily selectors).
* - selector: may be a string or an array. Any array will be joined with a comma to generate the selector * - selector: may be a string or an array. Any array will be joined with a comma to generate the selector
* - filter: selector to individually filter elements sent to components e.g. ripple defaults `:not(.ripple-none)` * - disable any component by defining it as false with an override. e.g. $.bootstrapMaterialDesign({ autofill: false })
* - disable any component by defining it as false with an override. e.g. $.bootstrapMaterialDesign({ input: false }) *
* @see each individual component for more configuration settings.
*/ */
const Default = { const Default = {
ripples: { ripples: {
selector: [ selector: [
'.btn:not(.btn-link)', '.btn:not(.btn-link):not(.ripple-none)',
'.card-image', '.card-image:not(.ripple-none)',
'.navbar a', '.navbar a:not(.ripple-none)',
'.dropdown-menu a', '.dropdown-menu a:not(.ripple-none)',
'.nav-tabs a', '.nav-tabs a:not(.ripple-none)',
'.pagination li:not(.active):not(.disabled) a', '.pagination li:not(.active):not(.disabled) a:not(.ripple-none)',
'.ripple' // generic marker class to add ripple to elements '.ripple' // generic marker class to add ripple to elements
], ]
filter: ':not(.ripple-none)'
}, },
input: { input: {
selector: [ selector: [
@ -61,8 +61,20 @@ const BootstrapMaterialDesign = (($) => {
fileInput: { fileInput: {
selector: 'input[type=file]' selector: 'input[type=file]'
}, },
autofill: true, autofill: {
arrive: true selector: 'body'
},
arrive: true,
// create an ordered component list for instantiation
instantiation: [
'ripples',
'input',
'checkbox',
'togglebutton',
'radio',
'fileInput',
'autofill'
]
} }
/** /**
@ -75,8 +87,30 @@ const BootstrapMaterialDesign = (($) => {
constructor(element, config) { constructor(element, config) {
this.element = element this.element = element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
let $document = $(document)
// create an ordered component list for instantiation for (let component in this.config.instantiation) {
// the component's config fragment is passed in directly, allowing users to override
let componentConfig = this.config[component]
// check to make sure component config is enabled (not `false`)
if (componentConfig) {
// assemble the selector as it may be an array
let selector = this._resolveSelector(componentConfig)
// instantiate component on selector elements with config
$(selector)[component](componentConfig)
// add to arrive if present and enabled
if (document.arrive && this.config.arrive) {
$document.arrive(selector, (element) => { // eslint-disable-line no-loop-func
$(element)[component](componentConfig)
})
}
}
}
} }
dispose() { dispose() {
@ -88,9 +122,13 @@ const BootstrapMaterialDesign = (($) => {
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// private // private
_bar(element) { _resolveSelector(componentConfig) {
let x = 1 let selector = componentConfig['selector']
return x if (Array.isArray(selector)) {
selector = selector.join(', ')
}
return selector
} }
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------

126
js/src/old/material.js
View File

@ -232,69 +232,69 @@
// }); // });
//}, //},
"init": () => { "init": () => {
var $document = $(document); // var $document = $(document);
//
if ($.fn.ripples && this.options.ripples) { // if ($.fn.ripples && this.options.ripples) {
//this.ripples(); // //this.ripples();
$(this.options.withRipples).ripples() // $(this.options.withRipples).ripples()
} // }
if (this.options.input) { // if (this.options.input) {
this.input(); // this.input();
this.attachInputEventHandlers(); // this.attachInputEventHandlers();
//
$(this.options.inputElements).input() // $(this.options.inputElements).input()
} // }
if (this.options.checkbox) { // if (this.options.checkbox) {
//this.checkbox(); // //this.checkbox();
$(this.options.checkboxElements).checkbox() // $(this.options.checkboxElements).checkbox()
} // }
if (this.options.togglebutton) { // if (this.options.togglebutton) {
//this.togglebutton(); // //this.togglebutton();
$(this.options.togglebuttonElements).togglebutton() // $(this.options.togglebuttonElements).togglebutton()
} // }
if (this.options.radio) { // if (this.options.radio) {
//this.radio(); // //this.radio();
$(this.options.radioElements).radio() // $(this.options.radioElements).radio()
} // }
if (this.options.autofill) { // if (this.options.autofill) {
//this.autofill(); // //this.autofill();
//this.attachAutofillEventHandlers(); // //this.attachAutofillEventHandlers();
new Autofill() // FIXME: if this is the best way to invoke, perhaps it shouldn't be a jquery fn as well? // $('body').autofill();
} // }
//
$(this.options.fileInputElements).fileInput() // $(this.options.fileInputElements).fileInput()
//
if (document.arrive && this.options.arrive) { // if (document.arrive && this.options.arrive) {
if ($.fn.ripples && this.options.ripples) { // if ($.fn.ripples && this.options.ripples) {
$document.arrive(this.options.withRipples, () => { // $document.arrive(this.options.withRipples, () => {
$(this).ripples() // $(this).ripples()
}); // });
} // }
if (this.options.input) { // if (this.options.input) {
$document.arrive(this.options.inputElements, () => { // $document.arrive(this.options.inputElements, () => {
$(this).input() // $(this).input()
}); // });
} // }
if (this.options.checkbox) { // if (this.options.checkbox) {
$document.arrive(this.options.checkboxElements, () => { // $document.arrive(this.options.checkboxElements, () => {
$(this).checkbox(); // $(this).checkbox();
}); // });
} // }
if (this.options.radio) { // if (this.options.radio) {
$document.arrive(this.options.radioElements, () => { // $document.arrive(this.options.radioElements, () => {
$(this).radio(); // $(this).radio();
}); // });
} // }
if (this.options.togglebutton) { // if (this.options.togglebutton) {
$document.arrive(this.options.togglebuttonElements, () => { // $document.arrive(this.options.togglebuttonElements, () => {
$(this).togglebutton(); // $(this).togglebutton();
}); // });
} // }
//
$document.arrive(this.options.fileInputElements, () => { // $document.arrive(this.options.fileInputElements, () => {
$(this).fileInput(); // $(this).fileInput();
}); // });
} // }
} }
}; };