Restore the copy URL function that was deleted by mistake

_data/locales/en.yml

@@ -76,7 +76,11 @@ post:
   button:
     next: Newer
     previous: Older
-    copy: Copied!
+    copy_code:
+      succeed: Copied!
+    share_link:
+      title: Copy link
+      succeed: Link copied successfully!
   # pinned prompt of posts list on homepage
   pin_prompt: Pinned
 

_data/locales/id-ID.yml

@@ -76,7 +76,11 @@ post:
   button:
     next: Terbaru
     previous: Terlama
-    copy: Disalin!
+    copy_code:
+      succeed: Disalin!
+    share_link:
+      title: Salin tautan
+      succeed: Tautan berhasil disalin!
   # pinned prompt of posts list on homepage
   pin_prompt: Disematkan
 

_data/locales/zh-CN.yml

@@ -75,7 +75,11 @@ post:
   button:
     next: 下一篇
     previous: 上一篇
-    copy: 已复制！
+    copy_code:
+      succeed: 已复制！
+    share_link:
+      title:  分享链接
+      succeed: 链接已复制！
   # pinned prompt of posts list on homepage
   pin_prompt: 顶置
 

_includes/post-sharing.html

@@ -16,9 +16,10 @@
         </a>
     {% endfor %}
 
-    <i class="fa-fw fas fa-link small" onclick="copyLink('', '{{ site.data.locales[lang].post.button.copy.succeed }}')"
+    <i id="copy-link" class="fa-fw fas fa-link small"
         data-toggle="tooltip" data-placement="top"
-        title="{{ site.data.locales[lang].post.button.copy.title }}">
+        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
     </i>
 
   </span>

_includes/refactor-content.html

@@ -127,7 +127,7 @@
           | append: '<div class="code-header" text-data="'
           | append: _text
           | append: '"><button data-original-title="'
-          | append: site.data.locales[lang].post.button.copy
+          | append: site.data.locales[lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clone"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}

_javascript/utils/clipboard.js

@@ -1,5 +1,5 @@
 /*
- * Initial the clipboard.js object
+ * Clipboard functions
  *
  * Dependencies:
  *   - popper.js (https://github.com/popperjs/popper-core)
@@ -9,9 +9,30 @@
 $(function() {
   const btnSelector = '.code-header>button';
   const ICON_SUCCESS = 'fas fa-check';
-  const ATTR_LOCKED = 'locked';
+  const ATTR_TIMEOUT = 'timeout';
   const TIMEOUT = 2000; // in milliseconds
 
+  function isLocked(node) {
+    if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
+      let timeout = $(node).attr(ATTR_TIMEOUT);
+      if (Number(timeout) > Date.now()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function lock(node) {
+    $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  }
+
+  function unlock(node) {
+    $(node).removeAttr(ATTR_TIMEOUT);
+  }
+
+  /* --- Copy code block --- */
+
+  // Initial the clipboard.js object
   const clipboard = new ClipboardJS(btnSelector, {
     target(trigger) {
       return trigger.parentNode.nextElementSibling;
@@ -30,51 +51,79 @@ $(function() {
 
   const ICON_DEFAULT = getIcon(btnSelector);
 
-  function setTooltip(btn) {
-    $(btn).tooltip('hide')
-      .tooltip('show');
+  function showTooltip(btn) {
+    $(btn).tooltip('show');
   }
 
   function hideTooltip(btn) {
-    setTimeout(function() {
-      $(btn).tooltip('hide');
-    }, TIMEOUT);
+    $(btn).tooltip('hide');
+    unlock(btn);
   }
 
   function setSuccessIcon(btn) {
     let btnNode = $(btn);
     let iconNode = btnNode.children();
-    btnNode.attr(ATTR_LOCKED, true);
     iconNode.attr('class', ICON_SUCCESS);
+    lock(btn);
   }
 
   function resumeIcon(btn) {
     let btnNode = $(btn);
     let iconNode = btnNode.children();
-
-    setTimeout(function() {
-      btnNode.removeAttr(ATTR_LOCKED);
-      iconNode.attr('class', ICON_DEFAULT);
-    }, TIMEOUT);
-  }
-
-  function isLocked(btn) {
-    let locked = $(btn).attr(ATTR_LOCKED);
-    return locked === 'true';
+    iconNode.attr('class', ICON_DEFAULT);
+    unlock(btn);
   }
 
   clipboard.on('success', (e) => {
     e.clearSelection();
 
-    if (isLocked(e.trigger)) {
+    const trigger = e.trigger;
+    if (isLocked(trigger)) {
       return;
     }
 
-    setTooltip(e.trigger);
-    hideTooltip(e.trigger);
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
 
-    setSuccessIcon(e.trigger);
-    resumeIcon($(e.trigger));
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+    }, TIMEOUT);
+
+  });
+
+  /* --- Post link sharing --- */
+
+  $('#copy-link').click((e) => {
+
+    let target = $(e.target);
+
+    if (isLocked(target)) {
+      return;
+    }
+
+    // Copy URL to clipboard
+
+    const url = window.location.href;
+    const $temp = $("<input>");
+
+    $("body").append($temp);
+    $temp.val(url).select();
+    document.execCommand("copy");
+    $temp.remove();
+
+    // Switch tooltip title
+
+    const defaultTitle = target.attr('data-original-title');
+    const succeedTitle = target.attr('title-succeed');
+
+    target.attr('data-original-title', succeedTitle).tooltip('show');
+    lock(target);
+
+    setTimeout(() => {
+      target.attr('data-original-title', defaultTitle);
+      unlock(target);
+    }, TIMEOUT);
 
   });
 

_sass/addon/syntax.scss

@@ -199,12 +199,12 @@ div {
     background-color: inherit;
     color: var(--highlight-lineno-color);
 
-    &[locked=true] {
+    &[timeout] {
       color: var(--clipboard-checked-color);
       border-color: var(--clipboard-checked-color);
     }
 
-    &:not([locked]):hover {
+    &:not([timeout]):hover {
       background-color: gray;
       color: white;
     }