From b6c8cdfb0c317ce922862ba414aedb4777f2b4f3 Mon Sep 17 00:00:00 2001
From: Carl Richter <carl.richter@tyclipso.net>
Date: Fri, 30 Jul 2021 12:40:17 +0200
Subject: [PATCH] feat: add new button for copying anchor links

---
 client/themes/tyclipso/components/page.vue    | 18 +++++++++++++
 client/themes/tyclipso/scss/app.scss          | 19 ++++----------
 .../scss/components/_anchor-button.scss       | 15 +++++++++++
 .../tyclipso/scss/components/_index.scss      |  1 +
 .../components/AnchorCopyButton.js            | 15 +++++++++++
 .../html-tyclipso/components/ImageOverlay.js  | 26 ++++++++++++-------
 .../rendering/html-tyclipso/renderer.js       |  5 +++-
 7 files changed, 74 insertions(+), 25 deletions(-)
 create mode 100644 client/themes/tyclipso/scss/components/_anchor-button.scss
 create mode 100644 server/modules/rendering/html-tyclipso/components/AnchorCopyButton.js

diff --git a/client/themes/tyclipso/components/page.vue b/client/themes/tyclipso/components/page.vue
index bae936fe..d371322f 100644
--- a/client/themes/tyclipso/components/page.vue
+++ b/client/themes/tyclipso/components/page.vue
@@ -551,6 +551,24 @@ export default {
 
       // remove empty divs
       c.querySelectorAll('div:not([class]):not([id]):empty').forEach(el => el.remove())
+
+      // copy header links
+      c.querySelectorAll('.toc-header').forEach(header => {
+        const button = header.querySelector('.ty-anchor-button')
+        const link = header.querySelector('.toc-anchor').href
+        const icons = button.querySelectorAll('.v-icon')
+
+        button.addEventListener('click', () => {
+          navigator.clipboard.writeText(link)
+
+          icons[0].style.display = 'none'
+          icons[1].style.display = null
+          setTimeout(() => {
+            icons[0].style.display = null
+            icons[1].style.display = 'none'
+          }, 1000)
+        })
+      })
     },
     copyToClipboard(hash) {
       const url = window.location.origin + window.location.pathname + hash
diff --git a/client/themes/tyclipso/scss/app.scss b/client/themes/tyclipso/scss/app.scss
index c785ec7b..81e52f0f 100644
--- a/client/themes/tyclipso/scss/app.scss
+++ b/client/themes/tyclipso/scss/app.scss
@@ -21,24 +21,15 @@
 
   h1, h2, h3, h4, h5, h6 {
     color: mc('grey', '800');
-
-    .toc-anchor {
-      top: 0;
-      font-size: inherit;
-      overflow: hidden;
-      left: -1em;
-      right: 0;
-      color: transparent;
-
-      &::before {
-        content: '#';
-        color: mc('theme', 'primary');
-      }
-    }
+    padding-right: 2rem;
 
     &:not(:first-child) {
       margin-top: 1.25em;
     }
+
+    .toc-anchor {
+      display: none !important;
+    }
   }
 
   // remove underline
diff --git a/client/themes/tyclipso/scss/components/_anchor-button.scss b/client/themes/tyclipso/scss/components/_anchor-button.scss
new file mode 100644
index 00000000..7ce6f5a7
--- /dev/null
+++ b/client/themes/tyclipso/scss/components/_anchor-button.scss
@@ -0,0 +1,15 @@
+.ty-anchor-button {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility .1s ease, opacity .1s ease;
+  color: mc('grey', '700');
+}
+
+.toc-header:hover .ty-anchor-button {
+  opacity: 1;
+  visibility: visible;
+}
diff --git a/client/themes/tyclipso/scss/components/_index.scss b/client/themes/tyclipso/scss/components/_index.scss
index bcf951a4..9d80a6a8 100644
--- a/client/themes/tyclipso/scss/components/_index.scss
+++ b/client/themes/tyclipso/scss/components/_index.scss
@@ -1 +1,2 @@
 @import "image";
+@import "anchor-button";
diff --git a/server/modules/rendering/html-tyclipso/components/AnchorCopyButton.js b/server/modules/rendering/html-tyclipso/components/AnchorCopyButton.js
new file mode 100644
index 00000000..53a748d1
--- /dev/null
+++ b/server/modules/rendering/html-tyclipso/components/AnchorCopyButton.js
@@ -0,0 +1,15 @@
+/**
+ * @return {string}
+ */
+function AnchorCopyButton() {
+  return `
+      <button type="button" class="ty-anchor-button v-btn v-btn--flat v-btn--icon v-btn--round v-size--small" aria-label="Link kopieren">
+        <span class="v-btn__content">
+          <i aria-hidden="true" class="v-icon notranslate mdi mdi-link-variant" style="font-size: 16px"></i>
+          <i aria-hidden="true" class="v-icon notranslate mdi mdi-check-circle" style="font-size: 16px; display: none;"></i>
+        </span>
+      </button>
+    `
+}
+
+module.exports = AnchorCopyButton
diff --git a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
index 0611caee..ee14ebae 100644
--- a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
+++ b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
@@ -1,12 +1,18 @@
-const ImageOverlay = (src) => `
-<div class="ty-image-overlay">
-    <a href="${src}" target="_blank" class="v-btn v-btn--contained theme--light v-size--default primary" aria-label="In neuem Tab öffnen">
-      <span class="v-btn__content">
-          <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new theme--light"></i>
-          In neuem Tab öffnen
-      </span>
-    </a>
-</div>
-`
+/**
+ * @param {string} src - Image source.
+ * @return {string}
+ */
+function ImageOverlay(src) {
+  return `
+    <div class="ty-image-overlay">
+      <a href="${src}" target="_blank" class="v-btn v-btn--contained theme--light v-size--default primary" aria-label="In neuem Tab öffnen">
+        <span class="v-btn__content">
+            <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new theme--light"></i>
+            In neuem Tab öffnen
+        </span>
+      </a>
+    </div>
+  `
+}
 
 module.exports = ImageOverlay
diff --git a/server/modules/rendering/html-tyclipso/renderer.js b/server/modules/rendering/html-tyclipso/renderer.js
index 03b20b01..9a4b93de 100644
--- a/server/modules/rendering/html-tyclipso/renderer.js
+++ b/server/modules/rendering/html-tyclipso/renderer.js
@@ -1,13 +1,16 @@
 const ImageOverlay = require('./components/ImageOverlay')
+const AnchorCopyButton = require('./components/AnchorCopyButton')
 
 module.exports = {
   init($, config) {
-
     // wrap images
     $('p > img').each((i, element) => {
       const src = $(element).attr('src');
       $(element).wrap(`<div class="ty-image-wrapper"></div>`)
       $(element).parent().append(ImageOverlay(src))
     })
+
+    // add anchor button to headlines
+    $('h1,h2,h3,h4,h5,h6').append(AnchorCopyButton())
   }
 }