-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Plugins: Toolbar & Copy to Clipboard (#891)
* Add prism-toolbar plugin This plugin exposes a `registerButton` method, which other plugins can use to add buttons to the toolbar. Comes with styles. * Add demo file for toolbar plugin Registers a "Hello World!" tag with the toolbar. * Make `toolbar.registerButton` polymorphic This allows developers to provide either a callback or an object with a `text` string and an optional `onClick` function to create a new button. * Add Toolbar & Copy to Clipboard to components.js * Add Copy to Clipboard plugin * Switch `innerHTML` to `textContent` This ensures additional HTML can't be passed to the toolbar via the `text` property, ensuring a consistent display for the buttons. * Use `call` to bind `this` to the `onClick` method This provides access to the clicked element, which is what `this` is usually bound to on event listeners. * Add hover animation to toolbar * Add drop shadow to toolbar buttons * Add `clipboard` to `optionalDependencies` This will install Clipboard.js when installing from `npm`, but won't fail the build if the installation of Clipboard.js fails. * Load Clipboard.js from CDN if not present * Display plugin code using data-src * Recompile prism-toolbar * Update Show Languages to be a Toolbar button Show Languages now registers a callback with the toolbar plugin to return an element with the language in it. * Add basic HTML API & documentation The Toolbar will now be able to read a `data-label` attribute and add it to the code snippet. * Switch a -> button when only providing onClick Also adds a `url` property which creats an anchor tag and sets the href. Adds some styles to override the button defaults. * Add support for data-url to create anchor tag This allows the HTML API to create links in the Toolbar. * Update toolbar to allow order controlled via HTML Uses a data-attribute on the `body` tag to update the order, should the user choose to do so. * Allow template element to provide content to label This provides one of several options a user can implement in order to get a custom button. Also fixes some bugs in the documentation. * Fix bug when combined with the autoloader plugin The autoloader will rehighlight the element after the language arrives. This means the complete hook can run multiple times. Without a check, multiple toolbars can get added to an element.
- Loading branch information
1 parent
25cdd3f
commit 07b81ac
Showing
13 changed files
with
480 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
||
| <meta charset="utf-8" /> | ||
| <link rel="shortcut icon" href="favicon.png" /> | ||
| <title>Copy to Clipboard ▲ Prism plugins</title> | ||
| <base href="../.." /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="themes/prism.css" data-noprefix /> | ||
| <link rel="stylesheet" href="plugins/toolbar/prism-toolbar.css" data-noprefix /> | ||
| <script src="prefixfree.min.js"></script> | ||
|
|
||
| <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script> | ||
| <script src="http://www.google-analytics.com/ga.js" async></script> | ||
| </head> | ||
| <body class="language-markup"> | ||
|
|
||
| <header> | ||
| <div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div> | ||
|
|
||
| <h2>Copy to Clipboard</h2> | ||
| <p>Add a button that copies the code block to the clipboard when clicked.</p> | ||
| </header> | ||
|
|
||
| <section> | ||
| <h1>How to use</h1> | ||
| <p>In addition to including the plugin file with your PrismJS build, ensure <a href="https://clipboardjs.com/">Clipboard.js</a> is loaded before the plugin.</p> | ||
|
|
||
| <p>The simplest way to include Clipboard.js is to use any of the | ||
| <a href="https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers">recommended CDNs</a>. If you're using Browserify, Clipboard.js will be loaded auotmatically | ||
| if it's included in your <code>package.json</code>. | ||
| If you don't load Clipboard.js yourself, the plugin will load it from a CDN for you.</p> | ||
|
|
||
| <pre data-src="plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></pre> | ||
| </section> | ||
|
|
||
| <footer data-src="templates/footer.html" data-type="text/html"></footer> | ||
|
|
||
| <script src="prism.js"></script> | ||
| <script src="plugins/toolbar/prism-toolbar.js"></script> | ||
| <script src="plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> | ||
| <script src="utopia.js"></script> | ||
| <script src="components.js"></script> | ||
| <script src="code.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| (function(){ | ||
| if (typeof self === 'undefined' || !self.Prism || !self.document) { | ||
| return; | ||
| } | ||
|
|
||
| if (!Prism.plugins.toolbar) { | ||
| console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.'); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| var Clipboard = window.Clipboard || undefined; | ||
|
|
||
| if (!Clipboard && typeof require === 'function') { | ||
| Clipboard = require('clipboard'); | ||
| } | ||
|
|
||
| var callbacks = []; | ||
|
|
||
| if (!Clipboard) { | ||
| var script = document.createElement('script'); | ||
| var head = document.querySelector('head'); | ||
|
|
||
| script.onload = function() { | ||
| Clipboard = window.Clipboard; | ||
|
|
||
| if (Clipboard) { | ||
| while (callbacks.length) { | ||
| callbacks.pop()(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js'; | ||
| head.appendChild(script); | ||
| } | ||
|
|
||
| Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) { | ||
| var linkCopy = document.createElement('a'); | ||
| linkCopy.textContent = 'Copy'; | ||
|
|
||
| if (!Clipboard) { | ||
| callbacks.push(registerClipboard); | ||
| } else { | ||
| registerClipboard(); | ||
| } | ||
|
|
||
| return linkCopy; | ||
|
|
||
| function registerClipboard() { | ||
| var clip = new Clipboard(linkCopy, { | ||
| 'text': function () { | ||
| return env.code; | ||
| } | ||
| }); | ||
|
|
||
| clip.on('success', function() { | ||
| linkCopy.textContent = 'Copied!'; | ||
|
|
||
| resetText(); | ||
| }); | ||
| clip.on('error', function () { | ||
| linkCopy.textContent = 'Press Ctrl+C to copy'; | ||
|
|
||
| resetText(); | ||
| }); | ||
| } | ||
|
|
||
| function resetText() { | ||
| setTimeout(function () { | ||
| linkCopy.textContent = 'Copy'; | ||
| }, 5000); | ||
| } | ||
| }); | ||
| })(); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.