diff --git a/Users/nathaniel.taintor/Downloads/zurb-responsive-tables-0d34bc6/responsive-tables.js b/assets/js/src/responsive-tables.js old mode 100755 new mode 100644 index 1a862f1..28c5595 --- a/Users/nathaniel.taintor/Downloads/zurb-responsive-tables-0d34bc6/responsive-tables.js +++ b/assets/js/src/responsive-tables.js @@ -1,67 +1,77 @@ -$(document).ready(function() { - var switched = false; - var updateTables = function() { - if (($(window).width() < 767) && !switched ){ - switched = true; - $("table.responsive").each(function(i, element) { - splitTable($(element)); - }); - return true; - } - else if (switched && ($(window).width() > 767)) { - switched = false; - $("table.responsive").each(function(i, element) { - unsplitTable($(element)); - }); - } - }; - - $(window).load(updateTables); - $(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for - $(window).on("resize", updateTables); - - - function splitTable(original) - { +var $ = require('jquery'); + +/** + * Makes tables wider that the viewport "responsive" by setting their first + * column as fixed position and allowing the remaining columns to be scrollable + * horizontally. + * + * Based off code from http://zurb.com/playground/responsive-tables + * Modified to be usable in our browserify system, and also to check the table + * widths rather than just applying these hooks to all tables when a media + * query is met. + */ +var responsiveTables = function() { + var updateTables = function updateTables() { + var responsiveTables = $('table.responsive'); + if ( responsiveTables.length > 0 ) { + responsiveTables.each( function(i, element) { + var table = $(element); + if ( table.data('switched') && table.width() < table.parent().width() ) { + table.data( 'switched', false ); + unsplitTable(table); + } + if ( ! table.data('switched') && 0 === table.closest('scrollable').length && table.width() > table.parent().width() ) { + table.data('switched', true); + splitTable($(element)); + } + }); + } + }; + var splitTable = function splitTable( 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' />"); - setCellHeights(original, copy); - } - - function unsplitTable(original) { - original.closest(".table-wrapper").find(".pinned").remove(); - original.unwrap(); - original.unwrap(); - } + setCellHeights(original, copy); + }; + var unsplitTable = function unsplitTable(original) { + original.closest(".table-wrapper").find(".pinned").remove(); + original.unwrap(); + original.unwrap(); + }; + + var setCellHeights = function setCellHeights(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'); - function setCellHeights(original, copy) { - var tr = original.find('tr'), - tr_copy = copy.find('tr'), - heights = []; + tx.each(function () { + var height = $(this).outerHeight(true); + heights[index] = heights[index] || 0; + if ( height > heights[index] ) { + heights[index] = height; + } + }); - tr.each(function (index) { - var self = $(this), - tx = self.find('th, td'); + }); - tx.each(function () { - var height = $(this).outerHeight(true); - heights[index] = heights[index] || 0; - if (height > heights[index]) heights[index] = height; - }); + tr_copy.each(function (index) { + $(this).height(heights[index]); + }); + }; - }); + $( window ).on( "load redraw resize", function() { updateTables(); } ); - tr_copy.each(function (index) { - $(this).height(heights[index]); - }); - } +}; -}); +module.exports = responsiveTables;