Commit a4250c8eee967ff38856e59e6bd732090f8af4b2

Golmote 2014-12-21T14:33:25

Examples first shot

diff --git a/components.js b/components.js
index 67b3da3..6eb2372 100644
--- a/components.js
+++ b/components.js
@@ -34,7 +34,8 @@ var components = {
 	"languages": {
 		"meta": {
 			"path": "components/prism-{id}",
-			"noCSS": true
+			"noCSS": true,
+			"examplesPath": "examples/prism-{id}"
 		},
 		"markup": {
 			"title": "Markup",
diff --git a/examples.html b/examples.html
index 7872235..56bcb41 100644
--- a/examples.html
+++ b/examples.html
@@ -7,6 +7,23 @@
 <title>Examples ▲ Prism</title>
 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
+<style>
+#languages {
+	column-count: 3
+}
+	#languages > h1 {
+		margin-top: 0;
+		column-span: all;
+	}
+	#languages label {
+		display: block;
+		padding: .2em;
+	}
+	#languages input {
+		margin-right: .7em;
+	}
+
+</style>
 <script src="prefixfree.min.js"></script>
 
 <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
@@ -55,6 +72,12 @@
 	<code class="language-none">&lt;p>hi!&lt;/p></code>
 </section>
 
+<section>
+	<h1>Per language examples</h1>
+	<div id="languages"></div>
+</section>
+<section id="examples"></section>
+
 <section class="language-markup">
 	<h1>Markup</h1>
 
@@ -440,12 +463,11 @@ X-Response-Time: 10ms
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="prism.js"></script>
-<script src="components/prism-java.js"></script>
-<script src="components/prism-http.js"></script>
-<script src="components/prism-coffeescript.js"></script>
 <script src="utopia.js"></script>
 <script src="components.js"></script>
 <script src="code.js"></script>
+<script src="vendor/promise.js"></script>
+<script src="examples.js"></script>
 
 </body>
 </html>
diff --git a/examples.js b/examples.js
new file mode 100644
index 0000000..0adbb20
--- /dev/null
+++ b/examples.js
@@ -0,0 +1,100 @@
+/**
+ * Manage examples
+ */
+
+(function() {
+
+var cache = {};
+var dependencies = {};
+
+// TODO change treeURL before commit !
+var treeURL = 'https://api.github.com/repos/Golmote/prism/git/trees/prism-examples?recursive=1';
+var treePromise = new Promise(function(resolve) {
+	$u.xhr({
+		url: treeURL,
+		callback: function(xhr) {
+			if (xhr.status < 400) {
+				resolve(JSON.parse(xhr.responseText).tree);
+			}
+		}
+	});
+});
+
+var languages = components.languages;
+
+for (var id in languages) {
+	if(id === 'meta') {
+		continue;
+	}
+
+	var language = languages[id];
+	var checked = false;
+
+	if (language.option === 'default') {
+		checked = true;
+	}
+
+	language.enabled = checked;
+	language.file = languages.meta.path.replace(/\{id}/g, id) + '.js';
+	language.examples = languages.meta.examplesPath.replace(/\{id}/g, id) + '.html';
+
+	if (language.require) {
+		dependencies[language.require] = (dependencies[language.require] || []).concat(id);
+	}
+
+	fileExists(language.examples).then(function() {
+		$u.element.create('label', {
+			attributes: {
+				'data-id': id
+			},
+			contents: [
+				{
+					tag: 'input',
+					properties: {
+						type: 'checkbox',
+						name: 'language',
+						value: id,
+						checked: checked,
+						onclick: (function (id) {
+							return function () {
+								$$('input[name="' + this.name + '"]').forEach(function (input) {
+									languages[input.value].enabled = input.checked;
+								});
+
+								update(id);
+							};
+						}(id))
+					}
+				},
+				language.title,
+				language.owner ? {
+					tag: 'a',
+					properties: {
+						href: 'http://github.com/' + language.owner,
+						className: 'owner',
+						target: '_blank'
+					},
+					contents: language.owner
+				} : ' '
+			],
+			inside: '#languages'
+		});
+	});
+}
+
+function fileExists(filepath) {
+	return treePromise.then(function(tree) {
+		for(var i=0, l=tree.length; i<l; i++) {
+			if(tree[i].path === filepath) {
+				return true;
+			}
+		}
+		throw 'File ' + filepath + ' does not exist';
+	});
+}
+
+function update(id) {
+	console.log('Update '+id);
+}
+
+}());
\ No newline at end of file
diff --git a/examples/prism-markup.html b/examples/prism-markup.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/examples/prism-markup.html