Created
February 8, 2016 22:38
-
-
Save goldenapples/5974348ccd53c6084891 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1,30c1,25 | |
< 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 ) { | |
--- | |
> $(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) | |
> { | |
32c27 | |
< | |
--- | |
> | |
36c31 | |
< | |
--- | |
> | |
41,75c36,65 | |
< 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'); | |
< | |
< 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(); } ); | |
< | |
< }; | |
--- | |
> setCellHeights(original, copy); | |
> } | |
> | |
> function unsplitTable(original) { | |
> original.closest(".table-wrapper").find(".pinned").remove(); | |
> original.unwrap(); | |
> original.unwrap(); | |
> } | |
> | |
> 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'); | |
> | |
> 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]); | |
> }); | |
> } | |
77c67 | |
< module.exports = responsiveTables; | |
--- | |
> }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment