Commit df5efc4271eae9265525a41fb3179bd3a410d6ea

Lea Verou 2012-07-30T15:35:35

Improved code of Download page

diff --git a/download.js b/download.js
index 0db2e06..b3af23a 100644
--- a/download.js
+++ b/download.js
@@ -9,8 +9,10 @@ var cache = {};
 var form = $('form');
 var minified = true;
 
-forId(function (category) {
-	this.meta.section = $u.element.create('section', {
+for (var category in components) {
+	var all = components[category];
+	
+	all.meta.section = $u.element.create('section', {
 		className: 'options',
 		contents: {
 			tag: 'h1',
@@ -18,84 +20,90 @@ forId(function (category) {
 		},
 		inside: '#components'
 	});
-}, function (id, category, info) {
-	var checked = false, disabled = false;
-	var option = this[id].option || this.meta.option;
-	
-	switch (option) {		
-		case 'mandatory': disabled = true; // fallthrough
-		case 'default': checked = true;
-	}
 	
-	var all = this;
-
-	var filepath = this.meta.path.replace(/\{id}/g, id);
-	
-	var info = this[id] = {
-		title: this[id].title || this[id],
-		hasCSS: this[id].hasCSS !== undefined? this[id].hasCSS : this.meta.hasCSS,
-		enabled: checked,
-		files: {
-			minified: {
-				paths: [],
-				size: 0
-			},
-			dev: {
-				paths: [],
-				size: 0
-			}
+	for (var id in all) {
+		if(id === 'meta') {
+			continue;
 		}
-	};
-	
-	if (!/\.css$/.test(filepath)) {
-		info.files.minified.paths.push(filepath.replace(/(\.js)?$/, '.min.js'));
-		info.files.dev.paths.push(filepath.replace(/(\.js)?$/, '.js'));
-	}
-	
-	if ((this[id].hasCSS && !/\.js$/.test(filepath)) || /\.css$/.test(filepath)) {
-		var cssFile = filepath.replace(/(\.css)?$/, '.css');
 		
-		info.files.minified.paths.push(cssFile);
-		info.files.dev.paths.push(cssFile);
-	}
-
-	$u.element.create('label', {
-		attributes: {
-			'data-id': id
-		},
-		contents: [
-			{
-				tag: 'input',
-				attributes: {
-					'data-id': id
+		var checked = false, disabled = false;
+		var option = all[id].option || all.meta.option;
+		
+		switch (option) {		
+			case 'mandatory': disabled = true; // fallthrough
+			case 'default': checked = true;
+		}
+		
+		var filepath = all.meta.path.replace(/\{id}/g, id);
+		
+		var info = all[id] = {
+			title: all[id].title || all[id],
+			hasCSS: all[id].hasCSS !== undefined? all[id].hasCSS : all.meta.hasCSS,
+			enabled: checked,
+			files: {
+				minified: {
+					paths: [],
+					size: 0
 				},
-				properties: {
-					type: 'checkbox',
-					checked: checked,
-					disabled: disabled,
-					onclick: function () {
-						all[id].enabled = this.checked;
-						
-						update(category, id);
-					}
+				dev: {
+					paths: [],
+					size: 0
 				}
+			}
+		};
+		
+		if (!/\.css$/.test(filepath)) {
+			info.files.minified.paths.push(filepath.replace(/(\.js)?$/, '.min.js'));
+			info.files.dev.paths.push(filepath.replace(/(\.js)?$/, '.js'));
+		}
+		
+		if ((all[id].hasCSS && !/\.js$/.test(filepath)) || /\.css$/.test(filepath)) {
+			var cssFile = filepath.replace(/(\.css)?$/, '.css');
+			
+			info.files.minified.paths.push(cssFile);
+			info.files.dev.paths.push(cssFile);
+		}
+	
+		$u.element.create('label', {
+			attributes: {
+				'data-id': id
 			},
-			this.meta.link? {
-				tag: 'a',
-				properties: {
-					href: this.meta.link.replace(/\{id}/g, id)
+			contents: [
+				{
+					tag: 'input',
+					attributes: {
+						'data-id': id
+					},
+					properties: {
+						type: 'checkbox',
+						checked: checked,
+						disabled: disabled,
+						onclick: (function(id, category, all){
+							return function () {
+								all[id].enabled = this.checked;
+								
+								update(category, id);
+							};
+						})(id, category, all)
+					}
 				},
-				contents: info.title
-			} : info.title,
-			' ',
-			{
-				tag: 'strong',
-				className: 'filesize'
-			}
-		],
-		inside: this.meta.section
-	});
-});
+				all.meta.link? {
+					tag: 'a',
+					properties: {
+						href: all.meta.link.replace(/\{id}/g, id)
+					},
+					contents: info.title
+				} : info.title,
+				' ',
+				{
+					tag: 'strong',
+					className: 'filesize'
+				}
+			],
+			inside: all.meta.section
+		});
+	}
+}
 
 form.elements.compression[0].onclick = 
 form.elements.compression[1].onclick = function() {
@@ -104,63 +112,50 @@ form.elements.compression[1].onclick = function() {
 	fetchFiles();
 }
 
-function forId(categoryCallback, callback) {
-	if (arguments.length == 1) {
-		callback = categoryCallback;
-		categoryCallback = undefined;
-	}
-	
+function fetchFiles() {
 	for (var category in components) {
 		var all = components[category];
 		
-		categoryCallback && categoryCallback.call(all, category);
-		
 		for (var id in all) {
 			if(id === 'meta') {
 				continue;
 			}
 			
-			callback.call(all, id, category, all[id]);
+			var distro = all[id].files[minified? 'minified' : 'dev'],
+			    files = distro.paths;
+				
+			files.forEach(function (filepath) {
+				var file = cache[filepath] = cache[filepath] || {};
+				
+				if (!file.contents) {
+	
+					(function(category, id, file, filepath, distro){
+	
+					$u.xhr({
+						url: filepath,
+						callback: function(xhr) {
+							if (xhr.status < 400) {
+								
+								file.contents = xhr.responseText;
+								
+								file.size = +xhr.getResponseHeader('Content-Length') || file.contents.length;
+	
+								distro.size += file.size;
+								
+								update(category, id);
+							}
+						}
+					});
+					})(category, id, file, filepath, distro);
+				}
+				else {
+					update(category, id);
+				}
+			});
 		}
 	}
 }
 
-function fetchFiles() {
-	forId(function(id, category) {
-		var distro = this[id].files[minified? 'minified' : 'dev'],
-						files = distro.paths;
-			
-		files.forEach(function (filepath) {
-			var file = cache[filepath] = cache[filepath] || {};
-			
-			if (!file.contents) {
-
-				(function(category, id, file, filepath, distro){
-
-				$u.xhr({
-					url: filepath,
-					callback: function(xhr) {
-						if (xhr.status < 400) {
-							
-							file.contents = xhr.responseText;
-							
-							file.size = +xhr.getResponseHeader('Content-Length') || file.contents.length;
-
-							distro.size += file.size;
-							
-							update(category, id);
-						}
-					}
-				});
-				})(category, id, file, filepath, distro);
-			}
-			else {
-				update(category, id);
-			}
-		});
-	});
-}
-
 fetchFiles();
 
 function prettySize(size) {
@@ -224,34 +219,37 @@ function update(updatedCategory, updatedId){
 }
 
 function generateCode(){
-	var css = '', js = '';
+	var code = {js: '', css: ''};
 	
-	forId(function (id, category, info) {
-		if(info.enabled) {
-			info.files[minified? 'minified' : 'dev'].paths.forEach(function (path) {
-				if (cache[path]) {
-					if (/.css$/.test(path)) {
-						css += cache[path].contents + '\n';
-					}
-					else {
-						js += cache[path].contents + '\n';
+	for (var category in components) {
+		var all = components[category];
+		
+		for (var id in all) {
+			if(id === 'meta') {
+				continue;
+			}
+			
+			var info = all[id];
+			if (info.enabled) {
+				info.files[minified? 'minified' : 'dev'].paths.forEach(function (path) {
+					if (cache[path]) {
+						var type = path.match(/\.(\w+)$/)[1];
+						
+						code[type] += cache[path].contents + '\n';
 					}
-				}
-			});
+				});
+			}
 		}
-	});
-	
-	var jsCode = $('#download-js code'),
-	    cssCode = $('#download-css code');
-	
-	jsCode.textContent = js;
-	Prism.highlightElement(jsCode, true);
-	
-	cssCode.textContent = css;
-	Prism.highlightElement(cssCode, true);
+	}
 	
-	$('#download-js .download-button').href = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(js);
-	$('#download-css .download-button').href = 'data:text/css;charset=utf-8,' + encodeURIComponent(css);
+	for (var type in code) {
+		var codeElement = $('#download-' + type + ' code');
+		
+		codeElement.textContent = code[type];
+		Prism.highlightElement(codeElement, true);
+		
+		$('#download-' + type + ' .download-button').href = 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(code[type]);
+	}
 }
 
 })();
\ No newline at end of file