Mercurial > nebulaweb3
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 })(); |