From 4425e21596053853723f1a00042c4eb3795fae61 Mon Sep 17 00:00:00 2001 From: Kian Kasad Date: Sat, 3 Apr 2021 18:24:39 -0700 Subject: [PATCH 1/6] add buttons to copy code block contents Adds a clickable "copy" link in the top-right corner of each code block. If available, uses the navigator.clipboard API. Falls back to selecting the text and calling document.execCommand('copy') to copy text. --- assets/css/common/main.css | 18 +++++++++++++++++- layouts/partials/footer.html | 31 +++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/assets/css/common/main.css b/assets/css/common/main.css index a22329e7a5..b3279aabc5 100644 --- a/assets/css/common/main.css +++ b/assets/css/common/main.css @@ -41,5 +41,21 @@ } code { - direction: ltr + direction: ltr; +} + +div.highlight { + position: relative; +} + +.copy-code { + position: absolute; + top: 4px; + right: 16px; + color: var(--secondary); +} + +.copy-code:hover { + cursor: pointer; + text-decoration: underline; } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index eb87737e66..6ab425f5b2 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -96,3 +96,34 @@ {{- end }} + +{{- if (not .Site.Params.disableCodeCopy) }} + +{{- end }} From 568d2cf93b17cb84cc1afc55b088d6659e63893f Mon Sep 17 00:00:00 2001 From: Kian Kasad Date: Sat, 3 Apr 2021 18:32:59 -0700 Subject: [PATCH 2/6] hide copy button unless mouse is hovering over code block --- assets/css/common/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/css/common/main.css b/assets/css/common/main.css index b3279aabc5..a72509f162 100644 --- a/assets/css/common/main.css +++ b/assets/css/common/main.css @@ -49,12 +49,17 @@ div.highlight { } .copy-code { + display: none; position: absolute; top: 4px; right: 16px; color: var(--secondary); } +div.highlight:hover .copy-code { + display: block; +} + .copy-code:hover { cursor: pointer; text-decoration: underline; From 390d4d129acfb72bd40f76dc1f441a9abd350787 Mon Sep 17 00:00:00 2001 From: Kian Kasad Date: Fri, 9 Apr 2021 16:01:40 -0700 Subject: [PATCH 3/6] change text of copy button when text is copied --- layouts/partials/footer.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 6ab425f5b2..53030dd768 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -106,9 +106,17 @@ copybutton.classList.add('copy-code'); copybutton.innerHTML = 'copy'; + function copyingDone() { + copybutton.innerText = 'copied!'; + setTimeout(() => { + copybutton.innerText = 'copy'; + }, 2000); + } + copybutton.addEventListener('click', (cb) => { if ('clipboard' in navigator) { navigator.clipboard.writeText(codeblock.textContent); + copyingDone(); return; } @@ -119,6 +127,7 @@ selection.addRange(range); try { document.execCommand('copy'); + copyingDone(); } catch (e) {}; selection.removeRange(range); }); From fd08e066ef7165def0b2e19407ea6771d84d63cd Mon Sep 17 00:00:00 2001 From: Kian Kasad Date: Fri, 9 Apr 2021 16:05:00 -0700 Subject: [PATCH 4/6] apply suggestions from comments on #345 --- assets/css/common/main.css | 13 ++++++------- layouts/partials/footer.html | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/assets/css/common/main.css b/assets/css/common/main.css index a72509f162..eb2c4c8484 100644 --- a/assets/css/common/main.css +++ b/assets/css/common/main.css @@ -52,15 +52,14 @@ div.highlight { display: none; position: absolute; top: 4px; - right: 16px; - color: var(--secondary); + right: 4px; + color: rgba(255, 255, 255, 0.8); + background: rgba(78, 78, 78, 0.8); + border-radius: var(--radius); + padding: 0 5px; + font-size: 14px; } div.highlight:hover .copy-code { display: block; } - -.copy-code:hover { - cursor: pointer; - text-decoration: underline; -} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 53030dd768..d03a750fca 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -102,9 +102,9 @@ document.querySelectorAll('pre > code').forEach((codeblock) => { const container = codeblock.parentNode.parentNode; - const copybutton = document.createElement('div'); + const copybutton = document.createElement('button'); copybutton.classList.add('copy-code'); - copybutton.innerHTML = 'copy'; + copybutton.innerText = 'copy'; function copyingDone() { copybutton.innerText = 'copied!'; From 5d7d100f80f241542bbeaf7bc9051e927cc6405e Mon Sep 17 00:00:00 2001 From: Kian Kasad Date: Fri, 9 Apr 2021 16:19:30 -0700 Subject: [PATCH 5/6] add translation keys for copy button text --- i18n/en.yaml | 6 ++++++ layouts/partials/footer.html | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/i18n/en.yaml b/i18n/en.yaml index b7323d01d0..dd40b0d0d1 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -17,3 +17,9 @@ - id: home translation: "Home" + +- id: copy + translation: "copy" + +- id: copied + translation: "copied!" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d03a750fca..5adea8f6ac 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -104,12 +104,12 @@ const copybutton = document.createElement('button'); copybutton.classList.add('copy-code'); - copybutton.innerText = 'copy'; + copybutton.innerText = '{{- i18n "copy" | default "copy" }}'; function copyingDone() { - copybutton.innerText = 'copied!'; + copybutton.innerText = '{{- i18n "copied" | default "copied!" }}'; setTimeout(() => { - copybutton.innerText = 'copy'; + copybutton.innerText = '{{- i18n "copy" | default "copy" }}'; }, 2000); } From 95c49b666d612e1656ab6c198eb432e1d38300b2 Mon Sep 17 00:00:00 2001 From: Aditya Telange <21258296+adityatelange@users.noreply.github.com> Date: Sat, 10 Apr 2021 11:28:09 +0530 Subject: [PATCH 6/6] minor mods - change i18n ids to `code_copy` and `code_copied` - refactor --- i18n/en.yaml | 4 ++-- layouts/partials/footer.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/en.yaml b/i18n/en.yaml index dd40b0d0d1..24d11f935c 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -18,8 +18,8 @@ - id: home translation: "Home" -- id: copy +- id: code_copy translation: "copy" -- id: copied +- id: code_copied translation: "copied!" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5adea8f6ac..28ddccc7ca 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -104,12 +104,12 @@ const copybutton = document.createElement('button'); copybutton.classList.add('copy-code'); - copybutton.innerText = '{{- i18n "copy" | default "copy" }}'; + copybutton.innerText = '{{- i18n "code_copy" | default "copy" }}'; function copyingDone() { - copybutton.innerText = '{{- i18n "copied" | default "copied!" }}'; + copybutton.innerText = '{{- i18n "code_copied" | default "copied!" }}'; setTimeout(() => { - copybutton.innerText = '{{- i18n "copy" | default "copy" }}'; + copybutton.innerText = '{{- i18n "code_copy" | default "copy" }}'; }, 2000); } @@ -128,7 +128,7 @@ try { document.execCommand('copy'); copyingDone(); - } catch (e) {}; + } catch (e) { }; selection.removeRange(range); });