Serraniel/AniwatchPlus
Serraniel/AniwatchPlus
1
0
Fork 0
Code Issues 9 Pull requests 8 Packages Projects Releases 10 Wiki Activity

#91 Finalized the JS implementation of the charcounter

Browse source
This commit is contained in:
Serraniel 2020-10-28 22:31:12 +01:00
parent a561ccb2b6
commit 542d328323
Signed by: Serraniel
GPG key ID: 3690B4E7364525D3
1 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/javascript/enhancements/watch2getherChat.js
View file

@ -4,7 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
export function init() { export function init() {
// UPS // runAfterLoad is not what we want...wait for runAfterLocationChange.... // UPS // runAfterLoad is not what we want...wait for runAfterLocationChange....
core.runAfterLoad(() => { core.runAfterLocationChange(() => {
manipulateChatInput(); manipulateChatInput();
}, "^/watch2gether/.*$"); }, "^/watch2gether/.*$");
} }
@ -16,6 +16,8 @@ function manipulateChatInput() {
if (typeof textarea.dataset.charCounterId !== 'undefined') { if (typeof textarea.dataset.charCounterId !== 'undefined') {
return; return;
} }
addCharCounter(textarea);
} }
function addCharCounter(textarea) { function addCharCounter(textarea) {
@ -23,23 +25,39 @@ function addCharCounter(textarea) {
let controlRow = chatDiv.children[1]; // row with controls let controlRow = chatDiv.children[1]; // row with controls
let btn = controlRow.querySelector('button'); // find send button let btn = controlRow.querySelector('button'); // find send button
let counterSpan = document.createElement('span'); // create span for counter let charCounterSpan = document.createElement('span'); // create span for counter
counterSpan.classList.add('awp-w2g-chatCounter'); charCounterSpan.classList.add('awp-w2g-chatCounter');
// id and "connection" // id and "connection"
let counterId = `awp-${v4()}` let counterId = `awp-${uuidv4()}`
counterSpan.id = counterId; charCounterSpan.id = counterId;
textarea.dataset.charCounterId = counterId; textarea.dataset.charCounterId = counterId;
btn.parentElement.inserBefore(counterSpan, btn); // and insert in front of the button btn.parentElement.insertBefore(charCounterSpan, btn); // and insert in front of the button
updateCharCounter(textarea, charCounterSpan);
textarea.addEventListener('keypress keyup', () => { textarea.addEventListener('keyup', () => {
let current = textarea.value.length; console.log('TRIGGER')
let max = textarea.maxLength; updateCharCounter(textarea, charCounterSpan)
counterSpan.innerText = `${current} / ${max}`;
// animation if at max
counterSpan.classList.toggle('awp-w2g-chatCounter-max', current >= max);
}); });
} }
function updateCharCounter(textarea, charCounterSpan) {
const SHAKE_CLASS = 'awp-w2g-chatCounter-max';
// reset class
charCounterSpan.classList.remove(SHAKE_CLASS);
let current = textarea.value.length;
let max = textarea.maxLength;
charCounterSpan.innerText = `${current} / ${max}`;
// animation if at max
// this need to be delayed because removing and adding it too fast again will prevent the browsers to replay the animation
if (current >= max) {
setTimeout(() => {
charCounterSpan.classList.add(SHAKE_CLASS);
}, 100);
}
}