Download all grammars as a Zip directly from the Autoloader plugin page

plugins/autoloader/index.html

@@ -8,6 +8,20 @@
 <base href="../.." />
 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
+<style>
+	.download-grammars {
+		font: inherit;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		background: none;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	.download-grammars.loading:after {
+		content: ' [... Generating]';
+	}
+</style>
 <script src="prefixfree.min.js"></script>
 
 <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
@@ -27,9 +41,13 @@ <h1>How to use</h1>
 
 	<p>
 		The plugin will automatically handle missing grammars and load them for you.
+		To do this, you need to provide it with a directory of all the grammars you want.
+	</p>
+	<p>
+		You can download all the available grammars by clicking on the following link: <button class="download-grammars" type="button">download all grammars</button>.<br />
+		Alternatively, you can also clone the GitHub repo and take the <code>components</code> folder from there.
 	</p>
 	<p>
-		The easiest way to download the grammars is to clone the repo and take the <code>components</code> folder from there.
 		You can then download Prism core and any plugins from the <a href="download.html">Download</a> page, without checking any languages (or just check the languages you want to load by default, e.g. if you're using a language a lot, then you probably want to save the extra HTTP request).
 	</p>
 	<p>
@@ -107,6 +125,73 @@ <h1>Examples</h1>
 <script src="components.js"></script>
 <script src="code.js"></script>
 
+<script src="vendor/promise.js"></script>
+<script src="vendor/jszip.min.js"></script>
+<script src="vendor/FileSaver.min.js"></script>
+<script>
+	function getZip(files) {
+		return new Promise(function (resolve, reject) {
+			var zip = new JSZip();
+			var l = files.length;
+			var i = 0;
+			var process = function () {
+				if (i < l) {
+					addFile(zip, files[i][0], files[i][1]).then(function () {
+						i++;
+						process();
+					});
+				} else {
+					resolve(zip);
+				}
+			};
+			process();
+		});
+	}
+	function addFile(zip, filename, filepath) {
+		return getFileContents(filepath).then(function (contents) {
+			zip.file(filename, contents);
+		});
+	}
+	function getFileContents(filepath) {
+		return new Promise(function (resolve, reject) {
+			$u.xhr({
+				url: filepath,
+				callback: function (xhr) {
+					if (xhr.status < 400 && xhr.responseText) {
+						resolve(xhr.responseText);
+					} else {
+						// Never rejected, ignore errors
+						resolve();
+					}
+				}
+			});
+		});
+	}
+
+	$('.download-grammars').addEventListener('click', function () {
+		var btn = this;
+		btn.classList.add('loading');
+
+		var files = [];
+		for (var id in components.languages) {
+			if (id === 'meta') {
+				continue;
+			}
+			var basepath = components.languages.meta.path.replace(/\{id}/g, id);
+			var basename = basepath.substring(basepath.lastIndexOf('/') + 1);
+			files.push([basename + '.js', basepath + '.js']);
+			files.push([basename + '.min.js', basepath + '.min.js']);
+		}
+
+		getZip(files).then(function (zip) {
+			btn.classList.remove('loading');
+			return zip.generateAsync({type: 'blob'});
+		}).then(function (blob) {
+			saveAs(blob, 'prism-components.zip');
+		});
+	});
+
+</script>
 
 </body>
 </html>