From b261508002d39b9663ebf93bdc679c821cc77ab6 Mon Sep 17 00:00:00 2001 From: Yoshiyuki Hirano Date: Mon, 23 Apr 2018 04:02:38 +0900 Subject: Refactor guides javascripts * Remove `$` prefix from all variables (`$` prefix means jQuery object) * Old browsers doesn't support forEach. So use for instead of forEach. --- guides/assets/javascripts/guides.js | 35 +++++++++++++------------- guides/assets/javascripts/responsive-tables.js | 25 +++++++++++------- 2 files changed, 34 insertions(+), 26 deletions(-) (limited to 'guides') diff --git a/guides/assets/javascripts/guides.js b/guides/assets/javascripts/guides.js index 25c8b482b4..e39ac239cd 100644 --- a/guides/assets/javascripts/guides.js +++ b/guides/assets/javascripts/guides.js @@ -1,6 +1,7 @@ (function() { "use strict"; - window.syntaxhighlighterConfig = { autoLinks: false }; + + this.syntaxhighlighterConfig = { autoLinks: false }; this.wrap = function(elem, wrapper) { elem.parentNode.insertBefore(wrapper, elem); @@ -19,34 +20,34 @@ } document.addEventListener("DOMContentLoaded", function() { - var $guidesMenu = document.getElementById("guidesMenu"); - var $guides = document.getElementById("guides"); + var guidesMenu = document.getElementById("guidesMenu"); + var guides = document.getElementById("guides"); - $guidesMenu.addEventListener("click", function(e) { + guidesMenu.addEventListener("click", function(e) { e.preventDefault(); - $guides.classList.toggle("visible"); + guides.classList.toggle("visible"); }); - var $guidesIndexItem = document.querySelector("select.guides-index-item"); - var currentGuidePath = window.location.pathname; - $guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1); + var guidesIndexItem = document.querySelector("select.guides-index-item"); + var currentGuidePath = window.location.pathname; + guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1); - $guidesIndexItem.addEventListener("change", function(e) { + guidesIndexItem.addEventListener("change", function(e) { window.location = e.target.value; }); - var $moreInfoButton = document.querySelector(".more-info-button"); - var $moreInfoLinks = document.querySelector(".more-info-links"); + var moreInfoButton = document.querySelector(".more-info-button"); + var moreInfoLinks = document.querySelector(".more-info-links"); - $moreInfoButton.addEventListener("click", function(e) { + moreInfoButton.addEventListener("click", function(e) { e.preventDefault(); - if ($moreInfoLinks.classList.contains("s-hidden")) { - wrap($moreInfoLinks, createElement("div", "more-info-container")); - $moreInfoLinks.classList.remove("s-hidden"); + if (moreInfoLinks.classList.contains("s-hidden")) { + wrap(moreInfoLinks, createElement("div", "more-info-container")); + moreInfoLinks.classList.remove("s-hidden"); } else { - $moreInfoLinks.classList.add("s-hidden"); - unwrap($moreInfoLinks); + moreInfoLinks.classList.add("s-hidden"); + unwrap(moreInfoLinks); } }); }); diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js index 3c90ba758c..24906dddeb 100644 --- a/guides/assets/javascripts/responsive-tables.js +++ b/guides/assets/javascripts/responsive-tables.js @@ -1,18 +1,25 @@ (function() { "use strict"; + var switched = false; - document.querySelectorAll(":not(.syntaxhighlighter)>table").forEach(function(element) { + // 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 (document.documentElement.clientWidth < 767 && !switched) { switched = true; - document.querySelectorAll("table.responsive").forEach(splitTable); + each(document.querySelectorAll("table.responsive"), splitTable); } else { switched = false; - document.querySelectorAll(".table-wrapper table.responsive").forEach(unsplitTable); + each(document.querySelectorAll(".table-wrapper table.responsive"), unsplitTable); } } @@ -22,19 +29,19 @@ 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) { + 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"); + copy.classList.remove("responsive"); - original.parentNode.append($copy); - wrap($copy, createElement("div", "pinned")) + 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) { + each(document.querySelectorAll(".table-wrapper .pinned"), function(element) { element.parentNode.removeChild(element); }); unwrap(original.parentNode); -- cgit v1.2.3