Skip to content

Commit

Permalink
improved reply label behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@frandiox
frandiox committed Jan 15, 2016
1 parent 06c5a08 commit 2b236a0
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 38 deletions.
34 changes: 24 additions & 10 deletions public/css/comments.css
View file
Expand Up @@ -25,6 +25,7 @@
color: #333;
min-height: 75px;
position: relative;
transition: background-color 0.6s ease;
}

#nodebb .topic-body {
Expand Down Expand Up @@ -58,7 +59,6 @@
color: #333;
overflow: hidden;
word-wrap: break-word;
transition: background-color 0.6s ease;
}

#nodebb .topic-text blockquote {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
49 changes: 40 additions & 9 deletions public/lib/general.js
View file
Expand Up @@ -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];
}
}
}
Expand Down Expand Up @@ -153,13 +164,33 @@
nodeList[i].onclick = handler;
}
};
var isInViewport = function(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

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');
}

if (!isInViewport(goTo)) {
goTo.scrollIntoView(false);
}

goTo.classList.add('highlight');
element.classList.add('highlight');

setTimeout(function() {
goTo.classList.remove('highlight');
element.classList.remove('highlight');
}, 1000);

});
Expand Down
49 changes: 40 additions & 9 deletions public/lib/ghost.js
View file
Expand Up @@ -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];
}
}
}
Expand Down Expand Up @@ -152,13 +163,33 @@
nodeList[i].onclick = handler;
}
};
var isInViewport = function(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

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');
}

if (!isInViewport(goTo)) {
goTo.scrollIntoView(false);
}

goTo.classList.add('highlight');
element.classList.add('highlight');

setTimeout(function() {
goTo.classList.remove('highlight');
element.classList.remove('highlight');
}, 1000);

});
Expand Down
49 changes: 40 additions & 9 deletions public/lib/wordpress.js
View file
Expand Up @@ -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];
}
}
}
Expand Down Expand Up @@ -153,13 +164,33 @@
nodeList[i].onclick = handler;
}
};
var isInViewport = function(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

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');
}

if (!isInViewport(goTo)) {
goTo.scrollIntoView(false);
}

goTo.classList.add('highlight');
element.classList.add('highlight');

setTimeout(function() {
goTo.classList.remove('highlight');
element.classList.remove('highlight');
}, 1000);

});
Expand Down
2 changes: 1 addition & 1 deletion public/templates/comments/comments.tpl
View file
Expand Up @@ -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">
Expand Down

0 comments on commit 2b236a0

Please sign in to comment.