1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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() {
this.$element.after(this.config.template)
}
// 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
|
