#91 Added base implementation for chat counter
Adds uuid dependency to create guids
This commit is contained in:
parent
e7a4790970
commit
3125e6720f
24
package-lock.json
generated
24
package-lock.json
generated
|
@ -10735,6 +10735,14 @@
|
|||
"tough-cookie": "~2.5.0",
|
||||
"tunnel-agent": "^0.6.0",
|
||||
"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": {
|
||||
|
@ -11873,6 +11881,15 @@
|
|||
"requires": {
|
||||
"temp-dir": "^1.0.0",
|
||||
"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": {
|
||||
|
@ -12439,10 +12456,9 @@
|
|||
}
|
||||
},
|
||||
"uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
"version": "8.3.1",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
|
||||
"integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
|
||||
},
|
||||
"v8flags": {
|
||||
"version": "3.2.0",
|
||||
|
|
|
@ -32,7 +32,9 @@
|
|||
"email": "mail@serraniel.dev"
|
||||
},
|
||||
"homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"uuid": "^8.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/compat-data": "^7.12.1",
|
||||
"@babel/core": "^7.12.3",
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import * as core from '../utils/aniwatchCore';
|
||||
import * as helper from '../utils/helpers';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export function init() {
|
||||
core.runAfterLoad(() => {
|
||||
|
@ -8,5 +9,36 @@ export function init() {
|
|||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
|
@ -2,4 +2,5 @@
|
|||
@import './vars/colors';
|
||||
|
||||
// enhancements
|
||||
@import './enhancements/lists.scss';
|
||||
@import './enhancements/lists';
|
||||
@import './enhancements/watch2gether'
|
21
src/stylesheets/enhancements/_watch2gether.scss
Normal file
21
src/stylesheets/enhancements/_watch2gether.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue