1
1
Fork 0
mirror of https://code.mensbeam.com/MensBeam/Arsse.git synced 2024-12-25 01:52:40 +00:00
Arsse/docs/theme/arsse/daux.js

183 lines
6.9 KiB
JavaScript
Raw Normal View History

2019-08-04 14:57:05 +00:00
/** global localStorage, hljs */
if (hljs) {
hljs.initHighlightingOnLoad();
}
2019-08-13 11:01:17 +00:00
(function() {
var codeBlocks = document.querySelectorAll(".s-content pre");
var toggleCodeSection = document.querySelector(".CodeToggler");
if (!toggleCodeSection) {
return;
} else if (!codeBlocks.length) {
toggleCodeSection.classList.add("Hidden");
2019-08-04 14:57:05 +00:00
return;
}
2019-08-13 11:01:17 +00:00
var toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(".CodeToggler__button");
var toggleCodeBlockBtnSet = toggleCodeSection.querySelector(".CodeToggler__button--main"); // available when floating is disabled
var toggleCodeBlockBtnHide = toggleCodeSection.querySelector(".CodeToggler__button--hide");
var toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(".CodeToggler__button--below");
var toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(".CodeToggler__button--float");
var codeBlockView = document.querySelector(".Columns__right");
var floating = document.body.classList.contains("with-float");
2019-08-04 14:57:05 +00:00
function setCodeBlockStyle(codeBlockState) {
2019-08-13 11:01:17 +00:00
for (var a = 0; a < toggleCodeBlockBtnList.length; a++) {
toggleCodeBlockBtnList[a].classList.remove("Button--active");
}
2019-08-04 14:57:05 +00:00
switch (codeBlockState) {
2019-08-13 11:01:17 +00:00
case true: // Show code blocks below (flowed); checkbox
var hidden = false;
break;
case false: // Hidden code blocks; checkbox
var hidden = true;
2019-08-04 14:57:05 +00:00
break;
2019-08-13 11:01:17 +00:00
case 2: // Show code blocks inline (floated)
toggleCodeBlockBtnFloat.classList.add("Button--active");
codeBlockView.classList.add("Columns__right--float");
codeBlockView.classList.remove("Columns__right--full");
var hidden = false;
break;
case 1: // Show code blocks below (flowed)
case "checked":
toggleCodeBlockBtnBelow.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
var hidden = false;
2019-08-04 14:57:05 +00:00
break;
case 0: // Hidden code blocks
default:
2019-08-13 11:01:17 +00:00
toggleCodeBlockBtnHide.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
var hidden = true;
2019-08-04 14:57:05 +00:00
break;
}
2019-08-13 11:01:17 +00:00
for (var a = 0; a < codeBlocks.length; a++) {
if (hidden) {
codeBlocks[a].classList.add("Hidden");
} else {
codeBlocks[a].classList.remove("Hidden");
}
}
try {
localStorage.setItem("codeBlockState", +codeBlockState);
} catch (e) {
// local storage operations can fail with the file:// protocol
}
}
if (!floating) {
toggleCodeBlockBtnSet.addEventListener("change", function(ev) {setCodeBlockStyle(ev.target.checked);}, false);
} else {
toggleCodeBlockBtnHide.addEventListener("click", function() {setCodeBlockStyle(0);}, false);
toggleCodeBlockBtnBelow.addEventListener("click", function() {setCodeBlockStyle(1);}, false);
toggleCodeBlockBtnFloat.addEventListener("click", function() {setCodeBlockStyle(2);}, false);
2019-08-04 14:57:05 +00:00
}
try {
var codeBlockState = localStorage.getItem("codeBlockState");
} catch (e) {
// local storage operations can fail with the file:// protocol
2019-08-13 11:01:17 +00:00
var codeBlockState = null;
}
2019-08-04 14:57:05 +00:00
if (!codeBlockState) {
2019-08-13 11:01:17 +00:00
codeBlockState = floating ? 2 : 1;
2019-08-04 14:57:05 +00:00
} else {
codeBlockState = parseInt(codeBlockState);
}
2019-08-13 11:01:17 +00:00
if (!floating) {
codeBlockState = !!codeBlockState;
2019-08-04 14:57:05 +00:00
}
setCodeBlockStyle(codeBlockState);
2019-08-13 11:01:17 +00:00
})();
(function() {
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
var navItems = document.querySelectorAll('.Nav__item.has-children i.Nav__arrow');
2019-08-13 11:01:17 +00:00
function _toggleSubMenu(ev) {
if (ev.preventDefault !== undefined) {
ev.preventDefault();
}
2019-08-04 14:57:05 +00:00
var parent = ev.target.parentNode.parentNode;
2019-08-13 11:01:17 +00:00
var subNav = parent.querySelector('ul.Nav');
if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) {
// Temporarily set the height so the transition can work.
subNav.style.height = subNav.scrollHeight + 'px';
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
subNav.style.height = '0px';
2019-08-13 11:01:17 +00:00
parent.classList.remove('Nav__item--open');
} else {
if (ev.preventDefault !== undefined) {
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
// After the transition finishes set the height to auto so child
// menus can expand properly.
subNav.addEventListener('transitionend', _setHeightToAuto);
2019-08-13 11:01:17 +00:00
subNav.style.height = subNav.scrollHeight + 'px';
parent.classList.add('Nav__item--open');
} else {
// When running at page load the transitions don't need to fire and
// the classList doesn't need to be altered.
subNav.style.height = 'auto';
2019-08-13 11:01:17 +00:00
}
}
}
2019-08-04 14:57:05 +00:00
function _setHeightToAuto(ev) {
if (ev.target.style.height !== '0px') {
ev.target.style.height = 'auto';
2019-08-13 11:01:17 +00:00
}
ev.target.removeEventListener('transitionend', _setHeightToAuto);
2019-08-13 11:01:17 +00:00
}
2019-08-04 14:57:05 +00:00
// Go in reverse here because on page load the child nav items need to be
// opened first before their parents so the height on the parents can be
// calculated properly.
for (var i = navItems.length - 1, cur; i >= 0; i--) {
2019-08-13 11:01:17 +00:00
cur = navItems[i];
cur.addEventListener('click', _toggleSubMenu);
if (cur.parentNode.parentNode.classList.contains('Nav__item--open')) {
2019-08-13 11:01:17 +00:00
_toggleSubMenu({ target: cur });
}
}
})();
(function() {
var trigger = document.querySelector('.Collapsible__trigger');
2019-08-04 14:57:05 +00:00
2019-08-13 11:01:17 +00:00
if (!trigger) {
return;
}
content = document.querySelector('.Collapsible__content');
trigger.addEventListener('click', function(ev) {
if (content.classList.contains('Collapsible__content--open')) {
content.style.height = 0;
content.classList.remove('Collapsible__content--open');
} else {
content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms';
content.style.height = content.scrollHeight + 'px';
content.classList.add('Collapsible__content--open');
}
2019-08-04 14:57:05 +00:00
});
2019-08-13 11:01:17 +00:00
})();