Using clipboard.js to allow copying in iOS

2 files changed, 45 insertions, 3 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3dbc754..a11124a 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -27,7 +27,8 @@
     integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"

     crossorigin="anonymous"

   />

-  <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/kitab.css" />

+  <link rel="stylesheet" href="{{ `/css/kitab.css` | relURL }}" />

 

-  <script src="{{ .Site.BaseURL }}/js/myFunctions.js"></script>

+  <script src="{{ `/js/myFunctions.js` | relURL }}"></script>

+  <script src="{{ `/js/clipboard.min.js` | relURL }}"></script>

 </head>

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index d4c24ed..48c7e7b 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -13,7 +13,6 @@
     <i
       title="Copy URL to share"
       class="nav-menu fas fa-share-alt"
-      onclick="copyUrl({{ .Permalink }})"
     ></i>
   </p>
   <p class="about text-left mb-0">
@@ -26,3 +25,45 @@
     </a>
   </p>
 </div>
+
+<script>
+  function displayCopyMessage(bool) {
+    let alertMessage = "";
+    if (bool) {
+      alertMessage = "Link copied to clipboard";
+    } else {
+      alertMessage = "Link could not be copied to clipboard";
+    }
+    let copiedMessage = document.createElement("div");
+    copiedMessage.id = "copiedMessage";
+    copiedMessage.textContent = alertMessage;
+    copiedMessage.classList.add(
+      "bg-warning",
+      "shadow",
+      "d-block",
+      "text-center"
+    );
+    document.body.appendChild(copiedMessage);
+
+    setTimeout(function() {
+      copiedMessage.style.opacity = 0;
+    }, 500);
+    setTimeout(function() {
+      document.body.removeChild(copiedMessage);
+    }, 1500);
+  }
+
+  let clipboard = new ClipboardJS(".fa-share-alt", {
+    text: function() {
+      return "{{ .Permalink }}";
+    }
+  });
+
+  clipboard.on("success", function() {
+    displayCopyMessage(true);
+  });
+
+  clipboard.on("error", function() {
+    displayCopyMessage(false);
+  });
+</script>