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.
PrismJS · Oct 16, 2016 · 09c4c94 · 09c4c94
1 parent 961e435
commit 09c4c94
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 16 deletions.
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
@@ -35,7 +35,7 @@
 		head.appendChild(script);
 	}
 
-	Prism.plugins.toolbar.registerButton(function (env) {
+	Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
 		var linkCopy = document.createElement('a');
 		linkCopy.textContent = 'Copy';
 

diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
diff --git a/plugins/show-language/prism-show-language.js b/plugins/show-language/prism-show-language.js
@@ -12,7 +12,7 @@ if (!Prism.plugins.toolbar) {
 
 // The languages map is built automatically with gulp
 var Languages = /*languages_placeholder[*/{"html":"HTML","xml":"XML","svg":"SVG","mathml":"MathML","css":"CSS","clike":"C-like","javascript":"JavaScript","abap":"ABAP","actionscript":"ActionScript","apacheconf":"Apache Configuration","apl":"APL","applescript":"AppleScript","asciidoc":"AsciiDoc","aspnet":"ASP.NET (C#)","autoit":"AutoIt","autohotkey":"AutoHotkey","basic":"BASIC","csharp":"C#","cpp":"C++","coffeescript":"CoffeeScript","css-extras":"CSS Extras","fsharp":"F#","glsl":"GLSL","graphql":"GraphQL","http":"HTTP","inform7":"Inform 7","json":"JSON","latex":"LaTeX","livescript":"LiveScript","lolcode":"LOLCODE","matlab":"MATLAB","mel":"MEL","nasm":"NASM","nginx":"nginx","nsis":"NSIS","objectivec":"Objective-C","ocaml":"OCaml","parigp":"PARI/GP","php":"PHP","php-extras":"PHP Extras","powershell":"PowerShell","properties":".properties","protobuf":"Protocol Buffers","jsx":"React JSX","rest":"reST (reStructuredText)","sas":"SAS","sass":"Sass (Sass)","scss":"Sass (Scss)","sql":"SQL","typescript":"TypeScript","vhdl":"VHDL","vim":"vim","wiki":"Wiki markup","xojo":"Xojo (REALbasic)","yaml":"YAML"}/*]*/;
-Prism.plugins.toolbar.registerButton(function(env) {
+Prism.plugins.toolbar.registerButton('show-language', function(env) {
 	var pre = env.element.parentNode;
 	if (!pre || !/pre/i.test(pre.nodeName)) {
 		return;

diff --git a/plugins/show-language/prism-show-language.min.js b/plugins/show-language/prism-show-language.min.js
diff --git a/plugins/toolbar/index.html b/plugins/toolbar/index.html
@@ -14,7 +14,7 @@
 	<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">
+<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>
@@ -35,11 +35,11 @@ <h1>How to use</h1>
 	<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 can accept an object with a <code>text</code> property string and an optional
+	<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({
+	<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 + '.');
@@ -51,8 +51,8 @@ <h1>How to use</h1>
 	<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(function() {
-	var button = document.createElement('a');
+	<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 () {
@@ -74,6 +74,12 @@ <h1>How to use</h1>
 });</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>&lt;body data-toolbar-order="select-code,hello-world,label"&gt;</code></pre>
 </section>
 
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
@@ -83,16 +89,16 @@ <h1>How to use</h1>
 <script src="utopia.js"></script>
 <script src="components.js"></script>
 <script>
-	Prism.plugins.toolbar.registerButton({
+	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(function(env) {
-		var button = document.createElement('a');
+	Prism.plugins.toolbar.registerButton('select-code', function(env) {
+		var button = document.createElement('button');
 		button.innerHTML = 'Select Code';
 
 		button.addEventListener('click', function () {

diff --git a/plugins/toolbar/prism-toolbar.js b/plugins/toolbar/prism-toolbar.js
@@ -4,15 +4,18 @@
 	}
 
 	var callbacks = [];
+	var map = {};
+	var noop = function() {};
 
 	Prism.plugins.toolbar = {};
 
 	/**
 	 * Register a button callback with the toolbar.
 	 *
+	 * @param {string} key
 	 * @param {Object|Function} opts
 	 */
-	var registerButton = Prism.plugins.toolbar.registerButton = function (opts) {
+	var registerButton = Prism.plugins.toolbar.registerButton = function (key, opts) {
 		var callback;
 
 		if (typeof opts === 'function') {
@@ -40,7 +43,7 @@
 			};
 		}
 
-		callbacks.push(callback);
+		callbacks.push(map[key] = callback);
 	};
 
 	/**
@@ -61,6 +64,12 @@
 		var toolbar = document.createElement('div');
 		toolbar.classList.add('toolbar');
 
+		if (document.body.hasAttribute('data-toolbar-order')) {
+			callbacks = document.body.getAttribute('data-toolbar-order').split(',').map(function(key) {
+				return map[key] || noop;
+			});
+		}
+
 		callbacks.forEach(function(callback) {
 			var element = callback(env);
 
@@ -79,7 +88,7 @@
 		pre.appendChild(toolbar);
 	};
 
-	registerButton(function(env) {
+	registerButton('label', function(env) {
 		var pre = env.element.parentNode;
 		if (!pre || !/pre/i.test(pre.nodeName)) {
 			return;

diff --git a/plugins/toolbar/prism-toolbar.min.js b/plugins/toolbar/prism-toolbar.min.js