1 | function _typeof(obj) {
|
2 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
3 | _typeof = function _typeof(obj) {
|
4 | return typeof obj;
|
5 | };
|
6 | } else {
|
7 | _typeof = function _typeof(obj) {
|
8 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
9 | };
|
10 | }
|
11 |
|
12 | return _typeof(obj);
|
13 | }
|
14 |
|
15 | function _classCallCheck(instance, Constructor) {
|
16 | if (!(instance instanceof Constructor)) {
|
17 | throw new TypeError("Cannot call a class as a function");
|
18 | }
|
19 | }
|
20 |
|
21 | function _defineProperties(target, props) {
|
22 | for (var i = 0; i < props.length; i++) {
|
23 | var descriptor = props[i];
|
24 | descriptor.enumerable = descriptor.enumerable || false;
|
25 | descriptor.configurable = true;
|
26 | if ("value" in descriptor) descriptor.writable = true;
|
27 | Object.defineProperty(target, descriptor.key, descriptor);
|
28 | }
|
29 | }
|
30 |
|
31 | function _createClass(Constructor, protoProps, staticProps) {
|
32 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
33 | if (staticProps) _defineProperties(Constructor, staticProps);
|
34 | return Constructor;
|
35 | }
|
36 |
|
37 | function _possibleConstructorReturn(self, call) {
|
38 | if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
39 | return call;
|
40 | }
|
41 |
|
42 | return _assertThisInitialized(self);
|
43 | }
|
44 |
|
45 | function _assertThisInitialized(self) {
|
46 | if (self === void 0) {
|
47 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
48 | }
|
49 |
|
50 | return self;
|
51 | }
|
52 |
|
53 | function _getPrototypeOf(o) {
|
54 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
55 | return o.__proto__ || Object.getPrototypeOf(o);
|
56 | };
|
57 | return _getPrototypeOf(o);
|
58 | }
|
59 |
|
60 | function _inherits(subClass, superClass) {
|
61 | if (typeof superClass !== "function" && superClass !== null) {
|
62 | throw new TypeError("Super expression must either be null or a function");
|
63 | }
|
64 |
|
65 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
66 | constructor: {
|
67 | value: subClass,
|
68 | writable: true,
|
69 | configurable: true
|
70 | }
|
71 | });
|
72 | if (superClass) _setPrototypeOf(subClass, superClass);
|
73 | }
|
74 |
|
75 | function _setPrototypeOf(o, p) {
|
76 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
77 | o.__proto__ = p;
|
78 | return o;
|
79 | };
|
80 |
|
81 | return _setPrototypeOf(o, p);
|
82 | }
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | import settings from '../../globals/js/settings';
|
92 | import mixin from '../../globals/js/misc/mixin';
|
93 | import createComponent from '../../globals/js/mixins/create-component';
|
94 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
95 | import handles from '../../globals/js/mixins/handles';
|
96 | import eventMatches from '../../globals/js/misc/event-matches';
|
97 | import on from '../../globals/js/misc/on';
|
98 |
|
99 | var toArray = function toArray(arrayLike) {
|
100 | return Array.prototype.slice.call(arrayLike);
|
101 | };
|
102 |
|
103 | var StructuredList =
|
104 |
|
105 | function (_mixin) {
|
106 | _inherits(StructuredList, _mixin);
|
107 | |
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 | function StructuredList(element, options) {
|
120 | var _this;
|
121 |
|
122 | _classCallCheck(this, StructuredList);
|
123 |
|
124 | _this = _possibleConstructorReturn(this, _getPrototypeOf(StructuredList).call(this, element, options));
|
125 |
|
126 | _this.manage(on(_this.element, 'keydown', function (evt) {
|
127 | if (evt.which === 37 || evt.which === 38 || evt.which === 39 || evt.which === 40) {
|
128 | _this._handleKeydownArrow(evt);
|
129 | }
|
130 |
|
131 | if (evt.which === 13 || evt.which === 32) {
|
132 | _this._handleKeydownChecked(evt);
|
133 | }
|
134 | }));
|
135 |
|
136 | _this.manage(on(_this.element, 'click', function (evt) {
|
137 | _this._handleClick(evt);
|
138 | }));
|
139 |
|
140 | return _this;
|
141 | }
|
142 |
|
143 | _createClass(StructuredList, [{
|
144 | key: "_direction",
|
145 | value: function _direction(evt) {
|
146 | return {
|
147 | 37: -1,
|
148 |
|
149 | 38: -1,
|
150 |
|
151 | 39: 1,
|
152 |
|
153 | 40: 1
|
154 |
|
155 | }[evt.which];
|
156 | }
|
157 | }, {
|
158 | key: "_nextIndex",
|
159 | value: function _nextIndex(array, arrayItem, direction) {
|
160 | return array.indexOf(arrayItem) + direction;
|
161 | }
|
162 | }, {
|
163 | key: "_getInput",
|
164 | value: function _getInput(index) {
|
165 | var rows = toArray(this.element.querySelectorAll(this.options.selectorRow));
|
166 | return this.element.ownerDocument.querySelector(this.options.selectorListInput(rows[index].getAttribute('for')));
|
167 | }
|
168 | }, {
|
169 | key: "_handleInputChecked",
|
170 | value: function _handleInputChecked(index) {
|
171 | var rows = this.element.querySelectorAll(this.options.selectorRow);
|
172 | var input = this.getInput(index) || rows[index].querySelector('input');
|
173 | input.checked = true;
|
174 | }
|
175 | }, {
|
176 | key: "_handleClick",
|
177 | value: function _handleClick(evt) {
|
178 | var _this2 = this;
|
179 |
|
180 | var selectedRow = eventMatches(evt, this.options.selectorRow);
|
181 | toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
|
182 | return row.classList.remove(_this2.options.classActive);
|
183 | });
|
184 |
|
185 | if (selectedRow) {
|
186 | selectedRow.classList.add(this.options.classActive);
|
187 | }
|
188 | }
|
189 |
|
190 | }, {
|
191 | key: "_handleKeydownChecked",
|
192 | value: function _handleKeydownChecked(evt) {
|
193 | var _this3 = this;
|
194 |
|
195 | evt.preventDefault();
|
196 |
|
197 | var selectedRow = eventMatches(evt, this.options.selectorRow);
|
198 | toArray(this.element.querySelectorAll(this.options.selectorRow)).forEach(function (row) {
|
199 | return row.classList.remove(_this3.options.classActive);
|
200 | });
|
201 |
|
202 | if (selectedRow) {
|
203 | selectedRow.classList.add(this.options.classActive);
|
204 | var input = selectedRow.querySelector(this.options.selectorListInput(selectedRow.getAttribute('for'))) || selectedRow.querySelector('input');
|
205 | input.checked = true;
|
206 | }
|
207 | }
|
208 |
|
209 | }, {
|
210 | key: "_handleKeydownArrow",
|
211 | value: function _handleKeydownArrow(evt) {
|
212 | var _this4 = this;
|
213 |
|
214 | evt.preventDefault();
|
215 |
|
216 | var selectedRow = eventMatches(evt, this.options.selectorRow);
|
217 |
|
218 | var direction = this._direction(evt);
|
219 |
|
220 | if (direction && selectedRow !== undefined) {
|
221 | var rows = toArray(this.element.querySelectorAll(this.options.selectorRow));
|
222 | rows.forEach(function (row) {
|
223 | return row.classList.remove(_this4.options.classActive);
|
224 | });
|
225 | var firstIndex = 0;
|
226 |
|
227 | var nextIndex = this._nextIndex(rows, selectedRow, direction);
|
228 |
|
229 | var lastIndex = rows.length - 1;
|
230 |
|
231 | var getSelectedIndex = function getSelectedIndex() {
|
232 | switch (nextIndex) {
|
233 | case -1:
|
234 | return lastIndex;
|
235 |
|
236 | case rows.length:
|
237 | return firstIndex;
|
238 |
|
239 | default:
|
240 | return nextIndex;
|
241 | }
|
242 | };
|
243 |
|
244 | var selectedIndex = getSelectedIndex();
|
245 | rows[selectedIndex].classList.add(this.options.classActive);
|
246 | rows[selectedIndex].focus();
|
247 |
|
248 | this._handleInputChecked(selectedIndex);
|
249 | }
|
250 | }
|
251 | }], [{
|
252 | key: "options",
|
253 | get: function get() {
|
254 | var prefix = settings.prefix;
|
255 | return {
|
256 | selectorInit: '[data-structured-list]',
|
257 | selectorRow: "[data-structured-list] .".concat(prefix, "--structured-list-tbody > label.").concat(prefix, "--structured-list-row"),
|
258 | selectorListInput: function selectorListInput(id) {
|
259 | return "#".concat(id, ".").concat(prefix, "--structured-list-input");
|
260 | },
|
261 | classActive: "".concat(prefix, "--structured-list-row--selected")
|
262 | };
|
263 | }
|
264 | }]);
|
265 |
|
266 | StructuredList.components = new WeakMap();
|
267 | return StructuredList;
|
268 | }(mixin(createComponent, initComponentBySearch, handles));
|
269 |
|
270 | export default StructuredList; |
\ | No newline at end of file |