339 lines
12 KiB
TypeScript
339 lines
12 KiB
TypeScript
/// <reference path="FormUtilities.ts" />
|
|
|
|
|
|
let globalCommentLock = false;
|
|
|
|
function commentsLocked(): boolean
|
|
{
|
|
return globalCommentLock;
|
|
}
|
|
|
|
function commentsRequestLock(): boolean
|
|
{
|
|
if (commentsLocked())
|
|
return false;
|
|
|
|
return globalCommentLock = true;
|
|
}
|
|
|
|
function commentsFreeLock(): void
|
|
{
|
|
globalCommentLock = false;
|
|
}
|
|
|
|
interface CommentNotice {
|
|
error: string;
|
|
message: string;
|
|
}
|
|
|
|
interface CommentDeletionInfo extends CommentNotice {
|
|
comment_id: number;
|
|
}
|
|
|
|
interface CommentPostInfo extends CommentNotice {
|
|
comment_id: number;
|
|
category_id: number;
|
|
comment_text: string;
|
|
comment_html: string;
|
|
comment_created: Date;
|
|
comment_edited: Date | null;
|
|
comment_deleted: Date | null;
|
|
comment_reply_to: number;
|
|
comment_pinned: Date | null;
|
|
user_id: number;
|
|
username: string;
|
|
user_colour: number;
|
|
}
|
|
|
|
function commentDelete(ev: Event): void
|
|
{
|
|
if (!checkUserPerm('comments', CommentPermission.Delete) || !commentsRequestLock())
|
|
return;
|
|
|
|
const xhr: XMLHttpRequest = new XMLHttpRequest(),
|
|
target: HTMLAnchorElement = ev.target as HTMLAnchorElement;
|
|
|
|
xhr.addEventListener('readystatechange', () => {
|
|
if (xhr.readyState !== 4)
|
|
return;
|
|
commentsFreeLock();
|
|
|
|
let json: CommentDeletionInfo = JSON.parse(xhr.responseText) as CommentDeletionInfo,
|
|
message = json.error || json.message;
|
|
|
|
if (message)
|
|
alert(message);
|
|
else {
|
|
let elem = document.getElementById('comment-' + json.comment_id);
|
|
|
|
if (elem)
|
|
elem.parentNode.removeChild(elem);
|
|
}
|
|
});
|
|
xhr.open('GET', target.dataset.href);
|
|
xhr.setRequestHeader('X-Misuzu-XHR', 'comments');
|
|
xhr.send();
|
|
}
|
|
|
|
function commentPostEventHandler(ev: Event): void
|
|
{
|
|
const form: HTMLFormElement = ev.target as HTMLFormElement,
|
|
formData: FormData = ExtractFormData(form, true);
|
|
|
|
commentPost(
|
|
formData,
|
|
info => commentPostSuccess(form, info),
|
|
message => commentPostFail
|
|
);
|
|
}
|
|
|
|
function commentPost(formData: FormData, onSuccess: (comment: CommentPostInfo) => void = null, onFail: (message: string) => void = null): void
|
|
{
|
|
if (!commentsRequestLock())
|
|
return;
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.addEventListener('readystatechange', () => {
|
|
if (xhr.readyState !== 4)
|
|
return;
|
|
|
|
commentsFreeLock();
|
|
|
|
const json: CommentPostInfo = JSON.parse(xhr.responseText) as CommentPostInfo,
|
|
message: string = json.error || json.message;
|
|
|
|
if (message && onFail)
|
|
onFail(message);
|
|
else if (!message && onSuccess)
|
|
onSuccess(json);
|
|
});
|
|
|
|
xhr.open('POST', '/comments.php?m=create');
|
|
xhr.setRequestHeader('X-Misuzu-XHR', 'comments');
|
|
xhr.send(formData);
|
|
}
|
|
|
|
function commentPostSuccess(form: HTMLFormElement, comment: CommentPostInfo): void {
|
|
if (form.classList.contains('comment--reply'))
|
|
(form.parentNode.parentNode.querySelector('label.comment__action') as HTMLLabelElement).click();
|
|
|
|
//commentInsert(info, form);
|
|
}
|
|
|
|
function commentPostFail(message: string): void {
|
|
alert(message);
|
|
}
|
|
|
|
function commentsInit(): void {
|
|
const commentDeletes: HTMLCollectionOf<HTMLAnchorElement> = document.getElementsByClassName('comment__action--delete') as HTMLCollectionOf<HTMLAnchorElement>;
|
|
|
|
for (let i = 0; i < commentDeletes.length; i++) {
|
|
commentDeletes[i].addEventListener('click', commentDelete);
|
|
commentDeletes[i].dataset.href = commentDeletes[i].href;
|
|
commentDeletes[i].href = 'javascript:void(0);';
|
|
}
|
|
|
|
const commentInputs: HTMLCollectionOf<HTMLTextAreaElement> = document.getElementsByClassName('comment__text--input') as HTMLCollectionOf<HTMLTextAreaElement>;
|
|
|
|
for (let i = 0; i < commentInputs.length; i++) {
|
|
commentInputs[i].addEventListener('keydown', ev => {
|
|
if (ev.keyCode === 13 && ev.ctrlKey && !ev.altKey && !ev.shiftKey) {
|
|
let form = commentInputs[i].form;
|
|
commentPost(
|
|
ExtractFormData(form, true),
|
|
info => commentPostSuccess(form, info),
|
|
message => commentPostFail
|
|
);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function commentConstruct(comment: CommentPostInfo, layer: number = 0): HTMLElement {
|
|
const isReply = comment.comment_reply_to > 0;
|
|
|
|
const commentElement: HTMLDivElement = document.createElement('div');
|
|
commentElement.className = 'comment';
|
|
commentElement.id = 'comment-' + comment.comment_id;
|
|
|
|
// layer 2
|
|
const commentContainer: HTMLDivElement = commentElement.appendChild(document.createElement('div'));
|
|
commentContainer.className = 'comment__container';
|
|
|
|
const commentReplies: HTMLDivElement = commentElement.appendChild(document.createElement('div'));
|
|
commentReplies.className = 'comment__replies comment__replies--indent-' + layer;
|
|
commentReplies.id = commentElement.id + '-replies';
|
|
|
|
// container
|
|
const commentAvatar: HTMLAnchorElement = commentContainer.appendChild(document.createElement('a'));
|
|
commentAvatar.className = 'avatar comment__avatar';
|
|
commentAvatar.href = '/profile.php?u=' + comment.user_id;
|
|
commentAvatar.style.backgroundImage = `url('/profile.php?m=avatar&u=${comment.user_id}')`;
|
|
|
|
const commentContent: HTMLDivElement = commentContainer.appendChild(document.createElement('div'));
|
|
commentContent.className = 'comment__content';
|
|
|
|
// content
|
|
const commentInfo = commentContent.appendChild(document.createElement('div'));
|
|
commentInfo.className = 'comment__info';
|
|
|
|
const commentText = commentContent.appendChild(document.createElement('div'));
|
|
commentText.className = 'comment__text';
|
|
|
|
if (comment.comment_html)
|
|
commentText.innerHTML = comment.comment_html;
|
|
else
|
|
commentText.textContent = comment.comment_text;
|
|
|
|
const commentActions = commentContent.appendChild(document.createElement('div'));
|
|
commentActions.className = 'comment__actions';
|
|
|
|
}
|
|
|
|
function commentInsert(comment, form): void
|
|
{
|
|
var isReply = form.classList.contains('comment--reply'),
|
|
parent = isReply
|
|
? form.parentNode
|
|
: form.parentNode.parentNode.getElementsByClassName('comments__listing')[0],
|
|
repliesIndent = isReply
|
|
? (parseInt(parent.classList[1].substr(25)) + 1)
|
|
: 1;
|
|
|
|
// info
|
|
var commentUser = document.createElement('a');
|
|
commentUser.className = 'comment__user comment__user--link';
|
|
commentUser.textContent = comment.username;
|
|
commentUser.href = '/profile?u=' + comment.user_id;
|
|
commentUser.style.color = comment.user_colour == null || (comment.user_colour & 0x40000000) > 0
|
|
? 'inherit'
|
|
: '#' + (comment.user_colour & 0xFFFFFF).toString(16);
|
|
commentInfo.appendChild(commentUser);
|
|
|
|
var commentLink = document.createElement('a');
|
|
commentLink.className = 'comment__link';
|
|
commentLink.href = '#' + commentElement.id;
|
|
commentInfo.appendChild(commentLink);
|
|
|
|
var commentTime = document.createElement('time'),
|
|
commentDate = new Date(comment.comment_created + 'Z');
|
|
commentTime.className = 'comment__date';
|
|
commentTime.title = commentDate.toLocaleString();
|
|
commentTime.dateTime = commentDate.toISOString();
|
|
commentTime.textContent = timeago().format(commentDate);
|
|
commentLink.appendChild(commentTime);
|
|
|
|
// actions
|
|
if (typeof commentVote === 'function') {
|
|
var commentLike = document.createElement('a');
|
|
commentLike.className = 'comment__action comment__action--link comment__action--like';
|
|
commentLike.href = 'javascript:void(0);';
|
|
commentLike.textContent = 'Like';
|
|
commentLike.onclick = commentVote;
|
|
commentActions.appendChild(commentLike);
|
|
|
|
var commentDislike = document.createElement('a');
|
|
commentDislike.className = 'comment__action comment__action--link comment__action--dislike';
|
|
commentDislike.href = 'javascript:void(0);';
|
|
commentDislike.textContent = 'Dislike';
|
|
commentDislike.onclick = commentVote;
|
|
commentActions.appendChild(commentDislike);
|
|
}
|
|
|
|
// if we're executing this it's fairly obvious that we can reply,
|
|
// so no need to have a permission check on it here
|
|
var commentReply = document.createElement('label');
|
|
commentReply.className = 'comment__action comment__action--link';
|
|
commentReply.htmlFor = 'comment-reply-toggle-' + comment.comment_id;
|
|
commentReply.textContent = 'Reply';
|
|
commentActions.appendChild(commentReply);
|
|
|
|
// reply section
|
|
var commentReplyState = document.createElement('input');
|
|
commentReplyState.id = commentReply.htmlFor;
|
|
commentReplyState.type = 'checkbox';
|
|
commentReplyState.className = 'comment__reply-toggle';
|
|
commentReplies.appendChild(commentReplyState);
|
|
|
|
var commentReplyInput = document.createElement('form');
|
|
commentReplyInput.id = 'comment-reply-' + comment.comment_id;
|
|
commentReplyInput.className = 'comment comment--input comment--reply';
|
|
commentReplyInput.method = 'post';
|
|
commentReplyInput.action = 'javascript:void(0);';
|
|
commentReplyInput.onsubmit = commentPostEventHandler;
|
|
commentReplies.appendChild(commentReplyInput);
|
|
|
|
// reply attributes
|
|
var replyCategory = document.createElement('input');
|
|
replyCategory.name = 'comment[category]';
|
|
replyCategory.value = comment.category_id;
|
|
replyCategory.type = 'hidden';
|
|
commentReplyInput.appendChild(replyCategory);
|
|
|
|
var replyCsrf = document.createElement('input');
|
|
replyCsrf.name = 'csrf';
|
|
replyCsrf.value = '{{ csrf_token("comments") }}';
|
|
replyCsrf.type = 'hidden';
|
|
commentReplyInput.appendChild(replyCsrf);
|
|
|
|
var replyId = document.createElement('input');
|
|
replyId.name = 'comment[reply]';
|
|
replyId.value = comment.comment_id;
|
|
replyId.type = 'hidden';
|
|
commentReplyInput.appendChild(replyId);
|
|
|
|
var replyContainer = document.createElement('div');
|
|
replyContainer.className = 'comment__container';
|
|
commentReplyInput.appendChild(replyContainer);
|
|
|
|
// reply container
|
|
var replyAvatar = document.createElement('div');
|
|
replyAvatar.className = 'avatar comment__avatar';
|
|
replyAvatar.style.backgroundImage = 'url(\'/profile.php?m=avatar&u={0}\')'.replace('{0}', comment.user_id);
|
|
replyContainer.appendChild(replyAvatar);
|
|
|
|
var replyContent = document.createElement('div');
|
|
replyContent.className = 'comment__content';
|
|
replyContainer.appendChild(replyContent);
|
|
|
|
// reply content
|
|
var replyInfo = document.createElement('div');
|
|
replyInfo.className = 'comment__info';
|
|
replyContent.appendChild(replyInfo);
|
|
|
|
var replyUser = document.createElement('div');
|
|
replyUser.className = 'comment__user';
|
|
replyUser.textContent = comment.username;
|
|
replyUser.style.color = comment.user_colour == null || (comment.user_colour & 0x40000000) > 0
|
|
? 'inherit'
|
|
: '#' + (comment.user_colour & 0xFFFFFF).toString(16);
|
|
replyInfo.appendChild(replyUser);
|
|
|
|
var replyText = document.createElement('textarea');
|
|
replyText.className = 'comment__text input__textarea comment__text--input';
|
|
replyText.name = 'comment[text]';
|
|
replyText.placeholder = 'Share your extensive insights...';
|
|
replyContent.appendChild(replyText);
|
|
|
|
var replyActions = document.createElement('div');
|
|
replyActions.className = 'comment__actions';
|
|
replyContent.appendChild(replyActions);
|
|
|
|
var replyButton = document.createElement('button');
|
|
replyButton.className = 'input__button comment__action comment__action--button comment__action--post';
|
|
replyButton.textContent = 'Reply';
|
|
replyActions.appendChild(replyButton);
|
|
|
|
if (isReply)
|
|
parent.appendChild(commentElement);
|
|
else
|
|
parent.insertBefore(commentElement, parent.firstElementChild);
|
|
|
|
timeago().render(commentTime);
|
|
|
|
var placeholder = document.getElementById('_no_comments_notice_' + comment.category_id);
|
|
|
|
if (placeholder)
|
|
placeholder.parentNode.removeChild(placeholder);
|
|
}
|