|
0
|
1 /*
|
|
|
2 * tablesaw: A set of plugins for responsive tables
|
|
|
3 * minimap: a set of dots to show which columns are currently visible.
|
|
|
4 * Copyright (c) 2013 Filament Group, Inc.
|
|
|
5 * MIT License
|
|
|
6 */
|
|
|
7
|
|
|
8 (function() {
|
|
|
9 var MiniMap = {
|
|
|
10 attr: {
|
|
|
11 init: "data-tablesaw-minimap"
|
|
|
12 },
|
|
|
13 show: function(table) {
|
|
|
14 var mq = table.getAttribute(MiniMap.attr.init);
|
|
|
15
|
|
|
16 if (mq === "") {
|
|
|
17 // value-less but exists
|
|
|
18 return true;
|
|
|
19 } else if (mq && "matchMedia" in window) {
|
|
|
20 // has a mq value
|
|
|
21 return window.matchMedia(mq).matches;
|
|
|
22 }
|
|
|
23
|
|
|
24 return false;
|
|
|
25 }
|
|
|
26 };
|
|
|
27
|
|
|
28 function createMiniMap($table) {
|
|
|
29 var tblsaw = $table.data("tablesaw");
|
|
|
30 var $btns = $('<div class="tablesaw-advance minimap">');
|
|
|
31 var $dotNav = $('<ul class="tablesaw-advance-dots">').appendTo($btns);
|
|
|
32 var hideDot = "tablesaw-advance-dots-hide";
|
|
|
33 var $headerCells = $table.data("tablesaw")._getPrimaryHeaderCells();
|
|
|
34
|
|
|
35 // populate dots
|
|
|
36 $headerCells.each(function() {
|
|
|
37 $dotNav.append("<li><i></i></li>");
|
|
|
38 });
|
|
|
39
|
|
|
40 $btns.appendTo(tblsaw.$toolbar);
|
|
|
41
|
|
|
42 function showHideNav() {
|
|
|
43 if (!MiniMap.show($table[0])) {
|
|
|
44 $btns.css("display", "none");
|
|
|
45 return;
|
|
|
46 }
|
|
|
47 $btns.css("display", "block");
|
|
|
48
|
|
|
49 // show/hide dots
|
|
|
50 var dots = $dotNav.find("li").removeClass(hideDot);
|
|
|
51 $table.find("thead th").each(function(i) {
|
|
|
52 if ($(this).css("display") === "none") {
|
|
|
53 dots.eq(i).addClass(hideDot);
|
|
|
54 }
|
|
|
55 });
|
|
|
56 }
|
|
|
57
|
|
|
58 // run on init and resize
|
|
|
59 showHideNav();
|
|
|
60 $(window).on(Tablesaw.events.resize, showHideNav);
|
|
|
61
|
|
|
62 $table
|
|
|
63 .on("tablesawcolumns.minimap", function() {
|
|
|
64 showHideNav();
|
|
|
65 })
|
|
|
66 .on(Tablesaw.events.destroy + ".minimap", function() {
|
|
|
67 var $t = $(this);
|
|
|
68
|
|
|
69 tblsaw.$toolbar.find(".tablesaw-advance").remove();
|
|
|
70 $(window).off(Tablesaw.events.resize, showHideNav);
|
|
|
71
|
|
|
72 $t.off(".minimap");
|
|
|
73 });
|
|
|
74 }
|
|
|
75
|
|
|
76 // on tablecreate, init
|
|
|
77 $(document).on(Tablesaw.events.create, function(e, tablesaw) {
|
|
|
78 if (
|
|
|
79 (tablesaw.mode === "swipe" || tablesaw.mode === "columntoggle") &&
|
|
|
80 tablesaw.$table.is("[ " + MiniMap.attr.init + "]")
|
|
|
81 ) {
|
|
|
82 createMiniMap(tablesaw.$table);
|
|
|
83 }
|
|
|
84 });
|
|
|
85
|
|
|
86 // TODO OOP this better
|
|
|
87 Tablesaw.MiniMap = MiniMap;
|
|
|
88 })();
|
