From ad8e3bdcd54fd3d7e1643d78c4cf350dd8bc1cf5 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Tue, 7 Oct 2014 21:15:26 +0200
Subject: [PATCH] Added tag presenter

---
 public_html/css/core.css                      |  5 ++
 public_html/css/forms.css                     | 24 ++++++
 public_html/css/post-list.css                 | 10 +--
 public_html/css/tags.css                      | 28 +++----
 public_html/index.html                        |  1 +
 public_html/js/Presenters/TagListPresenter.js |  8 +-
 public_html/js/Presenters/TagPresenter.js     | 77 +++++++++++++++++++
 public_html/js/Router.js                      |  1 +
 public_html/templates/post-list.tpl           |  2 +-
 public_html/templates/tag-list-item.tpl       |  5 +-
 public_html/templates/tag.tpl                 | 14 ++++
 11 files changed, 151 insertions(+), 24 deletions(-)
 create mode 100644 public_html/js/Presenters/TagPresenter.js
 create mode 100644 public_html/templates/tag.tpl

diff --git a/public_html/css/core.css b/public_html/css/core.css
index 3169cda7..a4b17e35 100644
--- a/public_html/css/core.css
+++ b/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;
diff --git a/public_html/css/forms.css b/public_html/css/forms.css
index c71af744..d0a8cf49 100644
--- a/public_html/css/forms.css
+++ b/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;
+}
diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css
index f1ac5f99..cfa84c04 100644
--- a/public_html/css/post-list.css
+++ b/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;
diff --git a/public_html/css/tags.css b/public_html/css/tags.css
index 9c522f91..3906c0b1 100644
--- a/public_html/css/tags.css
+++ b/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;
 }
diff --git a/public_html/index.html b/public_html/index.html
index fd4dd036..abec5f17 100644
--- a/public_html/index.html
+++ b/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>
diff --git a/public_html/js/Presenters/TagListPresenter.js b/public_html/js/Presenters/TagListPresenter.js
index f4a5ca52..a54a0573 100644
--- a/public_html/js/Presenters/TagListPresenter.js
+++ b/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);
diff --git a/public_html/js/Presenters/TagPresenter.js b/public_html/js/Presenters/TagPresenter.js
new file mode 100644
index 00000000..6733575a
--- /dev/null
+++ b/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);
diff --git a/public_html/js/Router.js b/public_html/js/Router.js
index 01ab1b12..47bbefbb 100644
--- a/public_html/js/Router.js
+++ b/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');
 	}
diff --git a/public_html/templates/post-list.tpl b/public_html/templates/post-list.tpl
index fa65f761..fca6325c 100644
--- a/public_html/templates/post-list.tpl
+++ b/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>
diff --git a/public_html/templates/tag-list-item.tpl b/public_html/templates/tag-list-item.tpl
index c9238ea8..079dcc17 100644
--- a/public_html/templates/tag-list-item.tpl
+++ b/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>
diff --git a/public_html/templates/tag.tpl b/public_html/templates/tag.tpl
new file mode 100644
index 00000000..2440825b
--- /dev/null
+++ b/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>