From 6b2798d8f325f6fd46c32d6727637fd3525b639e Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Wed, 13 Jan 2016 13:26:48 +0900
Subject: [PATCH] improved reply label behavior

---
 public/css/comments.css                | 34 +++++++++++++++-------
 public/lib/general.js                  | 39 ++++++++++++++++++++------
 public/lib/ghost.js                    | 39 ++++++++++++++++++++------
 public/lib/wordpress.js                | 39 ++++++++++++++++++++------
 public/templates/comments/comments.tpl |  2 +-
 5 files changed, 115 insertions(+), 38 deletions(-)

diff --git a/public/css/comments.css b/public/css/comments.css
index 4f42b575..9f7b10c3 100644
--- a/public/css/comments.css
+++ b/public/css/comments.css
@@ -25,6 +25,7 @@
 	color: #333;
 	min-height: 75px;
 	position: relative;
+	transition: background-color 0.6s ease;
 }
 
 #nodebb .topic-body {
@@ -58,7 +59,6 @@
 	color: #333;
 	overflow: hidden;
 	word-wrap: break-word;
-	transition: background-color 0.6s ease;
 }
 
 #nodebb .topic-text blockquote {
@@ -208,32 +208,32 @@
 	border-radius: 100%;
 }
 
-.sub-reply-input {
+#nodebb .sub-reply-input {
 	margin-left: 20px;
 	margin-right: 20px;
 	margin-bottom: 10px;
 	padding-bottom: 48px;
 }
 
-.no-select {
+#nodebb .no-select {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 }
 
-.post-tools {
+#nodebb .post-tools {
 	float: right;
 	text-transform: lowercase;
 }
 
-.post-tools a {
+#nodebb .post-tools a {
 	padding-right: 10px;
 	cursor: pointer;
 	color: #38C071;
 	text-decoration: none;
 }
 
-.reply-label {
+#nodebb .reply-label {
 	padding: 1px 5px;
 	margin: 0;
 	font-size: 12px;
@@ -243,23 +243,37 @@
 	cursor: pointer;
 	border: 1px solid #ccc;
 	white-space: nowrap;
+	transition: background-color 0.6s ease;
 	-webkit-appearance: button;
 	-moz-appearance: button;
 }
 
-.reply-label:hover {
+#nodebb .reply-label i {
+	pointer-events: none;
+}
+
+#nodebb .reply-label:hover {
 	background-color: #E6E6E6;
 }
 
-.hidden {
+#nodebb .hidden {
 	display: none;
 }
 
-.highlight {
+#nodebb-load-more {
+	transition: background-color 0.6s ease;
+}
+
+#nodebb .highlight {
+	background-color: rgba(240, 173, 78, 0.75);
+}
+
+#nodebb .btn.btn-primary.highlight {
+	border-color: rgba(240, 173, 78, 0.75);
 	background-color: rgba(240, 173, 78, 0.75);
 }
 
-.post-content blockquote {
+#nodebb .post-content blockquote {
 	font-size: 12px;
 	padding: 10px 20px;
 	margin: 0 0 20px;
diff --git a/public/lib/general.js b/public/lib/general.js
index aab14a17..4d47159d 100644
--- a/public/lib/general.js
+++ b/public/lib/general.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -155,11 +166,21 @@
 				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					goTo.scrollIntoView(false);
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/lib/ghost.js b/public/lib/ghost.js
index 4e2221f2..4abd6776 100644
--- a/public/lib/ghost.js
+++ b/public/lib/ghost.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -154,11 +165,21 @@
 				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					goTo.scrollIntoView(false);
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/lib/wordpress.js b/public/lib/wordpress.js
index 37496143..b771df34 100644
--- a/public/lib/wordpress.js
+++ b/public/lib/wordpress.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -155,11 +166,21 @@
 				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					goTo.scrollIntoView(false);
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/templates/comments/comments.tpl b/public/templates/comments/comments.tpl
index 4126b897..932fa1c0 100644
--- a/public/templates/comments/comments.tpl
+++ b/public/templates/comments/comments.tpl
@@ -39,7 +39,7 @@
 						</a>
 					</div>
 					<div class="topic-text">
-						<div class="post-content" itemprop="text"><small><span class="post-tools no-select"><a component="post/reply">reply</a><a component="post/quote">quote</a></span><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp} <!-- IF posts.isReply --> <button component="post/parent" class="reply-label no-select" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parentUsername}</button> <!-- ENDIF posts.isReply --> </small><br /><div class="post-body">{posts.content}</div></div>
+						<div class="post-content" itemprop="text"><small><span class="post-tools no-select"><a component="post/reply">reply</a><a component="post/quote">quote</a></span><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp} <!-- IF posts.isReply --> <!-- IF !posts.deletedReply --> <button component="post/parent" class="reply-label no-select" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parentUsername}</button> <!-- ENDIF !posts.deletedReply --> <!-- ENDIF posts.isReply --> </small><br /><div class="post-body">{posts.content}</div></div>
 					</div>
 				</div>
 				<form action="{relative_path}/comments/reply" method="post" class="sub-reply-input hidden">