D3Public/daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Rewrite code-block manipulation without jQuery

Browse Source
This commit is contained in:
J. King 2019-08-09 22:55:18 -04:00 committed by Stéphane Goetz
parent e150fb49bc
commit e84c9cc10a
1 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
themes/daux/js/daux.js
View File

@ -4,86 +4,94 @@ if (hljs) {
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
} }
//Initialize CodeBlock Visibility Settings (function() {
$(function () { var codeBlocks = document.querySelectorAll(".s-content pre");
var codeBlockView = $('.Columns__right'), var toggleCodeSection = document.querySelector(".CodeToggler");
codeBlocks = $('.s-content pre'), if (!toggleCodeSection) {
toggleCodeSection = $('.CodeToggler'), return;
toggleCodeBlockBtns = toggleCodeSection.find('.CodeToggler__button'), } else if (!codeBlocks.length) {
toggleCodeBlockBtn = toggleCodeSection.find('.CodeToggler__button--main'), toggleCodeSection.classList.add("Hidden");
toggleCodeBlockBtnHide = toggleCodeSection.find('.CodeToggler__button--hide'),
toggleCodeBlockBtnBelow = toggleCodeSection.find('.CodeToggler__button--below'),
toggleCodeBlockBtnFloat = toggleCodeSection.find('.CodeToggler__button--float');
// If there is no code block we hide the link
if (!codeBlocks.size()) {
toggleCodeSection.addClass('Hidden');
return; 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) { function setCodeBlockStyle(codeBlockState) {
try { for (var a = 0; a < toggleCodeBlockBtnList.length; a++) {
localStorage.setItem("codeBlockState", codeBlockState); toggleCodeBlockBtnList[a].classList.remove("Button--active");
} catch (e) {
// local storage operations can fail with the file:// protocol
} }
toggleCodeBlockBtns.removeClass("Button--active");
switch (codeBlockState) { switch (codeBlockState) {
case 2: // Show code blocks inline case true: // Show code blocks below (flowed); checkbox
toggleCodeBlockBtnFloat.addClass("Button--active"); var hidden = false;
codeBlockView.addClass('Columns__right--float');
codeBlockView.removeClass('Columns__right--full');
codeBlocks.removeClass('Hidden');
break; break;
case 1: // Show code blocks below case false: // Hidden code blocks; checkbox
toggleCodeBlockBtnBelow.addClass("Button--active"); var hidden = true;
toggleCodeBlockBtn.prop('checked', true); break;
codeBlockView.removeClass('Columns__right--float'); case 2: // Show code blocks inline (floated)
codeBlockView.addClass('Columns__right--full'); toggleCodeBlockBtnFloat.classList.add("Button--active");
codeBlocks.removeClass('Hidden'); 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; break;
case 0: // Hidden code blocks case 0: // Hidden code blocks
default: default:
toggleCodeBlockBtnHide.addClass("Button--active"); toggleCodeBlockBtnHide.classList.add("Button--active");
toggleCodeBlockBtn.prop('checked', false); codeBlockView.classList.remove("Columns__right--float");
codeBlockView.removeClass('Columns__right--float'); codeBlockView.classList.add("Columns__right--full");
codeBlockView.addClass('Columns__right--full'); var hidden = true;
codeBlocks.addClass('Hidden');
break; 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);
} }
toggleCodeBlockBtn.click(function() {
setCodeBlockStyle(codeBlocks.hasClass('Hidden') ? 1 : 0);
});
toggleCodeBlockBtnHide.click(function() { setCodeBlockStyle(0); });
toggleCodeBlockBtnBelow.click(function() { setCodeBlockStyle(1); });
toggleCodeBlockBtnFloat.click(function() { setCodeBlockStyle(2); });
var floating = $(document.body).hasClass("with-float");
try { try {
var codeBlockState = localStorage.getItem("codeBlockState"); var codeBlockState = localStorage.getItem("codeBlockState");
} catch (e) { } catch (e) {
// local storage operations can fail with the file:// protocol // local storage operations can fail with the file:// protocol
var codeBlockState = false; var codeBlockState = null;
} }
if (!codeBlockState) { if (!codeBlockState) {
codeBlockState = floating ? 2 : 1; codeBlockState = floating ? 2 : 1;
} else { } else {
codeBlockState = parseInt(codeBlockState); codeBlockState = parseInt(codeBlockState);
} }
if (!floating) {
if (!floating && codeBlockState == 2) { codeBlockState = !!codeBlockState;
codeBlockState = 1;
} }
setCodeBlockStyle(codeBlockState); setCodeBlockStyle(codeBlockState);
}); })();
$(function () { $(function () {
// Tree navigation // Tree navigation