mirror of
https://github.com/minio/docs.git
synced 2025-07-27 08:41:57 +03:00
Update theme as per the new design specs (#522)
This commit is contained in:
Rushan
GitHub
@ -1,85 +1,337 @@
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
// Detect parent iframe.
|
||||
// This is required to hide the navigation links when viewed via PathFactory for analytics purposes
|
||||
if (window.location !== window.parent.location) {
|
||||
document.body.classList.add('inside-iframe');
|
||||
}
|
||||
|
||||
// Table of contents
|
||||
var topic = document.getElementById("table-of-contents");
|
||||
if (topic != null) {
|
||||
document
|
||||
.getElementById("localtoc")
|
||||
.appendChild(document.getElementById("table-of-contents"));
|
||||
}
|
||||
|
||||
var l3 = document.getElementsByClassName("toctree-l3 current")
|
||||
var l2 = document.getElementsByClassName("toctree-l2 current")
|
||||
var l1 = document.getElementsByClassName("toctree-l1 current")
|
||||
|
||||
if (l3.length > 0) {
|
||||
l3[0].classList.add("active");
|
||||
l2[0].classList.add("active-parent");
|
||||
l1[0].classList.add("active-parent");
|
||||
}
|
||||
else if (l2.length > 0 ) {
|
||||
l2[0].classList.add("active");
|
||||
l1[0].classList.add("active-parent");
|
||||
}
|
||||
else if (l1.length > 0 ) {
|
||||
l1[0].classList.add("active");
|
||||
}
|
||||
|
||||
// Toggle Sidebars
|
||||
$('body').on('click', '[data-toggle]', function() {
|
||||
var target = $(this).attr('data-toggle');
|
||||
target === 'sidebar' ? $('body').removeClass('nav-active') : $('body').removeClass('sidebar-active');
|
||||
$('body').toggleClass(target + '-active');
|
||||
});
|
||||
|
||||
renderPersonas();
|
||||
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");
|
||||
}
|
||||
|
||||
function renderPersonas() {
|
||||
// This inserts the personas into the left-hand nav
|
||||
// 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");
|
||||
|
||||
let operationPersona = document.createElement("span");
|
||||
operationPersona.innerHTML = "Operations";
|
||||
operationPersona.id = "operationsPersona";
|
||||
operationPersona.className = "persona";
|
||||
if (document.documentElement.classList.contains("read-mode")) {
|
||||
localStorage.setItem("read-mode", "true");
|
||||
} else {
|
||||
localStorage.setItem("read-mode", "false");
|
||||
}
|
||||
});
|
||||
|
||||
let administrationPersona = document.createElement("span");
|
||||
administrationPersona.innerHTML = "Administration";
|
||||
administrationPersona.id = "administrationPersona";
|
||||
administrationPersona.className = "persona";
|
||||
// Turn on read mode on smaller screen size.
|
||||
// Kinda like the responsive design.
|
||||
function resize() {
|
||||
readModeLs = localStorage.getItem("read-mode");
|
||||
|
||||
let developerPersona = document.createElement("span");
|
||||
developerPersona.innerHTML = "Developers";
|
||||
developerPersona.id = "developerPersona";
|
||||
developerPersona.className = "persona";
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let referencePersona = document.createElement("span");
|
||||
referencePersona.innerHTML = "Reference";
|
||||
referencePersona.id = "referencePersona";
|
||||
referencePersona.className = "persona";
|
||||
var resizeTimer;
|
||||
window.addEventListener("resize", function () {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function () {
|
||||
resize();
|
||||
}, 50);
|
||||
});
|
||||
|
||||
list = document.getElementsByClassName("toctree-l1");
|
||||
resize();
|
||||
})();
|
||||
|
||||
for (i=0; i<list.length; i++) {
|
||||
let page_title = list[i].childNodes[0].innerHTML;
|
||||
|
||||
// --------------------------------------------------
|
||||
// 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") {
|
||||
list[i].insertAdjacentElement('beforebegin',operationPersona);
|
||||
// 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);
|
||||
list[i].insertAdjacentElement('beforebegin',administrationPersona);
|
||||
}
|
||||
else if (page_title === "Software Development Kits (SDK)") {
|
||||
list[i].insertAdjacentElement('beforebegin',developerPersona);
|
||||
list[i].insertAdjacentElement('beforebegin',developerPersona);
|
||||
}
|
||||
else if (page_title === "MinIO Client") {
|
||||
list[i].insertAdjacentElement('beforebegin',referencePersona);
|
||||
list[i].insertAdjacentElement('beforebegin',referencePersona);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
});
|
||||
Reference in New Issue
Block a user