FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handle clicking the comment submit button

This commit is contained in:
Karina Kwiatek 2023-03-18 15:24:36 +01:00
parent ceb55c656e
commit da186747cc
2 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/retrospring/features/answerbox/comment/index.ts
View File

@ -1,6 +1,6 @@
import registerEvents from "retrospring/utilities/registerEvents";
import { commentDestroyHandler } from "./destroy";
import {commentComposeEnd, commentComposeStart, commentCreateHandler} from "./new";
import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, commentCreateKeyboardHandler } from "./new";
import { commentReportHandler } from "./report";
import { commentSmileHandler } from "./smile";
import { commentToggleHandler } from "./toggle";
@ -13,6 +13,7 @@ export default (): void => {
{ type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },
{ type: 'compositionstart', target: '[name=ab-comment-new]', handler: commentComposeStart, global: true },
{ type: 'compositionend', target: '[name=ab-comment-new]', handler: commentComposeEnd, global: true },
{ type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
{ type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateKeyboardHandler, global: true },
{ type: 'click', target: '[name=ab-comment-new-submit]', handler: commentCreateClickHandler, global: true }
]);
}

98
app/javascript/retrospring/features/answerbox/comment/new.ts
View File

@ -5,7 +5,50 @@ import { showNotification, showErrorNotification } from 'utilities/notifications
let compositionJustEnded = false;
export function commentCreateHandler(event: KeyboardEvent): boolean {
function createComment(input: HTMLInputElement, id: string, counter: Element, group: Element) {
if (input.value.length > 512) {
group.classList.add('has-error');
return true;
}
input.disabled = true;
post('/ajax/create_comment', {
body: {
answer: id,
comment: input.value
},
contentType: 'application/json'
})
.then(async response => {
const data = await response.json;
if (data.success) {
document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
const commentCount = document.getElementById(`#ab-comment-count-${id}`);
if (commentCount) {
commentCount.innerHTML = data.count;
}
input.value = '';
counter.innerHTML = String(512);
const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
sub.dataset.torpedo = "no"
sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
}
showNotification(data.message, data.success);
})
.catch(err => {
console.log(err);
showErrorNotification(I18n.translate('frontend.error.message'));
})
.finally(() => {
input.disabled = false;
});
}
export function commentCreateKeyboardHandler(event: KeyboardEvent): boolean {
if (compositionJustEnded && event.which == 13) {
compositionJustEnded = false;
return;
@ -19,49 +62,22 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
if ((event.ctrlKey || event.metaKey) && event.which === 13) {
event.preventDefault();
if (input.value.length > 512) {
group.classList.add('has-error');
return true;
}
input.disabled = true;
post('/ajax/create_comment', {
body: {
answer: id,
comment: input.value
},
contentType: 'application/json'
})
.then(async response => {
const data = await response.json;
if (data.success) {
document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
const commentCount = document.getElementById(`#ab-comment-count-${id}`);
if (commentCount) {
commentCount.innerHTML = data.count;
}
input.value = '';
counter.innerHTML = String(512);
const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
sub.dataset.torpedo = "no"
sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
}
showNotification(data.message, data.success);
})
.catch(err => {
console.log(err);
showErrorNotification(I18n.translate('frontend.error.message'));
})
.finally(() => {
input.disabled = false;
});
createComment(input, id, counter, group);
}
}
export function commentCreateClickHandler(event: MouseEvent): void {
event.preventDefault();
const button = event.target as HTMLButtonElement;
const id = button.dataset.aId;
const input = document.querySelector<HTMLInputElement>(`[name="ab-comment-new"][data-a-id="${id}"]`);
const counter = document.querySelector(`#ab-comment-charcount-${id}`);
const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
createComment(input, id, counter, group);
}
export function commentComposeStart(): boolean {
compositionJustEnded = false;
return true;