194 lines
7.0 KiB
JavaScript
194 lines
7.0 KiB
JavaScript
/* Developed based on an idea presented at http://foundation.zurb.com */
|
|
/* Artfully masterminded by ZURB */
|
|
|
|
jtQuery(document).ready(function () {
|
|
|
|
var switched = false;
|
|
var use_nicescroll = (typeof responsive_use_nicescroll != 'undefined')?responsive_use_nicescroll:false;
|
|
var nicescroll_options = { boxzoom:false, touchbehavior:false, cursoropacitymin:0, cursorwidth:5, cursorcolor:"#000000"};
|
|
if (use_nicescroll) {
|
|
if (typeof responsive_nicescroll_options != 'undefined') {
|
|
// a, b, c all found
|
|
for ( var nicescroll_prop in responsive_nicescroll_options ) {
|
|
nicescroll_options[nicescroll_prop] = responsive_nicescroll_options[nicescroll_prop];
|
|
}
|
|
}
|
|
}
|
|
|
|
var scrollbar_timer = false;
|
|
|
|
var updateScrollbars = function() {
|
|
if (use_nicescroll) {
|
|
jtQuery("table.responsive-fixed-scroll").each(function (i, element) {
|
|
var table_wrapper = jtQuery(element).closest(".table-wrapper");
|
|
var scrollable = table_wrapper.find('.scrollable');
|
|
var pinned = table_wrapper.find('.pinned');
|
|
|
|
if (pinned.length) {
|
|
if (pinned.getNiceScroll().length) {
|
|
pinned.niceScroll().updateScrollBar();
|
|
}
|
|
}
|
|
if (scrollable.length) {
|
|
if (scrollable.getNiceScroll().length) scrollable.niceScroll().updateScrollBar();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
var checkForTableUpdates = function() {
|
|
jtQuery("table.responsive-fixed-scroll").each(function (i, element) {
|
|
var table_wrapper = jtQuery(element).closest(".table-wrapper");
|
|
var scrollable = table_wrapper.find('.scrollable');
|
|
var pinned = table_wrapper.find('.pinned');
|
|
|
|
if (pinned.length && scrollable.length) {
|
|
adjustCellHeights(pinned, scrollable);
|
|
}
|
|
});
|
|
}
|
|
|
|
var updateTables = function () {
|
|
if ((jtQuery(window).width() < 1023) && !switched) {
|
|
switched = true;
|
|
jtQuery("table.responsive-fixed-scroll").each(function (i, element) {
|
|
splitTable(jtQuery(element));
|
|
});
|
|
checkForTableUpdates();
|
|
return true;
|
|
} else if (switched && (jtQuery(window).width() > 1023)) {
|
|
switched = false;
|
|
jtQuery("table.responsive-fixed-scroll").each(function (i, element) {
|
|
unsplitTable(jtQuery(element));
|
|
});
|
|
}
|
|
};
|
|
|
|
jtQuery(window).load(updateTables);
|
|
jtQuery(window).on("redraw", updateScrollbars);
|
|
jtQuery(window).on("resize", updateTables);
|
|
|
|
function splitTable(original) {
|
|
original.wrap("<div class='table-wrapper' />");
|
|
|
|
var original_id = original.attr('id');
|
|
var copy = original.clone(true, true).attr('id', original_id + '_header');
|
|
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
|
|
copy.removeClass("responsive-fixed-scroll");
|
|
|
|
original.closest(".table-wrapper").append(copy);
|
|
copy.wrap("<div class='pinned' />");
|
|
original.wrap("<div class='scrollable' />");
|
|
|
|
adjustCellHeights(original, copy);
|
|
|
|
if (use_nicescroll) {
|
|
var table_wrapper = original.closest(".table-wrapper");
|
|
var scrollable = table_wrapper.find('.scrollable');
|
|
var pinned = table_wrapper.find('.pinned');
|
|
|
|
if (pinned.length) {
|
|
if (!pinned.getNiceScroll().length) pinned.niceScroll({ boxzoom:nicescroll_options.boxzoom, touchbehavior:nicescroll_options.touchbehavior, cursoropacitymin:nicescroll_options.cursoropacitymin, cursorwidth:nicescroll_options.cursorwidth, cursorcolor:nicescroll_options.cursorcolor});
|
|
}
|
|
if (scrollable.length) {
|
|
if (!scrollable.getNiceScroll().length) scrollable.niceScroll({ boxzoom:nicescroll_options.boxzoom, touchbehavior:nicescroll_options.touchbehavior, cursoropacitymin:nicescroll_options.cursoropacitymin, cursorwidth:nicescroll_options.cursorwidth, cursorcolor:nicescroll_options.cursorcolor});
|
|
}
|
|
scrollbar_timer = setInterval(updateScrollbars, 600);
|
|
}
|
|
}
|
|
|
|
function unsplitTable(original) {
|
|
original.closest(".table-wrapper").find(".pinned").remove();
|
|
original.unwrap();
|
|
original.unwrap();
|
|
|
|
if (use_nicescroll) {
|
|
if (scrollbar_timer) {
|
|
clearTimeout(scrollbar_timer);
|
|
scrollbar_timer = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
function setCellHeights(original, copy) {
|
|
var tr = original.find('tr'),
|
|
tr_copy = copy.find('tr'),
|
|
heights = [];
|
|
|
|
tr.each(function (index) {
|
|
var self = jtQuery(this),
|
|
tx = self.find('th, td');
|
|
|
|
tx.each(function () {
|
|
var height = jtQuery(this).outerHeight(true);
|
|
heights[index] = heights[index] || 0;
|
|
if (height > heights[index]) heights[index] = height;
|
|
});
|
|
|
|
});
|
|
|
|
tr_copy.each(function (index) {
|
|
jtQuery(this).height(heights[index]);
|
|
});
|
|
|
|
updateScrollbars();
|
|
}
|
|
|
|
adjustCellHeights = function (pinned_table, scroll_table) {
|
|
var tr_pinned = pinned_table.find('tr'),
|
|
tr_scroll = scroll_table.find('tr'),
|
|
heights = [];
|
|
|
|
tr_scroll.each(function (index) {
|
|
var self = jtQuery(this),
|
|
tx = self.find('td:not(:first-child)');
|
|
|
|
tx.each(function () {
|
|
var height = jtQuery(this).outerHeight(true);
|
|
heights[index] = heights[index] || 0;
|
|
if (height > heights[index]) heights[index] = height;
|
|
});
|
|
|
|
});
|
|
|
|
tr_pinned.each(function (index) {
|
|
if (typeof heights[index] != "undefined") jtQuery(this).height(heights[index]);
|
|
});
|
|
|
|
updateScrollbars();
|
|
}
|
|
|
|
adjustCellWidths = function (scroll_table) {
|
|
var thead = scroll_table.find('thead>tr');
|
|
var tbody = scroll_table.find('tbody>tr');
|
|
var widths = [];
|
|
|
|
if ((!thead.length) || (!tbody.length)) return;
|
|
|
|
thead.each(function () {
|
|
var self = jtQuery(this),
|
|
tx = self.find('td:not(:first-child)');
|
|
|
|
tx.each(function (index) {
|
|
var width = jtQuery(this).outerHeight(true);
|
|
widths[index] = widths[index] || 0;
|
|
if (width > widths[index]) widths[index] = width;
|
|
});
|
|
|
|
});
|
|
|
|
tbody.each(function () {
|
|
var self = jtQuery(this),
|
|
tx = self.find('td:not(:first-child)');
|
|
|
|
tx.each(function (index) {
|
|
if (typeof widths[index] != "undefined") {
|
|
jtQuery(this).width = widths[index];
|
|
}
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
|
|
}); |