TEST_CODEOWNERS/rails
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request #32690 from yhirano55/refactor-guides-javascripts

Browse Source 
Refactor guides javascripts
This commit is contained in:
Guillermo Iguaran 2018-04-22 15:57:40 -05:00 committed by GitHub
commit eae90a059a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
guides/assets/javascripts/guides.js
View File

@ -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);
}
});
});

25
guides/assets/javascripts/responsive-tables.js
View File

@ -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);