mirror of
https://github.com/rails/rails.git
synced 2022-11-09 12:12:34 -05:00
Merge pull request #32690 from yhirano55/refactor-guides-javascripts
Refactor guides javascripts
This commit is contained in:
commit
eae90a059a
2 changed files with 34 additions and 26 deletions
|
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue