Commit 4d7f75b027d6b89bf68f4bc8c1192bc3b65eb5b3
2021-03-17T11:48:40
Copy to Clipboard: Added support for custom styles (#2789)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
diff --git a/plugins/copy-to-clipboard/index.html b/plugins/copy-to-clipboard/index.html
index 9fdd6c5..60058c1 100644
--- a/plugins/copy-to-clipboard/index.html
+++ b/plugins/copy-to-clipboard/index.html
@@ -14,7 +14,7 @@
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
-<body>
+<body class="language-text">
<header data-plugin-header="copy-to-clipboard"></header>
@@ -42,6 +42,26 @@
</section>
<section>
+ <h1>Styling</h1>
+
+ <p>This plugin supports customizing the style of the copy button. To understand how this is done, let's look at the HTML structure of the copy button:</p>
+
+ <pre><code class="language-markup"><button class="copy-to-clipboard-button" type="button" data-copy-state="copy">
+ <span>Copy</span>
+</button></code></pre>
+
+ <p>The <code>copy-to-clipboard-button</code> class can be used to select the button. The <code>data-copy-state</code> attribute indicates the current state of the plugin with the 3 possible states being:</p>
+
+ <ul>
+ <li><code>data-copy-state="copy"</code> — default state;</li>
+ <li><code>data-copy-state="copy-error"</code> — the state after failing copying;</li>
+ <li><code>data-copy-state="copy-success"</code> — the state after successful copying;</li>
+ </ul>
+
+ <p>These 3 states should be conveyed to the user either by different styling or displaying the button text.</p>
+</section>
+
+<section>
<h1>Examples</h1>
<h2>Sharing</h2>
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
index d6e744f..b304eb1 100644
--- a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
+++ b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
@@ -114,20 +114,24 @@
var settings = getSettings(element);
var linkCopy = document.createElement('button');
- linkCopy.textContent = settings['copy'];
+ linkCopy.className = 'copy-to-clipboard-button';
linkCopy.setAttribute('type', 'button');
+ var linkSpan = document.createElement('span');
+ linkCopy.appendChild(linkSpan);
+
+ setState('copy');
registerClipboard(linkCopy, {
getText: function () {
return element.textContent;
},
success: function () {
- linkCopy.textContent = settings['copy-success'];
+ setState('copy-success');
resetText();
},
error: function () {
- linkCopy.textContent = settings['copy-error'];
+ setState('copy-error');
setTimeout(function () {
selectElementText(element);
@@ -140,9 +144,13 @@
return linkCopy;
function resetText() {
- setTimeout(function () {
- linkCopy.textContent = settings['copy'];
- }, settings['copy-timeout']);
+ setTimeout(function () { setState('copy'); }, settings['copy-timeout']);
+ }
+
+ /** @param {"copy" | "copy-error" | "copy-success"} state */
+ function setState(state) {
+ linkSpan.textContent = settings[state];
+ linkCopy.setAttribute('data-copy-state', state);
}
});
})();
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
index d45ee5f..26b45fe 100644
--- a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
+++ b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
@@ -1 +1 @@
-!function(){function c(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,t.error):function(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}(t)}(e)})}"undefined"!=typeof self&&self.Prism&&self.document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,r=t;r&&!r.hasAttribute(n);)r=r.parentElement;r&&(e[o]=r.getAttribute(n))}return e}(e),n=document.createElement("button");return n.textContent=o.copy,n.setAttribute("type","button"),c(n,{getText:function(){return e.textContent},success:function(){n.textContent=o["copy-success"],r()},error:function(){n.textContent=o["copy-error"],setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),r()}}),n;function r(){setTimeout(function(){n.textContent=o.copy},o["copy-timeout"])}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
\ No newline at end of file
+!function(){function u(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,t.error):function(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}(t)}(e)})}"undefined"!=typeof self&&self.Prism&&self.document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,r=t;r&&!r.hasAttribute(n);)r=r.parentElement;r&&(e[o]=r.getAttribute(n))}return e}(e),n=document.createElement("button");n.className="copy-to-clipboard-button",n.setAttribute("type","button");var r=document.createElement("span");return n.appendChild(r),i("copy"),u(n,{getText:function(){return e.textContent},success:function(){i("copy-success"),c()},error:function(){i("copy-error"),setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),c()}}),n;function c(){setTimeout(function(){i("copy")},o["copy-timeout"])}function i(t){r.textContent=o[t],n.setAttribute("data-copy-state",t)}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
\ No newline at end of file