|
0
|
1 /*! Tablesaw - v3.0.8 - 2018-01-25
|
|
|
2 * https://github.com/filamentgroup/tablesaw
|
|
|
3 * Copyright (c) 2018 Filament Group; Licensed MIT */
|
|
|
4 (function (root, factory) {
|
|
|
5 if (typeof define === 'function' && define.amd) {
|
|
|
6 define(["jquery"], function (jQuery) {
|
|
|
7 return (root.Tablesaw = factory(jQuery, root));
|
|
|
8 });
|
|
|
9 } else if (typeof exports === 'object') {
|
|
|
10 if( "document" in root ) {
|
|
|
11 module.exports = factory(require('jquery'), root);
|
|
|
12 } else {
|
|
|
13 // special jQuery case for CommonJS (pass in a window)
|
|
|
14 module.exports = factory(require('jquery')(root), root);
|
|
|
15 }
|
|
|
16 } else {
|
|
|
17 root.Tablesaw = factory(jQuery, root);
|
|
|
18 }
|
|
|
19 }(typeof window !== "undefined" ? window : this, function ($, window) {
|
|
|
20 "use strict";
|
|
|
21
|
|
|
22 var document = window.document;
|
|
|
23
|
|
|
24 var domContentLoadedTriggered = false;
|
|
|
25 document.addEventListener("DOMContentLoaded", function() {
|
|
|
26 domContentLoadedTriggered = true;
|
|
|
27 });
|
|
|
28
|
|
|
29 var Tablesaw = {
|
|
|
30 i18n: {
|
|
|
31 modeStack: "Stack",
|
|
|
32 modeSwipe: "Swipe",
|
|
|
33 modeToggle: "Toggle",
|
|
|
34 modeSwitchColumnsAbbreviated: "Cols",
|
|
|
35 modeSwitchColumns: "Columns",
|
|
|
36 columnToggleButton: "Columns",
|
|
|
37 columnToggleError: "No eligible columns.",
|
|
|
38 sort: "Sort",
|
|
|
39 swipePreviousColumn: "Previous column",
|
|
|
40 swipeNextColumn: "Next column"
|
|
|
41 },
|
|
|
42 // cut the mustard
|
|
|
43 mustard:
|
|
|
44 "head" in document && // IE9+, Firefox 4+, Safari 5.1+, Mobile Safari 4.1+, Opera 11.5+, Android 2.3+
|
|
|
45 (!window.blackberry || window.WebKitPoint) && // only WebKit Blackberry (OS 6+)
|
|
|
46 !window.operamini,
|
|
|
47 $: $,
|
|
|
48 _init: function(element) {
|
|
|
49 Tablesaw.$(element || document).trigger("enhance.tablesaw");
|
|
|
50 },
|
|
|
51 init: function(element) {
|
|
|
52 if (!domContentLoadedTriggered) {
|
|
|
53 if ("addEventListener" in document) {
|
|
|
54 // Use raw DOMContentLoaded instead of shoestring (may have issues in Android 2.3, exhibited by stack table)
|
|
|
55 document.addEventListener("DOMContentLoaded", function() {
|
|
|
56 Tablesaw._init(element);
|
|
|
57 });
|
|
|
58 }
|
|
|
59 } else {
|
|
|
60 Tablesaw._init(element);
|
|
|
61 }
|
|
|
62 }
|
|
|
63 };
|
|
|
64
|
|
|
65 $(document).on("enhance.tablesaw", function() {
|
|
|
66 // Extend i18n config, if one exists.
|
|
|
67 if (typeof TablesawConfig !== "undefined" && TablesawConfig.i18n) {
|
|
|
68 Tablesaw.i18n = $.extend(Tablesaw.i18n, TablesawConfig.i18n || {});
|
|
|
69 }
|
|
|
70
|
|
|
71 Tablesaw.i18n.modes = [
|
|
|
72 Tablesaw.i18n.modeStack,
|
|
|
73 Tablesaw.i18n.modeSwipe,
|
|
|
74 Tablesaw.i18n.modeToggle
|
|
|
75 ];
|
|
|
76 });
|
|
|
77
|
|
|
78 if (Tablesaw.mustard) {
|
|
|
79 $(document.documentElement).addClass("tablesaw-enhanced");
|
|
|
80 }
|
|
|
81
|
|
|
82 (function() {
|
|
|
83 var pluginName = "tablesaw";
|
|
|
84 var classes = {
|
|
|
85 toolbar: "tablesaw-bar"
|
|
|
86 };
|
|
|
87 var events = {
|
|
|
88 create: "tablesawcreate",
|
|
|
89 destroy: "tablesawdestroy",
|
|
|
90 refresh: "tablesawrefresh",
|
|
|
91 resize: "tablesawresize"
|
|
|
92 };
|
|
|
93 var defaultMode = "stack";
|
|
|
94 var initSelector = "table";
|
|
|
95 var initFilterSelector = "[data-tablesaw],[data-tablesaw-mode],[data-tablesaw-sortable]";
|
|
|
96 var defaultConfig = {};
|
|
|
97
|
|
|
98 Tablesaw.events = events;
|
|
|
99
|
|
|
100 var Table = function(element) {
|
|
|
101 if (!element) {
|
|
|
102 throw new Error("Tablesaw requires an element.");
|
|
|
103 }
|
|
|
104
|
|
|
105 this.table = element;
|
|
|
106 this.$table = $(element);
|
|
|
107
|
|
|
108 // only one <thead> and <tfoot> are allowed, per the specification
|
|
|
109 this.$thead = this.$table
|
|
|
110 .children()
|
|
|
111 .filter("thead")
|
|
|
112 .eq(0);
|
|
|
113
|
|
|
114 // multiple <tbody> are allowed, per the specification
|
|
|
115 this.$tbody = this.$table.children().filter("tbody");
|
|
|
116
|
|
|
117 this.mode = this.$table.attr("data-tablesaw-mode") || defaultMode;
|
|
|
118
|
|
|
119 this.$toolbar = null;
|
|
|
120
|
|
|
121 this.attributes = {
|
|
|
122 subrow: "data-tablesaw-subrow",
|
|
|
123 ignorerow: "data-tablesaw-ignorerow"
|
|
|
124 };
|
|
|
125
|
|
|
126 this.init();
|
|
|
127 };
|
|
|
128
|
|
|
129 Table.prototype.init = function() {
|
|
|
130 if (!this.$thead.length) {
|
|
|
131 throw new Error("tablesaw: a <thead> is required, but none was found.");
|
|
|
132 }
|
|
|
133
|
|
|
134 if (!this.$thead.find("th").length) {
|
|
|
135 throw new Error("tablesaw: no header cells found. Are you using <th> inside of <thead>?");
|
|
|
136 }
|
|
|
137
|
|
|
138 // assign an id if there is none
|
|
|
139 if (!this.$table.attr("id")) {
|
|
|
140 this.$table.attr("id", pluginName + "-" + Math.round(Math.random() * 10000));
|
|
|
141 }
|
|
|
142
|
|
|
143 this.createToolbar();
|
|
|
144
|
|
|
145 this._initCells();
|
|
|
146
|
|
|
147 this.$table.data(pluginName, this);
|
|
|
148
|
|
|
149 this.$table.trigger(events.create, [this]);
|
|
|
150 };
|
|
|
151
|
|
|
152 Table.prototype.getConfig = function(pluginSpecificConfig) {
|
|
|
153 // shoestring extend doesn’t support arbitrary args
|
|
|
154 var configs = $.extend(defaultConfig, pluginSpecificConfig || {});
|
|
|
155 return $.extend(configs, typeof TablesawConfig !== "undefined" ? TablesawConfig : {});
|
|
|
156 };
|
|
|
157
|
|
|
158 Table.prototype._getPrimaryHeaderRow = function() {
|
|
|
159 return this._getHeaderRows().eq(0);
|
|
|
160 };
|
|
|
161
|
|
|
162 Table.prototype._getHeaderRows = function() {
|
|
|
163 return this.$thead
|
|
|
164 .children()
|
|
|
165 .filter("tr")
|
|
|
166 .filter(function() {
|
|
|
167 return !$(this).is("[data-tablesaw-ignorerow]");
|
|
|
168 });
|
|
|
169 };
|
|
|
170
|
|
|
171 Table.prototype._getRowIndex = function($row) {
|
|
|
172 return $row.prevAll().length;
|
|
|
173 };
|
|
|
174
|
|
|
175 Table.prototype._getHeaderRowIndeces = function() {
|
|
|
176 var self = this;
|
|
|
177 var indeces = [];
|
|
|
178 this._getHeaderRows().each(function() {
|
|
|
179 indeces.push(self._getRowIndex($(this)));
|
|
|
180 });
|
|
|
181 return indeces;
|
|
|
182 };
|
|
|
183
|
|
|
184 Table.prototype._getPrimaryHeaderCells = function($row) {
|
|
|
185 return ($row || this._getPrimaryHeaderRow()).find("th");
|
|
|
186 };
|
|
|
187
|
|
|
188 Table.prototype._$getCells = function(th) {
|
|
|
189 var self = this;
|
|
|
190 return $(th)
|
|
|
191 .add(th.cells)
|
|
|
192 .filter(function() {
|
|
|
193 var $t = $(this);
|
|
|
194 var $row = $t.parent();
|
|
|
195 var hasColspan = $t.is("[colspan]");
|
|
|
196 // no subrows or ignored rows (keep cells in ignored rows that do not have a colspan)
|
|
|
197 return (
|
|
|
198 !$row.is("[" + self.attributes.subrow + "]") &&
|
|
|
199 (!$row.is("[" + self.attributes.ignorerow + "]") || !hasColspan)
|
|
|
200 );
|
|
|
201 });
|
|
|
202 };
|
|
|
203
|
|
|
204 Table.prototype._getVisibleColspan = function() {
|
|
|
205 var colspan = 0;
|
|
|
206 this._getPrimaryHeaderCells().each(function() {
|
|
|
207 var $t = $(this);
|
|
|
208 if ($t.css("display") !== "none") {
|
|
|
209 colspan += parseInt($t.attr("colspan"), 10) || 1;
|
|
|
210 }
|
|
|
211 });
|
|
|
212 return colspan;
|
|
|
213 };
|
|
|
214
|
|
|
215 Table.prototype.getColspanForCell = function($cell) {
|
|
|
216 var visibleColspan = this._getVisibleColspan();
|
|
|
217 var visibleSiblingColumns = 0;
|
|
|
218 if ($cell.closest("tr").data("tablesaw-rowspanned")) {
|
|
|
219 visibleSiblingColumns++;
|
|
|
220 }
|
|
|
221
|
|
|
222 $cell.siblings().each(function() {
|
|
|
223 var $t = $(this);
|
|
|
224 var colColspan = parseInt($t.attr("colspan"), 10) || 1;
|
|
|
225
|
|
|
226 if ($t.css("display") !== "none") {
|
|
|
227 visibleSiblingColumns += colColspan;
|
|
|
228 }
|
|
|
229 });
|
|
|
230 // console.log( $cell[ 0 ], visibleColspan, visibleSiblingColumns );
|
|
|
231
|
|
|
232 return visibleColspan - visibleSiblingColumns;
|
|
|
233 };
|
|
|
234
|
|
|
235 Table.prototype.isCellInColumn = function(header, cell) {
|
|
|
236 return $(header)
|
|
|
237 .add(header.cells)
|
|
|
238 .filter(function() {
|
|
|
239 return this === cell;
|
|
|
240 }).length;
|
|
|
241 };
|
|
|
242
|
|
|
243 Table.prototype.updateColspanCells = function(cls, header, userAction) {
|
|
|
244 var self = this;
|
|
|
245 var primaryHeaderRow = self._getPrimaryHeaderRow();
|
|
|
246
|
|
|
247 // find persistent column rowspans
|
|
|
248 this.$table.find("[rowspan][data-tablesaw-priority]").each(function() {
|
|
|
249 var $t = $(this);
|
|
|
250 if ($t.attr("data-tablesaw-priority") !== "persist") {
|
|
|
251 return;
|
|
|
252 }
|
|
|
253
|
|
|
254 var $row = $t.closest("tr");
|
|
|
255 var rowspan = parseInt($t.attr("rowspan"), 10);
|
|
|
256 if (rowspan > 1) {
|
|
|
257 $row = $row.next();
|
|
|
258
|
|
|
259 $row.data("tablesaw-rowspanned", true);
|
|
|
260
|
|
|
261 rowspan--;
|
|
|
262 }
|
|
|
263 });
|
|
|
264
|
|
|
265 this.$table
|
|
|
266 .find("[colspan],[data-tablesaw-maxcolspan]")
|
|
|
267 .filter(function() {
|
|
|
268 // is not in primary header row
|
|
|
269 return $(this).closest("tr")[0] !== primaryHeaderRow[0];
|
|
|
270 })
|
|
|
271 .each(function() {
|
|
|
272 var $cell = $(this);
|
|
|
273
|
|
|
274 if (userAction === undefined || self.isCellInColumn(header, this)) {
|
|
|
275 } else {
|
|
|
276 // if is not a user action AND the cell is not in the updating column, kill it
|
|
|
277 return;
|
|
|
278 }
|
|
|
279
|
|
|
280 var colspan = self.getColspanForCell($cell);
|
|
|
281
|
|
|
282 if (cls && userAction !== undefined) {
|
|
|
283 // console.log( colspan === 0 ? "addClass" : "removeClass", $cell );
|
|
|
284 $cell[colspan === 0 ? "addClass" : "removeClass"](cls);
|
|
|
285 }
|
|
|
286
|
|
|
287 // cache original colspan
|
|
|
288 var maxColspan = parseInt($cell.attr("data-tablesaw-maxcolspan"), 10);
|
|
|
289 if (!maxColspan) {
|
|
|
290 $cell.attr("data-tablesaw-maxcolspan", $cell.attr("colspan"));
|
|
|
291 } else if (colspan > maxColspan) {
|
|
|
292 colspan = maxColspan;
|
|
|
293 }
|
|
|
294
|
|
|
295 // console.log( this, "setting colspan to ", colspan );
|
|
|
296 $cell.attr("colspan", colspan);
|
|
|
297 });
|
|
|
298 };
|
|
|
299
|
|
|
300 Table.prototype._findPrimaryHeadersForCell = function(cell) {
|
|
|
301 var $headerRow = this._getPrimaryHeaderRow();
|
|
|
302 var $headers = this._getPrimaryHeaderCells($headerRow);
|
|
|
303 var headerRowIndex = this._getRowIndex($headerRow);
|
|
|
304 var results = [];
|
|
|
305
|
|
|
306 for (var rowNumber = 0; rowNumber < this.headerMapping.length; rowNumber++) {
|
|
|
307 if (rowNumber === headerRowIndex) {
|
|
|
308 continue;
|
|
|
309 }
|
|
|
310 for (var colNumber = 0; colNumber < this.headerMapping[rowNumber].length; colNumber++) {
|
|
|
311 if (this.headerMapping[rowNumber][colNumber] === cell) {
|
|
|
312 results.push($headers[colNumber]);
|
|
|
313 }
|
|
|
314 }
|
|
|
315 }
|
|
|
316 return results;
|
|
|
317 };
|
|
|
318
|
|
|
319 // used by init cells
|
|
|
320 Table.prototype.getRows = function() {
|
|
|
321 var self = this;
|
|
|
322 return this.$table.find("tr").filter(function() {
|
|
|
323 return $(this)
|
|
|
324 .closest("table")
|
|
|
325 .is(self.$table);
|
|
|
326 });
|
|
|
327 };
|
|
|
328
|
|
|
329 // used by sortable
|
|
|
330 Table.prototype.getBodyRows = function(tbody) {
|
|
|
331 return (tbody ? $(tbody) : this.$tbody).children().filter("tr");
|
|
|
332 };
|
|
|
333
|
|
|
334 Table.prototype.getHeaderCellIndex = function(cell) {
|
|
|
335 var lookup = this.headerMapping[0];
|
|
|
336 for (var colIndex = 0; colIndex < lookup.length; colIndex++) {
|
|
|
337 if (lookup[colIndex] === cell) {
|
|
|
338 return colIndex;
|
|
|
339 }
|
|
|
340 }
|
|
|
341
|
|
|
342 return -1;
|
|
|
343 };
|
|
|
344
|
|
|
345 Table.prototype._initCells = function() {
|
|
|
346 // re-establish original colspans
|
|
|
347 this.$table.find("[data-tablesaw-maxcolspan]").each(function() {
|
|
|
348 var $t = $(this);
|
|
|
349 $t.attr("colspan", $t.attr("data-tablesaw-maxcolspan"));
|
|
|
350 });
|
|
|
351
|
|
|
352 var $rows = this.getRows();
|
|
|
353 var columnLookup = [];
|
|
|
354
|
|
|
355 $rows.each(function(rowNumber) {
|
|
|
356 columnLookup[rowNumber] = [];
|
|
|
357 });
|
|
|
358
|
|
|
359 $rows.each(function(rowNumber) {
|
|
|
360 var coltally = 0;
|
|
|
361 var $t = $(this);
|
|
|
362 var children = $t.children();
|
|
|
363
|
|
|
364 children.each(function() {
|
|
|
365 var colspan = parseInt(
|
|
|
366 this.getAttribute("data-tablesaw-maxcolspan") || this.getAttribute("colspan"),
|
|
|
367 10
|
|
|
368 );
|
|
|
369 var rowspan = parseInt(this.getAttribute("rowspan"), 10);
|
|
|
370
|
|
|
371 // set in a previous rowspan
|
|
|
372 while (columnLookup[rowNumber][coltally]) {
|
|
|
373 coltally++;
|
|
|
374 }
|
|
|
375
|
|
|
376 columnLookup[rowNumber][coltally] = this;
|
|
|
377
|
|
|
378 // TODO? both colspan and rowspan
|
|
|
379 if (colspan) {
|
|
|
380 for (var k = 0; k < colspan - 1; k++) {
|
|
|
381 coltally++;
|
|
|
382 columnLookup[rowNumber][coltally] = this;
|
|
|
383 }
|
|
|
384 }
|
|
|
385 if (rowspan) {
|
|
|
386 for (var j = 1; j < rowspan; j++) {
|
|
|
387 columnLookup[rowNumber + j][coltally] = this;
|
|
|
388 }
|
|
|
389 }
|
|
|
390
|
|
|
391 coltally++;
|
|
|
392 });
|
|
|
393 });
|
|
|
394
|
|
|
395 var headerRowIndeces = this._getHeaderRowIndeces();
|
|
|
396 for (var colNumber = 0; colNumber < columnLookup[0].length; colNumber++) {
|
|
|
397 for (var headerIndex = 0, k = headerRowIndeces.length; headerIndex < k; headerIndex++) {
|
|
|
398 var headerCol = columnLookup[headerRowIndeces[headerIndex]][colNumber];
|
|
|
399
|
|
|
400 var rowNumber = headerRowIndeces[headerIndex];
|
|
|
401 var rowCell;
|
|
|
402
|
|
|
403 if (!headerCol.cells) {
|
|
|
404 headerCol.cells = [];
|
|
|
405 }
|
|
|
406
|
|
|
407 while (rowNumber < columnLookup.length) {
|
|
|
408 rowCell = columnLookup[rowNumber][colNumber];
|
|
|
409
|
|
|
410 if (headerCol !== rowCell) {
|
|
|
411 headerCol.cells.push(rowCell);
|
|
|
412 }
|
|
|
413
|
|
|
414 rowNumber++;
|
|
|
415 }
|
|
|
416 }
|
|
|
417 }
|
|
|
418
|
|
|
419 this.headerMapping = columnLookup;
|
|
|
420 };
|
|
|
421
|
|
|
422 Table.prototype.refresh = function() {
|
|
|
423 this._initCells();
|
|
|
424
|
|
|
425 this.$table.trigger(events.refresh, [this]);
|
|
|
426 };
|
|
|
427
|
|
|
428 Table.prototype._getToolbarAnchor = function() {
|
|
|
429 var $parent = this.$table.parent();
|
|
|
430 if ($parent.is(".tablesaw-overflow")) {
|
|
|
431 return $parent;
|
|
|
432 }
|
|
|
433 return this.$table;
|
|
|
434 };
|
|
|
435
|
|
|
436 Table.prototype._getToolbar = function($anchor) {
|
|
|
437 if (!$anchor) {
|
|
|
438 $anchor = this._getToolbarAnchor();
|
|
|
439 }
|
|
|
440 return $anchor.prev().filter("." + classes.toolbar);
|
|
|
441 };
|
|
|
442
|
|
|
443 Table.prototype.createToolbar = function() {
|
|
|
444 // Insert the toolbar
|
|
|
445 // TODO move this into a separate component
|
|
|
446 var $anchor = this._getToolbarAnchor();
|
|
|
447 var $toolbar = this._getToolbar($anchor);
|
|
|
448 if (!$toolbar.length) {
|
|
|
449 $toolbar = $("<div>")
|
|
|
450 .addClass(classes.toolbar)
|
|
|
451 .insertBefore($anchor);
|
|
|
452 }
|
|
|
453 this.$toolbar = $toolbar;
|
|
|
454
|
|
|
455 if (this.mode) {
|
|
|
456 this.$toolbar.addClass("tablesaw-mode-" + this.mode);
|
|
|
457 }
|
|
|
458 };
|
|
|
459
|
|
|
460 Table.prototype.destroy = function() {
|
|
|
461 // Don’t remove the toolbar, just erase the classes on it.
|
|
|
462 // Some of the table features are not yet destroy-friendly.
|
|
|
463 this._getToolbar().each(function() {
|
|
|
464 this.className = this.className.replace(/\btablesaw-mode\-\w*\b/gi, "");
|
|
|
465 });
|
|
|
466
|
|
|
467 var tableId = this.$table.attr("id");
|
|
|
468 $(document).off("." + tableId);
|
|
|
469 $(window).off("." + tableId);
|
|
|
470
|
|
|
471 // other plugins
|
|
|
472 this.$table.trigger(events.destroy, [this]);
|
|
|
473
|
|
|
474 this.$table.removeData(pluginName);
|
|
|
475 };
|
|
|
476
|
|
|
477 // Collection method.
|
|
|
478 $.fn[pluginName] = function() {
|
|
|
479 return this.each(function() {
|
|
|
480 var $t = $(this);
|
|
|
481
|
|
|
482 if ($t.data(pluginName)) {
|
|
|
483 return;
|
|
|
484 }
|
|
|
485
|
|
|
486 new Table(this);
|
|
|
487 });
|
|
|
488 };
|
|
|
489
|
|
|
490 var $doc = $(document);
|
|
|
491 $doc.on("enhance.tablesaw", function(e) {
|
|
|
492 // Cut the mustard
|
|
|
493 if (Tablesaw.mustard) {
|
|
|
494 $(e.target)
|
|
|
495 .find(initSelector)
|
|
|
496 .filter(initFilterSelector)
|
|
|
497 [pluginName]();
|
|
|
498 }
|
|
|
499 });
|
|
|
500
|
|
|
501 // Avoid a resize during scroll:
|
|
|
502 // Some Mobile devices trigger a resize during scroll (sometimes when
|
|
|
503 // doing elastic stretch at the end of the document or from the
|
|
|
504 // location bar hide)
|
|
|
505 var isScrolling = false;
|
|
|
506 var scrollTimeout;
|
|
|
507 $doc.on("scroll.tablesaw", function() {
|
|
|
508 isScrolling = true;
|
|
|
509
|
|
|
510 window.clearTimeout(scrollTimeout);
|
|
|
511 scrollTimeout = window.setTimeout(function() {
|
|
|
512 isScrolling = false;
|
|
|
513 }, 300); // must be greater than the resize timeout below
|
|
|
514 });
|
|
|
515
|
|
|
516 var resizeTimeout;
|
|
|
517 $(window).on("resize", function() {
|
|
|
518 if (!isScrolling) {
|
|
|
519 window.clearTimeout(resizeTimeout);
|
|
|
520 resizeTimeout = window.setTimeout(function() {
|
|
|
521 $doc.trigger(events.resize);
|
|
|
522 }, 150); // must be less than the scrolling timeout above.
|
|
|
523 }
|
|
|
524 });
|
|
|
525
|
|
|
526 Tablesaw.Table = Table;
|
|
|
527 })();
|
|
|
528
|
|
|
529 (function() {
|
|
|
530 var classes = {
|
|
|
531 stackTable: "tablesaw-stack",
|
|
|
532 cellLabels: "tablesaw-cell-label",
|
|
|
533 cellContentLabels: "tablesaw-cell-content"
|
|
|
534 };
|
|
|
535
|
|
|
536 var data = {
|
|
|
537 key: "tablesaw-stack"
|
|
|
538 };
|
|
|
539
|
|
|
540 var attrs = {
|
|
|
541 labelless: "data-tablesaw-no-labels",
|
|
|
542 hideempty: "data-tablesaw-hide-empty"
|
|
|
543 };
|
|
|
544
|
|
|
545 var Stack = function(element, tablesaw) {
|
|
|
546 this.tablesaw = tablesaw;
|
|
|
547 this.$table = $(element);
|
|
|
548
|
|
|
549 this.labelless = this.$table.is("[" + attrs.labelless + "]");
|
|
|
550 this.hideempty = this.$table.is("[" + attrs.hideempty + "]");
|
|
|
551
|
|
|
552 this.$table.data(data.key, this);
|
|
|
553 };
|
|
|
554
|
|
|
555 Stack.prototype.init = function() {
|
|
|
556 this.$table.addClass(classes.stackTable);
|
|
|
557
|
|
|
558 if (this.labelless) {
|
|
|
559 return;
|
|
|
560 }
|
|
|
561
|
|
|
562 var self = this;
|
|
|
563
|
|
|
564 this.$table
|
|
|
565 .find("th, td")
|
|
|
566 .filter(function() {
|
|
|
567 return !$(this).closest("thead").length;
|
|
|
568 })
|
|
|
569 .filter(function() {
|
|
|
570 return (
|
|
|
571 !$(this)
|
|
|
572 .closest("tr")
|
|
|
573 .is("[" + attrs.labelless + "]") &&
|
|
|
574 (!self.hideempty || !!$(this).html())
|
|
|
575 );
|
|
|
576 })
|
|
|
577 .each(function() {
|
|
|
578 var $newHeader = $(document.createElement("b")).addClass(classes.cellLabels);
|
|
|
579 var $cell = $(this);
|
|
|
580
|
|
|
581 $(self.tablesaw._findPrimaryHeadersForCell(this)).each(function(index) {
|
|
|
582 var $header = $(this.cloneNode(true));
|
|
|
583 // TODO decouple from sortable better
|
|
|
584 // Changed from .text() in https://github.com/filamentgroup/tablesaw/commit/b9c12a8f893ec192830ec3ba2d75f062642f935b
|
|
|
585 // to preserve structural html in headers, like <a>
|
|
|
586 var $sortableButton = $header.find(".tablesaw-sortable-btn");
|
|
|
587 $header.find(".tablesaw-sortable-arrow").remove();
|
|
|
588
|
|
|
589 // TODO decouple from checkall better
|
|
|
590 var $checkall = $header.find("[data-tablesaw-checkall]");
|
|
|
591 $checkall.closest("label").remove();
|
|
|
592 if ($checkall.length) {
|
|
|
593 $newHeader = $([]);
|
|
|
594 return;
|
|
|
595 }
|
|
|
596
|
|
|
597 if (index > 0) {
|
|
|
598 $newHeader.append(document.createTextNode(", "));
|
|
|
599 }
|
|
|
600 $newHeader.append(
|
|
|
601 $sortableButton.length ? $sortableButton[0].childNodes : $header[0].childNodes
|
|
|
602 );
|
|
|
603 });
|
|
|
604
|
|
|
605 if ($newHeader.length && !$cell.find("." + classes.cellContentLabels).length) {
|
|
|
606 $cell.wrapInner("<span class='" + classes.cellContentLabels + "'></span>");
|
|
|
607 }
|
|
|
608
|
|
|
609 // Update if already exists.
|
|
|
610 var $label = $cell.find("." + classes.cellLabels);
|
|
|
611 if (!$label.length) {
|
|
|
612 $cell.prepend($newHeader);
|
|
|
613 } else {
|
|
|
614 // only if changed
|
|
|
615 $label.replaceWith($newHeader);
|
|
|
616 }
|
|
|
617 });
|
|
|
618 };
|
|
|
619
|
|
|
620 Stack.prototype.destroy = function() {
|
|
|
621 this.$table.removeClass(classes.stackTable);
|
|
|
622 this.$table.find("." + classes.cellLabels).remove();
|
|
|
623 this.$table.find("." + classes.cellContentLabels).each(function() {
|
|
|
624 $(this).replaceWith(this.childNodes);
|
|
|
625 });
|
|
|
626 };
|
|
|
627
|
|
|
628 // on tablecreate, init
|
|
|
629 $(document)
|
|
|
630 .on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
631 if (tablesaw.mode === "stack") {
|
|
|
632 var table = new Stack(tablesaw.table, tablesaw);
|
|
|
633 table.init();
|
|
|
634 }
|
|
|
635 })
|
|
|
636 .on(Tablesaw.events.refresh, function(e, tablesaw) {
|
|
|
637 if (tablesaw.mode === "stack") {
|
|
|
638 $(tablesaw.table)
|
|
|
639 .data(data.key)
|
|
|
640 .init();
|
|
|
641 }
|
|
|
642 })
|
|
|
643 .on(Tablesaw.events.destroy, function(e, tablesaw) {
|
|
|
644 if (tablesaw.mode === "stack") {
|
|
|
645 $(tablesaw.table)
|
|
|
646 .data(data.key)
|
|
|
647 .destroy();
|
|
|
648 }
|
|
|
649 });
|
|
|
650
|
|
|
651 Tablesaw.Stack = Stack;
|
|
|
652 })();
|
|
|
653
|
|
|
654 (function() {
|
|
|
655 var pluginName = "tablesawbtn",
|
|
|
656 methods = {
|
|
|
657 _create: function() {
|
|
|
658 return $(this).each(function() {
|
|
|
659 $(this)
|
|
|
660 .trigger("beforecreate." + pluginName)
|
|
|
661 [pluginName]("_init")
|
|
|
662 .trigger("create." + pluginName);
|
|
|
663 });
|
|
|
664 },
|
|
|
665 _init: function() {
|
|
|
666 var oEl = $(this),
|
|
|
667 sel = this.getElementsByTagName("select")[0];
|
|
|
668
|
|
|
669 if (sel) {
|
|
|
670 // TODO next major version: remove .btn-select
|
|
|
671 $(this)
|
|
|
672 .addClass("btn-select tablesaw-btn-select")
|
|
|
673 [pluginName]("_select", sel);
|
|
|
674 }
|
|
|
675 return oEl;
|
|
|
676 },
|
|
|
677 _select: function(sel) {
|
|
|
678 var update = function(oEl, sel) {
|
|
|
679 var opts = $(sel).find("option");
|
|
|
680 var label = document.createElement("span");
|
|
|
681 var el;
|
|
|
682 var children;
|
|
|
683 var found = false;
|
|
|
684
|
|
|
685 label.setAttribute("aria-hidden", "true");
|
|
|
686 label.innerHTML = " ";
|
|
|
687
|
|
|
688 opts.each(function() {
|
|
|
689 var opt = this;
|
|
|
690 if (opt.selected) {
|
|
|
691 label.innerHTML = opt.text;
|
|
|
692 }
|
|
|
693 });
|
|
|
694
|
|
|
695 children = oEl.childNodes;
|
|
|
696 if (opts.length > 0) {
|
|
|
697 for (var i = 0, l = children.length; i < l; i++) {
|
|
|
698 el = children[i];
|
|
|
699
|
|
|
700 if (el && el.nodeName.toUpperCase() === "SPAN") {
|
|
|
701 oEl.replaceChild(label, el);
|
|
|
702 found = true;
|
|
|
703 }
|
|
|
704 }
|
|
|
705
|
|
|
706 if (!found) {
|
|
|
707 oEl.insertBefore(label, oEl.firstChild);
|
|
|
708 }
|
|
|
709 }
|
|
|
710 };
|
|
|
711
|
|
|
712 update(this, sel);
|
|
|
713 // todo should this be tablesawrefresh?
|
|
|
714 $(this).on("change refresh", function() {
|
|
|
715 update(this, sel);
|
|
|
716 });
|
|
|
717 }
|
|
|
718 };
|
|
|
719
|
|
|
720 // Collection method.
|
|
|
721 $.fn[pluginName] = function(arrg, a, b, c) {
|
|
|
722 return this.each(function() {
|
|
|
723 // if it's a method
|
|
|
724 if (arrg && typeof arrg === "string") {
|
|
|
725 return $.fn[pluginName].prototype[arrg].call(this, a, b, c);
|
|
|
726 }
|
|
|
727
|
|
|
728 // don't re-init
|
|
|
729 if ($(this).data(pluginName + "active")) {
|
|
|
730 return $(this);
|
|
|
731 }
|
|
|
732
|
|
|
733 $(this).data(pluginName + "active", true);
|
|
|
734
|
|
|
735 $.fn[pluginName].prototype._create.call(this);
|
|
|
736 });
|
|
|
737 };
|
|
|
738
|
|
|
739 // add methods
|
|
|
740 $.extend($.fn[pluginName].prototype, methods);
|
|
|
741
|
|
|
742 // TODO OOP this and add to Tablesaw object
|
|
|
743 })();
|
|
|
744
|
|
|
745 (function() {
|
|
|
746 var data = {
|
|
|
747 key: "tablesaw-coltoggle"
|
|
|
748 };
|
|
|
749
|
|
|
750 var ColumnToggle = function(element) {
|
|
|
751 this.$table = $(element);
|
|
|
752
|
|
|
753 if (!this.$table.length) {
|
|
|
754 return;
|
|
|
755 }
|
|
|
756
|
|
|
757 this.tablesaw = this.$table.data("tablesaw");
|
|
|
758
|
|
|
759 this.attributes = {
|
|
|
760 btnTarget: "data-tablesaw-columntoggle-btn-target",
|
|
|
761 set: "data-tablesaw-columntoggle-set"
|
|
|
762 };
|
|
|
763
|
|
|
764 this.classes = {
|
|
|
765 columnToggleTable: "tablesaw-columntoggle",
|
|
|
766 columnBtnContain: "tablesaw-columntoggle-btnwrap tablesaw-advance",
|
|
|
767 columnBtn: "tablesaw-columntoggle-btn tablesaw-nav-btn down",
|
|
|
768 popup: "tablesaw-columntoggle-popup",
|
|
|
769 priorityPrefix: "tablesaw-priority-"
|
|
|
770 };
|
|
|
771
|
|
|
772 this.set = [];
|
|
|
773 this.$headers = this.tablesaw._getPrimaryHeaderCells();
|
|
|
774
|
|
|
775 this.$table.data(data.key, this);
|
|
|
776 };
|
|
|
777
|
|
|
778 // Column Toggle Sets (one column chooser can control multiple tables)
|
|
|
779 ColumnToggle.prototype.initSet = function() {
|
|
|
780 var set = this.$table.attr(this.attributes.set);
|
|
|
781 if (set) {
|
|
|
782 // Should not include the current table
|
|
|
783 var table = this.$table[0];
|
|
|
784 this.set = $("table[" + this.attributes.set + "='" + set + "']")
|
|
|
785 .filter(function() {
|
|
|
786 return this !== table;
|
|
|
787 })
|
|
|
788 .get();
|
|
|
789 }
|
|
|
790 };
|
|
|
791
|
|
|
792 ColumnToggle.prototype.init = function() {
|
|
|
793 if (!this.$table.length) {
|
|
|
794 return;
|
|
|
795 }
|
|
|
796
|
|
|
797 var tableId,
|
|
|
798 id,
|
|
|
799 $menuButton,
|
|
|
800 $popup,
|
|
|
801 $menu,
|
|
|
802 $btnContain,
|
|
|
803 self = this;
|
|
|
804
|
|
|
805 var cfg = this.tablesaw.getConfig({
|
|
|
806 getColumnToggleLabelTemplate: function(text) {
|
|
|
807 return "<label><input type='checkbox' checked>" + text + "</label>";
|
|
|
808 }
|
|
|
809 });
|
|
|
810
|
|
|
811 this.$table.addClass(this.classes.columnToggleTable);
|
|
|
812
|
|
|
813 tableId = this.$table.attr("id");
|
|
|
814 id = tableId + "-popup";
|
|
|
815 $btnContain = $("<div class='" + this.classes.columnBtnContain + "'></div>");
|
|
|
816 // TODO next major version: remove .btn
|
|
|
817 $menuButton = $(
|
|
|
818 "<a href='#" +
|
|
|
819 id +
|
|
|
820 "' class='btn tablesaw-btn btn-micro " +
|
|
|
821 this.classes.columnBtn +
|
|
|
822 "' data-popup-link>" +
|
|
|
823 "<span>" +
|
|
|
824 Tablesaw.i18n.columnToggleButton +
|
|
|
825 "</span></a>"
|
|
|
826 );
|
|
|
827 $popup = $("<div class='" + this.classes.popup + "' id='" + id + "'></div>");
|
|
|
828 $menu = $("<div class='btn-group'></div>");
|
|
|
829
|
|
|
830 this.$popup = $popup;
|
|
|
831
|
|
|
832 var hasNonPersistentHeaders = false;
|
|
|
833 this.$headers.each(function() {
|
|
|
834 var $this = $(this),
|
|
|
835 priority = $this.attr("data-tablesaw-priority"),
|
|
|
836 $cells = self.tablesaw._$getCells(this);
|
|
|
837
|
|
|
838 if (priority && priority !== "persist") {
|
|
|
839 $cells.addClass(self.classes.priorityPrefix + priority);
|
|
|
840
|
|
|
841 $(cfg.getColumnToggleLabelTemplate($this.text()))
|
|
|
842 .appendTo($menu)
|
|
|
843 .find('input[type="checkbox"]')
|
|
|
844 .data("tablesaw-header", this);
|
|
|
845
|
|
|
846 hasNonPersistentHeaders = true;
|
|
|
847 }
|
|
|
848 });
|
|
|
849
|
|
|
850 if (!hasNonPersistentHeaders) {
|
|
|
851 $menu.append("<label>" + Tablesaw.i18n.columnToggleError + "</label>");
|
|
|
852 }
|
|
|
853
|
|
|
854 $menu.appendTo($popup);
|
|
|
855
|
|
|
856 function onToggleCheckboxChange(checkbox) {
|
|
|
857 var checked = checkbox.checked;
|
|
|
858
|
|
|
859 var header = self.getHeaderFromCheckbox(checkbox);
|
|
|
860 var $cells = self.tablesaw._$getCells(header);
|
|
|
861
|
|
|
862 $cells[!checked ? "addClass" : "removeClass"]("tablesaw-toggle-cellhidden");
|
|
|
863 $cells[checked ? "addClass" : "removeClass"]("tablesaw-toggle-cellvisible");
|
|
|
864
|
|
|
865 self.updateColspanCells(header, checked);
|
|
|
866
|
|
|
867 self.$table.trigger("tablesawcolumns");
|
|
|
868 }
|
|
|
869
|
|
|
870 // bind change event listeners to inputs - TODO: move to a private method?
|
|
|
871 $menu.find('input[type="checkbox"]').on("change", function(e) {
|
|
|
872 onToggleCheckboxChange(e.target);
|
|
|
873
|
|
|
874 if (self.set.length) {
|
|
|
875 var index;
|
|
|
876 $(self.$popup)
|
|
|
877 .find("input[type='checkbox']")
|
|
|
878 .each(function(j) {
|
|
|
879 if (this === e.target) {
|
|
|
880 index = j;
|
|
|
881 return false;
|
|
|
882 }
|
|
|
883 });
|
|
|
884
|
|
|
885 $(self.set).each(function() {
|
|
|
886 var checkbox = $(this)
|
|
|
887 .data(data.key)
|
|
|
888 .$popup.find("input[type='checkbox']")
|
|
|
889 .get(index);
|
|
|
890 if (checkbox) {
|
|
|
891 checkbox.checked = e.target.checked;
|
|
|
892 onToggleCheckboxChange(checkbox);
|
|
|
893 }
|
|
|
894 });
|
|
|
895 }
|
|
|
896 });
|
|
|
897
|
|
|
898 $menuButton.appendTo($btnContain);
|
|
|
899
|
|
|
900 // Use a different target than the toolbar
|
|
|
901 var $btnTarget = $(this.$table.attr(this.attributes.btnTarget));
|
|
|
902 $btnContain.appendTo($btnTarget.length ? $btnTarget : this.tablesaw.$toolbar);
|
|
|
903
|
|
|
904 function closePopup(event) {
|
|
|
905 // Click came from inside the popup, ignore.
|
|
|
906 if (event && $(event.target).closest("." + self.classes.popup).length) {
|
|
|
907 return;
|
|
|
908 }
|
|
|
909
|
|
|
910 $(document).off("click." + tableId);
|
|
|
911 $menuButton.removeClass("up").addClass("down");
|
|
|
912 $btnContain.removeClass("visible");
|
|
|
913 }
|
|
|
914
|
|
|
915 var closeTimeout;
|
|
|
916 function openPopup() {
|
|
|
917 $btnContain.addClass("visible");
|
|
|
918 $menuButton.removeClass("down").addClass("up");
|
|
|
919
|
|
|
920 $(document).off("click." + tableId, closePopup);
|
|
|
921
|
|
|
922 window.clearTimeout(closeTimeout);
|
|
|
923 closeTimeout = window.setTimeout(function() {
|
|
|
924 $(document).on("click." + tableId, closePopup);
|
|
|
925 }, 15);
|
|
|
926 }
|
|
|
927
|
|
|
928 $menuButton.on("click.tablesaw", function(event) {
|
|
|
929 event.preventDefault();
|
|
|
930
|
|
|
931 if (!$btnContain.is(".visible")) {
|
|
|
932 openPopup();
|
|
|
933 } else {
|
|
|
934 closePopup();
|
|
|
935 }
|
|
|
936 });
|
|
|
937
|
|
|
938 $popup.appendTo($btnContain);
|
|
|
939
|
|
|
940 this.$menu = $menu;
|
|
|
941
|
|
|
942 // Fix for iOS not rendering shadows correctly when using `-webkit-overflow-scrolling`
|
|
|
943 var $overflow = this.$table.closest(".tablesaw-overflow");
|
|
|
944 if ($overflow.css("-webkit-overflow-scrolling")) {
|
|
|
945 var timeout;
|
|
|
946 $overflow.on("scroll", function() {
|
|
|
947 var $div = $(this);
|
|
|
948 window.clearTimeout(timeout);
|
|
|
949 timeout = window.setTimeout(function() {
|
|
|
950 $div.css("-webkit-overflow-scrolling", "auto");
|
|
|
951 window.setTimeout(function() {
|
|
|
952 $div.css("-webkit-overflow-scrolling", "touch");
|
|
|
953 }, 0);
|
|
|
954 }, 100);
|
|
|
955 });
|
|
|
956 }
|
|
|
957
|
|
|
958 $(window).on(Tablesaw.events.resize + "." + tableId, function() {
|
|
|
959 self.refreshToggle();
|
|
|
960 });
|
|
|
961
|
|
|
962 this.initSet();
|
|
|
963 this.refreshToggle();
|
|
|
964 };
|
|
|
965
|
|
|
966 ColumnToggle.prototype.getHeaderFromCheckbox = function(checkbox) {
|
|
|
967 return $(checkbox).data("tablesaw-header");
|
|
|
968 };
|
|
|
969
|
|
|
970 ColumnToggle.prototype.refreshToggle = function() {
|
|
|
971 var self = this;
|
|
|
972 var invisibleColumns = 0;
|
|
|
973 this.$menu.find("input").each(function() {
|
|
|
974 var header = self.getHeaderFromCheckbox(this);
|
|
|
975 this.checked =
|
|
|
976 self.tablesaw
|
|
|
977 ._$getCells(header)
|
|
|
978 .eq(0)
|
|
|
979 .css("display") === "table-cell";
|
|
|
980 });
|
|
|
981
|
|
|
982 this.updateColspanCells();
|
|
|
983 };
|
|
|
984
|
|
|
985 ColumnToggle.prototype.updateColspanCells = function(header, userAction) {
|
|
|
986 this.tablesaw.updateColspanCells("tablesaw-toggle-cellhidden", header, userAction);
|
|
|
987 };
|
|
|
988
|
|
|
989 ColumnToggle.prototype.destroy = function() {
|
|
|
990 this.$table.removeClass(this.classes.columnToggleTable);
|
|
|
991 this.$table.find("th, td").each(function() {
|
|
|
992 var $cell = $(this);
|
|
|
993 $cell.removeClass("tablesaw-toggle-cellhidden").removeClass("tablesaw-toggle-cellvisible");
|
|
|
994
|
|
|
995 this.className = this.className.replace(/\bui\-table\-priority\-\d\b/g, "");
|
|
|
996 });
|
|
|
997 };
|
|
|
998
|
|
|
999 // on tablecreate, init
|
|
|
1000 $(document).on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
1001 if (tablesaw.mode === "columntoggle") {
|
|
|
1002 var table = new ColumnToggle(tablesaw.table);
|
|
|
1003 table.init();
|
|
|
1004 }
|
|
|
1005 });
|
|
|
1006
|
|
|
1007 $(document).on(Tablesaw.events.destroy, function(e, tablesaw) {
|
|
|
1008 if (tablesaw.mode === "columntoggle") {
|
|
|
1009 $(tablesaw.table)
|
|
|
1010 .data(data.key)
|
|
|
1011 .destroy();
|
|
|
1012 }
|
|
|
1013 });
|
|
|
1014
|
|
|
1015 $(document).on(Tablesaw.events.refresh, function(e, tablesaw) {
|
|
|
1016 if (tablesaw.mode === "columntoggle") {
|
|
|
1017 $(tablesaw.table)
|
|
|
1018 .data(data.key)
|
|
|
1019 .refreshPriority();
|
|
|
1020 }
|
|
|
1021 });
|
|
|
1022
|
|
|
1023 Tablesaw.ColumnToggle = ColumnToggle;
|
|
|
1024 })();
|
|
|
1025
|
|
|
1026 (function() {
|
|
|
1027 function getSortValue(cell) {
|
|
|
1028 var text = [];
|
|
|
1029 $(cell.childNodes).each(function() {
|
|
|
1030 var $el = $(this);
|
|
|
1031 if ($el.is("input, select")) {
|
|
|
1032 text.push($el.val());
|
|
|
1033 } else if ($el.is(".tablesaw-cell-label")) {
|
|
|
1034 } else {
|
|
|
1035 text.push(($el.text() || "").replace(/^\s+|\s+$/g, ""));
|
|
|
1036 }
|
|
|
1037 });
|
|
|
1038
|
|
|
1039 return text.join("");
|
|
|
1040 }
|
|
|
1041
|
|
|
1042 var pluginName = "tablesaw-sortable",
|
|
|
1043 initSelector = "table[data-" + pluginName + "]",
|
|
|
1044 sortableSwitchSelector = "[data-" + pluginName + "-switch]",
|
|
|
1045 attrs = {
|
|
|
1046 sortCol: "data-tablesaw-sortable-col",
|
|
|
1047 defaultCol: "data-tablesaw-sortable-default-col",
|
|
|
1048 numericCol: "data-tablesaw-sortable-numeric",
|
|
|
1049 subRow: "data-tablesaw-subrow",
|
|
|
1050 ignoreRow: "data-tablesaw-ignorerow"
|
|
|
1051 },
|
|
|
1052 classes = {
|
|
|
1053 head: pluginName + "-head",
|
|
|
1054 ascend: pluginName + "-ascending",
|
|
|
1055 descend: pluginName + "-descending",
|
|
|
1056 switcher: pluginName + "-switch",
|
|
|
1057 tableToolbar: "tablesaw-bar-section",
|
|
|
1058 sortButton: pluginName + "-btn"
|
|
|
1059 },
|
|
|
1060 methods = {
|
|
|
1061 _create: function(o) {
|
|
|
1062 return $(this).each(function() {
|
|
|
1063 var init = $(this).data(pluginName + "-init");
|
|
|
1064 if (init) {
|
|
|
1065 return false;
|
|
|
1066 }
|
|
|
1067 $(this)
|
|
|
1068 .data(pluginName + "-init", true)
|
|
|
1069 .trigger("beforecreate." + pluginName)
|
|
|
1070 [pluginName]("_init", o)
|
|
|
1071 .trigger("create." + pluginName);
|
|
|
1072 });
|
|
|
1073 },
|
|
|
1074 _init: function() {
|
|
|
1075 var el = $(this);
|
|
|
1076 var tblsaw = el.data("tablesaw");
|
|
|
1077 var heads;
|
|
|
1078 var $switcher;
|
|
|
1079
|
|
|
1080 function addClassToHeads(h) {
|
|
|
1081 $.each(h, function(i, v) {
|
|
|
1082 $(v).addClass(classes.head);
|
|
|
1083 });
|
|
|
1084 }
|
|
|
1085
|
|
|
1086 function makeHeadsActionable(h, fn) {
|
|
|
1087 $.each(h, function(i, col) {
|
|
|
1088 var b = $("<button class='" + classes.sortButton + "'/>");
|
|
|
1089 b.on("click", { col: col }, fn);
|
|
|
1090 $(col)
|
|
|
1091 .wrapInner(b)
|
|
|
1092 .find("button")
|
|
|
1093 .append("<span class='tablesaw-sortable-arrow'>");
|
|
|
1094 });
|
|
|
1095 }
|
|
|
1096
|
|
|
1097 function clearOthers(headcells) {
|
|
|
1098 $.each(headcells, function(i, v) {
|
|
|
1099 var col = $(v);
|
|
|
1100 col.removeAttr(attrs.defaultCol);
|
|
|
1101 col.removeClass(classes.ascend);
|
|
|
1102 col.removeClass(classes.descend);
|
|
|
1103 });
|
|
|
1104 }
|
|
|
1105
|
|
|
1106 function headsOnAction(e) {
|
|
|
1107 if ($(e.target).is("a[href]")) {
|
|
|
1108 return;
|
|
|
1109 }
|
|
|
1110
|
|
|
1111 e.stopPropagation();
|
|
|
1112 var headCell = $(e.target).closest("[" + attrs.sortCol + "]"),
|
|
|
1113 v = e.data.col,
|
|
|
1114 newSortValue = heads.index(headCell[0]);
|
|
|
1115
|
|
|
1116 clearOthers(
|
|
|
1117 headCell
|
|
|
1118 .closest("thead")
|
|
|
1119 .find("th")
|
|
|
1120 .filter(function() {
|
|
|
1121 return this !== headCell[0];
|
|
|
1122 })
|
|
|
1123 );
|
|
|
1124 if (headCell.is("." + classes.descend) || !headCell.is("." + classes.ascend)) {
|
|
|
1125 el[pluginName]("sortBy", v, true);
|
|
|
1126 newSortValue += "_asc";
|
|
|
1127 } else {
|
|
|
1128 el[pluginName]("sortBy", v);
|
|
|
1129 newSortValue += "_desc";
|
|
|
1130 }
|
|
|
1131 if ($switcher) {
|
|
|
1132 $switcher
|
|
|
1133 .find("select")
|
|
|
1134 .val(newSortValue)
|
|
|
1135 .trigger("refresh");
|
|
|
1136 }
|
|
|
1137
|
|
|
1138 e.preventDefault();
|
|
|
1139 }
|
|
|
1140
|
|
|
1141 function handleDefault(heads) {
|
|
|
1142 $.each(heads, function(idx, el) {
|
|
|
1143 var $el = $(el);
|
|
|
1144 if ($el.is("[" + attrs.defaultCol + "]")) {
|
|
|
1145 if (!$el.is("." + classes.descend)) {
|
|
|
1146 $el.addClass(classes.ascend);
|
|
|
1147 }
|
|
|
1148 }
|
|
|
1149 });
|
|
|
1150 }
|
|
|
1151
|
|
|
1152 function addSwitcher(heads) {
|
|
|
1153 $switcher = $("<div>")
|
|
|
1154 .addClass(classes.switcher)
|
|
|
1155 .addClass(classes.tableToolbar);
|
|
|
1156
|
|
|
1157 var html = ["<label>" + Tablesaw.i18n.sort + ":"];
|
|
|
1158
|
|
|
1159 // TODO next major version: remove .btn
|
|
|
1160 html.push('<span class="btn tablesaw-btn"><select>');
|
|
|
1161 heads.each(function(j) {
|
|
|
1162 var $t = $(this);
|
|
|
1163 var isDefaultCol = $t.is("[" + attrs.defaultCol + "]");
|
|
|
1164 var isDescending = $t.is("." + classes.descend);
|
|
|
1165
|
|
|
1166 var hasNumericAttribute = $t.is("[" + attrs.numericCol + "]");
|
|
|
1167 var numericCount = 0;
|
|
|
1168 // Check only the first four rows to see if the column is numbers.
|
|
|
1169 var numericCountMax = 5;
|
|
|
1170
|
|
|
1171 $(this.cells.slice(0, numericCountMax)).each(function() {
|
|
|
1172 if (!isNaN(parseInt(getSortValue(this), 10))) {
|
|
|
1173 numericCount++;
|
|
|
1174 }
|
|
|
1175 });
|
|
|
1176 var isNumeric = numericCount === numericCountMax;
|
|
|
1177 if (!hasNumericAttribute) {
|
|
|
1178 $t.attr(attrs.numericCol, isNumeric ? "" : "false");
|
|
|
1179 }
|
|
|
1180
|
|
|
1181 html.push(
|
|
|
1182 "<option" +
|
|
|
1183 (isDefaultCol && !isDescending ? " selected" : "") +
|
|
|
1184 ' value="' +
|
|
|
1185 j +
|
|
|
1186 '_asc">' +
|
|
|
1187 $t.text() +
|
|
|
1188 " " +
|
|
|
1189 (isNumeric ? "↑" : "(A-Z)") +
|
|
|
1190 "</option>"
|
|
|
1191 );
|
|
|
1192 html.push(
|
|
|
1193 "<option" +
|
|
|
1194 (isDefaultCol && isDescending ? " selected" : "") +
|
|
|
1195 ' value="' +
|
|
|
1196 j +
|
|
|
1197 '_desc">' +
|
|
|
1198 $t.text() +
|
|
|
1199 " " +
|
|
|
1200 (isNumeric ? "↓" : "(Z-A)") +
|
|
|
1201 "</option>"
|
|
|
1202 );
|
|
|
1203 });
|
|
|
1204 html.push("</select></span></label>");
|
|
|
1205
|
|
|
1206 $switcher.html(html.join(""));
|
|
|
1207
|
|
|
1208 var $firstChild = tblsaw.$toolbar.children().eq(0);
|
|
|
1209 if ($firstChild.length) {
|
|
|
1210 $switcher.insertBefore($firstChild);
|
|
|
1211 } else {
|
|
|
1212 $switcher.appendTo(tblsaw.$toolbar);
|
|
|
1213 }
|
|
|
1214 $switcher.find(".tablesaw-btn").tablesawbtn();
|
|
|
1215 $switcher.find("select").on("change", function() {
|
|
|
1216 var val = $(this)
|
|
|
1217 .val()
|
|
|
1218 .split("_"),
|
|
|
1219 head = heads.eq(val[0]);
|
|
|
1220
|
|
|
1221 clearOthers(head.siblings());
|
|
|
1222 el[pluginName]("sortBy", head.get(0), val[1] === "asc");
|
|
|
1223 });
|
|
|
1224 }
|
|
|
1225
|
|
|
1226 el.addClass(pluginName);
|
|
|
1227
|
|
|
1228 heads = el
|
|
|
1229 .children()
|
|
|
1230 .filter("thead")
|
|
|
1231 .find("th[" + attrs.sortCol + "]");
|
|
|
1232
|
|
|
1233 addClassToHeads(heads);
|
|
|
1234 makeHeadsActionable(heads, headsOnAction);
|
|
|
1235 handleDefault(heads);
|
|
|
1236
|
|
|
1237 if (el.is(sortableSwitchSelector)) {
|
|
|
1238 addSwitcher(heads);
|
|
|
1239 }
|
|
|
1240 },
|
|
|
1241 sortRows: function(rows, colNum, ascending, col, tbody) {
|
|
|
1242 function convertCells(cellArr, belongingToTbody) {
|
|
|
1243 var cells = [];
|
|
|
1244 $.each(cellArr, function(i, cell) {
|
|
|
1245 var row = cell.parentNode;
|
|
|
1246 var $row = $(row);
|
|
|
1247 // next row is a subrow
|
|
|
1248 var subrows = [];
|
|
|
1249 var $next = $row.next();
|
|
|
1250 while ($next.is("[" + attrs.subRow + "]")) {
|
|
|
1251 subrows.push($next[0]);
|
|
|
1252 $next = $next.next();
|
|
|
1253 }
|
|
|
1254
|
|
|
1255 var tbody = row.parentNode;
|
|
|
1256
|
|
|
1257 // current row is a subrow
|
|
|
1258 if ($row.is("[" + attrs.subRow + "]")) {
|
|
|
1259 } else if (tbody === belongingToTbody) {
|
|
|
1260 cells.push({
|
|
|
1261 element: cell,
|
|
|
1262 cell: getSortValue(cell),
|
|
|
1263 row: row,
|
|
|
1264 subrows: subrows.length ? subrows : null,
|
|
|
1265 ignored: $row.is("[" + attrs.ignoreRow + "]")
|
|
|
1266 });
|
|
|
1267 }
|
|
|
1268 });
|
|
|
1269 return cells;
|
|
|
1270 }
|
|
|
1271
|
|
|
1272 function getSortFxn(ascending, forceNumeric) {
|
|
|
1273 var fn,
|
|
|
1274 regex = /[^\-\+\d\.]/g;
|
|
|
1275 if (ascending) {
|
|
|
1276 fn = function(a, b) {
|
|
|
1277 if (a.ignored || b.ignored) {
|
|
|
1278 return 0;
|
|
|
1279 }
|
|
|
1280 if (forceNumeric) {
|
|
|
1281 return (
|
|
|
1282 parseFloat(a.cell.replace(regex, "")) - parseFloat(b.cell.replace(regex, ""))
|
|
|
1283 );
|
|
|
1284 } else {
|
|
|
1285 return a.cell.toLowerCase() > b.cell.toLowerCase() ? 1 : -1;
|
|
|
1286 }
|
|
|
1287 };
|
|
|
1288 } else {
|
|
|
1289 fn = function(a, b) {
|
|
|
1290 if (a.ignored || b.ignored) {
|
|
|
1291 return 0;
|
|
|
1292 }
|
|
|
1293 if (forceNumeric) {
|
|
|
1294 return (
|
|
|
1295 parseFloat(b.cell.replace(regex, "")) - parseFloat(a.cell.replace(regex, ""))
|
|
|
1296 );
|
|
|
1297 } else {
|
|
|
1298 return a.cell.toLowerCase() < b.cell.toLowerCase() ? 1 : -1;
|
|
|
1299 }
|
|
|
1300 };
|
|
|
1301 }
|
|
|
1302 return fn;
|
|
|
1303 }
|
|
|
1304
|
|
|
1305 function convertToRows(sorted) {
|
|
|
1306 var newRows = [],
|
|
|
1307 i,
|
|
|
1308 l;
|
|
|
1309 for (i = 0, l = sorted.length; i < l; i++) {
|
|
|
1310 newRows.push(sorted[i].row);
|
|
|
1311 if (sorted[i].subrows) {
|
|
|
1312 newRows.push(sorted[i].subrows);
|
|
|
1313 }
|
|
|
1314 }
|
|
|
1315 return newRows;
|
|
|
1316 }
|
|
|
1317
|
|
|
1318 var fn;
|
|
|
1319 var sorted;
|
|
|
1320 var cells = convertCells(col.cells, tbody);
|
|
|
1321
|
|
|
1322 var customFn = $(col).data("tablesaw-sort");
|
|
|
1323
|
|
|
1324 fn =
|
|
|
1325 (customFn && typeof customFn === "function" ? customFn(ascending) : false) ||
|
|
|
1326 getSortFxn(
|
|
|
1327 ascending,
|
|
|
1328 $(col).is("[" + attrs.numericCol + "]") &&
|
|
|
1329 !$(col).is("[" + attrs.numericCol + '="false"]')
|
|
|
1330 );
|
|
|
1331
|
|
|
1332 sorted = cells.sort(fn);
|
|
|
1333
|
|
|
1334 rows = convertToRows(sorted);
|
|
|
1335
|
|
|
1336 return rows;
|
|
|
1337 },
|
|
|
1338 makeColDefault: function(col, a) {
|
|
|
1339 var c = $(col);
|
|
|
1340 c.attr(attrs.defaultCol, "true");
|
|
|
1341 if (a) {
|
|
|
1342 c.removeClass(classes.descend);
|
|
|
1343 c.addClass(classes.ascend);
|
|
|
1344 } else {
|
|
|
1345 c.removeClass(classes.ascend);
|
|
|
1346 c.addClass(classes.descend);
|
|
|
1347 }
|
|
|
1348 },
|
|
|
1349 sortBy: function(col, ascending) {
|
|
|
1350 var el = $(this);
|
|
|
1351 var colNum;
|
|
|
1352 var tbl = el.data("tablesaw");
|
|
|
1353 tbl.$tbody.each(function() {
|
|
|
1354 var tbody = this;
|
|
|
1355 var $tbody = $(this);
|
|
|
1356 var rows = tbl.getBodyRows(tbody);
|
|
|
1357 var sortedRows;
|
|
|
1358 var map = tbl.headerMapping[0];
|
|
|
1359 var j, k;
|
|
|
1360
|
|
|
1361 // find the column number that we’re sorting
|
|
|
1362 for (j = 0, k = map.length; j < k; j++) {
|
|
|
1363 if (map[j] === col) {
|
|
|
1364 colNum = j;
|
|
|
1365 break;
|
|
|
1366 }
|
|
|
1367 }
|
|
|
1368
|
|
|
1369 sortedRows = el[pluginName]("sortRows", rows, colNum, ascending, col, tbody);
|
|
|
1370
|
|
|
1371 // replace Table rows
|
|
|
1372 for (j = 0, k = sortedRows.length; j < k; j++) {
|
|
|
1373 $tbody.append(sortedRows[j]);
|
|
|
1374 }
|
|
|
1375 });
|
|
|
1376
|
|
|
1377 el[pluginName]("makeColDefault", col, ascending);
|
|
|
1378
|
|
|
1379 el.trigger("tablesaw-sorted");
|
|
|
1380 }
|
|
|
1381 };
|
|
|
1382
|
|
|
1383 // Collection method.
|
|
|
1384 $.fn[pluginName] = function(arrg) {
|
|
|
1385 var args = Array.prototype.slice.call(arguments, 1),
|
|
|
1386 returnVal;
|
|
|
1387
|
|
|
1388 // if it's a method
|
|
|
1389 if (arrg && typeof arrg === "string") {
|
|
|
1390 returnVal = $.fn[pluginName].prototype[arrg].apply(this[0], args);
|
|
|
1391 return typeof returnVal !== "undefined" ? returnVal : $(this);
|
|
|
1392 }
|
|
|
1393 // check init
|
|
|
1394 if (!$(this).data(pluginName + "-active")) {
|
|
|
1395 $(this).data(pluginName + "-active", true);
|
|
|
1396 $.fn[pluginName].prototype._create.call(this, arrg);
|
|
|
1397 }
|
|
|
1398 return $(this);
|
|
|
1399 };
|
|
|
1400 // add methods
|
|
|
1401 $.extend($.fn[pluginName].prototype, methods);
|
|
|
1402
|
|
|
1403 $(document).on(Tablesaw.events.create, function(e, Tablesaw) {
|
|
|
1404 if (Tablesaw.$table.is(initSelector)) {
|
|
|
1405 Tablesaw.$table[pluginName]();
|
|
|
1406 }
|
|
|
1407 });
|
|
|
1408
|
|
|
1409 // TODO OOP this and add to Tablesaw object
|
|
|
1410 })();
|
|
|
1411
|
|
|
1412 (function() {
|
|
|
1413 var classes = {
|
|
|
1414 hideBtn: "disabled",
|
|
|
1415 persistWidths: "tablesaw-fix-persist",
|
|
|
1416 hiddenCol: "tablesaw-swipe-cellhidden",
|
|
|
1417 persistCol: "tablesaw-swipe-cellpersist",
|
|
|
1418 allColumnsVisible: "tablesaw-all-cols-visible"
|
|
|
1419 };
|
|
|
1420 var attrs = {
|
|
|
1421 disableTouchEvents: "data-tablesaw-no-touch",
|
|
|
1422 ignorerow: "data-tablesaw-ignorerow",
|
|
|
1423 subrow: "data-tablesaw-subrow"
|
|
|
1424 };
|
|
|
1425
|
|
|
1426 function createSwipeTable(tbl, $table) {
|
|
|
1427 var tblsaw = $table.data("tablesaw");
|
|
|
1428
|
|
|
1429 var $btns = $("<div class='tablesaw-advance'></div>");
|
|
|
1430 // TODO next major version: remove .btn
|
|
|
1431 var $prevBtn = $(
|
|
|
1432 "<a href='#' class='btn tablesaw-nav-btn tablesaw-btn btn-micro left'>" +
|
|
|
1433 Tablesaw.i18n.swipePreviousColumn +
|
|
|
1434 "</a>"
|
|
|
1435 ).appendTo($btns);
|
|
|
1436 // TODO next major version: remove .btn
|
|
|
1437 var $nextBtn = $(
|
|
|
1438 "<a href='#' class='btn tablesaw-nav-btn tablesaw-btn btn-micro right'>" +
|
|
|
1439 Tablesaw.i18n.swipeNextColumn +
|
|
|
1440 "</a>"
|
|
|
1441 ).appendTo($btns);
|
|
|
1442
|
|
|
1443 var $headerCells = tbl._getPrimaryHeaderCells();
|
|
|
1444 var $headerCellsNoPersist = $headerCells.not('[data-tablesaw-priority="persist"]');
|
|
|
1445 var headerWidths = [];
|
|
|
1446 var $head = $(document.head || "head");
|
|
|
1447 var tableId = $table.attr("id");
|
|
|
1448
|
|
|
1449 if (!$headerCells.length) {
|
|
|
1450 throw new Error("tablesaw swipe: no header cells found.");
|
|
|
1451 }
|
|
|
1452
|
|
|
1453 $table.addClass("tablesaw-swipe");
|
|
|
1454
|
|
|
1455 function initMinHeaderWidths() {
|
|
|
1456 $table.css({
|
|
|
1457 width: "1px"
|
|
|
1458 });
|
|
|
1459
|
|
|
1460 // remove any hidden columns
|
|
|
1461 $table.find("." + classes.hiddenCol).removeClass(classes.hiddenCol);
|
|
|
1462
|
|
|
1463 headerWidths = [];
|
|
|
1464 // Calculate initial widths
|
|
|
1465 $headerCells.each(function() {
|
|
|
1466 headerWidths.push(this.offsetWidth);
|
|
|
1467 });
|
|
|
1468
|
|
|
1469 // reset props
|
|
|
1470 $table.css({
|
|
|
1471 width: ""
|
|
|
1472 });
|
|
|
1473 }
|
|
|
1474
|
|
|
1475 initMinHeaderWidths();
|
|
|
1476
|
|
|
1477 $btns.appendTo(tblsaw.$toolbar);
|
|
|
1478
|
|
|
1479 if (!tableId) {
|
|
|
1480 tableId = "tableswipe-" + Math.round(Math.random() * 10000);
|
|
|
1481 $table.attr("id", tableId);
|
|
|
1482 }
|
|
|
1483
|
|
|
1484 function showColumn(headerCell) {
|
|
|
1485 tblsaw._$getCells(headerCell).removeClass(classes.hiddenCol);
|
|
|
1486 }
|
|
|
1487
|
|
|
1488 function hideColumn(headerCell) {
|
|
|
1489 tblsaw._$getCells(headerCell).addClass(classes.hiddenCol);
|
|
|
1490 }
|
|
|
1491
|
|
|
1492 function persistColumn(headerCell) {
|
|
|
1493 tblsaw._$getCells(headerCell).addClass(classes.persistCol);
|
|
|
1494 }
|
|
|
1495
|
|
|
1496 function isPersistent(headerCell) {
|
|
|
1497 return $(headerCell).is('[data-tablesaw-priority="persist"]');
|
|
|
1498 }
|
|
|
1499
|
|
|
1500 function unmaintainWidths() {
|
|
|
1501 $table.removeClass(classes.persistWidths);
|
|
|
1502 $("#" + tableId + "-persist").remove();
|
|
|
1503 }
|
|
|
1504
|
|
|
1505 function maintainWidths() {
|
|
|
1506 var prefix = "#" + tableId + ".tablesaw-swipe ",
|
|
|
1507 styles = [],
|
|
|
1508 tableWidth = $table.width(),
|
|
|
1509 hash = [],
|
|
|
1510 newHash;
|
|
|
1511
|
|
|
1512 // save persistent column widths (as long as they take up less than 75% of table width)
|
|
|
1513 $headerCells.each(function(index) {
|
|
|
1514 var width;
|
|
|
1515 if (isPersistent(this)) {
|
|
|
1516 width = this.offsetWidth;
|
|
|
1517
|
|
|
1518 if (width < tableWidth * 0.75) {
|
|
|
1519 hash.push(index + "-" + width);
|
|
|
1520 styles.push(
|
|
|
1521 prefix +
|
|
|
1522 " ." +
|
|
|
1523 classes.persistCol +
|
|
|
1524 ":nth-child(" +
|
|
|
1525 (index + 1) +
|
|
|
1526 ") { width: " +
|
|
|
1527 width +
|
|
|
1528 "px; }"
|
|
|
1529 );
|
|
|
1530 }
|
|
|
1531 }
|
|
|
1532 });
|
|
|
1533 newHash = hash.join("_");
|
|
|
1534
|
|
|
1535 if (styles.length) {
|
|
|
1536 $table.addClass(classes.persistWidths);
|
|
|
1537 var $style = $("#" + tableId + "-persist");
|
|
|
1538 // If style element not yet added OR if the widths have changed
|
|
|
1539 if (!$style.length || $style.data("tablesaw-hash") !== newHash) {
|
|
|
1540 // Remove existing
|
|
|
1541 $style.remove();
|
|
|
1542
|
|
|
1543 $("<style>" + styles.join("\n") + "</style>")
|
|
|
1544 .attr("id", tableId + "-persist")
|
|
|
1545 .data("tablesaw-hash", newHash)
|
|
|
1546 .appendTo($head);
|
|
|
1547 }
|
|
|
1548 }
|
|
|
1549 }
|
|
|
1550
|
|
|
1551 function getNext() {
|
|
|
1552 var next = [],
|
|
|
1553 checkFound;
|
|
|
1554
|
|
|
1555 $headerCellsNoPersist.each(function(i) {
|
|
|
1556 var $t = $(this),
|
|
|
1557 isHidden = $t.css("display") === "none" || $t.is("." + classes.hiddenCol);
|
|
|
1558
|
|
|
1559 if (!isHidden && !checkFound) {
|
|
|
1560 checkFound = true;
|
|
|
1561 next[0] = i;
|
|
|
1562 } else if (isHidden && checkFound) {
|
|
|
1563 next[1] = i;
|
|
|
1564
|
|
|
1565 return false;
|
|
|
1566 }
|
|
|
1567 });
|
|
|
1568
|
|
|
1569 return next;
|
|
|
1570 }
|
|
|
1571
|
|
|
1572 function getPrev() {
|
|
|
1573 var next = getNext();
|
|
|
1574 return [next[1] - 1, next[0] - 1];
|
|
|
1575 }
|
|
|
1576
|
|
|
1577 function nextpair(fwd) {
|
|
|
1578 return fwd ? getNext() : getPrev();
|
|
|
1579 }
|
|
|
1580
|
|
|
1581 function canAdvance(pair) {
|
|
|
1582 return pair[1] > -1 && pair[1] < $headerCellsNoPersist.length;
|
|
|
1583 }
|
|
|
1584
|
|
|
1585 function matchesMedia() {
|
|
|
1586 var matchMedia = $table.attr("data-tablesaw-swipe-media");
|
|
|
1587 return !matchMedia || ("matchMedia" in window && window.matchMedia(matchMedia).matches);
|
|
|
1588 }
|
|
|
1589
|
|
|
1590 function fakeBreakpoints() {
|
|
|
1591 if (!matchesMedia()) {
|
|
|
1592 return;
|
|
|
1593 }
|
|
|
1594
|
|
|
1595 var containerWidth = $table.parent().width(),
|
|
|
1596 persist = [],
|
|
|
1597 sum = 0,
|
|
|
1598 sums = [],
|
|
|
1599 visibleNonPersistantCount = $headerCells.length;
|
|
|
1600
|
|
|
1601 $headerCells.each(function(index) {
|
|
|
1602 var $t = $(this),
|
|
|
1603 isPersist = $t.is('[data-tablesaw-priority="persist"]');
|
|
|
1604
|
|
|
1605 persist.push(isPersist);
|
|
|
1606 sum += headerWidths[index];
|
|
|
1607 sums.push(sum);
|
|
|
1608
|
|
|
1609 // is persistent or is hidden
|
|
|
1610 if (isPersist || sum > containerWidth) {
|
|
|
1611 visibleNonPersistantCount--;
|
|
|
1612 }
|
|
|
1613 });
|
|
|
1614
|
|
|
1615 // We need at least one column to swipe.
|
|
|
1616 var needsNonPersistentColumn = visibleNonPersistantCount === 0;
|
|
|
1617
|
|
|
1618 $headerCells.each(function(index) {
|
|
|
1619 if (sums[index] > containerWidth) {
|
|
|
1620 hideColumn(this);
|
|
|
1621 }
|
|
|
1622 });
|
|
|
1623
|
|
|
1624 $headerCells.each(function(index) {
|
|
|
1625 if (persist[index]) {
|
|
|
1626 // for visual box-shadow
|
|
|
1627 persistColumn(this);
|
|
|
1628 return;
|
|
|
1629 }
|
|
|
1630
|
|
|
1631 if (sums[index] <= containerWidth || needsNonPersistentColumn) {
|
|
|
1632 needsNonPersistentColumn = false;
|
|
|
1633 showColumn(this);
|
|
|
1634 tblsaw.updateColspanCells(classes.hiddenCol, this, true);
|
|
|
1635 }
|
|
|
1636 });
|
|
|
1637
|
|
|
1638 unmaintainWidths();
|
|
|
1639
|
|
|
1640 $table.trigger("tablesawcolumns");
|
|
|
1641 }
|
|
|
1642
|
|
|
1643 function advance(fwd) {
|
|
|
1644 var pair = nextpair(fwd);
|
|
|
1645 if (canAdvance(pair)) {
|
|
|
1646 if (isNaN(pair[0])) {
|
|
|
1647 if (fwd) {
|
|
|
1648 pair[0] = 0;
|
|
|
1649 } else {
|
|
|
1650 pair[0] = $headerCellsNoPersist.length - 1;
|
|
|
1651 }
|
|
|
1652 }
|
|
|
1653
|
|
|
1654 // TODO just blindly hiding the previous column and showing the next column can result in
|
|
|
1655 // column content overflow
|
|
|
1656 maintainWidths();
|
|
|
1657 hideColumn($headerCellsNoPersist.get(pair[0]));
|
|
|
1658 tblsaw.updateColspanCells(classes.hiddenCol, $headerCellsNoPersist.get(pair[0]), false);
|
|
|
1659
|
|
|
1660 showColumn($headerCellsNoPersist.get(pair[1]));
|
|
|
1661 tblsaw.updateColspanCells(classes.hiddenCol, $headerCellsNoPersist.get(pair[1]), true);
|
|
|
1662
|
|
|
1663 $table.trigger("tablesawcolumns");
|
|
|
1664 }
|
|
|
1665 }
|
|
|
1666
|
|
|
1667 $prevBtn.add($nextBtn).on("click", function(e) {
|
|
|
1668 advance(!!$(e.target).closest($nextBtn).length);
|
|
|
1669 e.preventDefault();
|
|
|
1670 });
|
|
|
1671
|
|
|
1672 function getCoord(event, key) {
|
|
|
1673 return (event.touches || event.originalEvent.touches)[0][key];
|
|
|
1674 }
|
|
|
1675
|
|
|
1676 if (!$table.is("[" + attrs.disableTouchEvents + "]")) {
|
|
|
1677 $table.on("touchstart.swipetoggle", function(e) {
|
|
|
1678 var originX = getCoord(e, "pageX");
|
|
|
1679 var originY = getCoord(e, "pageY");
|
|
|
1680 var x;
|
|
|
1681 var y;
|
|
|
1682 var scrollTop = window.pageYOffset;
|
|
|
1683
|
|
|
1684 $(window).off(Tablesaw.events.resize, fakeBreakpoints);
|
|
|
1685
|
|
|
1686 $(this)
|
|
|
1687 .on("touchmove.swipetoggle", function(e) {
|
|
|
1688 x = getCoord(e, "pageX");
|
|
|
1689 y = getCoord(e, "pageY");
|
|
|
1690 })
|
|
|
1691 .on("touchend.swipetoggle", function() {
|
|
|
1692 var cfg = tbl.getConfig({
|
|
|
1693 swipeHorizontalThreshold: 30,
|
|
|
1694 swipeVerticalThreshold: 30
|
|
|
1695 });
|
|
|
1696
|
|
|
1697 // This config code is a little awkward because shoestring doesn’t support deep $.extend
|
|
|
1698 // Trying to work around when devs only override one of (not both) horizontalThreshold or
|
|
|
1699 // verticalThreshold in their TablesawConfig.
|
|
|
1700 // @TODO major version bump: remove cfg.swipe, move to just use the swipePrefix keys
|
|
|
1701 var verticalThreshold = cfg.swipe
|
|
|
1702 ? cfg.swipe.verticalThreshold
|
|
|
1703 : cfg.swipeVerticalThreshold;
|
|
|
1704 var horizontalThreshold = cfg.swipe
|
|
|
1705 ? cfg.swipe.horizontalThreshold
|
|
|
1706 : cfg.swipeHorizontalThreshold;
|
|
|
1707
|
|
|
1708 var isPageScrolled = Math.abs(window.pageYOffset - scrollTop) >= verticalThreshold;
|
|
|
1709 var isVerticalSwipe = Math.abs(y - originY) >= verticalThreshold;
|
|
|
1710
|
|
|
1711 if (!isVerticalSwipe && !isPageScrolled) {
|
|
|
1712 if (x - originX < -1 * horizontalThreshold) {
|
|
|
1713 advance(true);
|
|
|
1714 }
|
|
|
1715 if (x - originX > horizontalThreshold) {
|
|
|
1716 advance(false);
|
|
|
1717 }
|
|
|
1718 }
|
|
|
1719
|
|
|
1720 window.setTimeout(function() {
|
|
|
1721 $(window).on(Tablesaw.events.resize, fakeBreakpoints);
|
|
|
1722 }, 300);
|
|
|
1723
|
|
|
1724 $(this).off("touchmove.swipetoggle touchend.swipetoggle");
|
|
|
1725 });
|
|
|
1726 });
|
|
|
1727 }
|
|
|
1728
|
|
|
1729 $table
|
|
|
1730 .on("tablesawcolumns.swipetoggle", function() {
|
|
|
1731 var canGoPrev = canAdvance(getPrev());
|
|
|
1732 var canGoNext = canAdvance(getNext());
|
|
|
1733 $prevBtn[canGoPrev ? "removeClass" : "addClass"](classes.hideBtn);
|
|
|
1734 $nextBtn[canGoNext ? "removeClass" : "addClass"](classes.hideBtn);
|
|
|
1735
|
|
|
1736 tblsaw.$toolbar[!canGoPrev && !canGoNext ? "addClass" : "removeClass"](
|
|
|
1737 classes.allColumnsVisible
|
|
|
1738 );
|
|
|
1739 })
|
|
|
1740 .on("tablesawnext.swipetoggle", function() {
|
|
|
1741 advance(true);
|
|
|
1742 })
|
|
|
1743 .on("tablesawprev.swipetoggle", function() {
|
|
|
1744 advance(false);
|
|
|
1745 })
|
|
|
1746 .on(Tablesaw.events.destroy + ".swipetoggle", function() {
|
|
|
1747 var $t = $(this);
|
|
|
1748
|
|
|
1749 $t.removeClass("tablesaw-swipe");
|
|
|
1750 tblsaw.$toolbar.find(".tablesaw-advance").remove();
|
|
|
1751 $(window).off(Tablesaw.events.resize, fakeBreakpoints);
|
|
|
1752
|
|
|
1753 $t.off(".swipetoggle");
|
|
|
1754 })
|
|
|
1755 .on(Tablesaw.events.refresh, function() {
|
|
|
1756 unmaintainWidths();
|
|
|
1757 initMinHeaderWidths();
|
|
|
1758 fakeBreakpoints();
|
|
|
1759 });
|
|
|
1760
|
|
|
1761 fakeBreakpoints();
|
|
|
1762 $(window).on(Tablesaw.events.resize, fakeBreakpoints);
|
|
|
1763 }
|
|
|
1764
|
|
|
1765 // on tablecreate, init
|
|
|
1766 $(document).on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
1767 if (tablesaw.mode === "swipe") {
|
|
|
1768 createSwipeTable(tablesaw, tablesaw.$table);
|
|
|
1769 }
|
|
|
1770 });
|
|
|
1771
|
|
|
1772 // TODO OOP this and add to Tablesaw object
|
|
|
1773 })();
|
|
|
1774
|
|
|
1775 (function() {
|
|
|
1776 var MiniMap = {
|
|
|
1777 attr: {
|
|
|
1778 init: "data-tablesaw-minimap"
|
|
|
1779 },
|
|
|
1780 show: function(table) {
|
|
|
1781 var mq = table.getAttribute(MiniMap.attr.init);
|
|
|
1782
|
|
|
1783 if (mq === "") {
|
|
|
1784 // value-less but exists
|
|
|
1785 return true;
|
|
|
1786 } else if (mq && "matchMedia" in window) {
|
|
|
1787 // has a mq value
|
|
|
1788 return window.matchMedia(mq).matches;
|
|
|
1789 }
|
|
|
1790
|
|
|
1791 return false;
|
|
|
1792 }
|
|
|
1793 };
|
|
|
1794
|
|
|
1795 function createMiniMap($table) {
|
|
|
1796 var tblsaw = $table.data("tablesaw");
|
|
|
1797 var $btns = $('<div class="tablesaw-advance minimap">');
|
|
|
1798 var $dotNav = $('<ul class="tablesaw-advance-dots">').appendTo($btns);
|
|
|
1799 var hideDot = "tablesaw-advance-dots-hide";
|
|
|
1800 var $headerCells = $table.data("tablesaw")._getPrimaryHeaderCells();
|
|
|
1801
|
|
|
1802 // populate dots
|
|
|
1803 $headerCells.each(function() {
|
|
|
1804 $dotNav.append("<li><i></i></li>");
|
|
|
1805 });
|
|
|
1806
|
|
|
1807 $btns.appendTo(tblsaw.$toolbar);
|
|
|
1808
|
|
|
1809 function showHideNav() {
|
|
|
1810 if (!MiniMap.show($table[0])) {
|
|
|
1811 $btns.css("display", "none");
|
|
|
1812 return;
|
|
|
1813 }
|
|
|
1814 $btns.css("display", "block");
|
|
|
1815
|
|
|
1816 // show/hide dots
|
|
|
1817 var dots = $dotNav.find("li").removeClass(hideDot);
|
|
|
1818 $table.find("thead th").each(function(i) {
|
|
|
1819 if ($(this).css("display") === "none") {
|
|
|
1820 dots.eq(i).addClass(hideDot);
|
|
|
1821 }
|
|
|
1822 });
|
|
|
1823 }
|
|
|
1824
|
|
|
1825 // run on init and resize
|
|
|
1826 showHideNav();
|
|
|
1827 $(window).on(Tablesaw.events.resize, showHideNav);
|
|
|
1828
|
|
|
1829 $table
|
|
|
1830 .on("tablesawcolumns.minimap", function() {
|
|
|
1831 showHideNav();
|
|
|
1832 })
|
|
|
1833 .on(Tablesaw.events.destroy + ".minimap", function() {
|
|
|
1834 var $t = $(this);
|
|
|
1835
|
|
|
1836 tblsaw.$toolbar.find(".tablesaw-advance").remove();
|
|
|
1837 $(window).off(Tablesaw.events.resize, showHideNav);
|
|
|
1838
|
|
|
1839 $t.off(".minimap");
|
|
|
1840 });
|
|
|
1841 }
|
|
|
1842
|
|
|
1843 // on tablecreate, init
|
|
|
1844 $(document).on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
1845 if (
|
|
|
1846 (tablesaw.mode === "swipe" || tablesaw.mode === "columntoggle") &&
|
|
|
1847 tablesaw.$table.is("[ " + MiniMap.attr.init + "]")
|
|
|
1848 ) {
|
|
|
1849 createMiniMap(tablesaw.$table);
|
|
|
1850 }
|
|
|
1851 });
|
|
|
1852
|
|
|
1853 // TODO OOP this better
|
|
|
1854 Tablesaw.MiniMap = MiniMap;
|
|
|
1855 })();
|
|
|
1856
|
|
|
1857 (function() {
|
|
|
1858 var S = {
|
|
|
1859 selectors: {
|
|
|
1860 init: "table[data-tablesaw-mode-switch]"
|
|
|
1861 },
|
|
|
1862 attributes: {
|
|
|
1863 excludeMode: "data-tablesaw-mode-exclude"
|
|
|
1864 },
|
|
|
1865 classes: {
|
|
|
1866 main: "tablesaw-modeswitch",
|
|
|
1867 toolbar: "tablesaw-bar-section"
|
|
|
1868 },
|
|
|
1869 modes: ["stack", "swipe", "columntoggle"],
|
|
|
1870 init: function(table) {
|
|
|
1871 var $table = $(table);
|
|
|
1872 var tblsaw = $table.data("tablesaw");
|
|
|
1873 var ignoreMode = $table.attr(S.attributes.excludeMode);
|
|
|
1874 var $toolbar = tblsaw.$toolbar;
|
|
|
1875 var $switcher = $("<div>").addClass(S.classes.main + " " + S.classes.toolbar);
|
|
|
1876
|
|
|
1877 var html = [
|
|
|
1878 '<label><span class="abbreviated">' +
|
|
|
1879 Tablesaw.i18n.modeSwitchColumnsAbbreviated +
|
|
|
1880 '</span><span class="longform">' +
|
|
|
1881 Tablesaw.i18n.modeSwitchColumns +
|
|
|
1882 "</span>:"
|
|
|
1883 ],
|
|
|
1884 dataMode = $table.attr("data-tablesaw-mode"),
|
|
|
1885 isSelected;
|
|
|
1886
|
|
|
1887 // TODO next major version: remove .btn
|
|
|
1888 html.push('<span class="btn tablesaw-btn"><select>');
|
|
|
1889 for (var j = 0, k = S.modes.length; j < k; j++) {
|
|
|
1890 if (ignoreMode && ignoreMode.toLowerCase() === S.modes[j]) {
|
|
|
1891 continue;
|
|
|
1892 }
|
|
|
1893
|
|
|
1894 isSelected = dataMode === S.modes[j];
|
|
|
1895
|
|
|
1896 html.push(
|
|
|
1897 "<option" +
|
|
|
1898 (isSelected ? " selected" : "") +
|
|
|
1899 ' value="' +
|
|
|
1900 S.modes[j] +
|
|
|
1901 '">' +
|
|
|
1902 Tablesaw.i18n.modes[j] +
|
|
|
1903 "</option>"
|
|
|
1904 );
|
|
|
1905 }
|
|
|
1906 html.push("</select></span></label>");
|
|
|
1907
|
|
|
1908 $switcher.html(html.join(""));
|
|
|
1909
|
|
|
1910 var $otherToolbarItems = $toolbar.find(".tablesaw-advance").eq(0);
|
|
|
1911 if ($otherToolbarItems.length) {
|
|
|
1912 $switcher.insertBefore($otherToolbarItems);
|
|
|
1913 } else {
|
|
|
1914 $switcher.appendTo($toolbar);
|
|
|
1915 }
|
|
|
1916
|
|
|
1917 $switcher.find(".tablesaw-btn").tablesawbtn();
|
|
|
1918 $switcher.find("select").on("change", function(event) {
|
|
|
1919 return S.onModeChange.call(table, event, $(this).val());
|
|
|
1920 });
|
|
|
1921 },
|
|
|
1922 onModeChange: function(event, val) {
|
|
|
1923 var $table = $(this);
|
|
|
1924 var tblsaw = $table.data("tablesaw");
|
|
|
1925 var $switcher = tblsaw.$toolbar.find("." + S.classes.main);
|
|
|
1926
|
|
|
1927 $switcher.remove();
|
|
|
1928 tblsaw.destroy();
|
|
|
1929
|
|
|
1930 $table.attr("data-tablesaw-mode", val);
|
|
|
1931 $table.tablesaw();
|
|
|
1932 }
|
|
|
1933 };
|
|
|
1934
|
|
|
1935 $(document).on(Tablesaw.events.create, function(e, Tablesaw) {
|
|
|
1936 if (Tablesaw.$table.is(S.selectors.init)) {
|
|
|
1937 S.init(Tablesaw.table);
|
|
|
1938 }
|
|
|
1939 });
|
|
|
1940
|
|
|
1941 // TODO OOP this and add to Tablesaw object
|
|
|
1942 })();
|
|
|
1943
|
|
|
1944 (function() {
|
|
|
1945 var pluginName = "tablesawCheckAll";
|
|
|
1946
|
|
|
1947 function CheckAll(tablesaw) {
|
|
|
1948 this.tablesaw = tablesaw;
|
|
|
1949 this.$table = tablesaw.$table;
|
|
|
1950
|
|
|
1951 this.attr = "data-tablesaw-checkall";
|
|
|
1952 this.checkAllSelector = "[" + this.attr + "]";
|
|
|
1953 this.forceCheckedSelector = "[" + this.attr + "-checked]";
|
|
|
1954 this.forceUncheckedSelector = "[" + this.attr + "-unchecked]";
|
|
|
1955 this.checkboxSelector = 'input[type="checkbox"]';
|
|
|
1956
|
|
|
1957 this.$triggers = null;
|
|
|
1958 this.$checkboxes = null;
|
|
|
1959
|
|
|
1960 if (this.$table.data(pluginName)) {
|
|
|
1961 return;
|
|
|
1962 }
|
|
|
1963 this.$table.data(pluginName, this);
|
|
|
1964 this.init();
|
|
|
1965 }
|
|
|
1966
|
|
|
1967 CheckAll.prototype._filterCells = function($checkboxes) {
|
|
|
1968 return $checkboxes
|
|
|
1969 .filter(function() {
|
|
|
1970 return !$(this)
|
|
|
1971 .closest("tr")
|
|
|
1972 .is("[data-tablesaw-subrow],[data-tablesaw-ignorerow]");
|
|
|
1973 })
|
|
|
1974 .find(this.checkboxSelector)
|
|
|
1975 .not(this.checkAllSelector);
|
|
|
1976 };
|
|
|
1977
|
|
|
1978 // With buttons you can use a scoping selector like: data-tablesaw-checkall="#my-scoped-id input[type='checkbox']"
|
|
|
1979 CheckAll.prototype.getCheckboxesForButton = function(button) {
|
|
|
1980 return this._filterCells($($(button).attr(this.attr)));
|
|
|
1981 };
|
|
|
1982
|
|
|
1983 CheckAll.prototype.getCheckboxesForCheckbox = function(checkbox) {
|
|
|
1984 return this._filterCells($($(checkbox).closest("th")[0].cells));
|
|
|
1985 };
|
|
|
1986
|
|
|
1987 CheckAll.prototype.init = function() {
|
|
|
1988 var self = this;
|
|
|
1989 this.$table.find(this.checkAllSelector).each(function() {
|
|
|
1990 var $trigger = $(this);
|
|
|
1991 if ($trigger.is(self.checkboxSelector)) {
|
|
|
1992 self.addCheckboxEvents(this);
|
|
|
1993 } else {
|
|
|
1994 self.addButtonEvents(this);
|
|
|
1995 }
|
|
|
1996 });
|
|
|
1997 };
|
|
|
1998
|
|
|
1999 CheckAll.prototype.addButtonEvents = function(trigger) {
|
|
|
2000 var self = this;
|
|
|
2001
|
|
|
2002 // Update body checkboxes when header checkbox is changed
|
|
|
2003 $(trigger).on("click", function(event) {
|
|
|
2004 event.preventDefault();
|
|
|
2005
|
|
|
2006 var $checkboxes = self.getCheckboxesForButton(this);
|
|
|
2007
|
|
|
2008 var allChecked = true;
|
|
|
2009 $checkboxes.each(function() {
|
|
|
2010 if (!this.checked) {
|
|
|
2011 allChecked = false;
|
|
|
2012 }
|
|
|
2013 });
|
|
|
2014
|
|
|
2015 var setChecked;
|
|
|
2016 if ($(this).is(self.forceCheckedSelector)) {
|
|
|
2017 setChecked = true;
|
|
|
2018 } else if ($(this).is(self.forceUncheckedSelector)) {
|
|
|
2019 setChecked = false;
|
|
|
2020 } else {
|
|
|
2021 setChecked = allChecked ? false : true;
|
|
|
2022 }
|
|
|
2023
|
|
|
2024 $checkboxes.each(function() {
|
|
|
2025 this.checked = setChecked;
|
|
|
2026
|
|
|
2027 $(this).trigger("change." + pluginName);
|
|
|
2028 });
|
|
|
2029 });
|
|
|
2030 };
|
|
|
2031
|
|
|
2032 CheckAll.prototype.addCheckboxEvents = function(trigger) {
|
|
|
2033 var self = this;
|
|
|
2034
|
|
|
2035 // Update body checkboxes when header checkbox is changed
|
|
|
2036 $(trigger).on("change", function() {
|
|
|
2037 var setChecked = this.checked;
|
|
|
2038
|
|
|
2039 self.getCheckboxesForCheckbox(this).each(function() {
|
|
|
2040 this.checked = setChecked;
|
|
|
2041 });
|
|
|
2042 });
|
|
|
2043
|
|
|
2044 var $checkboxes = self.getCheckboxesForCheckbox(trigger);
|
|
|
2045
|
|
|
2046 // Update header checkbox when body checkboxes are changed
|
|
|
2047 $checkboxes.on("change." + pluginName, function() {
|
|
|
2048 var checkedCount = 0;
|
|
|
2049 $checkboxes.each(function() {
|
|
|
2050 if (this.checked) {
|
|
|
2051 checkedCount++;
|
|
|
2052 }
|
|
|
2053 });
|
|
|
2054
|
|
|
2055 var allSelected = checkedCount === $checkboxes.length;
|
|
|
2056
|
|
|
2057 trigger.checked = allSelected;
|
|
|
2058
|
|
|
2059 // only indeterminate if some are selected (not all and not none)
|
|
|
2060 trigger.indeterminate = checkedCount !== 0 && !allSelected;
|
|
|
2061 });
|
|
|
2062 };
|
|
|
2063
|
|
|
2064 // on tablecreate, init
|
|
|
2065 $(document).on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
2066 new CheckAll(tablesaw);
|
|
|
2067 });
|
|
|
2068
|
|
|
2069 Tablesaw.CheckAll = CheckAll;
|
|
|
2070 })();
|
|
|
2071
|
|
|
2072 return Tablesaw;
|
|
|
2073 }));
|
