Made the download button its own plugin (#1840)

This makes the download button its own plugin instead of being part of File highlight.
PrismJS · Sep 3, 2019 · c6c62a6 · c6c62a6
1 parent d49f0f2
commit c6c62a6
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 46 deletions.
diff --git a/components.js b/components.js
diff --git a/components.json b/components.json
@@ -1115,6 +1115,12 @@
 			"require": "toolbar",
 			"noCSS": true
 		},
+		"download-button": {
+			"title": "Download Button",
+			"owner": "Golmote",
+			"require": "toolbar",
+			"noCSS": true
+		},
 		"diff-highlight": {
 			"title": "Diff Highlight",
 			"owner": "RunDevelopment",

diff --git a/plugins/download-button/index.html b/plugins/download-button/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8" />
+<link rel="icon" href="favicon.png" />
+<title>Download Button ▲ 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="scripts/prefixfree.min.js"></script>
+
+<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
+<script src="https://www.google-analytics.com/ga.js" async></script>
+</head>
+<body>
+
+<header>
+	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
+
+	<h2>Download Button</h2>
+	<p>A button in the toolbar of a code block adding a convenient way to download a code file.</p>
+</header>
+
+<section class="language-markup">
+	<h1>How to use</h1>
+
+	<p>Use the <code>data-src</code> and <code>data-download-link</code> attribute on a <code>&lt;pre></code> elements similar to <a href="plugins/autoloader/">Autoloader</a>, like so:</p>
+
+	<pre><code>&lt;pre data-src="myfile.js" data-download-link>&lt;/pre></code></pre>
+
+	<p>Optionally, the text of the button can also be customized by using a <code>data-download-link-label</code> attribute.</p>
+	<pre><code>&lt;pre data-src="myfile.js" data-download-link data-download-link-label="Download this file">&lt;/pre></code></pre>
+</section>
+
+<section>
+	<h1>Examples</h1>
+
+	<p>The plugin’s JS code:</p>
+	<pre data-src="plugins/download-button/prism-download-button.js" data-download-link data-download-link-label="Download the code!"></pre>
+
+	<p>This page:</p>
+	<pre data-src="plugins/file-highlight/index.html" data-download-link></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/download-button/prism-download-button.js"></script>
+<script src="scripts/utopia.js"></script>
+<script src="components.js"></script>
+<script src="scripts/code.js"></script>
+
+
+</body>
+</html>
diff --git a/plugins/download-button/prism-download-button.js b/plugins/download-button/prism-download-button.js
@@ -0,0 +1,19 @@
+(function () {
+	if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
+		return;
+	}
+
+	Prism.plugins.toolbar.registerButton('download-file', function (env) {
+		var pre = env.element.parentNode;
+		if (!pre || !/pre/i.test(pre.nodeName) || !pre.hasAttribute('data-src') || !pre.hasAttribute('data-download-link')) {
+			return;
+		}
+		var src = pre.getAttribute('data-src');
+		var a = document.createElement('a');
+		a.textContent = pre.getAttribute('data-download-link-label') || 'Download';
+		a.setAttribute('download', '');
+		a.href = src;
+		return a;
+	});
+
+})();
diff --git a/plugins/download-button/prism-download-button.min.js b/plugins/download-button/prism-download-button.min.js
diff --git a/plugins/file-highlight/index.html b/plugins/file-highlight/index.html
@@ -8,7 +8,6 @@
 <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="scripts/prefixfree.min.js"></script>
 
 <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
@@ -34,13 +33,6 @@ <h1>How to use</h1>
 	If, however, the language cannot be determined from the file extension or the file extension is incorrect, you may specify a language as well (with the usual class name way).</p>
 
 	<p>Please note that the files are fetched with XMLHttpRequest. This means that if the file is on a different origin, fetching it will fail, unless CORS is enabled on that website.</p>
-
-	<p>
-		When used in conjunction with the <a href="plugins/toolbar">Toolbar plugin</a>, this plugin can also display a button to download the file.
-		To use it, add a <code>data-download-link</code> attribute on the <code>&lt;pre></code> element.<br />
-		Optionally, the text can also be customized by using a <code>data-download-link-label</code> attribute.
-	</p>
-	<pre><code>&lt;pre data-src="myfile.js" data-download-link data-download-link-label="Download this file">&lt;/pre></code></pre>
 </section>
 
 <section>
@@ -55,17 +47,13 @@ <h1>Examples</h1>
 	<p>File that doesn’t exist:</p>
 	<pre data-src="foobar.js"></pre>
 
-	<p>With a download button:</p>
-	<pre data-src="plugins/file-highlight/prism-file-highlight.js" data-download-link data-download-link-label="Download this file"></pre>
-
 	<p>For more examples, browse around the Prism website. Most large code samples are actually files fetched with this plugin.</p>
 </section>
 
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="prism.js"></script>
 <!-- The File Highlight plugin is already included into Prism.js build -->
-<script src="plugins/toolbar/prism-toolbar.js"></script>
 <script src="scripts/utopia.js"></script>
 <script src="components.js"></script>
 <script src="scripts/code.js"></script>

diff --git a/plugins/file-highlight/prism-file-highlight.js b/plugins/file-highlight/prism-file-highlight.js
@@ -79,22 +79,6 @@
 
 			xhr.send(null);
 		});
-
-		if (Prism.plugins.toolbar) {
-			Prism.plugins.toolbar.registerButton('download-file', function (env) {
-				var pre = env.element.parentNode;
-				if (!pre || !/pre/i.test(pre.nodeName) || !pre.hasAttribute('data-src') || !pre.hasAttribute('data-download-link')) {
-					return;
-				}
-				var src = pre.getAttribute('data-src');
-				var a = document.createElement('a');
-				a.textContent = pre.getAttribute('data-download-link-label') || 'Download';
-				a.setAttribute('download', '');
-				a.href = src;
-				return a;
-			});
-		}
-
 	};
 
 	document.addEventListener('DOMContentLoaded', function () {

diff --git a/plugins/file-highlight/prism-file-highlight.min.js b/plugins/file-highlight/prism-file-highlight.min.js
diff --git a/prism.js b/prism.js
@@ -962,22 +962,6 @@ Prism.languages.js = Prism.languages.javascript;
 
 			xhr.send(null);
 		});
-
-		if (Prism.plugins.toolbar) {
-			Prism.plugins.toolbar.registerButton('download-file', function (env) {
-				var pre = env.element.parentNode;
-				if (!pre || !/pre/i.test(pre.nodeName) || !pre.hasAttribute('data-src') || !pre.hasAttribute('data-download-link')) {
-					return;
-				}
-				var src = pre.getAttribute('data-src');
-				var a = document.createElement('a');
-				a.textContent = pre.getAttribute('data-download-link-label') || 'Download';
-				a.setAttribute('download', '');
-				a.href = src;
-				return a;
-			});
-		}
-
 	};
 
 	document.addEventListener('DOMContentLoaded', function () {