kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

about page support table, codeblock, clipboard 

#345
This commit is contained in:
zzossig 2020-11-05 13:59:19 +09:00
parent 27bb4753a9
commit d694f16750
6 changed files with 217 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/_default/single.html
View File

@ -25,6 +25,7 @@
{{ .Content }}
</article>
{{ partial "script/clipboard-script" . }}
{{ partial "script/codeblock-script" . }}
{{ partial "body/share" . }}
{{ partial "body/donation" . }}

68
layouts/partials/head/scripts.html
View File

@ -105,6 +105,74 @@
// ============================================================
// ======================== markdown table ====================
var tables = document.querySelectorAll('.single__contents > table');
for (let i = 0; i < tables.length; i++) {
var table = tables[i];
var wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
table.parentElement.replaceChild(wrapper, table);
wrapper.appendChild(table);
}
// ============================================================
// ========================== foot notes ======================
var footNoteRefs = document.querySelectorAll('.footnote-ref');
var footNoteBackRefs = document.querySelectorAll('.footnote-backref');
footNoteRefs ?
footNoteRefs.forEach(function(elem, idx) {
elem.onmouseenter = function () {
if (navbar.classList.contains('scrolling')) {
navbar.classList.remove('scrolling');
}
}
elem.onmouseleave = function () {
if (!navbar.classList.contains('scrolling')) {
setTimeout(function () {
navbar.classList.add('scrolling');
}, 100);
}
}
elem.onclick = function () {
if (!navbar.classList.contains('scrolling')) {
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
}
}
}) : null;
footNoteBackRefs ?
footNoteBackRefs.forEach(function(elem, idx) {
elem.onmouseenter = function () {
if (navbar.classList.contains('scrolling')) {
navbar.classList.remove('scrolling');
}
}
elem.onmouseleave = function () {
if (!navbar.classList.contains('scrolling')) {
setTimeout(function() {
navbar.classList.add('scrolling');
}, 100);
}
}
elem.onclick = function () {
if (!navbar.classList.contains('scrolling')) {
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
}
}
}) : null;
// ============================================================
// =================== search-result desktop ==================
var summaryContainer = document.querySelector('.summary__container');
var searchResult = document.querySelector('.search-result');

3
layouts/partials/script/about-script.html
View File

@ -1 +1,2 @@
{{ partial "script/clipboard-script" . }}
{{ partial "script/codeblock-script" . }}

113
layouts/partials/script/clipboard-script.html Normal file
View File

@ -0,0 +1,113 @@
{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
<script defer src="{{ $clipboard.RelPermalink }}"></script>
{{ $prev := resources.Get "js/helper/prev.js" | resources.Minify }}
<script defer src="{{ $prev.RelPermalink }}"></script>
{{ $prop := resources.Get "js/helper/prop.js" | resources.Minify }}
<script defer src="{{ $prop.RelPermalink }}"></script>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
// =========================== clipboard ===========================
var clipInit = false;
var preChromaElem = document.querySelectorAll('pre.chroma');
var langCodeElem = document.querySelectorAll('.language-code');
var dollarCodeElem = document.querySelectorAll('div.language-\\$');
var gtCodeElem = document.querySelectorAll('div.language-\\>');
var makeClipboard = function(elem) {
var code = elem,
text = elem.textContent;
if (text.length > 15) {
if (!clipInit) {
var text, clip = new ClipboardJS('.copy-to-clipboard', {
text: function (trigger) {
var codeElem = prev(trigger).querySelectorAll('code');
if (codeElem.length > 1) {
text = prev(trigger).querySelector('code[class^="language-"]').textContent;
} else {
text = prev(trigger).querySelector('code').textContent;
}
return text.replace(/^\$\s/gm, '');
}
});
var inPre;
clip.on('success', function (e) {
e.clearSelection();
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
e.trigger.setAttribute('aria-label', 'Copied to clipboard!');
e.trigger.classList.add('tooltipped');
e.trigger.classList.add('tooltipped-w');
});
clip.on('error', function (e) {
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
e.trigger.setAttribute('aria-label', e.action.toString());
e.trigger.classList.add('tooltipped');
e.trigger.classList.add('tooltipped-w');
});
clipInit = true;
}
var notAllowedClass = ['language-mermaid', 'language-viz', 'language-wave', 'language-chart', 'language-msc', 'language-flowchart'];
var isNotAllowedIncluded = false;
var curClassName = code.getAttribute('class');
for (var i = 0; i < notAllowedClass.length; i++) {
if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
isNotAllowedIncluded = true;
break;
}
}
if (!isNotAllowedIncluded) {
if (curClassName) {
var newClipboardElem = document.createElement('span');
newClipboardElem.setAttribute('class', 'copy-to-clipboard');
newClipboardElem.setAttribute('title', 'Copy to clipboard');
elem.parentNode.parentNode.insertBefore(newClipboardElem, elem.parentNode.nextElementSibling);
}
}
}
}
var makeSymbolClipboard = function(elem) {
var clipboardSpan = document.createElement('span');
clipboardSpan.setAttribute('class', 'copy-to-clipboard');
clipboardSpan.setAttribute('title', 'Copy to clipboard');
elem.parentNode.parentNode.insertBefore(clipboardSpan, elem.parentNode.nextElementSibling);
}
preChromaElem ?
preChromaElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function(codeElem) {
makeClipboard(codeElem);
});
}) : null;
langCodeElem ?
langCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeClipboard(codeElem);
});
}) : null;
dollarCodeElem ?
dollarCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeSymbolClipboard(codeElem);
});
}) : null;
gtCodeElem ?
gtCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeSymbolClipboard(codeElem);
});
}) : null;
// =================================================================
});
</script>

25
layouts/partials/script/codeblock-script.html
View File

@ -45,4 +45,29 @@
elem.append(newElem);
}) : null;
// =================================================================
// ================ codeblock line number to symbol ================
var dollarCodeElem = document.querySelectorAll('div.language-\\$');
var gtCodeElem = document.querySelectorAll('div.language-\\>');
dollarCodeElem ?
dollarCodeElem.forEach(function(elem) {
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
lnts ?
lnts.forEach(function(lnt) {
lnt.innerHTML = '$<br/>';
}) : null;
}) : null;
gtCodeElem ?
gtCodeElem.forEach(function(elem) {
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
lnts ?
lnts.forEach(function(lnt) {
lnt.innerHTML = '><br/>';
}) : null;
}) : null;
// =================================================================
</script>

201
layouts/partials/script/single-script.html
View File

@ -1,8 +1,6 @@
{{ $js := .Site.Data.lib.js }}
{{ $css := .Site.Data.lib.css }}
{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
<script defer src="{{ $clipboard.RelPermalink }}"></script>
{{ $getParents := resources.Get "js/helper/getParents.js" | resources.Minify }}
<script defer src="{{ $getParents.RelPermalink }}"></script>
{{ $closest := resources.Get "js/helper/closest.js" | resources.Minify }}
@ -91,6 +89,7 @@
// =================================================================
// ============================== toc ==============================
{{ $enableToc := ($.Param "enableToc") }}
{{ $toc := ($.Param "toc") }}
@ -238,73 +237,6 @@
// =================================================================
// ========================== foot notes ===========================
var footNoteRefs = document.querySelectorAll('.footnote-ref');
var footNoteBackRefs = document.querySelectorAll('.footnote-backref');
footNoteRefs ?
footNoteRefs.forEach(function(elem, idx) {
elem.onmouseenter = function () {
if (navbar.classList.contains('scrolling')) {
navbar.classList.remove('scrolling');
}
}
elem.onmouseleave = function () {
if (!navbar.classList.contains('scrolling')) {
setTimeout(function () {
navbar.classList.add('scrolling');
}, 100);
}
}
elem.onclick = function () {
if (!navbar.classList.contains('scrolling')) {
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
}
}
}) : null;
footNoteBackRefs ?
footNoteBackRefs.forEach(function(elem, idx) {
elem.onmouseenter = function () {
if (navbar.classList.contains('scrolling')) {
navbar.classList.remove('scrolling');
}
}
elem.onmouseleave = function () {
if (!navbar.classList.contains('scrolling')) {
setTimeout(function() {
navbar.classList.add('scrolling');
}, 100);
}
}
elem.onclick = function () {
if (!navbar.classList.contains('scrolling')) {
navbar.classList.remove('navbar--show');
navbar.classList.remove('navbar--hide');
navbar.classList.add('navbar--hide');
}
}
}) : null;
// =================================================================
// ======================== markdown table =========================
var tables = document.querySelectorAll('.single__contents > table');
for (let i = 0; i < tables.length; i++) {
var table = tables[i];
var wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
table.parentElement.replaceChild(wrapper, table);
wrapper.appendChild(table);
}
// =================================================================
// ==================== add links in all titles ====================
var text, clip = new ClipboardJS('.anchor');
@ -367,130 +299,6 @@
// =================================================================
// =========================== clipboard ===========================
var clipInit = false;
var preChromaElem = document.querySelectorAll('pre.chroma');
var langCodeElem = document.querySelectorAll('.language-code');
var dollarCodeElem = document.querySelectorAll('div.language-\\$');
var gtCodeElem = document.querySelectorAll('div.language-\\>');
var makeClipboard = function(elem) {
var code = elem,
text = elem.textContent;
if (text.length > 15) {
if (!clipInit) {
var text, clip = new ClipboardJS('.copy-to-clipboard', {
text: function (trigger) {
var codeElem = prev(trigger).querySelectorAll('code');
if (codeElem.length > 1) {
text = prev(trigger).querySelector('code[class^="language-"]').textContent;
} else {
text = prev(trigger).querySelector('code').textContent;
}
return text.replace(/^\$\s/gm, '');
}
});
var inPre;
clip.on('success', function (e) {
e.clearSelection();
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
e.trigger.setAttribute('aria-label', 'Copied to clipboard!');
e.trigger.classList.add('tooltipped');
e.trigger.classList.add('tooltipped-w');
});
clip.on('error', function (e) {
inPre = prop(e.trigger.parentNode, 'tagName') == 'PRE';
e.trigger.setAttribute('aria-label', e.action.toString());
e.trigger.classList.add('tooltipped');
e.trigger.classList.add('tooltipped-w');
});
clipInit = true;
}
var notAllowedClass = ['language-mermaid', 'language-viz', 'language-wave', 'language-chart', 'language-msc', 'language-flowchart'];
var isNotAllowedIncluded = false;
var curClassName = code.getAttribute('class');
for (var i = 0; i < notAllowedClass.length; i++) {
if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
isNotAllowedIncluded = true;
break;
}
}
if (!isNotAllowedIncluded) {
if (curClassName) {
var newClipboardElem = document.createElement('span');
newClipboardElem.setAttribute('class', 'copy-to-clipboard');
newClipboardElem.setAttribute('title', 'Copy to clipboard');
elem.parentNode.parentNode.insertBefore(newClipboardElem, elem.parentNode.nextElementSibling);
}
}
}
}
var makeSymbolClipboard = function(elem) {
var clipboardSpan = document.createElement('span');
clipboardSpan.setAttribute('class', 'copy-to-clipboard');
clipboardSpan.setAttribute('title', 'Copy to clipboard');
elem.parentNode.parentNode.insertBefore(clipboardSpan, elem.parentNode.nextElementSibling);
}
preChromaElem ?
preChromaElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function(codeElem) {
makeClipboard(codeElem);
});
}) : null;
langCodeElem ?
langCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeClipboard(codeElem);
});
}) : null;
dollarCodeElem ?
dollarCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeSymbolClipboard(codeElem);
});
}) : null;
gtCodeElem ?
gtCodeElem.forEach(function(elem) {
elem.querySelectorAll('code').forEach(function (codeElem) {
makeSymbolClipboard(codeElem);
});
}) : null;
// =================================================================
// ================ codeblock line number to symbol ================
dollarCodeElem ?
dollarCodeElem.forEach(function(elem) {
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
lnts ?
lnts.forEach(function(lnt) {
lnt.innerHTML = '$<br/>';
}) : null;
}) : null;
gtCodeElem ?
gtCodeElem.forEach(function(elem) {
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
lnts ?
lnts.forEach(function(lnt) {
lnt.innerHTML = '><br/>';
}) : null;
}) : null;
// =================================================================
// ============================ mermaid ============================
{{ $lib := .Params.libraries }}
@ -526,6 +334,7 @@
// =================================================================
// ============================= katex =============================
if (lib && lib.includes('katex')) {
var mathElements = document.getElementsByClassName('math');
@ -543,6 +352,7 @@
// =================================================================
// ========================= flowchart.js ==========================
if (lib && lib.includes('flowchartjs')) {
{{ $flowchartjs := .Site.Data.flowchartjs }}
@ -569,6 +379,7 @@
// =================================================================
// ============================ mathjax ============================
document.querySelectorAll("mjx-container").forEach(function (x) {
x.parentElement.classList += 'has-jax'
@ -576,6 +387,7 @@
// =================================================================
// ====================== js-sequence-diagram ======================
if (lib && lib.includes('msc')) {
{{ $msc := .Site.Data.msc }}
@ -599,6 +411,7 @@
// =================================================================
// =========================== chart.js ============================
if (lib && lib.includes('chart')) {
var borderColor = "#666";
@ -640,6 +453,7 @@
// =================================================================
// =========================== wavedrom ============================
if (lib && lib.includes('wavedrom')) {
var wavePrefix = "language-wave";
@ -662,6 +476,7 @@
// =================================================================
// ========================== viz diagram ==========================
if (lib && lib.includes('viz')) {
var vizPrefix = "language-viz-";