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 _toConsumableArray(arr) {
|
16 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
17 | }
|
18 |
|
19 | function _nonIterableSpread() {
|
20 | throw new TypeError("Invalid attempt to spread non-iterable instance");
|
21 | }
|
22 |
|
23 | function _iterableToArray(iter) {
|
24 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
25 | }
|
26 |
|
27 | function _arrayWithoutHoles(arr) {
|
28 | if (Array.isArray(arr)) {
|
29 | for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
|
30 | arr2[i] = arr[i];
|
31 | }
|
32 |
|
33 | return arr2;
|
34 | }
|
35 | }
|
36 |
|
37 | function _classCallCheck(instance, Constructor) {
|
38 | if (!(instance instanceof Constructor)) {
|
39 | throw new TypeError("Cannot call a class as a function");
|
40 | }
|
41 | }
|
42 |
|
43 | function _defineProperties(target, props) {
|
44 | for (var i = 0; i < props.length; i++) {
|
45 | var descriptor = props[i];
|
46 | descriptor.enumerable = descriptor.enumerable || false;
|
47 | descriptor.configurable = true;
|
48 | if ("value" in descriptor) descriptor.writable = true;
|
49 | Object.defineProperty(target, descriptor.key, descriptor);
|
50 | }
|
51 | }
|
52 |
|
53 | function _createClass(Constructor, protoProps, staticProps) {
|
54 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
55 | if (staticProps) _defineProperties(Constructor, staticProps);
|
56 | return Constructor;
|
57 | }
|
58 |
|
59 | function _possibleConstructorReturn(self, call) {
|
60 | if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
61 | return call;
|
62 | }
|
63 |
|
64 | return _assertThisInitialized(self);
|
65 | }
|
66 |
|
67 | function _assertThisInitialized(self) {
|
68 | if (self === void 0) {
|
69 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
70 | }
|
71 |
|
72 | return self;
|
73 | }
|
74 |
|
75 | function _getPrototypeOf(o) {
|
76 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
77 | return o.__proto__ || Object.getPrototypeOf(o);
|
78 | };
|
79 | return _getPrototypeOf(o);
|
80 | }
|
81 |
|
82 | function _inherits(subClass, superClass) {
|
83 | if (typeof superClass !== "function" && superClass !== null) {
|
84 | throw new TypeError("Super expression must either be null or a function");
|
85 | }
|
86 |
|
87 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
88 | constructor: {
|
89 | value: subClass,
|
90 | writable: true,
|
91 | configurable: true
|
92 | }
|
93 | });
|
94 | if (superClass) _setPrototypeOf(subClass, superClass);
|
95 | }
|
96 |
|
97 | function _setPrototypeOf(o, p) {
|
98 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
99 | o.__proto__ = p;
|
100 | return o;
|
101 | };
|
102 |
|
103 | return _setPrototypeOf(o, p);
|
104 | }
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | import { componentsX } from '../../globals/js/feature-flags';
|
114 | import settings from '../../globals/js/settings';
|
115 | import mixin from '../../globals/js/misc/mixin';
|
116 | import createComponent from '../../globals/js/mixins/create-component';
|
117 | import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
|
118 | import eventedState from '../../globals/js/mixins/evented-state';
|
119 | import eventMatches from '../../globals/js/misc/event-matches';
|
120 |
|
121 | var toArray = function toArray(arrayLike) {
|
122 | return Array.prototype.slice.call(arrayLike);
|
123 | };
|
124 |
|
125 | var suffix = componentsX ? '' : '-v2';
|
126 |
|
127 | var DataTableV2 =
|
128 |
|
129 | function (_mixin) {
|
130 | _inherits(DataTableV2, _mixin);
|
131 | |
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 | function DataTableV2(_element, options) {
|
149 | var _this;
|
150 |
|
151 | _classCallCheck(this, DataTableV2);
|
152 |
|
153 | _this = _possibleConstructorReturn(this, _getPrototypeOf(DataTableV2).call(this, _element, options));
|
154 |
|
155 | _this._sortToggle = function (detail) {
|
156 | var element = detail.element,
|
157 | previousValue = detail.previousValue;
|
158 | toArray(_this.tableHeaders).forEach(function (header) {
|
159 | var sortEl = header.querySelector(_this.options.selectorTableSort);
|
160 |
|
161 | if (sortEl !== null && sortEl !== element) {
|
162 | sortEl.classList.remove(_this.options.classTableSortActive);
|
163 | sortEl.classList.remove(_this.options.classTableSortAscending);
|
164 | }
|
165 | });
|
166 |
|
167 | if (!previousValue) {
|
168 | element.dataset.previousValue = 'ascending';
|
169 | element.classList.add(_this.options.classTableSortActive);
|
170 | element.classList.add(_this.options.classTableSortAscending);
|
171 | } else if (previousValue === 'ascending') {
|
172 | element.dataset.previousValue = 'descending';
|
173 | element.classList.add(_this.options.classTableSortActive);
|
174 | element.classList.remove(_this.options.classTableSortAscending);
|
175 | } else if (previousValue === 'descending') {
|
176 | element.removeAttribute('data-previous-value');
|
177 | element.classList.remove(_this.options.classTableSortActive);
|
178 | element.classList.remove(_this.options.classTableSortAscending);
|
179 | }
|
180 | };
|
181 |
|
182 | _this._selectToggle = function (detail) {
|
183 | var element = detail.element;
|
184 | var checked = element.checked;
|
185 |
|
186 | _this.state.checkboxCount += checked ? 1 : -1;
|
187 | _this.countEl.textContent = _this.state.checkboxCount;
|
188 | var row = element.parentNode.parentNode;
|
189 | row.classList.toggle(_this.options.classTableSelected);
|
190 |
|
191 | _this._actionBarToggle(_this.state.checkboxCount > 0);
|
192 | };
|
193 |
|
194 | _this._selectAllToggle = function (_ref) {
|
195 | var element = _ref.element;
|
196 | var checked = element.checked;
|
197 | var inputs = toArray(_this.element.querySelectorAll(_this.options.selectorCheckbox));
|
198 | _this.state.checkboxCount = checked ? inputs.length - 1 : 0;
|
199 | inputs.forEach(function (item) {
|
200 | item.checked = checked;
|
201 | var row = item.parentNode.parentNode;
|
202 |
|
203 | if (checked && row) {
|
204 | row.classList.add(_this.options.classTableSelected);
|
205 | } else {
|
206 | row.classList.remove(_this.options.classTableSelected);
|
207 | }
|
208 | });
|
209 |
|
210 | _this._actionBarToggle(_this.state.checkboxCount > 0);
|
211 |
|
212 | if (_this.batchActionEl) {
|
213 | _this.countEl.textContent = _this.state.checkboxCount;
|
214 | }
|
215 | };
|
216 |
|
217 | _this._actionBarCancel = function () {
|
218 | var inputs = toArray(_this.element.querySelectorAll(_this.options.selectorCheckbox));
|
219 | var row = toArray(_this.element.querySelectorAll(_this.options.selectorTableSelected));
|
220 | row.forEach(function (item) {
|
221 | item.classList.remove(_this.options.classTableSelected);
|
222 | });
|
223 | inputs.forEach(function (item) {
|
224 | item.checked = false;
|
225 | });
|
226 | _this.state.checkboxCount = 0;
|
227 |
|
228 | _this._actionBarToggle(false);
|
229 |
|
230 | if (_this.batchActionEl) {
|
231 | _this.countEl.textContent = _this.state.checkboxCount;
|
232 | }
|
233 | };
|
234 |
|
235 | _this._actionBarToggle = function (toggleOn) {
|
236 | var transition = function transition(evt) {
|
237 | _this.batchActionEl.removeEventListener('transitionend', transition);
|
238 |
|
239 | if (evt.target.matches(_this.options.selectorActions)) {
|
240 | if (_this.batchActionEl.dataset.active === 'false') {
|
241 | _this.batchActionEl.setAttribute('tabIndex', -1);
|
242 | } else {
|
243 | _this.batchActionEl.setAttribute('tabIndex', 0);
|
244 | }
|
245 | }
|
246 | };
|
247 |
|
248 | if (toggleOn) {
|
249 | _this.batchActionEl.dataset.active = true;
|
250 |
|
251 | _this.batchActionEl.classList.add(_this.options.classActionBarActive);
|
252 | } else if (_this.batchActionEl) {
|
253 | _this.batchActionEl.dataset.active = false;
|
254 |
|
255 | _this.batchActionEl.classList.remove(_this.options.classActionBarActive);
|
256 | }
|
257 |
|
258 | if (_this.batchActionEl) {
|
259 | _this.batchActionEl.addEventListener('transitionend', transition);
|
260 | }
|
261 | };
|
262 |
|
263 | _this._expandableRowsInit = function (expandableRows) {
|
264 | expandableRows.forEach(function (item) {
|
265 | if (!componentsX) {
|
266 | item.classList.remove(_this.options.classExpandableRowHidden);
|
267 |
|
268 | _this.tableBody.removeChild(item);
|
269 | }
|
270 | });
|
271 | };
|
272 |
|
273 | _this._rowExpandToggle = function (_ref2) {
|
274 | var element = _ref2.element,
|
275 | initialEvt = _ref2.initialEvt;
|
276 | var parent = eventMatches(initialEvt, _this.options.eventParentContainer);
|
277 |
|
278 | var index = _this.expandCells.indexOf(element);
|
279 |
|
280 | if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') {
|
281 | element.dataset.previousValue = 'collapsed';
|
282 | parent.classList.add(_this.options.classExpandableRow);
|
283 |
|
284 | if (!componentsX) {
|
285 | _this.tableBody.insertBefore(_this.expandableRows[index], _this.parentRows[index + 1]);
|
286 | }
|
287 | } else {
|
288 | parent.classList.remove(_this.options.classExpandableRow);
|
289 |
|
290 | if (!componentsX) {
|
291 | _this.tableBody.removeChild(parent.nextElementSibling);
|
292 | }
|
293 |
|
294 | element.dataset.previousValue = 'expanded';
|
295 | }
|
296 | };
|
297 |
|
298 | _this._expandableHoverToggle = function (element) {
|
299 | element.previousElementSibling.classList.add(_this.options.classExpandableRowHover);
|
300 |
|
301 | var mouseout = function mouseout() {
|
302 | element.previousElementSibling.classList.remove(_this.options.classExpandableRowHover);
|
303 | element.removeEventListener('mouseout', mouseout);
|
304 | };
|
305 |
|
306 | element.addEventListener('mouseout', mouseout);
|
307 | };
|
308 |
|
309 | _this._toggleState = function (element, evt) {
|
310 | var data = element.dataset;
|
311 | var label = data.label ? data.label : '';
|
312 | var previousValue = data.previousValue ? data.previousValue : '';
|
313 | var initialEvt = evt;
|
314 |
|
315 | _this.changeState({
|
316 | group: data.event,
|
317 | element: element,
|
318 | label: label,
|
319 | previousValue: previousValue,
|
320 | initialEvt: initialEvt
|
321 | });
|
322 | };
|
323 |
|
324 | _this._keydownHandler = function (evt) {
|
325 | var searchContainer = _this.element.querySelector(_this.options.selectorToolbarSearchContainer);
|
326 |
|
327 | var searchEvent = eventMatches(evt, _this.options.selectorSearchMagnifier);
|
328 | var activeSearch = searchContainer.classList.contains(_this.options.classToolbarSearchActive);
|
329 |
|
330 | if (evt.which === 27) {
|
331 | _this._actionBarCancel();
|
332 | }
|
333 |
|
334 | if (searchContainer && searchEvent && evt.which === 13) {
|
335 | _this.activateSearch(searchContainer);
|
336 | }
|
337 |
|
338 | if (activeSearch && evt.which === 27) {
|
339 | _this.deactivateSearch(searchContainer, evt);
|
340 | }
|
341 | };
|
342 |
|
343 | _this.refreshRows = function () {
|
344 | var newExpandCells = toArray(_this.element.querySelectorAll(_this.options.selectorExpandCells));
|
345 | var newExpandableRows = toArray(_this.element.querySelectorAll(_this.options.selectorExpandableRows));
|
346 | var newParentRows = toArray(_this.element.querySelectorAll(_this.options.selectorParentRows));
|
347 |
|
348 | if (_this.parentRows.length > 0) {
|
349 | var diffParentRows = newParentRows.filter(function (newRow) {
|
350 | return !_this.parentRows.some(function (oldRow) {
|
351 | return oldRow === newRow;
|
352 | });
|
353 | });
|
354 |
|
355 | if (newExpandableRows.length > 0) {
|
356 | var diffExpandableRows = diffParentRows.map(function (newRow) {
|
357 | return newRow.nextElementSibling;
|
358 | });
|
359 | var mergedExpandableRows = [].concat(_toConsumableArray(toArray(_this.expandableRows)), _toConsumableArray(toArray(diffExpandableRows)));
|
360 |
|
361 | _this._expandableRowsInit(diffExpandableRows);
|
362 |
|
363 | _this.expandableRows = mergedExpandableRows;
|
364 | }
|
365 | } else if (newExpandableRows.length > 0) {
|
366 | _this._expandableRowsInit(newExpandableRows);
|
367 |
|
368 | _this.expandableRows = newExpandableRows;
|
369 | }
|
370 |
|
371 | _this.expandCells = newExpandCells;
|
372 | _this.parentRows = newParentRows;
|
373 | };
|
374 |
|
375 | _this.container = _element.parentNode;
|
376 | _this.toolbarEl = _this.element.querySelector(_this.options.selectorToolbar);
|
377 | _this.batchActionEl = _this.element.querySelector(_this.options.selectorActions);
|
378 | _this.countEl = _this.element.querySelector(_this.options.selectorCount);
|
379 | _this.cancelEl = _this.element.querySelector(_this.options.selectorActionCancel);
|
380 | _this.tableHeaders = _this.element.querySelectorAll('th');
|
381 | _this.tableBody = _this.element.querySelector(_this.options.selectorTableBody);
|
382 | _this.expandCells = [];
|
383 | _this.expandableRows = [];
|
384 | _this.parentRows = [];
|
385 |
|
386 | _this.refreshRows();
|
387 |
|
388 | _this.element.addEventListener('mouseover', function (evt) {
|
389 | var eventElement = eventMatches(evt, _this.options.selectorChildRow);
|
390 |
|
391 | if (eventElement) {
|
392 | _this._expandableHoverToggle(eventElement, true);
|
393 | }
|
394 | });
|
395 |
|
396 | _this.element.addEventListener('click', function (evt) {
|
397 | var eventElement = eventMatches(evt, _this.options.eventTrigger);
|
398 |
|
399 | var searchContainer = _this.element.querySelector(_this.options.selectorToolbarSearchContainer);
|
400 |
|
401 | if (eventElement) {
|
402 | _this._toggleState(eventElement, evt);
|
403 | }
|
404 |
|
405 | if (componentsX && searchContainer) {
|
406 | _this._handleDocumentClick(evt);
|
407 | }
|
408 | });
|
409 |
|
410 | _this.element.addEventListener('keydown', _this._keydownHandler);
|
411 |
|
412 | _this.state = {
|
413 | checkboxCount: 0
|
414 | };
|
415 | return _this;
|
416 | }
|
417 |
|
418 | _createClass(DataTableV2, [{
|
419 | key: "_handleDocumentClick",
|
420 | value: function _handleDocumentClick(evt) {
|
421 | var searchContainer = this.element.querySelector(this.options.selectorToolbarSearchContainer);
|
422 | var searchEvent = eventMatches(evt, this.options.selectorSearchMagnifier);
|
423 | var activeSearch = searchContainer.classList.contains(this.options.classToolbarSearchActive);
|
424 |
|
425 | if (searchContainer && searchEvent) {
|
426 | this.activateSearch(searchContainer);
|
427 | }
|
428 |
|
429 | if (activeSearch) {
|
430 | this.deactivateSearch(searchContainer, evt);
|
431 | }
|
432 | }
|
433 | }, {
|
434 | key: "activateSearch",
|
435 | value: function activateSearch(container) {
|
436 | var input = container.querySelector(this.options.selectorSearchInput);
|
437 | container.classList.add(this.options.classToolbarSearchActive);
|
438 | input.focus();
|
439 | }
|
440 | }, {
|
441 | key: "deactivateSearch",
|
442 | value: function deactivateSearch(container, evt) {
|
443 | var trigger = container.querySelector(this.options.selectorSearchMagnifier);
|
444 | var input = container.querySelector(this.options.selectorSearchInput);
|
445 | var svg = trigger.querySelector('svg');
|
446 |
|
447 | if (input.value.length === 0 && evt.target !== input && evt.target !== trigger && evt.target !== svg) {
|
448 | container.classList.remove(this.options.classToolbarSearchActive);
|
449 | trigger.focus();
|
450 | }
|
451 |
|
452 | if (evt.which === 27 && evt.target === input) {
|
453 | container.classList.remove(this.options.classToolbarSearchActive);
|
454 | trigger.focus();
|
455 | }
|
456 | }
|
457 | }, {
|
458 | key: "_changeState",
|
459 | value: function _changeState(detail, callback) {
|
460 | this[this.constructor.eventHandlers[detail.group]](detail);
|
461 | callback();
|
462 | }
|
463 | }], [{
|
464 | key: "options",
|
465 | get: function get() {
|
466 | var prefix = settings.prefix;
|
467 | return {
|
468 | selectorInit: "[data-table".concat(suffix, "]"),
|
469 | selectorToolbar: ".".concat(prefix, "--table--toolbar"),
|
470 | selectorActions: ".".concat(prefix, "--batch-actions"),
|
471 | selectorCount: '[data-items-selected]',
|
472 | selectorActionCancel: ".".concat(prefix, "--batch-summary__cancel"),
|
473 | selectorCheckbox: ".".concat(prefix, "--checkbox"),
|
474 | selectorExpandCells: "td.".concat(prefix, "--table-expand").concat(suffix),
|
475 | selectorExpandableRows: ".".concat(prefix, "--expandable-row").concat(suffix),
|
476 | selectorParentRows: ".".concat(prefix, "--parent-row").concat(suffix),
|
477 | selectorChildRow: '[data-child-row]',
|
478 | selectorTableBody: 'tbody',
|
479 | selectorTableSort: ".".concat(prefix, "--table-sort").concat(suffix),
|
480 | selectorTableSelected: ".".concat(prefix, "--data-table").concat(suffix, "--selected"),
|
481 | selectorToolbarSearchContainer: ".".concat(prefix, "--toolbar-search-container-expandable"),
|
482 | selectorSearchMagnifier: ".".concat(prefix, "--search-magnifier"),
|
483 | selectorSearchInput: ".".concat(prefix, "--search-input"),
|
484 | classExpandableRow: "".concat(prefix, "--expandable-row").concat(suffix),
|
485 | classExpandableRowHidden: "".concat(prefix, "--expandable-row--hidden").concat(suffix),
|
486 | classExpandableRowHover: "".concat(prefix, "--expandable-row--hover").concat(suffix),
|
487 | classTableSortAscending: "".concat(prefix, "--table-sort").concat(suffix, "--ascending"),
|
488 | classTableSortActive: "".concat(prefix, "--table-sort").concat(suffix, "--active"),
|
489 | classToolbarSearchActive: "".concat(prefix, "--toolbar-search-container-active"),
|
490 | classActionBarActive: "".concat(prefix, "--batch-actions--active"),
|
491 | classTableSelected: "".concat(prefix, "--data-table").concat(suffix, "--selected"),
|
492 | eventBeforeExpand: "data-table".concat(suffix, "-beforetoggleexpand"),
|
493 | eventAfterExpand: "data-table".concat(suffix, "-aftertoggleexpand"),
|
494 | eventBeforeSort: "data-table".concat(suffix, "-beforetogglesort"),
|
495 | eventAfterSort: "data-table".concat(suffix, "-aftertogglesort"),
|
496 | eventTrigger: '[data-event]',
|
497 | eventParentContainer: '[data-parent-row]'
|
498 | };
|
499 | }
|
500 | }]);
|
501 |
|
502 | DataTableV2.components = new WeakMap();
|
503 | DataTableV2.eventHandlers = {
|
504 | expand: '_rowExpandToggle',
|
505 | sort: '_sortToggle',
|
506 | select: '_selectToggle',
|
507 | 'select-all': '_selectAllToggle',
|
508 | 'action-bar-cancel': '_actionBarCancel'
|
509 | };
|
510 | return DataTableV2;
|
511 | }(mixin(createComponent, initComponentBySearch, eventedState));
|
512 |
|
513 | export default DataTableV2; |
\ | No newline at end of file |