started work on noscript tags in pages (but blocked by template bug with block processing), allowed reverting of theme in ACP

introducing mixins css file

app.js

@@ -49,7 +49,9 @@ fs.readFile(path.join(__dirname, 'config.json'), function(err, data) {
 				templates.init([
 					'header', 'footer', 'logout', 'admin/header', 'admin/footer', 'admin/index',
 					'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
-					'emails/header', 'emails/footer', 'install/header', 'install/footer', 'install/redis'
+					'emails/header', 'emails/footer', 'install/header', 'install/footer', 'install/redis',
+
+					'noscript/topic'
 				]);
 
 				templates.ready(function() {

public/css/admin.less

@@ -1,13 +1,4 @@
-.inline-block {
+@import "mixins";
-	display: inline-block;
-	*display: inline;
-	zoom: 1;
-}
-
-.pointer {
-	cursor: pointer;
-	*cursor: hand;
-}
 
 .entry-row {
 	border-radius: 10px;
@@ -58,7 +49,7 @@
 	li {
 		padding: 10px 16px;
 		margin: 0.25em 1em;
-		.inline-block;
+		list-style-type: none;
 		.pointer;
 		-webkit-border-radius: 10px;
 		-moz-border-radius: 10px;
@@ -69,6 +60,19 @@
 		-o-transition: background-color 250ms linear;
 		transition: background-color 250ms linear;
 
+		img {
+			max-width: 150px;
+			float: left;
+		}
+
+		h4, p {
+			margin-left: 170px;
+		}
+
+		p {
+			font-size: 0.9em;
+		}
+
 		&:hover {
 			background-color: rgba(128, 128, 128, 0.2);
 		}

public/css/mixins.less

@@ -0,0 +1,23 @@
+.no-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.pointer {
+	cursor: pointer;
+	*cursor: hand;
+}
+
+.inline-block {
+	display: inline-block;
+	*display: inline;
+	zoom: 1;
+}
+
+.clear {
+	clear: both;
+}

public/css/style.less

@@ -1,22 +1,4 @@
-.no-select {
+@import "mixins";
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.pointer {
-	cursor: pointer;
-	*cursor: hand;
-}
-
-.inline-block {
-	display: inline-block;
-	*display: inline;
-	zoom: 1;
-}
 
 body {
 	/*background: #fdfdfd;*/  // port to default theme when it is implemented.

public/src/forum/admin/themes.js

@@ -0,0 +1,64 @@
+nodebb_admin.themes = {
+	render: function(bootswatch) {
+		var	themeFrag = document.createDocumentFragment(),
+			themeEl = document.createElement('li'),
+			themeContainer = document.querySelector('#content .themes'),
+			numThemes = bootswatch.themes.length;
+
+		for(var x=0;x<numThemes;x++) {
+			var theme = bootswatch.themes[x];
+			themeEl.setAttribute('data-css', theme.cssMin);
+			themeEl.setAttribute('data-theme', theme.name);
+			themeEl.innerHTML =	'<img src="' + theme.thumbnail + '" />' +
+								'<div>' +
+									'<div class="pull-right">' +
+										'<button class="btn btn-primary" data-action="use">Use</button> ' +
+										'<button class="btn" data-action="preview">Preview</button>' +
+									'</div>' +
+									'<h4>' + theme.name + '</h4>' +
+									'<p>' + theme.description + '</p>' +
+								'</div>' +
+								'<div class="clear">';
+			themeFrag.appendChild(themeEl.cloneNode(true));
+		}
+		themeContainer.innerHTML = '';
+		themeContainer.appendChild(themeFrag);
+	}
+};
+
+(function() {
+	var	scriptEl = document.createElement('script');
+	scriptEl.src = 'http://api.bootswatch.com?callback=nodebb_admin.themes.render';
+	document.body.appendChild(scriptEl);
+
+	var themeContainer = document.querySelector('#content .themes');
+	themeContainer.addEventListener('click', function(e) {
+		if (e.target.hasAttribute('data-action')) {
+			switch(e.target.getAttribute('data-action')) {
+				case 'preview':
+					var	cssSrc = $(e.target).parents('li').attr('data-css'),
+						cssEl = document.getElementById('base-theme');
+
+					cssEl.href = cssSrc;
+				break;
+				case 'use':
+					var	parentEl = $(e.target).parents('li'),
+						cssSrc = parentEl.attr('data-css'),
+						cssName = parentEl.attr('data-theme');
+					socket.emit('api:config.set', {
+						key: 'theme:id', value: 'bootswatch:' + cssName
+					});
+					socket.emit('api:config.set', {
+						key: 'theme:src', value: cssSrc
+					});
+				break;
+			}
+		}
+	}, false);
+
+	var revertEl = document.getElementById('revert_theme');
+	revertEl.addEventListener('click', function() {
+		nodebb_admin.remove('theme:id');
+		nodebb_admin.remove('theme:src');
+	}, false);
+})();

public/templates/admin/footer.tpl

@@ -7,71 +7,77 @@
 
 <script type="text/javascript">
 	var nodebb_admin = {
-		config: undefined,
+			config: undefined,
-		prepare: function() {
+			prepare: function() {
-			// Come back in 500ms if the config isn't ready yet
+				// Come back in 500ms if the config isn't ready yet
-			if (nodebb_admin.config === undefined) {
+				if (nodebb_admin.config === undefined) {
-				console.log('Config not ready...');
+					console.log('Config not ready...');
-				setTimeout(function() {
+					setTimeout(function() {
-					nodebb_admin.prepare();
+						nodebb_admin.prepare();
-				}, 500);
+					}, 500);
-				return;
+					return;
-			}
-
-			// Populate the fields on the page from the config
-			var fields = document.querySelectorAll('#content [data-field]'),
-				numFields = fields.length,
-				saveBtn = document.getElementById('save'),
-				x, key, inputType;
-			for(x=0;x<numFields;x++) {
-				key = fields[x].getAttribute('data-field');
-				inputType = fields[x].getAttribute('type');
-				if (fields[x].nodeName === 'INPUT') {
-					if (nodebb_admin.config[key]) {
-						switch(inputType) {
-							case 'text':
-							case 'textarea':
-							case 'number':
-								fields[x].value = nodebb_admin.config[key];
-							break;
-
-							case 'checkbox':
-								fields[x].checked = nodebb_admin.config[key] === '1' ? true : false;
-							break;
-						}
-					}
-				} else if (fields[x].nodeName === 'TEXTAREA') {
-					if (nodebb_admin.config[key]) fields[x].value = nodebb_admin.config[key];
 				}
-			}
-
-			saveBtn.addEventListener('click', function(e) {
-				var key, value;
-				e.preventDefault();
 
+				// Populate the fields on the page from the config
+				var fields = document.querySelectorAll('#content [data-field]'),
+					numFields = fields.length,
+					saveBtn = document.getElementById('save'),
+					x, key, inputType;
 				for(x=0;x<numFields;x++) {
 					key = fields[x].getAttribute('data-field');
+					inputType = fields[x].getAttribute('type');
 					if (fields[x].nodeName === 'INPUT') {
-						inputType = fields[x].getAttribute('type');
+						if (nodebb_admin.config[key]) {
-						switch(inputType) {
+							switch(inputType) {
-							case 'text':
+								case 'text':
-							case 'number':
+								case 'textarea':
-								value = fields[x].value;
+								case 'number':
-							break;
+									fields[x].value = nodebb_admin.config[key];
+								break;
 
-							case 'checkbox':
+								case 'checkbox':
-								value = fields[x].checked ? '1' : '0';
+									fields[x].checked = nodebb_admin.config[key] === '1' ? true : false;
-							break;
+								break;
+							}
 						}
 					} else if (fields[x].nodeName === 'TEXTAREA') {
-						value = fields[x].value;
+						if (nodebb_admin.config[key]) fields[x].value = nodebb_admin.config[key];
 					}
-
-					socket.emit('api:config.set', { key: key, value: value });
 				}
-			});
+
-		}
+				saveBtn.addEventListener('click', function(e) {
-	};
+					var key, value;
+					e.preventDefault();
+
+					for(x=0;x<numFields;x++) {
+						key = fields[x].getAttribute('data-field');
+						if (fields[x].nodeName === 'INPUT') {
+							inputType = fields[x].getAttribute('type');
+							switch(inputType) {
+								case 'text':
+								case 'number':
+									value = fields[x].value;
+								break;
+
+								case 'checkbox':
+									value = fields[x].checked ? '1' : '0';
+								break;
+							}
+						} else if (fields[x].nodeName === 'TEXTAREA') {
+							value = fields[x].value;
+						}
+
+						socket.emit('api:config.set', { key: key, value: value });
+					}
+				});
+			},
+			// save: function(key, value) {
+			// 	socket.emit('api:config.set', { key: key, value: value });
+			// },
+			remove: function(key) {
+				socket.emit('api:config.remove', key);
+			}
+		};
 
 	(function() {
 		jQuery('document').ready(function() {

public/templates/admin/header.tpl

@@ -12,6 +12,13 @@
 	<script type="text/javascript" src="/src/app.js"></script>
 	<script type="text/javascript" src="/src/templates.js"></script>
 	<script type="text/javascript" src="/src/ajaxify.js"></script>
+	<script src="/vendor/requirejs/require.js"></script>
+	<script>
+		require.config({
+			baseUrl: "/src/modules",
+			waitSeconds: 3
+		});
+	</script>
 	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 	<link rel="stylesheet" type="text/css" href="/css/style.css" />

public/templates/admin/themes.tpl

@@ -1,71 +1,18 @@
 <h1>Themes</h1>
 <hr />
 
+<h3>Bootswatch Themes</h3>
 <p>
-	NodeBB Themes are powered by Bootswatch, a repository containing hundreds of themes built
+	NodeBB Themes are powered by Bootswatch, a repository containing themes built
 	with Bootstrap as a base theme.
 </p>
 <ul class="themes">
 	<li><i class="icon-refresh icon-spin"></i> Loading Themes</li>
 </ul>
 
-<script>
+<h3>Revert to Default</h3>
-	nodebb_admin.themes = {
+<p class="alert">
-		render: function(bootswatch) {
+	<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
-			console.log(bootswatch);
+</p>
-			var	themeFrag = document.createDocumentFragment(),
-				themeEl = document.createElement('li'),
-				themeContainer = document.querySelector('#content .themes'),
-				numThemes = bootswatch.themes.length;
-
-			for(var x=0;x<numThemes;x++) {
-				var theme = bootswatch.themes[x];
-				themeEl.setAttribute('data-css', theme.cssMin);
-				themeEl.setAttribute('data-theme', theme.name);
-				themeEl.innerHTML =	'<img src="' + theme.thumbnail + '" />' +
-									'<div>' +
-										'<div class="pull-right">' +
-											'<button class="btn btn-primary" data-action="use">Use</button> ' +
-											'<button class="btn" data-action="preview">Preview</button>' +
-										'</div>' +
-										'<h4>' + theme.name + '</h4>' +
-										'<p>' + theme.description + '</p>' +
-									'</div>';
-				themeFrag.appendChild(themeEl.cloneNode(true));
-			}
-			themeContainer.innerHTML = '';
-			themeContainer.appendChild(themeFrag);
-		}
-	};
-
-	(function() {
-		var	scriptEl = document.createElement('script');
-		scriptEl.src = 'http://api.bootswatch.com?callback=nodebb_admin.themes.render';
-		document.body.appendChild(scriptEl);
-
-		var themeContainer = document.querySelector('#content .themes');
-		themeContainer.addEventListener('click', function(e) {
-			if (e.target.hasAttribute('data-action')) {
-				switch(e.target.getAttribute('data-action')) {
-					case 'preview':
-						var	cssSrc = $(e.target).parents('li').attr('data-css'),
-							cssEl = document.getElementById('base-theme');
 
-						cssEl.href = cssSrc;
+<script type="text/javascript" src="/src/forum/admin/themes.js"></script>
-					break;
-					case 'use':
-						var	parentEl = $(e.target).parents('li'),
-							cssSrc = parentEl.attr('data-css'),
-							cssName = parentEl.attr('data-theme');
-						socket.emit('api:config.set', {
-							key: 'theme:id', value: 'bootswatch:' + cssName
-						});
-						socket.emit('api:config.set', {
-							key: 'theme:src', value: cssSrc
-						});
-					break;
-				}
-			}
-		}, false);
-	})();
-</script>

public/templates/noscript/topic.tpl

@@ -0,0 +1,15 @@
+<div class="alert alert-error">
+	<p>
+		Your browser does not seem to support javascript. As a result, your viewing experience will be diminished.
+	</p>
+	<p>
+		Please download a browser that supports javascript, or enable it, if it disabled (i.e. NoScript).
+	</p>
+</div>
+<ul>
+	<!-- BEGIN posts -->
+		<li>
+			
+		</li>
+	<!-- END posts -->
+</ul>

src/meta.js

@@ -37,6 +37,9 @@ var utils = require('./../public/src/utils.js'),
 			RDB.hset('config', field, value, function(err, res) {
 				callback(err);
 			});
+		},
+		remove: function(field) {
+			RDB.hdel('config', field);
 		}
 	}
 }(exports));

src/topics.js

@@ -184,6 +184,16 @@ marked.setOptions({
 		});
 	}
 
+	Topics.get_posts_noscript = function(tid, current_user, callback) {
+		// Topics.get_topic(tid, current_user, function() {
+			callback([
+				{
+					foo: 'bar'
+				}
+			]);
+			// });
+	}
+
 	Topics.get_cid_by_tid = function(tid, callback) {
 		RDB.get(schema.topics(tid).cid, function(err, cid) {
 			if (cid && parseInt(cid) > 0) {

src/webserver.js

@@ -114,10 +114,11 @@ var express = require('express'),
 
 
 		var topic_url = tid + (req.params.slug ? '/' + req.params.slug : '');
-		topics.get_cid_by_tid(tid, function(cid) {
+		topics.get_posts_noscript(tid, ((req.user) ? req.user.uid : 0), function(posts) {
 			res.send(
 				build_header() +
-				'<script>templates.ready(function(){ajaxify.go("topic/' + topic_url + '");});</script>' +
+				'\n\t<noscript>\n\t\t' + templates['noscript/topic'] + '\n\t</noscript>' +
+				'\n\t<script>templates.ready(function(){ajaxify.go("topic/' + topic_url + '");});</script>' +
 				templates['footer']
 			);
 		});

src/websockets.js

@@ -307,6 +307,10 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }),
 			});
 		});
 
+		socket.on('api:config.remove', function(key) {
+			meta.config.remove(key);
+		});
+
 		socket.on('api:composer.push', function(data) {
 			if (uid > 0) {
 				if (parseInt(data.tid) > 0) {