diff --git a/package-lock.json b/package-lock.json index 2efaea5..307d2a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d9f16b7..b617e25 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js new file mode 100644 index 0000000..c173f87 --- /dev/null +++ b/src/javascript/enhancements/watch2getherChat.js @@ -0,0 +1,62 @@ +import * as core from '../utils/aniwatchCore'; +import * as helper from '../utils/helpers'; +import { v4 as uuidv4 } from 'uuid'; + +export function init() { + // UPS // runAfterLoad is not what we want...wait for runAfterLocationChange.... + core.runAfterLocationChange(() => { + manipulateChatInput(); + }, "^/watch2gether/.*$"); +} + +function manipulateChatInput() { + let textarea = document.querySelector('.chat-input textarea'); + + // avoid duplicate registration + if (typeof textarea.dataset.charCounterId !== 'undefined') { + return; + } + + addCharCounter(textarea); +} + +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 charCounterSpan = document.createElement('span'); // create span for counter + charCounterSpan.classList.add('awp-w2g-chatCounter'); + + // id and "connection" + let counterId = `awp-${uuidv4()}` + charCounterSpan.id = counterId; + textarea.dataset.charCounterId = counterId; + + btn.parentElement.insertBefore(charCounterSpan, btn); // and insert in front of the button + updateCharCounter(textarea, charCounterSpan); + + textarea.addEventListener('keyup', () => { + console.log('TRIGGER') + updateCharCounter(textarea, charCounterSpan) + }); +} + +function updateCharCounter(textarea, charCounterSpan) { + const SHAKE_CLASS = 'awp-w2g-chatCounter-max'; + + let current = textarea.value.length; + let max = textarea.maxLength; + + charCounterSpan.innerText = `${current} / ${max}`; + + // animation if at max + if (current >= max && !charCounterSpan.classList.contains(SHAKE_CLASS)) { + charCounterSpan.classList.add(SHAKE_CLASS); + + // remove css class after animation finished, so it can be restarted again + setTimeout(() => { + charCounterSpan.classList.remove(SHAKE_CLASS); + }, 200); + } +} \ No newline at end of file diff --git a/src/javascript/index.js b/src/javascript/index.js index 9542b29..8b14f9c 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -8,6 +8,7 @@ import { init as animeRequests } from './enhancements/animeRequests'; import { init as languageDisplay } from './enhancements/languageDisplay'; import { init as notifications } from './enhancements/notifications'; import { init as quickSearch } from './enhancements/quickSearch'; +import { init as watch2getherChat } from './enhancements/watch2getherChat'; // core initCore(); @@ -20,4 +21,5 @@ anilyr(); animeRequests(); languageDisplay(); notifications(); -quickSearch(); \ No newline at end of file +quickSearch(); +watch2getherChat(); diff --git a/src/stylesheets/aniwatchplus.scss b/src/stylesheets/aniwatchplus.scss index 67a2367..29ff151 100644 --- a/src/stylesheets/aniwatchplus.scss +++ b/src/stylesheets/aniwatchplus.scss @@ -1,7 +1,7 @@ // vars -@import './vars/colors'; +@import "./vars/colors"; // enhancements -@import './enhancements/lists'; -@import './enhancements/tabs'; -@import './enhancements/watch2gether'; \ No newline at end of file +@import "./enhancements/lists"; +@import "./enhancements/tabs"; +@import "./enhancements/watch2gether"; diff --git a/src/stylesheets/enhancements/_tabs.scss b/src/stylesheets/enhancements/_tabs.scss index 0bcc731..899947a 100644 --- a/src/stylesheets/enhancements/_tabs.scss +++ b/src/stylesheets/enhancements/_tabs.scss @@ -1,7 +1,6 @@ -md-tab-item{ - +md-tab-item { // hide disabled tabs &.md-disabled { display: none; } -} \ No newline at end of file +} diff --git a/src/stylesheets/enhancements/_watch2gether.scss b/src/stylesheets/enhancements/_watch2gether.scss index a260283..c37cc62 100644 --- a/src/stylesheets/enhancements/_watch2gether.scss +++ b/src/stylesheets/enhancements/_watch2gether.scss @@ -4,3 +4,24 @@ vertical-align: text-top; } } +.awp { + &-w2g { + &-chatCounter { + white-space: nowrap; + + &-max { + animation: shake 0.1s ease-in-out 0.1s 3 alternate; + + @keyframes shake { + from { + transform: rotate(5deg); + } + to { + transform-origin: center center; + transform: rotate(-5deg); + } + } + } + } + } +}