#91 Added base implementation for chat counter

Adds uuid dependency to create guids
This commit is contained in:
Serraniel 2020-10-25 12:47:32 +01:00
parent e7a4790970
commit 3125e6720f
Signed by: Serraniel
GPG key ID: 3690B4E7364525D3
5 changed files with 81 additions and 9 deletions

24
package-lock.json generated
View file

@ -10735,6 +10735,14 @@
"tough-cookie": "~2.5.0", "tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0", "tunnel-agent": "^0.6.0",
"uuid": "^3.3.2" "uuid": "^3.3.2"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
} }
}, },
"require-directory": { "require-directory": {
@ -11873,6 +11881,15 @@
"requires": { "requires": {
"temp-dir": "^1.0.0", "temp-dir": "^1.0.0",
"uuid": "^3.0.1" "uuid": "^3.0.1"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true,
"optional": true
}
} }
}, },
"ternary-stream": { "ternary-stream": {
@ -12439,10 +12456,9 @@
} }
}, },
"uuid": { "uuid": {
"version": "3.4.0", "version": "8.3.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
"dev": true
}, },
"v8flags": { "v8flags": {
"version": "3.2.0", "version": "3.2.0",

View file

@ -32,7 +32,9 @@
"email": "mail@serraniel.dev" "email": "mail@serraniel.dev"
}, },
"homepage": "https://github.com/Serraniel/AniwatchPlus#readme", "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
"dependencies": {}, "dependencies": {
"uuid": "^8.3.1"
},
"devDependencies": { "devDependencies": {
"@babel/compat-data": "^7.12.1", "@babel/compat-data": "^7.12.1",
"@babel/core": "^7.12.3", "@babel/core": "^7.12.3",

View file

@ -1,5 +1,6 @@
import * as core from '../utils/aniwatchCore'; import * as core from '../utils/aniwatchCore';
import * as helper from '../utils/helpers'; import * as helper from '../utils/helpers';
import { v4 as uuidv4 } from 'uuid';
export function init() { export function init() {
core.runAfterLoad(() => { core.runAfterLoad(() => {
@ -8,5 +9,36 @@ export function init() {
} }
function manipulateChatInput() { function manipulateChatInput() {
let textarea = document.querySelector('.chat-input textarea');
// avoid duplicate registration
if (typeof textarea.dataset.charCounterId !== 'undefined') {
return;
}
}
function addCharCounter(textarea) {
let chatDiv = textarea.parentElement.parentElement; // div with chat input and controls
let controlRow = chatDiv.children[1]; // row with controls
let btn = controlRow.querySelector('button'); // find send button
let counterSpan = document.createElement('span'); // create span for counter
counterSpan.classList.add('awp-w2g-chatCounter');
// id and "connection"
let counterId = `awp-${v4()}`
counterSpan.id = counterId;
textarea.dataset.charCounterId = counterId;
btn.parentElement.inserBefore(counterSpan, btn); // and insert in front of the button
textarea.addEventListener('keypress keyup', () => {
let current = textarea.value.length;
let max = textarea.maxLength;
counterSpan.innerText = `${current} / ${max}`;
// animation if at max
counterSpan.classList.toggle('awp-w2g-chatCounter-max', current >= max);
});
} }

View file

@ -2,4 +2,5 @@
@import './vars/colors'; @import './vars/colors';
// enhancements // enhancements
@import './enhancements/lists.scss'; @import './enhancements/lists';
@import './enhancements/watch2gether'

View file

@ -0,0 +1,21 @@
.awp {
&-w2g {
&-chatCounter {
white-space: nowrap;
&-max {
animation: shake 0.1s ease-in-out 0.1s 3 alternate;
@keyframes shake {
from {
transform: rotate(3deg);
}
to {
transform-origin: center center;
transform: rotate(-3deg);
}
}
}
}
}
}