Skip to content

Instantly share code, notes, and snippets.

@goldenapples
Created February 8, 2016 22:41
Show Gist options
  • Save goldenapples/0e2d2b5c3f87728d3f38 to your computer and use it in GitHub Desktop.
Save goldenapples/0e2d2b5c3f87728d3f38 to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment