add locale support for 'copy to clipboard'

Author: NichtsHsu

_data/locales/en.yml

@@ -79,6 +79,10 @@ post:
     copy:
       title: Copy link
       succeed: Link copied successfully!
+  clipboard:
+    tooltip: Copy to clipboard
+    succeed: Copied!
+    failed: Error occurred!
   # pinned prompt of posts list on homepage
   pin_prompt: Pinned
 

_data/locales/zh-CN.yml

@@ -78,6 +78,10 @@ post:
     copy:
       title: 分享链接
       succeed: 链接已复制！
+  clipboard:
+    tooltip: 复制到剪贴板
+    succeed: 已复制！
+    failed: 出错啦！
   # pinned prompt of posts list on homepage
   pin_prompt: 顶置
 

_javascript/utils/copy-to-clipboard.js

@@ -4,7 +4,7 @@
  */
 
 $(function copyToClipboard() {
-	if (!enableCopyToClipboard) {
+	if (!clipboardAttr.enable) {
 		return;
 	}
 
@@ -19,40 +19,43 @@ $(function copyToClipboard() {
 	}
 
 	function fallbackMessage(action) {
-		var actionMsg = '';
-		var actionKey = (action === 'cut' ? 'X' : 'C');
-		if (/iPhone|iPad/i.test(navigator.userAgent)) {
-			actionMsg = 'No support :(';
-		} else if (/Mac/i.test(navigator.userAgent)) {
-			actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
-		} else {
-			actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
+		let tooltipMsg = "Error occurred!";
+		if (clipboardAttr.failed && clipboardAttr.failed.length > 0) {
+			tooltipMsg = clipboardAttr.failed;
 		}
-		return actionMsg;
+		return tooltipMsg;
 	}
 
 	$("div.highlighter-rouge").each(function (index, element) {
 		element.firstChild.insertAdjacentHTML('beforebegin', '<button class="cpbtn" data-clipboard-snippet><i class="far fa-copy"></i></button>');
 	});
-	var clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
+	let clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
 		target: function (trigger) {
 			return trigger.nextElementSibling;
 		}
 	});
 	clipboardSnippets.on('success', function (e) {
 		e.clearSelection();
-		showTooltip(e.trigger, 'Copied!');
+		let tooltipMsg = "Copied!";
+		if (clipboardAttr.succeed && clipboardAttr.succeed.length > 0) {
+			tooltipMsg = clipboardAttr.succeed;
+		}
+		showTooltip(e.trigger, tooltipMsg);
 	});
 	clipboardSnippets.on('error', function (e) {
 		showTooltip(e.trigger, fallbackMessage(e.action));
 	});
 
-	var btns = document.querySelectorAll('.cpbtn');
-	for (var i = 0; i < btns.length; i++) {
+	let btns = document.querySelectorAll('.cpbtn');
+	for (let i = 0; i < btns.length; i++) {
 		btns[i].addEventListener('mouseleave', clearTooltip);
 		btns[i].addEventListener('blur', clearTooltip);
 		btns[i].addEventListener('mouseenter', function (e) {
-			showTooltip(e.currentTarget, "copy to clipboard");
+			let tooltipMsg = "Copy to clipboard";
+			if (clipboardAttr.tooltip && clipboardAttr.tooltip.length > 0) {
+				tooltipMsg = clipboardAttr.tooltip;
+			}
+			showTooltip(e.currentTarget, tooltipMsg);
 		}, false);
 	}
 });

_layouts/post.html

@@ -142,7 +142,12 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
 </div> <!-- .row -->
 
-<!-- enable displaying copy button in code blocks -->
+<!-- display copy button in code blocks -->
 <script>
-  var enableCopyToClipboard = {{ site.clipboard }} && {{ page.clipboard }};
+  var clipboardAttr = {
+    enable: {{ site.clipboard }} && {{ page.clipboard }},
+    tooltip: '{{ site.data.locales[lang].post.clipboard.tooltip }}',
+    succeed: '{{ site.data.locales[lang].post.clipboard.succeed }}',
+    failed: '{{ site.data.locales[lang].post.clipboard.failed }}',
+  };
 </script>