|
0
|
1 /*
|
|
|
2 * tablesaw: A set of plugins for responsive tables
|
|
|
3 * Stack and Column Toggle tables
|
|
|
4 * Copyright (c) 2013 Filament Group, Inc.
|
|
|
5 * MIT License
|
|
|
6 */
|
|
|
7
|
|
|
8 var domContentLoadedTriggered = false;
|
|
|
9 document.addEventListener("DOMContentLoaded", function() {
|
|
|
10 domContentLoadedTriggered = true;
|
|
|
11 });
|
|
|
12
|
|
|
13 var Tablesaw = {
|
|
|
14 i18n: {
|
|
|
15 modeStack: "Stack",
|
|
|
16 modeSwipe: "Swipe",
|
|
|
17 modeToggle: "Toggle",
|
|
|
18 modeSwitchColumnsAbbreviated: "Cols",
|
|
|
19 modeSwitchColumns: "Columns",
|
|
|
20 columnToggleButton: "Columns",
|
|
|
21 columnToggleError: "No eligible columns.",
|
|
|
22 sort: "Sort",
|
|
|
23 swipePreviousColumn: "Previous column",
|
|
|
24 swipeNextColumn: "Next column"
|
|
|
25 },
|
|
|
26 // cut the mustard
|
|
|
27 mustard:
|
|
|
28 "head" in document && // IE9+, Firefox 4+, Safari 5.1+, Mobile Safari 4.1+, Opera 11.5+, Android 2.3+
|
|
|
29 (!window.blackberry || window.WebKitPoint) && // only WebKit Blackberry (OS 6+)
|
|
|
30 !window.operamini,
|
|
|
31 $: $,
|
|
|
32 _init: function(element) {
|
|
|
33 Tablesaw.$(element || document).trigger("enhance.tablesaw");
|
|
|
34 },
|
|
|
35 init: function(element) {
|
|
|
36 if (!domContentLoadedTriggered) {
|
|
|
37 if ("addEventListener" in document) {
|
|
|
38 // Use raw DOMContentLoaded instead of shoestring (may have issues in Android 2.3, exhibited by stack table)
|
|
|
39 document.addEventListener("DOMContentLoaded", function() {
|
|
|
40 Tablesaw._init(element);
|
|
|
41 });
|
|
|
42 }
|
|
|
43 } else {
|
|
|
44 Tablesaw._init(element);
|
|
|
45 }
|
|
|
46 }
|
|
|
47 };
|
|
|
48
|
|
|
49 $(document).on("enhance.tablesaw", function() {
|
|
|
50 // Extend i18n config, if one exists.
|
|
|
51 if (typeof TablesawConfig !== "undefined" && TablesawConfig.i18n) {
|
|
|
52 Tablesaw.i18n = $.extend(Tablesaw.i18n, TablesawConfig.i18n || {});
|
|
|
53 }
|
|
|
54
|
|
|
55 Tablesaw.i18n.modes = [
|
|
|
56 Tablesaw.i18n.modeStack,
|
|
|
57 Tablesaw.i18n.modeSwipe,
|
|
|
58 Tablesaw.i18n.modeToggle
|
|
|
59 ];
|
|
|
60 });
|
|
|
61
|
|
|
62 if (Tablesaw.mustard) {
|
|
|
63 $(document.documentElement).addClass("tablesaw-enhanced");
|
|
|
64 }
|
|
|
65
|
|
|
66 (function() {
|
|
|
67 var pluginName = "tablesaw";
|
|
|
68 var classes = {
|
|
|
69 toolbar: "tablesaw-bar"
|
|
|
70 };
|
|
|
71 var events = {
|
|
|
72 create: "tablesawcreate",
|
|
|
73 destroy: "tablesawdestroy",
|
|
|
74 refresh: "tablesawrefresh",
|
|
|
75 resize: "tablesawresize"
|
|
|
76 };
|
|
|
77 var defaultMode = "stack";
|
|
|
78 var initSelector = "table";
|
|
|
79 var initFilterSelector = "[data-tablesaw],[data-tablesaw-mode],[data-tablesaw-sortable]";
|
|
|
80 var defaultConfig = {};
|
|
|
81
|
|
|
82 Tablesaw.events = events;
|
|
|
83
|
|
|
84 var Table = function(element) {
|
|
|
85 if (!element) {
|
|
|
86 throw new Error("Tablesaw requires an element.");
|
|
|
87 }
|
|
|
88
|
|
|
89 this.table = element;
|
|
|
90 this.$table = $(element);
|
|
|
91
|
|
|
92 // only one <thead> and <tfoot> are allowed, per the specification
|
|
|
93 this.$thead = this.$table
|
|
|
94 .children()
|
|
|
95 .filter("thead")
|
|
|
96 .eq(0);
|
|
|
97
|
|
|
98 // multiple <tbody> are allowed, per the specification
|
|
|
99 this.$tbody = this.$table.children().filter("tbody");
|
|
|
100
|
|
|
101 this.mode = this.$table.attr("data-tablesaw-mode") || defaultMode;
|
|
|
102
|
|
|
103 this.$toolbar = null;
|
|
|
104
|
|
|
105 this.attributes = {
|
|
|
106 subrow: "data-tablesaw-subrow",
|
|
|
107 ignorerow: "data-tablesaw-ignorerow"
|
|
|
108 };
|
|
|
109
|
|
|
110 this.init();
|
|
|
111 };
|
|
|
112
|
|
|
113 Table.prototype.init = function() {
|
|
|
114 if (!this.$thead.length) {
|
|
|
115 throw new Error("tablesaw: a <thead> is required, but none was found.");
|
|
|
116 }
|
|
|
117
|
|
|
118 if (!this.$thead.find("th").length) {
|
|
|
119 throw new Error("tablesaw: no header cells found. Are you using <th> inside of <thead>?");
|
|
|
120 }
|
|
|
121
|
|
|
122 // assign an id if there is none
|
|
|
123 if (!this.$table.attr("id")) {
|
|
|
124 this.$table.attr("id", pluginName + "-" + Math.round(Math.random() * 10000));
|
|
|
125 }
|
|
|
126
|
|
|
127 this.createToolbar();
|
|
|
128
|
|
|
129 this._initCells();
|
|
|
130
|
|
|
131 this.$table.data(pluginName, this);
|
|
|
132
|
|
|
133 this.$table.trigger(events.create, [this]);
|
|
|
134 };
|
|
|
135
|
|
|
136 Table.prototype.getConfig = function(pluginSpecificConfig) {
|
|
|
137 // shoestring extend doesn’t support arbitrary args
|
|
|
138 var configs = $.extend(defaultConfig, pluginSpecificConfig || {});
|
|
|
139 return $.extend(configs, typeof TablesawConfig !== "undefined" ? TablesawConfig : {});
|
|
|
140 };
|
|
|
141
|
|
|
142 Table.prototype._getPrimaryHeaderRow = function() {
|
|
|
143 return this._getHeaderRows().eq(0);
|
|
|
144 };
|
|
|
145
|
|
|
146 Table.prototype._getHeaderRows = function() {
|
|
|
147 return this.$thead
|
|
|
148 .children()
|
|
|
149 .filter("tr")
|
|
|
150 .filter(function() {
|
|
|
151 return !$(this).is("[data-tablesaw-ignorerow]");
|
|
|
152 });
|
|
|
153 };
|
|
|
154
|
|
|
155 Table.prototype._getRowIndex = function($row) {
|
|
|
156 return $row.prevAll().length;
|
|
|
157 };
|
|
|
158
|
|
|
159 Table.prototype._getHeaderRowIndeces = function() {
|
|
|
160 var self = this;
|
|
|
161 var indeces = [];
|
|
|
162 this._getHeaderRows().each(function() {
|
|
|
163 indeces.push(self._getRowIndex($(this)));
|
|
|
164 });
|
|
|
165 return indeces;
|
|
|
166 };
|
|
|
167
|
|
|
168 Table.prototype._getPrimaryHeaderCells = function($row) {
|
|
|
169 return ($row || this._getPrimaryHeaderRow()).find("th");
|
|
|
170 };
|
|
|
171
|
|
|
172 Table.prototype._$getCells = function(th) {
|
|
|
173 var self = this;
|
|
|
174 return $(th)
|
|
|
175 .add(th.cells)
|
|
|
176 .filter(function() {
|
|
|
177 var $t = $(this);
|
|
|
178 var $row = $t.parent();
|
|
|
179 var hasColspan = $t.is("[colspan]");
|
|
|
180 // no subrows or ignored rows (keep cells in ignored rows that do not have a colspan)
|
|
|
181 return (
|
|
|
182 !$row.is("[" + self.attributes.subrow + "]") &&
|
|
|
183 (!$row.is("[" + self.attributes.ignorerow + "]") || !hasColspan)
|
|
|
184 );
|
|
|
185 });
|
|
|
186 };
|
|
|
187
|
|
|
188 Table.prototype._getVisibleColspan = function() {
|
|
|
189 var colspan = 0;
|
|
|
190 this._getPrimaryHeaderCells().each(function() {
|
|
|
191 var $t = $(this);
|
|
|
192 if ($t.css("display") !== "none") {
|
|
|
193 colspan += parseInt($t.attr("colspan"), 10) || 1;
|
|
|
194 }
|
|
|
195 });
|
|
|
196 return colspan;
|
|
|
197 };
|
|
|
198
|
|
|
199 Table.prototype.getColspanForCell = function($cell) {
|
|
|
200 var visibleColspan = this._getVisibleColspan();
|
|
|
201 var visibleSiblingColumns = 0;
|
|
|
202 if ($cell.closest("tr").data("tablesaw-rowspanned")) {
|
|
|
203 visibleSiblingColumns++;
|
|
|
204 }
|
|
|
205
|
|
|
206 $cell.siblings().each(function() {
|
|
|
207 var $t = $(this);
|
|
|
208 var colColspan = parseInt($t.attr("colspan"), 10) || 1;
|
|
|
209
|
|
|
210 if ($t.css("display") !== "none") {
|
|
|
211 visibleSiblingColumns += colColspan;
|
|
|
212 }
|
|
|
213 });
|
|
|
214 // console.log( $cell[ 0 ], visibleColspan, visibleSiblingColumns );
|
|
|
215
|
|
|
216 return visibleColspan - visibleSiblingColumns;
|
|
|
217 };
|
|
|
218
|
|
|
219 Table.prototype.isCellInColumn = function(header, cell) {
|
|
|
220 return $(header)
|
|
|
221 .add(header.cells)
|
|
|
222 .filter(function() {
|
|
|
223 return this === cell;
|
|
|
224 }).length;
|
|
|
225 };
|
|
|
226
|
|
|
227 Table.prototype.updateColspanCells = function(cls, header, userAction) {
|
|
|
228 var self = this;
|
|
|
229 var primaryHeaderRow = self._getPrimaryHeaderRow();
|
|
|
230
|
|
|
231 // find persistent column rowspans
|
|
|
232 this.$table.find("[rowspan][data-tablesaw-priority]").each(function() {
|
|
|
233 var $t = $(this);
|
|
|
234 if ($t.attr("data-tablesaw-priority") !== "persist") {
|
|
|
235 return;
|
|
|
236 }
|
|
|
237
|
|
|
238 var $row = $t.closest("tr");
|
|
|
239 var rowspan = parseInt($t.attr("rowspan"), 10);
|
|
|
240 if (rowspan > 1) {
|
|
|
241 $row = $row.next();
|
|
|
242
|
|
|
243 $row.data("tablesaw-rowspanned", true);
|
|
|
244
|
|
|
245 rowspan--;
|
|
|
246 }
|
|
|
247 });
|
|
|
248
|
|
|
249 this.$table
|
|
|
250 .find("[colspan],[data-tablesaw-maxcolspan]")
|
|
|
251 .filter(function() {
|
|
|
252 // is not in primary header row
|
|
|
253 return $(this).closest("tr")[0] !== primaryHeaderRow[0];
|
|
|
254 })
|
|
|
255 .each(function() {
|
|
|
256 var $cell = $(this);
|
|
|
257
|
|
|
258 if (userAction === undefined || self.isCellInColumn(header, this)) {
|
|
|
259 } else {
|
|
|
260 // if is not a user action AND the cell is not in the updating column, kill it
|
|
|
261 return;
|
|
|
262 }
|
|
|
263
|
|
|
264 var colspan = self.getColspanForCell($cell);
|
|
|
265
|
|
|
266 if (cls && userAction !== undefined) {
|
|
|
267 // console.log( colspan === 0 ? "addClass" : "removeClass", $cell );
|
|
|
268 $cell[colspan === 0 ? "addClass" : "removeClass"](cls);
|
|
|
269 }
|
|
|
270
|
|
|
271 // cache original colspan
|
|
|
272 var maxColspan = parseInt($cell.attr("data-tablesaw-maxcolspan"), 10);
|
|
|
273 if (!maxColspan) {
|
|
|
274 $cell.attr("data-tablesaw-maxcolspan", $cell.attr("colspan"));
|
|
|
275 } else if (colspan > maxColspan) {
|
|
|
276 colspan = maxColspan;
|
|
|
277 }
|
|
|
278
|
|
|
279 // console.log( this, "setting colspan to ", colspan );
|
|
|
280 $cell.attr("colspan", colspan);
|
|
|
281 });
|
|
|
282 };
|
|
|
283
|
|
|
284 Table.prototype._findPrimaryHeadersForCell = function(cell) {
|
|
|
285 var $headerRow = this._getPrimaryHeaderRow();
|
|
|
286 var $headers = this._getPrimaryHeaderCells($headerRow);
|
|
|
287 var headerRowIndex = this._getRowIndex($headerRow);
|
|
|
288 var results = [];
|
|
|
289
|
|
|
290 for (var rowNumber = 0; rowNumber < this.headerMapping.length; rowNumber++) {
|
|
|
291 if (rowNumber === headerRowIndex) {
|
|
|
292 continue;
|
|
|
293 }
|
|
|
294 for (var colNumber = 0; colNumber < this.headerMapping[rowNumber].length; colNumber++) {
|
|
|
295 if (this.headerMapping[rowNumber][colNumber] === cell) {
|
|
|
296 results.push($headers[colNumber]);
|
|
|
297 }
|
|
|
298 }
|
|
|
299 }
|
|
|
300 return results;
|
|
|
301 };
|
|
|
302
|
|
|
303 // used by init cells
|
|
|
304 Table.prototype.getRows = function() {
|
|
|
305 var self = this;
|
|
|
306 return this.$table.find("tr").filter(function() {
|
|
|
307 return $(this)
|
|
|
308 .closest("table")
|
|
|
309 .is(self.$table);
|
|
|
310 });
|
|
|
311 };
|
|
|
312
|
|
|
313 // used by sortable
|
|
|
314 Table.prototype.getBodyRows = function(tbody) {
|
|
|
315 return (tbody ? $(tbody) : this.$tbody).children().filter("tr");
|
|
|
316 };
|
|
|
317
|
|
|
318 Table.prototype.getHeaderCellIndex = function(cell) {
|
|
|
319 var lookup = this.headerMapping[0];
|
|
|
320 for (var colIndex = 0; colIndex < lookup.length; colIndex++) {
|
|
|
321 if (lookup[colIndex] === cell) {
|
|
|
322 return colIndex;
|
|
|
323 }
|
|
|
324 }
|
|
|
325
|
|
|
326 return -1;
|
|
|
327 };
|
|
|
328
|
|
|
329 Table.prototype._initCells = function() {
|
|
|
330 // re-establish original colspans
|
|
|
331 this.$table.find("[data-tablesaw-maxcolspan]").each(function() {
|
|
|
332 var $t = $(this);
|
|
|
333 $t.attr("colspan", $t.attr("data-tablesaw-maxcolspan"));
|
|
|
334 });
|
|
|
335
|
|
|
336 var $rows = this.getRows();
|
|
|
337 var columnLookup = [];
|
|
|
338
|
|
|
339 $rows.each(function(rowNumber) {
|
|
|
340 columnLookup[rowNumber] = [];
|
|
|
341 });
|
|
|
342
|
|
|
343 $rows.each(function(rowNumber) {
|
|
|
344 var coltally = 0;
|
|
|
345 var $t = $(this);
|
|
|
346 var children = $t.children();
|
|
|
347
|
|
|
348 children.each(function() {
|
|
|
349 var colspan = parseInt(
|
|
|
350 this.getAttribute("data-tablesaw-maxcolspan") || this.getAttribute("colspan"),
|
|
|
351 10
|
|
|
352 );
|
|
|
353 var rowspan = parseInt(this.getAttribute("rowspan"), 10);
|
|
|
354
|
|
|
355 // set in a previous rowspan
|
|
|
356 while (columnLookup[rowNumber][coltally]) {
|
|
|
357 coltally++;
|
|
|
358 }
|
|
|
359
|
|
|
360 columnLookup[rowNumber][coltally] = this;
|
|
|
361
|
|
|
362 // TODO? both colspan and rowspan
|
|
|
363 if (colspan) {
|
|
|
364 for (var k = 0; k < colspan - 1; k++) {
|
|
|
365 coltally++;
|
|
|
366 columnLookup[rowNumber][coltally] = this;
|
|
|
367 }
|
|
|
368 }
|
|
|
369 if (rowspan) {
|
|
|
370 for (var j = 1; j < rowspan; j++) {
|
|
|
371 columnLookup[rowNumber + j][coltally] = this;
|
|
|
372 }
|
|
|
373 }
|
|
|
374
|
|
|
375 coltally++;
|
|
|
376 });
|
|
|
377 });
|
|
|
378
|
|
|
379 var headerRowIndeces = this._getHeaderRowIndeces();
|
|
|
380 for (var colNumber = 0; colNumber < columnLookup[0].length; colNumber++) {
|
|
|
381 for (var headerIndex = 0, k = headerRowIndeces.length; headerIndex < k; headerIndex++) {
|
|
|
382 var headerCol = columnLookup[headerRowIndeces[headerIndex]][colNumber];
|
|
|
383
|
|
|
384 var rowNumber = headerRowIndeces[headerIndex];
|
|
|
385 var rowCell;
|
|
|
386
|
|
|
387 if (!headerCol.cells) {
|
|
|
388 headerCol.cells = [];
|
|
|
389 }
|
|
|
390
|
|
|
391 while (rowNumber < columnLookup.length) {
|
|
|
392 rowCell = columnLookup[rowNumber][colNumber];
|
|
|
393
|
|
|
394 if (headerCol !== rowCell) {
|
|
|
395 headerCol.cells.push(rowCell);
|
|
|
396 }
|
|
|
397
|
|
|
398 rowNumber++;
|
|
|
399 }
|
|
|
400 }
|
|
|
401 }
|
|
|
402
|
|
|
403 this.headerMapping = columnLookup;
|
|
|
404 };
|
|
|
405
|
|
|
406 Table.prototype.refresh = function() {
|
|
|
407 this._initCells();
|
|
|
408
|
|
|
409 this.$table.trigger(events.refresh, [this]);
|
|
|
410 };
|
|
|
411
|
|
|
412 Table.prototype._getToolbarAnchor = function() {
|
|
|
413 var $parent = this.$table.parent();
|
|
|
414 if ($parent.is(".tablesaw-overflow")) {
|
|
|
415 return $parent;
|
|
|
416 }
|
|
|
417 return this.$table;
|
|
|
418 };
|
|
|
419
|
|
|
420 Table.prototype._getToolbar = function($anchor) {
|
|
|
421 if (!$anchor) {
|
|
|
422 $anchor = this._getToolbarAnchor();
|
|
|
423 }
|
|
|
424 return $anchor.prev().filter("." + classes.toolbar);
|
|
|
425 };
|
|
|
426
|
|
|
427 Table.prototype.createToolbar = function() {
|
|
|
428 // Insert the toolbar
|
|
|
429 // TODO move this into a separate component
|
|
|
430 var $anchor = this._getToolbarAnchor();
|
|
|
431 var $toolbar = this._getToolbar($anchor);
|
|
|
432 if (!$toolbar.length) {
|
|
|
433 $toolbar = $("<div>")
|
|
|
434 .addClass(classes.toolbar)
|
|
|
435 .insertBefore($anchor);
|
|
|
436 }
|
|
|
437 this.$toolbar = $toolbar;
|
|
|
438
|
|
|
439 if (this.mode) {
|
|
|
440 this.$toolbar.addClass("tablesaw-mode-" + this.mode);
|
|
|
441 }
|
|
|
442 };
|
|
|
443
|
|
|
444 Table.prototype.destroy = function() {
|
|
|
445 // Don’t remove the toolbar, just erase the classes on it.
|
|
|
446 // Some of the table features are not yet destroy-friendly.
|
|
|
447 this._getToolbar().each(function() {
|
|
|
448 this.className = this.className.replace(/\btablesaw-mode\-\w*\b/gi, "");
|
|
|
449 });
|
|
|
450
|
|
|
451 var tableId = this.$table.attr("id");
|
|
|
452 $(document).off("." + tableId);
|
|
|
453 $(window).off("." + tableId);
|
|
|
454
|
|
|
455 // other plugins
|
|
|
456 this.$table.trigger(events.destroy, [this]);
|
|
|
457
|
|
|
458 this.$table.removeData(pluginName);
|
|
|
459 };
|
|
|
460
|
|
|
461 // Collection method.
|
|
|
462 $.fn[pluginName] = function() {
|
|
|
463 return this.each(function() {
|
|
|
464 var $t = $(this);
|
|
|
465
|
|
|
466 if ($t.data(pluginName)) {
|
|
|
467 return;
|
|
|
468 }
|
|
|
469
|
|
|
470 new Table(this);
|
|
|
471 });
|
|
|
472 };
|
|
|
473
|
|
|
474 var $doc = $(document);
|
|
|
475 $doc.on("enhance.tablesaw", function(e) {
|
|
|
476 // Cut the mustard
|
|
|
477 if (Tablesaw.mustard) {
|
|
|
478 $(e.target)
|
|
|
479 .find(initSelector)
|
|
|
480 .filter(initFilterSelector)
|
|
|
481 [pluginName]();
|
|
|
482 }
|
|
|
483 });
|
|
|
484
|
|
|
485 // Avoid a resize during scroll:
|
|
|
486 // Some Mobile devices trigger a resize during scroll (sometimes when
|
|
|
487 // doing elastic stretch at the end of the document or from the
|
|
|
488 // location bar hide)
|
|
|
489 var isScrolling = false;
|
|
|
490 var scrollTimeout;
|
|
|
491 $doc.on("scroll.tablesaw", function() {
|
|
|
492 isScrolling = true;
|
|
|
493
|
|
|
494 window.clearTimeout(scrollTimeout);
|
|
|
495 scrollTimeout = window.setTimeout(function() {
|
|
|
496 isScrolling = false;
|
|
|
497 }, 300); // must be greater than the resize timeout below
|
|
|
498 });
|
|
|
499
|
|
|
500 var resizeTimeout;
|
|
|
501 $(window).on("resize", function() {
|
|
|
502 if (!isScrolling) {
|
|
|
503 window.clearTimeout(resizeTimeout);
|
|
|
504 resizeTimeout = window.setTimeout(function() {
|
|
|
505 $doc.trigger(events.resize);
|
|
|
506 }, 150); // must be less than the scrolling timeout above.
|
|
|
507 }
|
|
|
508 });
|
|
|
509
|
|
|
510 Tablesaw.Table = Table;
|
|
|
511 })();
|
