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