From 1d7f03910e4331202ee29de93173572edb1b9c31 Mon Sep 17 00:00:00 2001 From: Danang Estutomoaji Date: Mon, 31 Oct 2022 21:58:42 +0700 Subject: [PATCH] docs: added copy to clipboard for each code block (#2616) Co-authored-by: Tony Brix --- docs/_document.html | 28 +----------- docs/css/style.css | 96 +++++++++++++++++++++++++++++++++++++++++- docs/img/copy-icon.svg | 60 ++++++++++++++++++++++++++ docs/js/index.js | 55 ++++++++++++++++++++++++ 4 files changed, 211 insertions(+), 28 deletions(-) create mode 100644 docs/img/copy-icon.svg create mode 100644 docs/js/index.js diff --git a/docs/_document.html b/docs/_document.html index 095e9c7a..075ea9d5 100644 --- a/docs/_document.html +++ b/docs/_document.html @@ -80,32 +80,6 @@
- + diff --git a/docs/css/style.css b/docs/css/style.css index 16777e53..0bb1bdd2 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -94,6 +94,7 @@ pre { line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; + position: relative; } code:not([class]) { @@ -104,4 +105,97 @@ code:not([class]) { border-radius: 3px; } -.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}} +.github-corner:hover .octo-arm { + animation:octocat-wave 560ms ease-in-out; +} + +@keyframes octocat-wave { + 0%,100%{transform:rotate(0)} + 20%,60%{transform:rotate(-25deg)} + 40%,80%{transform:rotate(10deg)} +} + +@media (max-width:500px) { + .github-corner:hover .octo-arm { + animation:none + } + + .github-corner .octo-arm { + animation:octocat-wave 560ms ease-in-out; + } +} + +.div-copy { + position: absolute; + top: 0; + right: 0; +} + +.div-copy .icon-copy { + opacity: 0; + transition: opacity .3s; + height: 18px; + width: 18px; + cursor: pointer; + padding: 5px; +} + +.div-copy.active .icon-copy { + opacity: 1; +} + +.div-copy .tooltip-copy { + position: relative; +} + +.div-copy .tooltip-copy::before { + content: "Copied"; + position: absolute; + + /* vertically center */ + top: 50%; + transform: translateY(-50%); + + /* move to right */ + right: 100%; + margin-right: 5px; /* and add a small left margin */ + + /* basic styles */ + padding: 2px 7px; + border-radius: 5px; + background: #444; + color: #fff; + text-align: center; + + opacity: 0; /* hide by default */ + transition: opacity .3s; +} + +.div-copy.click .tooltip-copy::before { + opacity: 1; +} + +.div-copy .tooltip-copy::after { + content: ""; + position: absolute; + + /* position tooltip correctly */ + right: 100%; + margin-right: -5px; + + /* vertically center */ + top: 50%; + transform: translateY(-50%); + + /* the arrow */ + border-style: solid; + border-width: 2px 2px 5px 8px; + border-color: transparent transparent transparent #444; + + opacity: 0; + transition: opacity .3s; +} + +.div-copy.click .tooltip-copy::after { + opacity: 1; +} diff --git a/docs/img/copy-icon.svg b/docs/img/copy-icon.svg new file mode 100644 index 00000000..f23e8f28 --- /dev/null +++ b/docs/img/copy-icon.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/js/index.js b/docs/js/index.js new file mode 100644 index 00000000..8e46ca2c --- /dev/null +++ b/docs/js/index.js @@ -0,0 +1,55 @@ + +var match = /#\/(.+)\\.md(.*)/g.exec(window.location.hash); +if (match && match[1]) { + // Redirect from URL format to new URL, for example: + // Old: https://marked.js.org/#/USING_PRO.md#renderer + // New: https://marked.js.org/using_pro#renderer + var pageName = match[1].toLowerCase(); + var sectionName = match[2]; + window.location.href = '/' + pageName + sectionName; +} + +var navLinks = document.querySelectorAll('nav a'); + +function hashChange() { + var fullUrl = window.location.href; + navLinks.forEach(function(link) { + link.className = link.href === fullUrl ? 'selected' : ''; + }); +} + +window.addEventListener('hashchange', function(e) { + e.preventDefault(); + hashChange(); +}); + +hashChange(); + +document.addEventListener('DOMContentLoaded', function() { + var div = document.createElement('div'); + div.innerHTML = '
'; + div.className = 'div-copy'; + + var allPres = document.querySelectorAll('pre'); + allPres.forEach(function(pre) { + var timeout = null; + var copy = div.cloneNode(true); + pre.appendChild(copy); + pre.onmouseover = function() { + copy.classList.add('active'); + }; + pre.onmouseleave = function() { + clearTimeout(timeout); + copy.classList.remove('active'); + copy.classList.remove('click'); + }; + copy.onclick = function() { + navigator.clipboard.writeText(pre.textContent); + copy.classList.add('click'); + clearTimeout(timeout); + timeout = setTimeout(function() { + copy.classList.remove('click'); + }, 3000); + }; + }); +});