Copy to Clipboard: Added support for custom styles (#2789)

RunDevelopment · web-flow · commit 4d7f75b027d6 · 2021-03-17T11:48:40.000+01:00
diff --git 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>
 
@@ -41,6 +41,26 @@ <h1>Settings</h1>
 	<p><strong>Warning!</strong> Although possible, you definitely shouldn't add these attributes to the <code class="token tag">html</code> element, because a human-readable text should be placed <em>after</em> the character encoding declaration (<code>&lt;meta charset=&quot;...&quot;&gt;</code>), and the latter <a href="https://html.spec.whatwg.org/multipage/semantics.html#charset">must be</a> serialized completely within the first 512 (in older browsers) or 1024 bytes of the document. Consider using the <code class="token tag">body</code> element or one of its descendants.</p>
 </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">&lt;button class="copy-to-clipboard-button" type="button" data-copy-state="copy">
+	&lt;span>Copy&lt;/span>
+&lt;/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>
 
diff --git 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
