Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Copy to Clipboard: Added support for custom styles #2789

Merged
merged 2 commits into from
Mar 17, 2021
Merged

Copy to Clipboard: Added support for custom styles #2789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a0d083
Copy to Clipboard: Added support for custom styles
RunDevelopment Mar 6, 2021
37da32b
Merge branch 'master' into copy-to-clipboard-styling
RunDevelopment Mar 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion plugins/copy-to-clipboard/index.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop

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