154 Zeilen
4.4 KiB
JavaScript
154 Zeilen
4.4 KiB
JavaScript
|
const codeBlocks = document.querySelectorAll(".s-content pre");
|
||
|
const toggleCodeSection = document.querySelector(".CodeToggler");
|
||
|
|
||
|
function setCodeBlockStyle(
|
||
|
codeBlockState,
|
||
|
toggleCodeBlockBtnList,
|
||
|
toggleCodeBlockBtnFloat,
|
||
|
toggleCodeBlockBtnBelow,
|
||
|
toggleCodeBlockBtnHide,
|
||
|
codeBlockView
|
||
|
) {
|
||
|
for (let a = 0; a < toggleCodeBlockBtnList.length; a++) {
|
||
|
toggleCodeBlockBtnList[a].classList.remove("Button--active");
|
||
|
}
|
||
|
let hidden;
|
||
|
switch (codeBlockState) {
|
||
|
case true: // Show code blocks below (flowed); checkbox
|
||
|
hidden = false;
|
||
|
break;
|
||
|
case false: // Hidden code blocks; checkbox
|
||
|
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");
|
||
|
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");
|
||
|
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");
|
||
|
hidden = true;
|
||
|
break;
|
||
|
}
|
||
|
for (let 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
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function enableToggler() {
|
||
|
const toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(
|
||
|
".CodeToggler__button"
|
||
|
);
|
||
|
const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
|
||
|
".CodeToggler__button--main"
|
||
|
); // available when floating is disabled
|
||
|
const toggleCodeBlockBtnHide = toggleCodeSection.querySelector(
|
||
|
".CodeToggler__button--hide"
|
||
|
);
|
||
|
const toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(
|
||
|
".CodeToggler__button--below"
|
||
|
);
|
||
|
const toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(
|
||
|
".CodeToggler__button--float"
|
||
|
);
|
||
|
const codeBlockView = document.querySelector(".Columns__right");
|
||
|
const floating = document.body.classList.contains("with-float");
|
||
|
|
||
|
const setStyle = style => {
|
||
|
setCodeBlockStyle(
|
||
|
style,
|
||
|
toggleCodeBlockBtnList,
|
||
|
toggleCodeBlockBtnFloat,
|
||
|
toggleCodeBlockBtnBelow,
|
||
|
toggleCodeBlockBtnHide,
|
||
|
codeBlockView
|
||
|
);
|
||
|
};
|
||
|
|
||
|
if (floating) {
|
||
|
toggleCodeBlockBtnHide.addEventListener(
|
||
|
"click",
|
||
|
() => {
|
||
|
setStyle(0);
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
toggleCodeBlockBtnBelow.addEventListener(
|
||
|
"click",
|
||
|
() => {
|
||
|
setStyle(1);
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
toggleCodeBlockBtnFloat.addEventListener(
|
||
|
"click",
|
||
|
() => {
|
||
|
setStyle(2);
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
} else {
|
||
|
toggleCodeBlockBtnSet.addEventListener(
|
||
|
"change",
|
||
|
ev => {
|
||
|
setStyle(ev.target.checked);
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
}
|
||
|
|
||
|
let codeBlockState = null;
|
||
|
try {
|
||
|
codeBlockState = localStorage.getItem("codeBlockState");
|
||
|
} catch (e) {
|
||
|
// local storage operations can fail with the file:// protocol
|
||
|
}
|
||
|
|
||
|
if (codeBlockState) {
|
||
|
codeBlockState = parseInt(codeBlockState, 10);
|
||
|
} else {
|
||
|
codeBlockState = floating ? 2 : 1;
|
||
|
}
|
||
|
|
||
|
if (!floating) {
|
||
|
codeBlockState = !!codeBlockState;
|
||
|
}
|
||
|
|
||
|
setCodeBlockStyle(
|
||
|
codeBlockState,
|
||
|
toggleCodeBlockBtnList,
|
||
|
toggleCodeBlockBtnFloat,
|
||
|
toggleCodeBlockBtnBelow,
|
||
|
toggleCodeBlockBtnHide,
|
||
|
codeBlockView
|
||
|
);
|
||
|
}
|
||
|
|
||
|
if (toggleCodeSection) {
|
||
|
if (codeBlocks.length) {
|
||
|
enableToggler();
|
||
|
} else {
|
||
|
toggleCodeSection.classList.add("Hidden");
|
||
|
}
|
||
|
}
|