1 | (function (global, factory) {
|
2 | if (typeof define === "function" && define.amd) {
|
3 | define(['exports', '../../globals/js/settings', '../../globals/js/misc/mixin', '../../globals/js/mixins/create-component', '../../globals/js/mixins/init-component-by-search', '../../globals/js/mixins/evented-state', '../../globals/js/mixins/handles', '../../globals/js/misc/event-matches', '../../globals/js/misc/on'], factory);
|
4 | } else if (typeof exports !== "undefined") {
|
5 | factory(exports, require('../../globals/js/settings'), require('../../globals/js/misc/mixin'), require('../../globals/js/mixins/create-component'), require('../../globals/js/mixins/init-component-by-search'), require('../../globals/js/mixins/evented-state'), require('../../globals/js/mixins/handles'), require('../../globals/js/misc/event-matches'), require('../../globals/js/misc/on'));
|
6 | } else {
|
7 | var mod = {
|
8 | exports: {}
|
9 | };
|
10 | factory(mod.exports, global.settings, global.mixin, global.createComponent, global.initComponentBySearch, global.eventedState, global.handles, global.eventMatches, global.on);
|
11 | global.dataTable = mod.exports;
|
12 | }
|
13 | })(this, function (exports, _settings, _mixin2, _createComponent, _initComponentBySearch, _eventedState, _handles, _eventMatches, _on) {
|
14 | 'use strict';
|
15 |
|
16 | Object.defineProperty(exports, "__esModule", {
|
17 | value: true
|
18 | });
|
19 |
|
20 | var _settings2 = _interopRequireDefault(_settings);
|
21 |
|
22 | var _mixin3 = _interopRequireDefault(_mixin2);
|
23 |
|
24 | var _createComponent2 = _interopRequireDefault(_createComponent);
|
25 |
|
26 | var _initComponentBySearch2 = _interopRequireDefault(_initComponentBySearch);
|
27 |
|
28 | var _eventedState2 = _interopRequireDefault(_eventedState);
|
29 |
|
30 | var _handles2 = _interopRequireDefault(_handles);
|
31 |
|
32 | var _eventMatches2 = _interopRequireDefault(_eventMatches);
|
33 |
|
34 | var _on2 = _interopRequireDefault(_on);
|
35 |
|
36 | function _interopRequireDefault(obj) {
|
37 | return obj && obj.__esModule ? obj : {
|
38 | default: obj
|
39 | };
|
40 | }
|
41 |
|
42 | function _toConsumableArray(arr) {
|
43 | if (Array.isArray(arr)) {
|
44 | for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
45 |
|
46 | return arr2;
|
47 | } else {
|
48 | return Array.from(arr);
|
49 | }
|
50 | }
|
51 |
|
52 | function _classCallCheck(instance, Constructor) {
|
53 | if (!(instance instanceof Constructor)) {
|
54 | throw new TypeError("Cannot call a class as a function");
|
55 | }
|
56 | }
|
57 |
|
58 | var _createClass = function () {
|
59 | function defineProperties(target, props) {
|
60 | for (var i = 0; i < props.length; i++) {
|
61 | var descriptor = props[i];
|
62 | descriptor.enumerable = descriptor.enumerable || false;
|
63 | descriptor.configurable = true;
|
64 | if ("value" in descriptor) descriptor.writable = true;
|
65 | Object.defineProperty(target, descriptor.key, descriptor);
|
66 | }
|
67 | }
|
68 |
|
69 | return function (Constructor, protoProps, staticProps) {
|
70 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
71 | if (staticProps) defineProperties(Constructor, staticProps);
|
72 | return Constructor;
|
73 | };
|
74 | }();
|
75 |
|
76 | function _possibleConstructorReturn(self, call) {
|
77 | if (!self) {
|
78 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
79 | }
|
80 |
|
81 | return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
82 | }
|
83 |
|
84 | function _inherits(subClass, superClass) {
|
85 | if (typeof superClass !== "function" && superClass !== null) {
|
86 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
87 | }
|
88 |
|
89 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
90 | constructor: {
|
91 | value: subClass,
|
92 | enumerable: false,
|
93 | writable: true,
|
94 | configurable: true
|
95 | }
|
96 | });
|
97 | if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
98 | }
|
99 |
|
100 | var DataTable = function (_mixin) {
|
101 | _inherits(DataTable, _mixin);
|
102 |
|
103 | |
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 | function DataTable(element, options) {
|
120 | _classCallCheck(this, DataTable);
|
121 |
|
122 | var _this = _possibleConstructorReturn(this, (DataTable.__proto__ || Object.getPrototypeOf(DataTable)).call(this, element, options));
|
123 |
|
124 | _initialiseProps.call(_this);
|
125 |
|
126 | _this.container = element.parentNode;
|
127 | _this.tableBody = _this.element.querySelector(_this.options.selectorTableBody);
|
128 | _this.expandCells = [];
|
129 | _this.expandableRows = [];
|
130 | _this.parentRows = [];
|
131 | _this.overflowInitialized = false;
|
132 |
|
133 | _this.refreshRows();
|
134 |
|
135 | _this.manage((0, _on2.default)(_this.element, 'click', function (evt) {
|
136 | var eventElement = (0, _eventMatches2.default)(evt, _this.options.eventTrigger);
|
137 | if (eventElement) {
|
138 | _this._toggleState(eventElement, evt);
|
139 | }
|
140 | }));
|
141 |
|
142 | _this.manage((0, _on2.default)(_this.element, 'keydown', function (evt) {
|
143 | if (evt.which === 13) {
|
144 | var eventElement = (0, _eventMatches2.default)(evt, _this.options.eventTrigger);
|
145 | if (eventElement) {
|
146 | _this._toggleState(eventElement, evt);
|
147 | }
|
148 | }
|
149 | }));
|
150 | return _this;
|
151 | }
|
152 |
|
153 | |
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | _createClass(DataTable, [{
|
162 | key: '_changeState',
|
163 | value: function _changeState(detail, callback) {
|
164 | this[this.constructor.eventHandlers[detail.group]](detail);
|
165 | callback();
|
166 | }
|
167 | }], [{
|
168 | key: 'options',
|
169 | get: function get() {
|
170 | var prefix = _settings2.default.prefix;
|
171 |
|
172 | return {
|
173 | selectorInit: '[data-responsive-table]',
|
174 | selectorExpandCells: '.' + prefix + '--table-expand',
|
175 | selectorExpandableRows: '.' + prefix + '--expandable-row',
|
176 | selectorParentRows: '.' + prefix + '--parent-row',
|
177 | selectorTableBody: '.' + prefix + '--table-body',
|
178 | selectorCheckbox: '.' + prefix + '--checkbox',
|
179 | classParentRowEven: prefix + '--parent-row--even',
|
180 | classExpandableRow: prefix + '--expandable-row',
|
181 | classExpandableRowEven: prefix + '--expandable-row--even',
|
182 | classExpandableRowHidden: prefix + '--expandable-row--hidden',
|
183 | classTableSortAscending: prefix + '--table-sort--ascending',
|
184 | eventBeforeExpand: 'responsive-table-beforetoggleexpand',
|
185 | eventAfterExpand: 'responsive-table-aftertoggleexpand',
|
186 | eventBeforeSort: 'responsive-table-beforetogglesort',
|
187 | eventAfterSort: 'responsive-table-aftertogglesort',
|
188 | eventBeforeSelectAll: 'responsive-table-beforetoggleselectall',
|
189 | eventAfterSelectAll: 'responsive-table-aftertoggleselectall',
|
190 | eventTrigger: '[data-event]',
|
191 | eventParentContainer: '[data-parent-row]'
|
192 | };
|
193 | }
|
194 | }]);
|
195 |
|
196 | return DataTable;
|
197 | }((0, _mixin3.default)(_createComponent2.default, _initComponentBySearch2.default, _eventedState2.default, _handles2.default));
|
198 |
|
199 | DataTable.components = new WeakMap();
|
200 | DataTable.eventHandlers = {
|
201 | expand: '_toggleRowExpand',
|
202 | sort: '_toggleSort',
|
203 | 'select-all': '_toggleSelectAll'
|
204 | };
|
205 |
|
206 | var _initialiseProps = function _initialiseProps() {
|
207 | var _this2 = this;
|
208 |
|
209 | this._toggleState = function (element, evt) {
|
210 | var data = element.dataset;
|
211 | var label = data.label ? data.label : '';
|
212 | var previousValue = data.previousValue ? data.previousValue : '';
|
213 | var initialEvt = evt;
|
214 | _this2.changeState({
|
215 | group: data.event,
|
216 | element: element,
|
217 | label: label,
|
218 | previousValue: previousValue,
|
219 | initialEvt: initialEvt
|
220 | });
|
221 | };
|
222 |
|
223 | this._zebraStripe = function (parentRows) {
|
224 | parentRows.forEach(function (item, index) {
|
225 | if (index % 2 === 0) {
|
226 | item.classList.add(_this2.options.classParentRowEven);
|
227 | if (item.nextElementSibling && item.nextElementSibling.classList.contains(_this2.options.classExpandableRow)) {
|
228 | item.nextElementSibling.classList.add(_this2.options.classExpandableRowEven);
|
229 | }
|
230 | } else {
|
231 | item.classList.remove(_this2.options.classParentRowEven);
|
232 | }
|
233 | });
|
234 | };
|
235 |
|
236 | this._initExpandableRows = function (expandableRows) {
|
237 | expandableRows.forEach(function (item) {
|
238 | item.classList.remove(_this2.options.classExpandableRowHidden);
|
239 | _this2.tableBody.removeChild(item);
|
240 | });
|
241 | };
|
242 |
|
243 | this._toggleRowExpand = function (detail) {
|
244 | var element = detail.element;
|
245 | var parent = (0, _eventMatches2.default)(detail.initialEvt, _this2.options.eventParentContainer);
|
246 |
|
247 | var index = _this2.expandCells.indexOf(element);
|
248 | if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') {
|
249 | element.dataset.previousValue = 'collapsed';
|
250 | _this2.tableBody.insertBefore(_this2.expandableRows[index], _this2.parentRows[index + 1]);
|
251 | } else {
|
252 | _this2.tableBody.removeChild(parent.nextElementSibling);
|
253 | element.dataset.previousValue = 'expanded';
|
254 | }
|
255 | };
|
256 |
|
257 | this._toggleSort = function (detail) {
|
258 | var element = detail.element,
|
259 | previousValue = detail.previousValue;
|
260 |
|
261 |
|
262 | if (!previousValue || previousValue === 'descending') {
|
263 | element.dataset.previousValue = 'ascending';
|
264 | element.classList.add(_this2.options.classTableSortAscending);
|
265 | } else {
|
266 | element.dataset.previousValue = 'descending';
|
267 | element.classList.remove(_this2.options.classTableSortAscending);
|
268 | }
|
269 | };
|
270 |
|
271 | this._toggleSelectAll = function (detail) {
|
272 | var element = detail.element,
|
273 | previousValue = detail.previousValue;
|
274 |
|
275 | var inputs = [].concat(_toConsumableArray(_this2.element.querySelectorAll(_this2.options.selectorCheckbox)));
|
276 | if (!previousValue || previousValue === 'toggled') {
|
277 | inputs.forEach(function (item) {
|
278 | item.checked = true;
|
279 | });
|
280 | element.dataset.previousValue = 'off';
|
281 | } else {
|
282 | inputs.forEach(function (item) {
|
283 | item.checked = false;
|
284 | });
|
285 | element.dataset.previousValue = 'toggled';
|
286 | }
|
287 | };
|
288 |
|
289 | this.refreshRows = function () {
|
290 | var newExpandCells = [].concat(_toConsumableArray(_this2.element.querySelectorAll(_this2.options.selectorExpandCells)));
|
291 | var newExpandableRows = [].concat(_toConsumableArray(_this2.element.querySelectorAll(_this2.options.selectorExpandableRows)));
|
292 | var newParentRows = [].concat(_toConsumableArray(_this2.element.querySelectorAll(_this2.options.selectorParentRows)));
|
293 |
|
294 |
|
295 | if (_this2.parentRows.length > 0) {
|
296 | var diffParentRows = newParentRows.filter(function (newRow) {
|
297 | return !_this2.parentRows.some(function (oldRow) {
|
298 | return oldRow === newRow;
|
299 | });
|
300 | });
|
301 |
|
302 |
|
303 | if (newExpandableRows.length > 0) {
|
304 | var diffExpandableRows = diffParentRows.map(function (newRow) {
|
305 | return newRow.nextElementSibling;
|
306 | });
|
307 | var mergedExpandableRows = [].concat(_toConsumableArray(_this2.expandableRows), _toConsumableArray(diffExpandableRows));
|
308 | _this2._initExpandableRows(diffExpandableRows);
|
309 | _this2.expandableRows = mergedExpandableRows;
|
310 | }
|
311 |
|
312 | _this2._zebraStripe(newParentRows);
|
313 | } else {
|
314 | _this2._zebraStripe(newParentRows);
|
315 |
|
316 | if (newExpandableRows.length > 0) {
|
317 | _this2._initExpandableRows(newExpandableRows);
|
318 | _this2.expandableRows = newExpandableRows;
|
319 | }
|
320 | }
|
321 |
|
322 | _this2.expandCells = newExpandCells;
|
323 | _this2.parentRows = newParentRows;
|
324 | };
|
325 | };
|
326 |
|
327 | exports.default = DataTable;
|
328 | }); |
\ | No newline at end of file |