1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import settings from '../../globals/js/settings';
|
9 | import mixin from '../../globals/js/misc/mixin';
|
10 | import createComponent from '../../globals/js/mixins/create-component';
|
11 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
12 | import handles from '../../globals/js/mixins/handles';
|
13 | import on from '../../globals/js/misc/on';
|
14 |
|
15 | const stateChangeTypes = {
|
16 | true: 'true',
|
17 | false: 'false',
|
18 | mixed: 'mixed',
|
19 | };
|
20 |
|
21 | class Checkbox extends mixin(createComponent, initComponentBySearch, handles) {
|
22 | |
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | constructor(element, options) {
|
31 | super(element, options);
|
32 | this.manage(
|
33 | on(this.element, 'click', event => {
|
34 | this._handleClick(event);
|
35 | })
|
36 | );
|
37 | this.manage(
|
38 | on(this.element, 'focus', event => {
|
39 | this._handleFocus(event);
|
40 | })
|
41 | );
|
42 | this.manage(
|
43 | on(this.element, 'blur', event => {
|
44 | this._handleBlur(event);
|
45 | })
|
46 | );
|
47 |
|
48 | this._indeterminateCheckbox();
|
49 | this._initCheckbox();
|
50 | }
|
51 |
|
52 | _handleClick() {
|
53 | if (this.element.checked === true) {
|
54 | this.element.setAttribute('checked', '');
|
55 | this.element.setAttribute('aria-checked', 'true');
|
56 | this.element.checked = true;
|
57 |
|
58 |
|
59 | if (this.element.parentElement.classList.contains(this.options.classLabel)) {
|
60 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'true');
|
61 | }
|
62 | } else if (this.element.checked === false) {
|
63 | this.element.removeAttribute('checked');
|
64 | this.element.setAttribute('aria-checked', 'false');
|
65 | this.element.checked = false;
|
66 |
|
67 |
|
68 | if (this.element.parentElement.classList.contains(this.options.classLabel)) {
|
69 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'false');
|
70 | }
|
71 | }
|
72 | }
|
73 |
|
74 | _handleFocus() {
|
75 | if (this.element.parentElement.classList.contains(this.options.classLabel)) {
|
76 | this.element.parentElement.classList.add(this.options.classLabelFocused);
|
77 | }
|
78 | }
|
79 |
|
80 | _handleBlur() {
|
81 | if (this.element.parentElement.classList.contains(this.options.classLabel)) {
|
82 | this.element.parentElement.classList.remove(this.options.classLabelFocused);
|
83 | }
|
84 | }
|
85 |
|
86 | |
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | setState(state) {
|
93 | if (state === undefined || stateChangeTypes[state] === undefined) {
|
94 | throw new TypeError('setState expects a value of true, false or mixed.');
|
95 | }
|
96 |
|
97 | this.element.setAttribute('aria-checked', state);
|
98 | this.element.indeterminate = state === stateChangeTypes.mixed;
|
99 | this.element.checked = state === stateChangeTypes.true;
|
100 |
|
101 | const container = this.element.closest(this.options.selectorContainedCheckboxState);
|
102 | if (container) {
|
103 | container.setAttribute(this.options.attribContainedCheckboxState, state);
|
104 | }
|
105 | }
|
106 |
|
107 | setDisabled(value) {
|
108 | if (value === undefined) {
|
109 | throw new TypeError('setDisabled expects a boolean value of true or false');
|
110 | }
|
111 | if (value === true) {
|
112 | this.element.setAttribute('disabled', true);
|
113 | } else if (value === false) {
|
114 | this.element.removeAttribute('disabled');
|
115 | }
|
116 | const container = this.element.closest(this.options.selectorContainedCheckboxDisabled);
|
117 | if (container) {
|
118 | container.setAttribute(this.options.attribContainedCheckboxDisabled, value);
|
119 | }
|
120 | }
|
121 |
|
122 | _indeterminateCheckbox() {
|
123 | if (this.element.getAttribute('aria-checked') === 'mixed') {
|
124 | this.element.indeterminate = true;
|
125 | }
|
126 | if (this.element.indeterminate === true) {
|
127 | this.element.setAttribute('aria-checked', 'mixed');
|
128 | }
|
129 | if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.indeterminate === true) {
|
130 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'mixed');
|
131 | }
|
132 | }
|
133 |
|
134 | _initCheckbox() {
|
135 | if (this.element.checked === true) {
|
136 | this.element.setAttribute('aria-checked', 'true');
|
137 | }
|
138 | if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.checked) {
|
139 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxState, 'true');
|
140 | }
|
141 | if (this.element.parentElement.classList.contains(this.options.classLabel)) {
|
142 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled, 'false');
|
143 | }
|
144 | if (this.element.parentElement.classList.contains(this.options.classLabel) && this.element.disabled) {
|
145 | this.element.parentElement.setAttribute(this.options.attribContainedCheckboxDisabled, 'true');
|
146 | }
|
147 | }
|
148 |
|
149 | |
150 |
|
151 |
|
152 |
|
153 |
|
154 | static components = new WeakMap();
|
155 |
|
156 | |
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 | static get options() {
|
172 | const { prefix } = settings;
|
173 | return {
|
174 | selectorInit: `.${prefix}--checkbox`,
|
175 | selectorContainedCheckboxState: '[data-contained-checkbox-state]',
|
176 | selectorContainedCheckboxDisabled: '[data-contained-checkbox-disabled]',
|
177 | classLabel: `${prefix}--checkbox-label`,
|
178 | classLabelFocused: `${prefix}--checkbox-label__focus`,
|
179 | attribContainedCheckboxState: 'data-contained-checkbox-state',
|
180 | attribContainedCheckboxDisabled: 'data-contained-checkbox-disabled',
|
181 | };
|
182 | }
|
183 |
|
184 | static stateChangeTypes = stateChangeTypes;
|
185 | }
|
186 |
|
187 | export default Checkbox;
|