:scissors: jQuery for Rails Guides

* Rewrite with Vanilla JS
* Confirmed with Chrome, Safari, Firefox

1 files changed, 37 insertions, 37 deletions

diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js
index 8554a1343b..3c90ba758c 100644
--- a/guides/assets/javascripts/responsive-tables.js
+++ b/guides/assets/javascripts/responsive-tables.js
@@ -1,43 +1,43 @@
-$(document).ready(function() {
+(function() {
+  "use strict";
   var switched = false;
-  $("table").not(".syntaxhighlighter").addClass("responsive");
+
+  document.querySelectorAll(":not(.syntaxhighlighter)>table").forEach(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)) {
+      document.querySelectorAll("table.responsive").forEach(splitTable);
+    } else {
       switched = false;
-      $("table.responsive").each(function(i, element) {
-        unsplitTable($(element));
-      });
+      document.querySelectorAll(".table-wrapper table.responsive").forEach(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);
+    $copy.querySelectorAll("td:not(:first-child), th:not(:first-child)").forEach(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) {
+    document.querySelectorAll(".table-wrapper .pinned").forEach(function(element) {
+      element.parentNode.removeChild(element);
+    });
+    unwrap(original.parentNode);
+    unwrap(original);
+  }
+}).call(this);