From d694f16750817e9f991e9a50023255316973e198 Mon Sep 17 00:00:00 2001 From: zzossig Date: Thu, 5 Nov 2020 13:59:19 +0900 Subject: about page support table, codeblock, clipboard #345 --- layouts/_default/single.html | 1 + layouts/partials/head/scripts.html | 68 +++++++++ layouts/partials/script/about-script.html | 3 +- layouts/partials/script/clipboard-script.html | 113 +++++++++++++++ layouts/partials/script/codeblock-script.html | 25 ++++ layouts/partials/script/single-script.html | 201 +------------------------- 6 files changed, 217 insertions(+), 194 deletions(-) create mode 100644 layouts/partials/script/clipboard-script.html diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e78683b..e4d0fcb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -25,6 +25,7 @@ {{ .Content }} + {{ partial "script/clipboard-script" . }} {{ partial "script/codeblock-script" . }} {{ partial "body/share" . }} {{ partial "body/donation" . }} diff --git a/layouts/partials/head/scripts.html b/layouts/partials/head/scripts.html index 19e2ec0..ec2514f 100644 --- a/layouts/partials/head/scripts.html +++ b/layouts/partials/head/scripts.html @@ -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'); diff --git a/layouts/partials/script/about-script.html b/layouts/partials/script/about-script.html index 8b13789..5fcd789 100644 --- a/layouts/partials/script/about-script.html +++ b/layouts/partials/script/about-script.html @@ -1 +1,2 @@ - +{{ partial "script/clipboard-script" . }} +{{ partial "script/codeblock-script" . }} \ No newline at end of file diff --git a/layouts/partials/script/clipboard-script.html b/layouts/partials/script/clipboard-script.html new file mode 100644 index 0000000..de74bcd --- /dev/null +++ b/layouts/partials/script/clipboard-script.html @@ -0,0 +1,113 @@ +{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }} + +{{ $prev := resources.Get "js/helper/prev.js" | resources.Minify }} + +{{ $prop := resources.Get "js/helper/prop.js" | resources.Minify }} + + \ No newline at end of file diff --git a/layouts/partials/script/codeblock-script.html b/layouts/partials/script/codeblock-script.html index db7072d..7cff121 100644 --- a/layouts/partials/script/codeblock-script.html +++ b/layouts/partials/script/codeblock-script.html @@ -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 = '$
'; + }) : 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 = '>
'; + }) : null; + }) : null; + // ================================================================= \ No newline at end of file diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html index 086b567..95e40b1 100644 --- a/layouts/partials/script/single-script.html +++ b/layouts/partials/script/single-script.html @@ -1,8 +1,6 @@ {{ $js := .Site.Data.lib.js }} {{ $css := .Site.Data.lib.css }} -{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }} - {{ $getParents := resources.Get "js/helper/getParents.js" | resources.Minify }} {{ $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 = '$
'; - }) : 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 = '>
'; - }) : null; - }) : null; - // ================================================================= - // ============================ mermaid ============================ {{ $lib := .Params.libraries }} @@ -524,6 +332,7 @@ }); } // ================================================================= + // ============================= katex ============================= @@ -543,6 +352,7 @@ // ================================================================= + // ========================= flowchart.js ========================== if (lib && lib.includes('flowchartjs')) { {{ $flowchartjs := .Site.Data.flowchartjs }} @@ -568,6 +378,7 @@ } // ================================================================= + // ============================ mathjax ============================ document.querySelectorAll("mjx-container").forEach(function (x) { @@ -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-"; -- cgit v1.2.3