Skip to content

Commit

Permalink
Allow template element to provide content to label
Browse files Browse the repository at this point in the history
This provides one of several options a user can implement in order to
get a custom button.
  • Loading branch information
mAAdhaTTah committed Oct 24, 2016
1 parent 09c4c94 commit e471398
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 8 deletions.
8 changes: 8 additions & 0 deletions plugins/toolbar/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@ <h1>How to use</h1>

<pre><code class="language-markup" data-label="Hello World!">&lt;pre data-src=&quot;plugins/toolbar/prism-toolbar.js&quot; data-label=&quot;Hello World!&quot;&gt;&lt;/pre&gt;</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><code class="language-markup" data-label="my-label-button">&lt;pre data-src=&quot;plugins/toolbar/prism-toolbar.js&quot; data-label=&quot;Hello World!&quot;&gt;&lt;/pre&gt;</code></pre>

<pre><code>&lt;template&gt;&lt;button onclick=&quot;myFunction();&quot;&gt;My button&lt;button&gt;&lt;/template&gt;</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>

Expand Down
20 changes: 12 additions & 8 deletions plugins/toolbar/prism-toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,18 +98,22 @@
return;
}

var text = pre.getAttribute('data-label');

var element;
var text = pre.getAttribute('data-label');
var template = document.querySelector('template#' + text);

if (pre.hasAttribute('data-url')) {
element = document.createElement('a');
element.href = pre.getAttribute('data-url');
if (template) {
element = template.content;
} else {
element = document.createElement('span');
}
if (pre.hasAttribute('data-url')) {
element = document.createElement('a');
element.href = pre.getAttribute('data-url');
} else {
element = document.createElement('span');
}

element.textContent = text;
element.innerHTML = text;
}

return element;
});
Expand Down

0 comments on commit e471398

Please sign in to comment.