summaryrefslogtreecommitdiff
path: root/minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js
diff options
context:
space:
mode:
authorschneefux <schneefux+commit@schneefux.xyz>2017-03-25 13:13:57 +0100
committerschneefux <schneefux+commit@schneefux.xyz>2017-03-25 13:13:57 +0100
commitd25ff2bddd44b9dac1ceb248424109d1782dd211 (patch)
tree34fcfd824a1a72e7b4d431b688adcea532b62180 /minionlivesmatter/templates/assets/bootstrap-material-design/js/baseInput.js
parenta2cbdd1b88ac723e5e441c0a3c22636f0a8c4dfd (diff)
downloadmeta-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.js321
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