Added tag presenter

public_html/css/core.css

@@ -19,6 +19,11 @@ h2 {
 	font-weight: normal;
 }
 
+h3 {
+	font-weight: normal;
+	font-size: 20px;
+}
+
 #middle {
 	padding: 0 2em;
 	position: relative;

public_html/css/forms.css

@@ -170,3 +170,27 @@ input[type=checkbox]:checked + label:before {
 	margin-left: 0.5em;
 	cursor: pointer;
 }
+
+.autocomplete {
+	position: absolute;
+	display: none;
+	z-index: 10;
+}
+.autocomplete ul {
+	list-style-type: none;
+	padding: 0 0 !important;
+	margin: 0 !important;
+	border: 2px solid #5da;
+	background: white;
+	display: block !important;
+	text-align: left;
+}
+
+.autocomplete li {
+	margin: 0;
+	padding: 0.1em 0.5em !important;
+}
+
+.autocomplete li.active {
+	background: #5da;
+}

public_html/css/post-list.css

@@ -1,20 +1,20 @@
-#post-list {
+.post-list {
 	text-align: center;
 }
 
-#post-list .wrapper {
+.post-list .wrapper {
 	display: inline-block;
 	margin: 0 auto;
 }
 
-#post-list .search {
+.post-list .search {
 	margin-bottom: 1em;
 }
-#post-list .search input {
+.post-list .search input {
 	max-width: 20em;
 }
 
-#post-list ul {
+.post-list ul {
 	list-style-type: none;
 	padding: 0;
 	margin: 0;

public_html/css/tags.css

@@ -1,23 +1,19 @@
-.autocomplete {
-	position: absolute;
-	display: none;
-	z-index: 10;
+#tag-view {
+	margin: 0 auto;
+	max-width: 45em;
+	text-align: center;
 }
-.autocomplete ul {
-	list-style-type: none;
-	padding: 0 0 !important;
-	margin: 0 !important;
-	border: 2px solid #5da;
-	background: white;
-	display: block !important;
+
+#tav-view .header {
 	text-align: left;
+	display: inline-block;
+	margin: 0 auto;
 }
 
-.autocomplete li {
-	margin: 0;
-	padding: 0.1em 0.5em !important;
+#tag-view .header h1 {
+	margin-top: 0;
 }
 
-.autocomplete li.active {
-	background: #5da;
+#tag-view h3 {
+	margin-bottom: 0.5em;
 }

public_html/index.html

@@ -118,6 +118,7 @@
 	<script type="text/javascript" src="/js/Presenters/PostCommentListPresenter.js"></script>
 
 	<script type="text/javascript" src="/js/Presenters/TagListPresenter.js"></script>
+	<script type="text/javascript" src="/js/Presenters/TagPresenter.js"></script>
 
 	<script type="text/javascript" src="/js/Presenters/HelpPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/HomePresenter.js"></script>

public_html/js/Presenters/TagListPresenter.js

@@ -6,6 +6,7 @@ App.Presenters.TagListPresenter = function(
 	jQuery,
 	util,
 	promise,
+	keyboard,
 	pagerPresenter,
 	topNavigationPresenter) {
 
@@ -52,6 +53,11 @@ App.Presenters.TagListPresenter = function(
 			page: searchArgs.page,
 			searchParams: {
 				order: searchArgs.order}});
+
+		keyboard.keyup('p', function() {
+			$el.find('table a').eq(0).focus();
+		});
+
 	}
 
 	function deinit() {
@@ -92,4 +98,4 @@ App.Presenters.TagListPresenter = function(
 
 };
 
-App.DI.register('tagListPresenter', ['_', 'jQuery', 'util', 'promise', 'pagerPresenter', 'topNavigationPresenter'], App.Presenters.TagListPresenter);
+App.DI.register('tagListPresenter', ['_', 'jQuery', 'util', 'promise', 'keyboard', 'pagerPresenter', 'topNavigationPresenter'], App.Presenters.TagListPresenter);

public_html/js/Presenters/TagPresenter.js

@@ -0,0 +1,77 @@
+var App = App || {};
+App.Presenters = App.Presenters || {};
+
+App.Presenters.TagPresenter = function(
+	_,
+	jQuery,
+	util,
+	promise,
+	api,
+	keyboard,
+	topNavigationPresenter) {
+
+	var $el = jQuery('#content');
+	var templates = {};
+
+	var tagName;
+
+	function init(args, loaded) {
+		topNavigationPresenter.select('tags');
+		topNavigationPresenter.changeTitle('Tags');
+
+		promise.wait(
+				util.promiseTemplate('tag'),
+				util.promiseTemplate('post-list-item'))
+			.then(function(tagTemplate, postListItemTemplate) {
+				templates.tag = tagTemplate;
+				templates.postListItem = postListItemTemplate;
+
+				reinit(args, loaded);
+			});
+	}
+
+	function reinit(args, loaded) {
+		tagName = args.tagName;
+
+		render();
+		loaded();
+
+		promise.wait(api.get('posts', {query: tagName}))
+			.then(function(response) {
+				var posts = response.json.data;
+				posts = posts.slice(0, 8);
+				renderPosts(posts);
+			}).fail(function(response) {
+				console.log(new Error(response));
+			});
+	}
+
+	function render() {
+		$el.html(templates.tag({tagName: tagName}));
+		$el.find('.post-list').hide();
+	}
+
+	function renderPosts(posts) {
+		var $target = $el.find('.post-list ul');
+		_.each(posts, function(post) {
+			var $post = jQuery('<li>' + templates.postListItem({
+				post: post,
+				searchArgs: {query: tagName},
+			}) + '</li>');
+			$target.append($post);
+		});
+		if (posts.length > 0) {
+			$el.find('.post-list').fadeIn();
+			keyboard.keyup('p', function() {
+				$el.find('.post-list a').eq(0).focus();
+			});
+		}
+	}
+
+	return {
+		init: init,
+		reinit: reinit,
+	};
+};
+
+App.DI.register('tagPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'keyboard', 'topNavigationPresenter'], App.Presenters.TagPresenter);

public_html/js/Router.js

@@ -42,6 +42,7 @@ App.Router = function(pathJs, _, jQuery, promise, util, appState, presenterManag
 		inject('#/post(/:postNameOrId)(/:searchArgs)', 'postPresenter');
 		inject('#/comments(/:searchArgs)', 'globalCommentListPresenter');
 		inject('#/tags(/:searchArgs)', 'tagListPresenter');
+		inject('#/tag(/:tagName)', 'tagPresenter');
 		inject('#/help', 'helpPresenter');
 		setRoot('#/home');
 	}

public_html/templates/post-list.tpl

@@ -1,4 +1,4 @@
-<div id="post-list">
+<div class="post-list">
 	<form class="search">
 		<input type="text" name="query" placeholder="Search query..."/>
 		<button type="submit">Search</button>

public_html/templates/tag-list-item.tpl

@@ -1,5 +1,8 @@
 <tr class="tag">
 	<td>
-		<%= tag.name %> (<%= tag.usages %>)
+		<a href="#/tag/<%= tag.name %>"><%= tag.name %></a>
+	</td>
+	<td>
+		<%= tag.usages %>
 	</td>
 </tr>

public_html/templates/tag.tpl

@@ -0,0 +1,14 @@
+<div id="tag-view">
+	<div class="header">
+		<h1><%= tagName %></h1>
+	</div>
+
+	<div class="post-list">
+		<h3>Example usages</h3>
+
+		<ul>
+		</ul>
+
+		<a href="#/posts/query=<%= tagName %>">Search for more</a>
+	</div>
+</div>