hugo-theme-zzo/layouts/partials/script/clipboard-script.html

113 lines
4.2 KiB
HTML

{{ $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>