mdb-ui-kit/js/baseSelection.js
FezVrasta 750ba9b897 The big leap 🚀💨
2017-08-11 16:59:31 +02:00

112 lines
3.5 KiB
JavaScript

import BaseInput from "./baseInput";
import Util from "./util";
const BaseSelection = ($ => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const Default = {
label: {
required: false
// Prioritized find order for resolving the label to be used as an bmd-label if not specified in the markup
// - a function(thisComponent); or
// - a string selector used like $bmdFormGroup.find(selector)
//
// Note this only runs if $bmdFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup)
//
//selectors: [
// `.form-control-label`, // in the case of horizontal or inline forms, this will be marked
// `> label` // usual case for text inputs
//]
}
};
const Selector = {
LABEL: "label"
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class BaseSelection extends BaseInput {
constructor($element, config, properties) {
// properties = {inputType: checkbox, outerClass: checkbox-inline}
// '.checkbox|switch|radio > label > input[type=checkbox|radio]'
// '.${this.outerClass} > label > input[type=${this.inputType}]'
super($element, $.extend(true, {}, Default, config), properties);
this.decorateMarkup();
}
// ------------------------------------------------------------------------
// protected
decorateMarkup() {
const $decorator = $(this.config.template);
this.$element.after($decorator);
// initialize ripples after decorator has been inserted into DOM
if (this.config.ripples !== false) {
$decorator.bmdRipples();
}
}
// Demarcation element (e.g. first child of a form-group)
outerElement() {
// .checkbox|switch|radio > label > input[type=checkbox|radio]
// label.checkbox-inline > input[type=checkbox|radio]
// .${this.outerClass} > label > input[type=${this.inputType}]
return this.$element.parent().closest(`.${this.outerClass}`);
}
rejectWithoutRequiredStructure() {
// '.checkbox|switch|radio > label > input[type=checkbox|radio]'
// '.${this.outerClass} > label > input[type=${this.inputType}]'
Util.assert(
this.$element,
!this.$element.parent().prop("tagName") === "label",
`${this.constructor.name}'s ${Util.describe(
this.$element
)} parent element should be <label>.`
);
Util.assert(
this.$element,
!this.outerElement().hasClass(this.outerClass),
`${this.constructor.name}'s ${Util.describe(
this.$element
)} outer element should have class ${this.outerClass}.`
);
}
addFocusListener() {
// checkboxes didn't appear to bubble to the document, so we'll bind these directly
this.$element.closest(Selector.LABEL).hover(
() => {
this.addFormGroupFocus();
},
() => {
this.removeFormGroupFocus();
}
);
}
addChangeListener() {
this.$element.change(() => {
this.$element.blur();
});
}
// ------------------------------------------------------------------------
// private
}
return BaseSelection;
})(jQuery);
export default BaseSelection;