Skip to content

Commit

Permalink
Copy to Clipboard: Added support for custom styles (#2789)
Browse files Browse the repository at this point in the history
  • Loading branch information
RunDevelopment authored Mar 17, 2021
1 parent 5943f4c commit 4d7f75b
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 8 deletions.
22 changes: 21 additions & 1 deletion plugins/copy-to-clipboard/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand Down
20 changes: 14 additions & 6 deletions plugins/copy-to-clipboard/prism-copy-to-clipboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}
});
})();
2 changes: 1 addition & 1 deletion plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 4d7f75b

Please sign in to comment.