This repository has been archived by the owner on Mar 1, 2019. It is now read-only.
forked from zurb/responsive-tables
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathresponsive-tables.js
117 lines (99 loc) · 3.06 KB
/
responsive-tables.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* @name responsive tables
* @version 1.0
* @lastmodified 2015-11-27
* @package html-css-js
* @subpackage jQuery plugin
* @author JR, VI
*
* based on: http://jqueryboilerplate.com/
*/
;(function ($, window, document, undefined) {
'use strict';
var pluginName = 'responsiveTables',
defaults = {
responsiveTableBreakpoint: 1024
};
// The actual plugin constructor
function Plugin(element, options) {
this.$element = $(element);
this.options = $.extend({}, defaults, options);
this.switched = false;
this.init();
}
// methods
var methods = {
init: function () {
var self = this;
$(window).load(function() {
self.updateTables();
});
$(window).on("redraw", function () {
self.switched = false;
self.updateTables();
});
$(window).on("resize", function(){
self.updateTables()
});
},
updateTables: function () {
var self = this;
if ((self.getWindowWidth() < self.options.responsiveTableBreakpoint) && !self.switched) {
self.switched = true;
self.splitTable(this.$element);
return true;
}
else if (self.switched && (this.getWindowWidth() >= self.options.responsiveTableBreakpoint)) {
self.switched = false;
self.unsplitTable(self.$element);
}
},
splitTable: function (original) {
original.wrap("<div class='table-wrapper' />");
var copy = original.clone();
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
copy.removeClass("responsive");
original.closest(".table-wrapper").append(copy);
copy.wrap("<div class='pinned' />");
original.wrap("<div class='scrollable' />");
this.setCellHeights(original, copy);
},
unsplitTable: function (original) {
original.closest(".table-wrapper").find(".pinned").remove();
original.unwrap();
original.unwrap();
},
setCellHeights: function (original, copy) {
var tr = original.find('tr'),
tr_copy = copy.find('tr'),
heights = [];
tr.each(function (index) {
var self = $(this),
tx = self.find('th, td');
tx.each(function () {
var height = $(this).height();
heights[index] = heights[index] || 0;
if (height > heights[index]) heights[index] = height;
});
});
tr_copy.each(function (index) {
$(this).height(heights[index]);
});
},
getWindowWidth: function () {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
};
// build
$.extend(Plugin.prototype, methods);
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function (options) {
this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
return this;
};
})(jQuery, window, document);