diff options
Diffstat (limited to 'guides/assets/javascripts/responsive-tables.js')
-rw-r--r-- | guides/assets/javascripts/responsive-tables.js | 83 |
1 files changed, 45 insertions, 38 deletions
diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js index 8554a1343b..24906dddeb 100644 --- a/guides/assets/javascripts/responsive-tables.js +++ b/guides/assets/javascripts/responsive-tables.js @@ -1,43 +1,50 @@ -$(document).ready(function() { +(function() { + "use strict"; + var switched = false; - $("table").not(".syntaxhighlighter").addClass("responsive"); + + // For old browsers + var each = function(node, callback) { + var array = Array.prototype.slice.call(node); + for(var i = 0; i < array.length; i++) callback(array[i]); + } + + each(document.querySelectorAll(":not(.syntaxhighlighter)>table"), function(element) { + element.classList.add("responsive"); + }); + var updateTables = function() { - if (($(window).width() < 767) && !switched ){ + if (document.documentElement.clientWidth < 767 && !switched) { switched = true; - $("table.responsive").each(function(i, element) { - splitTable($(element)); - }); - return true; - } - else if (switched && ($(window).width() > 767)) { + each(document.querySelectorAll("table.responsive"), splitTable); + } else { switched = false; - $("table.responsive").each(function(i, element) { - unsplitTable($(element)); - }); + each(document.querySelectorAll(".table-wrapper table.responsive"), unsplitTable); } - }; - - $(window).load(updateTables); - $(window).bind("resize", updateTables); - - - 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' />"); - } - - function unsplitTable(original) { - original.closest(".table-wrapper").find(".pinned").remove(); - original.unwrap(); - original.unwrap(); - } - -}); + } + + document.addEventListener("DOMContentLoaded", updateTables); + window.addEventListener("resize", updateTables); + + var splitTable = function(original) { + wrap(original, createElement("div", "table-wrapper")); + + var copy = original.cloneNode(true); + each(copy.querySelectorAll("td:not(:first-child), th:not(:first-child)"), function(element) { + element.style.display = "none"; + }); + copy.classList.remove("responsive"); + + original.parentNode.append(copy); + wrap(copy, createElement("div", "pinned")) + wrap(original, createElement("div", "scrollable")); + } + + var unsplitTable = function(original) { + each(document.querySelectorAll(".table-wrapper .pinned"), function(element) { + element.parentNode.removeChild(element); + }); + unwrap(original.parentNode); + unwrap(original); + } +}).call(this); |