diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-25 13:13:57 +0100 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-25 13:13:57 +0100 |
| commit | d25ff2bddd44b9dac1ceb248424109d1782dd211 (patch) | |
| tree | 34fcfd824a1a72e7b4d431b688adcea532b62180 /minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js | |
| parent | a2cbdd1b88ac723e5e441c0a3c22636f0a8c4dfd (diff) | |
| download | meta-d25ff2bddd44b9dac1ceb248424109d1782dd211.tar.gz meta-d25ff2bddd44b9dac1ceb248424109d1782dd211.zip | |
add minionlivesmatter as submodule
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js | 321 |
1 files changed, 0 insertions, 321 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js b/minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js deleted file mode 100644 index 5396ccb..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js +++ /dev/null @@ -1,321 +0,0 @@ -import Base from './base' -import Util from './util' - -const BaseInput = (($) => { - - const ClassName = { - FORM_GROUP: 'form-group', - BMD_FORM_GROUP: 'bmd-form-group', - BMD_LABEL: 'bmd-label', - BMD_LABEL_STATIC: 'bmd-label-static', - BMD_LABEL_PLACEHOLDER: 'bmd-label-placeholder', - BMD_LABEL_FLOATING: 'bmd-label-floating', - HAS_DANGER: 'has-danger', - IS_FILLED: 'is-filled', - IS_FOCUSED: 'is-focused', - INPUT_GROUP: 'input-group' - } - - const Selector = { - FORM_GROUP: `.${ClassName.FORM_GROUP}`, - BMD_FORM_GROUP: `.${ClassName.BMD_FORM_GROUP}`, - BMD_LABEL_WILDCARD: `label[class^='${ClassName.BMD_LABEL}'], label[class*=' ${ClassName.BMD_LABEL}']` // match any label variant if specified - } - - const Default = { - validate: false, - formGroup: { - required: false - }, - bmdFormGroup: { - template: `<span class='${ClassName.BMD_FORM_GROUP}'></span>`, - create: true, // create a wrapper if form-group not found - required: true // not recommended to turn this off, only used for inline components - }, - 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, first child. Deeper would find toggle labels so don't do that. - ], - className: ClassName.BMD_LABEL_STATIC - }, - requiredClasses: [], - invalidComponentMatches: [], - convertInputSizeVariations: true - } - - const FormControlSizeMarkers = { - 'form-control-lg': 'bmd-form-group-lg', - 'form-control-sm': 'bmd-form-group-sm' - } - - /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ - */ - class BaseInput extends Base { - - /** - * - * @param element - * @param config - * @param properties - anything that needs to be set as this[key] = value. Works around the need to call `super` before using `this` - */ - constructor($element, config, properties = {}) { - super($element, $.extend(true, {}, Default, config), properties) - - // Enforce no overlap between components to prevent side effects - this._rejectInvalidComponentMatches() - - // Enforce expected structure (if any) - this.rejectWithoutRequiredStructure() - - // Enforce required classes for a consistent rendering - this._rejectWithoutRequiredClasses() - - // Resolve the form-group first, it will be used for bmd-form-group if possible - // note: different components have different rules - this.$formGroup = this.findFormGroup(this.config.formGroup.required) - - // Will add bmd-form-group to form-group or create an bmd-form-group - // Performance Note: for those forms that are really performance driven, create the markup with the .bmd-form-group to avoid - // rendering changes once added. - this.$bmdFormGroup = this.resolveMdbFormGroup() - - // Resolve and mark the bmdLabel if necessary as defined by the config - this.$bmdLabel = this.resolveMdbLabel() - - // Signal to the bmd-form-group that a form-control-* variation is being used - this.resolveMdbFormGroupSizing() - - this.addFocusListener() - this.addChangeListener() - - if(this.$element.val() != ''){ - this.addIsFilled() - } - } - - dispose(dataKey) { - super.dispose(dataKey) - this.$bmdFormGroup = null - this.$formGroup = null - } - - // ------------------------------------------------------------------------ - // protected - - rejectWithoutRequiredStructure() { - // implement - } - - addFocusListener() { - this.$element - .on('focus', () => { - this.addFormGroupFocus() - }) - .on('blur', () => { - this.removeFormGroupFocus() - }) - } - - addChangeListener() { - this.$element - .on('keydown paste', (event) => { - if (Util.isChar(event)) { - this.addIsFilled() - } - }) - .on('keyup change', () => { - - // make sure empty is added back when there is a programmatic value change. - // NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change') - if (this.isEmpty()) { - this.removeIsFilled() - } else { - this.addIsFilled() - } - - if (this.config.validate) { - // Validation events do not bubble, so they must be attached directly to the text: http://jsfiddle.net/PEpRM/1/ - // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter - // the form-group on change. - // - // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code. - // BUT, I've left it here for backwards compatibility. - let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity()) - if (isValid) { - this.removeHasDanger() - } else { - this.addHasDanger() - } - } - }) - } - - addHasDanger() { - this.$bmdFormGroup.addClass(ClassName.HAS_DANGER) - } - - removeHasDanger() { - this.$bmdFormGroup.removeClass(ClassName.HAS_DANGER) - } - - isEmpty() { - return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '') - } - - // Will add bmd-form-group to form-group or create a bmd-form-group if necessary - resolveMdbFormGroup() { - let mfg = this.findMdbFormGroup(false) - if (mfg === undefined || mfg.length === 0) { - if (this.config.bmdFormGroup.create && (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 may be an input-group, wrap that instead - if(this.outerElement().parent().hasClass(ClassName.INPUT_GROUP)){ - this.outerElement().parent().wrap(this.config.bmdFormGroup.template) - } - else{ - this.outerElement().wrap(this.config.bmdFormGroup.template) - } - } else { - // a form-group does exist, add our marker class to it - this.$formGroup.addClass(ClassName.BMD_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 bmd-form-group wrapping it's internal contents - //fg.wrapInner(this.config.bmdFormGroup.template) - } - - mfg = this.findMdbFormGroup(this.config.bmdFormGroup.required) - } - - return mfg - } - - // Demarcation element (e.g. first child of a form-group) - // Subclasses such as file inputs may have different structures - outerElement() { - return this.$element - } - - // Will add bmd-label to bmd-form-group if not already specified - resolveMdbLabel() { - - let label = this.$bmdFormGroup.find(Selector.BMD_LABEL_WILDCARD) - if (label === undefined || label.length === 0) { - // we need to find it based on the configured selectors - label = this.findMdbLabel(this.config.label.required) - - if (label === undefined || label.length === 0) { - // no label found, and finder did not require one - } else { - // a candidate label was found, add the configured default class name - label.addClass(this.config.label.className) - } - } - - return label - } - - // Find bmd-label variant based on the config selectors - findMdbLabel(raiseError = true) { - let label = null - - // use the specified selector order - for (let selector of this.config.label.selectors) { - if ($.isFunction(selector)) { - label = selector(this) - } else { - label = this.$bmdFormGroup.find(selector) - } - - if (label !== undefined && label.length > 0) { - break - } - } - - if (label.length === 0 && raiseError) { - $.error(`Failed to find ${Selector.BMD_LABEL_WILDCARD} within form-group for ${Util.describe(this.$element)}`) - } - return label - } - - // Find bmd-form-group - findFormGroup(raiseError = true) { - let fg = this.$element.closest(Selector.FORM_GROUP) - if (fg.length === 0 && raiseError) { - $.error(`Failed to find ${Selector.FORM_GROUP} for ${Util.describe(this.$element)}`) - } - return fg - } - - // Due to the interconnected nature of labels/inputs/help-blocks, signal the bmd-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 FormControlSizeMarkers) { - if (this.$element.hasClass(inputSize)) { - //this.$element.removeClass(inputSize) - this.$bmdFormGroup.addClass(FormControlSizeMarkers[inputSize]) - } - } - } - - // ------------------------------------------------------------------------ - // private - _rejectInvalidComponentMatches() { - for (let otherComponent of this.config.invalidComponentMatches) { - otherComponent.rejectMatch(this.constructor.name, this.$element) - } - } - - _rejectWithoutRequiredClasses() { - for (let requiredClass of this.config.requiredClasses) { - - let found = false - // allow one of several classes to be passed in x||y - if (requiredClass.indexOf('||') !== -1) { - let oneOf = requiredClass.split('||') - for (let requiredClass of oneOf) { - if (this.$element.hasClass(requiredClass)) { - found = true - break - } - } - } else if (this.$element.hasClass(requiredClass)) { - found = true - } - - // error if not found - if (!found) { - $.error(`${this.constructor.name} element: ${Util.describe(this.$element)} requires class: ${requiredClass}`) - } - } - } - - // ------------------------------------------------------------------------ - // static - - } - - return BaseInput - -})(jQuery) - -export default BaseInput |
