comparison default/node_modules/tablesaw/src/tables.modeswitch.js @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 /*
2 * tablesaw: A set of plugins for responsive tables
3 * Mode Switch: UI element to allow the user to change table modes: stack/swipe/columntoggle
4 * Copyright (c) 2013 Filament Group, Inc.
5 * MIT License
6 */
7
8 (function() {
9 var S = {
10 selectors: {
11 init: "table[data-tablesaw-mode-switch]"
12 },
13 attributes: {
14 excludeMode: "data-tablesaw-mode-exclude"
15 },
16 classes: {
17 main: "tablesaw-modeswitch",
18 toolbar: "tablesaw-bar-section"
19 },
20 modes: ["stack", "swipe", "columntoggle"],
21 init: function(table) {
22 var $table = $(table);
23 var tblsaw = $table.data("tablesaw");
24 var ignoreMode = $table.attr(S.attributes.excludeMode);
25 var $toolbar = tblsaw.$toolbar;
26 var $switcher = $("<div>").addClass(S.classes.main + " " + S.classes.toolbar);
27
28 var html = [
29 '<label><span class="abbreviated">' +
30 Tablesaw.i18n.modeSwitchColumnsAbbreviated +
31 '</span><span class="longform">' +
32 Tablesaw.i18n.modeSwitchColumns +
33 "</span>:"
34 ],
35 dataMode = $table.attr("data-tablesaw-mode"),
36 isSelected;
37
38 // TODO next major version: remove .btn
39 html.push('<span class="btn tablesaw-btn"><select>');
40 for (var j = 0, k = S.modes.length; j < k; j++) {
41 if (ignoreMode && ignoreMode.toLowerCase() === S.modes[j]) {
42 continue;
43 }
44
45 isSelected = dataMode === S.modes[j];
46
47 html.push(
48 "<option" +
49 (isSelected ? " selected" : "") +
50 ' value="' +
51 S.modes[j] +
52 '">' +
53 Tablesaw.i18n.modes[j] +
54 "</option>"
55 );
56 }
57 html.push("</select></span></label>");
58
59 $switcher.html(html.join(""));
60
61 var $otherToolbarItems = $toolbar.find(".tablesaw-advance").eq(0);
62 if ($otherToolbarItems.length) {
63 $switcher.insertBefore($otherToolbarItems);
64 } else {
65 $switcher.appendTo($toolbar);
66 }
67
68 $switcher.find(".tablesaw-btn").tablesawbtn();
69 $switcher.find("select").on("change", function(event) {
70 return S.onModeChange.call(table, event, $(this).val());
71 });
72 },
73 onModeChange: function(event, val) {
74 var $table = $(this);
75 var tblsaw = $table.data("tablesaw");
76 var $switcher = tblsaw.$toolbar.find("." + S.classes.main);
77
78 $switcher.remove();
79 tblsaw.destroy();
80
81 $table.attr("data-tablesaw-mode", val);
82 $table.tablesaw();
83 }
84 };
85
86 $(document).on(Tablesaw.events.create, function(e, Tablesaw) {
87 if (Tablesaw.$table.is(S.selectors.init)) {
88 S.init(Tablesaw.table);
89 }
90 });
91
92 // TODO OOP this and add to Tablesaw object
93 })();