1
0
mirror of https://github.com/minio/docs.git synced 2025-05-11 01:01:38 +03:00
Rushan 1bb0e097b7
Add responsive wrappers for tables ()
* Add responsive wrappers for tables

* Add missing styles
2022-08-23 14:49:05 -05:00

353 lines
11 KiB
JavaScript

window.addEventListener("DOMContentLoaded", (event) => {
const tocMenuEl = document.querySelector(".content__toc__inner > ul");
var readModeLs = localStorage.getItem("read-mode");
// --------------------------------------------------
// Detect macOS
// --------------------------------------------------
function isMac() {
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
}
// --------------------------------------------------
// Read mode
// --------------------------------------------------
(function () {
const readModeEl = document.getElementById("read-mode-toggle");
const headerEl = document.querySelector(".header");
// Check if the read mode in enabled in user's local storage
if (readModeLs === "true") {
document.documentElement.classList.add("read-mode");
readModeEl.classList.add("active");
}
// Make header visible after the page is loaded and read-mode is decided.
// This is to prevent the flickering of the header on page load.
headerEl.classList.remove("inactive");
// Toggle read mode on icon click
readModeEl.addEventListener("click", (event) => {
document.documentElement.classList.toggle("read-mode");
if (document.documentElement.classList.contains("read-mode")) {
localStorage.setItem("read-mode", "true");
} else {
localStorage.setItem("read-mode", "false");
}
});
// Turn on read mode on smaller screen size.
// Kinda like the responsive design.
function resize() {
readModeLs = localStorage.getItem("read-mode");
if (window.innerWidth < 1280) {
if (readModeLs == null || readModeLs == "false") {
document.documentElement.classList.add("read-mode");
}
} else {
if (readModeLs == "false") {
document.documentElement.classList.remove("read-mode");
}
}
}
var resizeTimer;
window.addEventListener("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
resize();
}, 50);
});
resize();
})();
// --------------------------------------------------
// Dark mode
// --------------------------------------------------
(function () {
const darkModeEl = document.getElementById("dark-mode-toggle");
var darkModeLs = localStorage.getItem("dark-mode");
// Check if the dark mode in enabled in user's local storage
if (darkModeLs === "true") {
document.documentElement.classList.add("dark-mode");
darkModeEl.classList.add("active");
}
darkModeEl.addEventListener("click", (event) => {
document.documentElement.classList.toggle("dark-mode");
if (document.documentElement.classList.contains("dark-mode")) {
localStorage.setItem("dark-mode", "true");
} else {
localStorage.setItem("dark-mode", "false");
}
});
})();
// --------------------------------------------------
// Detect parent iframe.
// This is required to hide the navigation links when viewed via PathFactory for analytics purposes
// --------------------------------------------------
(function () {
if (window.location !== window.parent.location) {
document.body.classList.add("inside-iframe");
}
})();
// --------------------------------------------------
// Get meta key based on the OS
// --------------------------------------------------
(function () {
const metaKeyEl = document.getElementById("search-meta-key");
if(metaKeyEl) {
if(isMac()) {
metaKeyEl.innerHTML = "⌘";
}
else {
metaKeyEl.classList.add("ctrl");
metaKeyEl.innerHTML = "Ctrl";
}
}
})();
// --------------------------------------------------
// Cookie banner
// --------------------------------------------------
(function () {
var cookieLs = localStorage.getItem("set-cookie");
const cookieBanner = document.getElementById("cookie");
if (cookieLs == null) {
cookieBanner.classList.add("show");
}
cookieBanner.addEventListener("click", (event) => {
localStorage.setItem("set-cookie", "true");
cookieBanner.classList.remove("show");
});
})();
// --------------------------------------------------
// Content Nav
// --------------------------------------------------
(function () {
const contentNav = document.querySelectorAll("[data-content-nav]");
contentNav.forEach((nav) => {
nav.addEventListener("click", (event) => {
event.preventDefault();
var target = nav.getAttribute("data-content-nav");
document
.querySelector(".content__nav__inner a.active")
.classList.remove("active");
document
.querySelector(".content__nav__dropdown nav.active")
.classList.remove("active");
document.getElementById(target).classList.add("active");
nav.classList.add("active");
});
});
})();
// --------------------------------------------------
// Search
// --------------------------------------------------
(function () {
const searchToggleEl = document.querySelectorAll(".search-toggle");
const searchParentEl = document.querySelector(".header__hero");
const searchInputEl = document.querySelector(".search__text");
const searchCloseEl = document.getElementById("search-close");
const searchDocEL = document.getElementById("search-documentation")
if(searchInputEl) {
// Open
searchToggleEl.forEach((item) => {
item.addEventListener("click", (event) => {
// Hide opened toc menu on mobile
if(tocMenuEl) {
tocMenuEl.closest(".content__toc").classList.remove("active");
}
// Toggle search
searchParentEl.classList.add("active");
searchInputEl.focus();
});
});
// Close
searchCloseEl.addEventListener("click", (event) => {
searchParentEl.classList.remove("active");
searchInputEl.value = "";
});
}
// Add ID to search result page
if(searchDocEL) {
document.documentElement.classList.add("search-doc");
}
})();
// --------------------------------------------------
// Asides: Sidebar and Nav
// --------------------------------------------------
(function () {
const asideToggleEls = document.querySelectorAll("[data-aside-toggle]");
const sidebarEl = document.querySelector(".sidebar");
const navEl = document.querySelector(".nav");
const asideHideEls = document.querySelectorAll(".hide-aside");
function hideAside() {
document.querySelector(".aside-backdrop").remove();
document.documentElement.classList.remove("doc-active", "nav-active");
}
asideToggleEls.forEach((item) => {
item.addEventListener("click", (event) => {
event.preventDefault();
var target = item.getAttribute("data-aside-toggle");
document.documentElement.classList.add(target + "-active");
var backdrop = document.createElement("div");
backdrop.classList.add("aside-backdrop");
backdrop.onclick = function () {
document.documentElement.classList.remove(target + "-active");
backdrop.remove();
}
if(target == "doc") {
sidebarEl.insertAdjacentElement("afterend", backdrop);
}
else {
navEl.insertAdjacentElement("afterend", backdrop);
}
});
});
asideHideEls.forEach(item => {
item.addEventListener("click", (event) => {
event.preventDefault();
hideAside();
});
});
})();
// --------------------------------------------------
// TOC in mobile
// --------------------------------------------------
(function () {
const tocToggleEl = document.querySelector(".content__toc__inner > h3 > a");
if(tocToggleEl) {
tocToggleEl.addEventListener("click", (event) => {
event.preventDefault();
tocMenuEl.closest(".content__toc").classList.toggle("active");
});
}
})();
// --------------------------------------------------
// Icon switches
// e.g Read mode and Dark mode buttons
// --------------------------------------------------
(function () {
const iconSwitchesEls = document.querySelectorAll(".icon--switch");
iconSwitchesEls.forEach((item) => {
item.addEventListener("click", (event) => {
event.preventDefault();
item.classList.toggle("active");
});
});
})();
// --------------------------------------------------
// Focus search input on key combination
// --------------------------------------------------
(function () {
const root = document.documentElement;
document.addEventListener("keydown", (event) => {
if(!root.classList.contains("read-mode")) {
const searchInputEl = document.querySelector(".search__text");
var metaKey = isMac() ? event.metaKey : event.ctrlKey
if (metaKey && event.key === "/") {
searchInputEl.focus();
window.scrollTo(0, 0);
}
}
});
})();
// --------------------------------------------------
// Inserts the personas into the left-hand nav
// --------------------------------------------------
(function() {
const operationPersona = document.createElement("li");
operationPersona.innerHTML = "Operations";
operationPersona.className = "docs__title";
const administrationPersona = document.createElement("li");
administrationPersona.innerHTML = "Administration";
administrationPersona.className = "docs__title";
const developerPersona = document.createElement("li");
developerPersona.innerHTML = "Developers";
developerPersona.className = "docs__title";
const referencePersona = document.createElement("li");
referencePersona.innerHTML = "Reference";
referencePersona.className = "docs__title";
const list = document.getElementsByClassName("toctree-l1");
for ( i = 0; i < list.length; i++) {
const page_title = list[i].childNodes[0].innerHTML;
if (page_title === "Install and Deploy MinIO" || page_title === "Deploy the MinIO Operator") {
// First persona is not listed in the design, so commenting it for now.
//list[i].insertAdjacentElement('beforebegin',operationPersona);
}
else if (page_title === "MinIO Console") {
list[i].insertAdjacentElement('beforebegin',administrationPersona);
}
else if (page_title === "Software Development Kits (SDK)") {
list[i].insertAdjacentElement('beforebegin',developerPersona);
}
else if (page_title === "MinIO Client") {
list[i].insertAdjacentElement('beforebegin',referencePersona);
}
}
})();
// --------------------------------------------------
// Responsive tables
// --------------------------------------------------
(function () {
const tableEls = document.querySelectorAll("table");
if(tableEls.length > 0) {
tableEls.forEach((item) => {
var tableWrapper = document.createElement("div");
tableWrapper.classList.add("table-responsive");
item.insertAdjacentElement("beforebegin", tableWrapper);
tableWrapper.appendChild(item);
});
}
})();
});