kmx.io/prism.js/plugins/toolbar/index.html
-
Show log
Commit
-
Hash : 07b81ac7
Author :
Date : 2016-11-08T20:08:49
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.
-
plugins/toolbar/index.html
-
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.png" /> <title>Toolbar ▲ 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" data-toolbar-order="select-code,hello-world,label"> <header> <div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div> <h2>Toolbar</h2> <p>Attach a toolbar for plugins to easily register buttons on the top of a code block.</p> </header> <section> <h1>How to use</h1> <p>The Toolbar plugin allows for several methods to register your button, using the <code>Prism.plugins.toolbar.registerButton</code> function.</p> <p>The simplest method is through the HTML API. Add a <code>data-label</code> attribute to the <code>pre</code> element, and the Toolbar plugin will read the value of that attribute and append a label to the code snippet.</p> <pre data-label="Hello World!"><code class="language-markup"><pre data-src="plugins/toolbar/prism-toolbar.js" data-label="Hello World!"></pre></code></pre> <p>If you want to provide arbitrary HTML to the label, create a <code>template</code> element with the HTML you want in the label, and provide the <code>template</code> element's <code>id</code> to <code>data-label</code>. The Toolbar plugin will use the template's content for the button. You can also use to declare your event handlers inline:</p> <pre data-label="my-label-button"><code class="language-markup"><pre data-src="plugins/toolbar/prism-toolbar.js" data-label="my-label-button"></pre></code></pre> <pre><code><template id="my-label-button"><button onclick="console.log('This is an inline-handler');">My button</button></template></code></pre> <p>For more flexibility, the Toolbar exposes a JavaScript function that can be used to register new buttons or labels to the Toolbar, <code>Prism.plugins.toolbar.registerButton</code>.</p> <p>The function accepts a key for the button and an object with a <code>text</code> property string and an optional <code>onClick</code> function or <code>url</code> string. The <code>onClick</code> function will be called when the button is clicked, while the <code>url</code> property will be set to the anchor tag's <code>href</code>.</p> <pre><code class="language-javascript">Prism.plugins.toolbar.registerButton('hello-world', { text: 'Hello World!', // required onClick: function (env) { // optional alert('This code snippet is written in ' + env.language + '.'); } });</code></pre> <p>See how the above code registers the <code>Hello World!</code> button? You can use this in your plugins to register your own buttons with the toolbar.</p> <p>If you need more control, you can provide a function to <code>registerButton</code> that returns either a <code>span</code>, <code>a</code>, or <code>button</code> element.</p> <pre><code class="language-javascript">Prism.plugins.toolbar.registerButton('select-code', function() { var button = document.createElement('button'); button.innerHTML = 'Select Code'; button.addEventListener('click', function () { // Source: http://stackoverflow.com/a/11128179/2757940 if (document.body.createTextRange) { // ms var range = document.body.createTextRange(); range.moveToElementText(env.element); range.select(); } else if (window.getSelection) { // moz, opera, webkit var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(env.element); selection.removeAllRanges(); selection.addRange(range); } }); return button; });</code></pre> <p>The above function creates the Select Code button you see, and when you click it, the code gets highlighted.</p> <p>By default, the buttons will be added to the code snippet in the order they were registered. If more control over the order is needed, an HTML attribute can be added to the <code>body</code> tag with a comma-separated string indicating the order.</p> <pre><code><body data-toolbar-order="select-code,hello-world,label"></code></pre> </section> <footer data-src="templates/footer.html" data-type="text/html"></footer> <template id="my-label-button"><button onclick="console.log('This is an inline-handler');">My button</button></template> <script src="prism.js"></script> <script src="plugins/toolbar/prism-toolbar.js"></script> <script src="utopia.js"></script> <script src="components.js"></script> <script> Prism.plugins.toolbar.registerButton('hello-world', { text: 'Hello World!', // required onClick: function (env) { // optional alert('This code snippet is written in ' + env.language + '.'); } }); </script> <script> Prism.plugins.toolbar.registerButton('select-code', function(env) { var button = document.createElement('button'); button.innerHTML = 'Select Code'; button.addEventListener('click', function () { // Source: http://stackoverflow.com/a/11128179/2757940 if (document.body.createTextRange) { // ms var range = document.body.createTextRange(); range.moveToElementText(env.element); range.select(); } else if (window.getSelection) { // moz, opera, webkit var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(env.element); selection.removeAllRanges(); selection.addRange(range); } }); return button; }); </script> <script src="code.js"></script> </body> </html>