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() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
window.syntaxhighlighterConfig = { autoLinks: false };
|
|
||||||
|
this.syntaxhighlighterConfig = { autoLinks: false };
|
||||||
|
|
||||||
this.wrap = function(elem, wrapper) {
|
this.wrap = function(elem, wrapper) {
|
||||||
elem.parentNode.insertBefore(wrapper, elem);
|
elem.parentNode.insertBefore(wrapper, elem);
|
||||||
|
@ -19,34 +20,34 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
var $guidesMenu = document.getElementById("guidesMenu");
|
var guidesMenu = document.getElementById("guidesMenu");
|
||||||
var $guides = document.getElementById("guides");
|
var guides = document.getElementById("guides");
|
||||||
|
|
||||||
$guidesMenu.addEventListener("click", function(e) {
|
guidesMenu.addEventListener("click", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$guides.classList.toggle("visible");
|
guides.classList.toggle("visible");
|
||||||
});
|
});
|
||||||
|
|
||||||
var $guidesIndexItem = document.querySelector("select.guides-index-item");
|
var guidesIndexItem = document.querySelector("select.guides-index-item");
|
||||||
var currentGuidePath = window.location.pathname;
|
var currentGuidePath = window.location.pathname;
|
||||||
$guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1);
|
guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1);
|
||||||
|
|
||||||
$guidesIndexItem.addEventListener("change", function(e) {
|
guidesIndexItem.addEventListener("change", function(e) {
|
||||||
window.location = e.target.value;
|
window.location = e.target.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
var $moreInfoButton = document.querySelector(".more-info-button");
|
var moreInfoButton = document.querySelector(".more-info-button");
|
||||||
var $moreInfoLinks = document.querySelector(".more-info-links");
|
var moreInfoLinks = document.querySelector(".more-info-links");
|
||||||
|
|
||||||
$moreInfoButton.addEventListener("click", function(e) {
|
moreInfoButton.addEventListener("click", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
if ($moreInfoLinks.classList.contains("s-hidden")) {
|
if (moreInfoLinks.classList.contains("s-hidden")) {
|
||||||
wrap($moreInfoLinks, createElement("div", "more-info-container"));
|
wrap(moreInfoLinks, createElement("div", "more-info-container"));
|
||||||
$moreInfoLinks.classList.remove("s-hidden");
|
moreInfoLinks.classList.remove("s-hidden");
|
||||||
} else {
|
} else {
|
||||||
$moreInfoLinks.classList.add("s-hidden");
|
moreInfoLinks.classList.add("s-hidden");
|
||||||
unwrap($moreInfoLinks);
|
unwrap(moreInfoLinks);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
(function() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var switched = false;
|
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");
|
element.classList.add("responsive");
|
||||||
});
|
});
|
||||||
|
|
||||||
var updateTables = function() {
|
var updateTables = function() {
|
||||||
if (document.documentElement.clientWidth < 767 && !switched) {
|
if (document.documentElement.clientWidth < 767 && !switched) {
|
||||||
switched = true;
|
switched = true;
|
||||||
document.querySelectorAll("table.responsive").forEach(splitTable);
|
each(document.querySelectorAll("table.responsive"), splitTable);
|
||||||
} else {
|
} else {
|
||||||
switched = false;
|
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) {
|
var splitTable = function(original) {
|
||||||
wrap(original, createElement("div", "table-wrapper"));
|
wrap(original, createElement("div", "table-wrapper"));
|
||||||
|
|
||||||
var $copy = original.cloneNode(true);
|
var copy = original.cloneNode(true);
|
||||||
$copy.querySelectorAll("td:not(:first-child), th:not(:first-child)").forEach(function(element) {
|
each(copy.querySelectorAll("td:not(:first-child), th:not(:first-child)"), function(element) {
|
||||||
element.style.display = "none";
|
element.style.display = "none";
|
||||||
});
|
});
|
||||||
$copy.classList.remove("responsive");
|
copy.classList.remove("responsive");
|
||||||
|
|
||||||
original.parentNode.append($copy);
|
original.parentNode.append(copy);
|
||||||
wrap($copy, createElement("div", "pinned"))
|
wrap(copy, createElement("div", "pinned"))
|
||||||
wrap(original, createElement("div", "scrollable"));
|
wrap(original, createElement("div", "scrollable"));
|
||||||
}
|
}
|
||||||
|
|
||||||
var unsplitTable = function(original) {
|
var unsplitTable = function(original) {
|
||||||
document.querySelectorAll(".table-wrapper .pinned").forEach(function(element) {
|
each(document.querySelectorAll(".table-wrapper .pinned"), function(element) {
|
||||||
element.parentNode.removeChild(element);
|
element.parentNode.removeChild(element);
|
||||||
});
|
});
|
||||||
unwrap(original.parentNode);
|
unwrap(original.parentNode);
|
||||||
|
|
Loading…
Reference in a new issue