mirror of
https://code.mensbeam.com/MensBeam/Arsse.git
synced 2024-12-23 09:02:41 +00:00
182 lines
6.9 KiB
JavaScript
182 lines
6.9 KiB
JavaScript
/** global localStorage, hljs */
|
|
|
|
if (hljs) {
|
|
hljs.initHighlightingOnLoad();
|
|
}
|
|
|
|
(function() {
|
|
var codeBlocks = document.querySelectorAll(".s-content pre");
|
|
var toggleCodeSection = document.querySelector(".CodeToggler");
|
|
if (!toggleCodeSection) {
|
|
return;
|
|
} else if (!codeBlocks.length) {
|
|
toggleCodeSection.classList.add("Hidden");
|
|
return;
|
|
}
|
|
|
|
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");
|
|
|
|
function setCodeBlockStyle(codeBlockState) {
|
|
for (var a = 0; a < toggleCodeBlockBtnList.length; a++) {
|
|
toggleCodeBlockBtnList[a].classList.remove("Button--active");
|
|
}
|
|
switch (codeBlockState) {
|
|
case true: // Show code blocks below (flowed); checkbox
|
|
var hidden = false;
|
|
break;
|
|
case false: // Hidden code blocks; checkbox
|
|
var hidden = true;
|
|
break;
|
|
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;
|
|
break;
|
|
case 0: // Hidden code blocks
|
|
default:
|
|
toggleCodeBlockBtnHide.classList.add("Button--active");
|
|
codeBlockView.classList.remove("Columns__right--float");
|
|
codeBlockView.classList.add("Columns__right--full");
|
|
var hidden = true;
|
|
break;
|
|
}
|
|
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);
|
|
}
|
|
|
|
try {
|
|
var codeBlockState = localStorage.getItem("codeBlockState");
|
|
} catch (e) {
|
|
// local storage operations can fail with the file:// protocol
|
|
var codeBlockState = null;
|
|
}
|
|
if (!codeBlockState) {
|
|
codeBlockState = floating ? 2 : 1;
|
|
} else {
|
|
codeBlockState = parseInt(codeBlockState);
|
|
}
|
|
if (!floating) {
|
|
codeBlockState = !!codeBlockState;
|
|
}
|
|
|
|
setCodeBlockStyle(codeBlockState);
|
|
})();
|
|
|
|
(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');
|
|
|
|
function _toggleSubMenu(ev) {
|
|
if (ev.preventDefault !== undefined) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
var parent = ev.target.parentNode.parentNode;
|
|
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';
|
|
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);
|
|
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';
|
|
}
|
|
}
|
|
}
|
|
|
|
function _setHeightToAuto(ev) {
|
|
if (ev.target.style.height !== '0px') {
|
|
ev.target.style.height = 'auto';
|
|
}
|
|
|
|
ev.target.removeEventListener('transitionend', _setHeightToAuto);
|
|
}
|
|
|
|
// 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--) {
|
|
cur = navItems[i];
|
|
cur.addEventListener('click', _toggleSubMenu);
|
|
|
|
if (cur.parentNode.parentNode.classList.contains('Nav__item--open')) {
|
|
_toggleSubMenu({ target: cur });
|
|
}
|
|
}
|
|
})();
|
|
|
|
(function() {
|
|
var trigger = document.querySelector('.Collapsible__trigger');
|
|
|
|
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');
|
|
}
|
|
});
|
|
})();
|