From 05b91caf6c325d9e036b35e49f7ecfac3a2362a6 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian.lam@gmail.com>
Date: Fri, 14 Jun 2013 13:01:24 -0400
Subject: [PATCH] noscript for home and category view (although it's not quite
 working for category view yet)

---
 app.js                                 |  2 +-
 public/css/noscript.less               | 49 ++++++++++++++++++++++----
 public/src/modules/composer.js         | 10 +++---
 public/templates/category.tpl          |  2 +-
 public/templates/noscript/category.tpl | 18 ++++++++++
 public/templates/noscript/header.tpl   |  8 +++++
 public/templates/noscript/home.tpl     | 10 ++++++
 public/templates/noscript/topic.tpl    |  8 -----
 src/webserver.js                       | 25 +++++++++++--
 9 files changed, 107 insertions(+), 25 deletions(-)
 create mode 100644 public/templates/noscript/category.tpl
 create mode 100644 public/templates/noscript/header.tpl
 create mode 100644 public/templates/noscript/home.tpl

diff --git a/app.js b/app.js
index 7d4f854087..64973f2ccb 100644
--- a/app.js
+++ b/app.js
@@ -51,7 +51,7 @@ fs.readFile(path.join(__dirname, 'config.json'), function(err, data) {
 					'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
 					'emails/header', 'emails/footer', 'install/header', 'install/footer', 'install/redis',
 
-					'noscript/topic'
+					'noscript/header', 'noscript/home', 'noscript/category', 'noscript/topic'
 				]);
 
 				templates.ready(function() {
diff --git a/public/css/noscript.less b/public/css/noscript.less
index 0c9ddd3ebb..3e5508e560 100644
--- a/public/css/noscript.less
+++ b/public/css/noscript.less
@@ -1,15 +1,50 @@
 @import "mixins";
 
 noscript {
-	.posts {
-		li {
-			list-style-type: none;
-			padding: 1em;
-			margin-bottom: 1em;
+	.default {
+		list-style-type: none;
+		padding: 1em;
+		margin-bottom: 1em;
 
-			&:nth-child(even) {
-				background: rgba(192,192,192,0.2);
+		&:nth-child(even) {
+			background: rgba(191,191,191,0.2);
+		}
+
+		&:nth-child(odd) {
+			background: rgba(223,223,223,0.2);
+		}
+	}
+
+	.categories {
+		li {
+			.default;
+
+			.icon {
+				float: left;
+				margin-right: 1em;
+			}
+
+			a {
+				font-size: 20px;
 			}
 		}
 	}
+
+	.topics {
+		li {
+			.default;
+		}
+
+		.teaser {
+			img {
+				float: left;
+			}
+		}
+	}
+
+	.posts {
+		li {
+			.default;
+		}
+	}
 }
\ No newline at end of file
diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 50a2673fe5..459a3269cf 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -19,7 +19,7 @@ define(function() {
 		composer.postContainer = document.createElement('div');
 		composer.postContainer.className = 'post-window row-fluid';
 		composer.postContainer.innerHTML =	'<div class="span10 offset1">' +
-												'<input type="text" placeholder="Enter your topic title here..." />' +
+												'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
 												'<div class="btn-toolbar">' +
 													'<div class="btn-group formatting-bar">' +
 														'<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>' +
@@ -28,12 +28,12 @@ define(function() {
 														'<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>' +
 													'</div>' +
 													'<div class="btn-group action-bar" style="float: right; margin-right: -12px">' +
-														'<button data-action="post" class="btn" tabIndex="2"><i class="icon-ok"></i> Submit</button>' +
-														'<button data-action="minimize" class="btn" tabIndex="3"><i class="icon-download-alt"></i> Minimize</button>' +
-														'<button class="btn" data-action="discard" tabIndex="4"><i class="icon-remove"></i> Discard</button>' +
+														'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
+														'<button data-action="minimize" class="btn" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
+														'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
 													'</div>' +
 												'</div>' +
-												'<textarea tabIndex="1"></textarea>' +
+												'<textarea tabIndex="2"></textarea>' +
 											'</div>';
 
 		composer.listEl = composer.btnContainer.querySelector('ul');
diff --git a/public/templates/category.tpl b/public/templates/category.tpl
index 38fa7a059f..b43c11cf62 100644
--- a/public/templates/category.tpl
+++ b/public/templates/category.tpl
@@ -24,7 +24,7 @@
 				<div class="span12 topic-row img-polaroid">
 					<div class="latest-post visible-desktop">
 						<div class="pull-right">
-							<img style="width: 48px; height: 48px; /*temporary*/" src="/graph/users/{topics.teaser_username}/picture" />
+							<img style="width: 48px; height: 48px; /*temporary*/" src="../../graph/users/{topics.teaser_username}/picture" />
 							<p><strong>{topics.teaser_username}</strong>: {topics.teaser_text}</p>
 							<span>posted {topics.teaser_timestamp} ago</span>
 						</div>
diff --git a/public/templates/noscript/category.tpl b/public/templates/noscript/category.tpl
new file mode 100644
index 0000000000..00728916b0
--- /dev/null
+++ b/public/templates/noscript/category.tpl
@@ -0,0 +1,18 @@
+		<ul class="breadcrumb">
+			<li><a href="/">Home</a><span class="divider">/</span></li>
+			<li class="active">{category_name}</li>
+			<div id="category_active_users"></div>
+		</ul>
+		<ul class="topics">
+			<!-- BEGIN topics -->
+			<li>
+				<a href="topic/{topics.slug}">{topics.title}</a>
+				<div class="teaser">
+					<img class="img-polaroid" src="../../graph/users/{topics.teaser_username}/picture" />
+					<p>
+						{topics.teaser_text} &mdash; {topics.teaser_timestamp} ago
+					</p>
+				</div>
+			</li>
+			<!-- END topics -->
+		</ul>
\ No newline at end of file
diff --git a/public/templates/noscript/header.tpl b/public/templates/noscript/header.tpl
new file mode 100644
index 0000000000..83be5b0fbc
--- /dev/null
+++ b/public/templates/noscript/header.tpl
@@ -0,0 +1,8 @@
+		<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>
diff --git a/public/templates/noscript/home.tpl b/public/templates/noscript/home.tpl
new file mode 100644
index 0000000000..9a307c8583
--- /dev/null
+++ b/public/templates/noscript/home.tpl
@@ -0,0 +1,10 @@
+		<ul class="categories">
+			<!-- BEGIN categories -->
+			<li>
+				<div class="icon"><i class="{categories.icon} icon-4x"></i></div>
+				<a href="category/{categories.slug}">{categories.name}</a>
+				<p>{categories.description}</p>
+				<div class="clear"></div>
+			</li>
+			<!-- END categories -->
+		</ul>
\ No newline at end of file
diff --git a/public/templates/noscript/topic.tpl b/public/templates/noscript/topic.tpl
index a5d6743af8..b1581ddbe6 100644
--- a/public/templates/noscript/topic.tpl
+++ b/public/templates/noscript/topic.tpl
@@ -1,11 +1,3 @@
-		<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 class="posts">
 			<!-- BEGIN main_posts -->
 			<li>
diff --git a/src/webserver.js b/src/webserver.js
index bde5fa480c..a4f9592d2b 100644
--- a/src/webserver.js
+++ b/src/webserver.js
@@ -78,7 +78,7 @@ var express = require('express'),
 
 	// Basic Routes (entirely client-side parsed, goal is to move the rest of the crap in this file into this one section)
 	(function() {
-		var routes = ['', 'login', 'register', 'account', 'latest', 'popular', 'active', '403', '404'];
+		var routes = ['login', 'register', 'account', 'latest', 'popular', 'active', '403', '404'];
 
 		for (var i=0, ii=routes.length; i<ii; i++) {
 			(function(route) {
@@ -96,6 +96,17 @@ var express = require('express'),
 	}());
 	
 	// Complex Routes
+	app.get('/', function(req, res) {
+		categories.getAllCategories(function(returnData) {
+			res.send(
+				build_header() +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/home'].parse(returnData) + '\n\t</noscript>' +
+				app.create_route('') +
+				templates['footer']
+			);
+		}, 0);
+	});
+
 	app.get('/topic/:topic_id/:slug?', function(req, res) {
 		var tid = req.params.topic_id;
 		if (tid.match('.rss')) {
@@ -117,7 +128,7 @@ var express = require('express'),
 		topics.getTopicById(tid, ((req.user) ? req.user.uid : 0), function(topic) {
 			res.send(
 				build_header() +
-				'\n\t<noscript>\n' + templates['noscript/topic'].parse(topic) + '\n\t</noscript>' +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/topic'].parse(topic) + '\n\t</noscript>' +
 				'\n\t<script>templates.ready(function(){ajaxify.go("topic/' + topic_url + '");});</script>' +
 				templates['footer']
 			);
@@ -141,7 +152,15 @@ var express = require('express'),
 		}
 
 		var category_url = cid + (req.params.slug ? '/' + req.params.slug : '');
-		res.send(build_header() + '<script>templates.ready(function(){ajaxify.go("category/' + category_url + '");});</script>' + templates['footer']);
+		categories.getCategoryById(cid, 0, function(returnData) {
+			console.log(returnData);
+			res.send(
+				build_header() +
+				'\n\t<noscript>\n' + templates['noscript/header'] + templates['noscript/category'].parse(returnData) + '\n\t</noscript>' +
+				'\n\t<script>templates.ready(function(){ajaxify.go("category/' + category_url + '");});</script>' +
+				templates['footer']
+			);
+		});
 	});
 
 	app.get('/confirm/:code', function(req, res) {