diff --git a/.travis.yml b/.travis.yml index 5c7a886..d923d0e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - "node" + - "14" dist: trusty cache: npm: true diff --git a/package-lock.json b/package-lock.json index d63b08e..99abfb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8113,9 +8113,9 @@ "dev": true }, "nanoid": { - "version": "3.1.15", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.15.tgz", - "integrity": "sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==", + "version": "3.1.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz", + "integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==", "dev": true }, "nanomatch": { @@ -8933,9 +8933,9 @@ "dev": true }, "postcss": { - "version": "8.1.3", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.3.tgz", - "integrity": "sha512-AKsHGqd7HmXmL/EgyAjI4Gx719A5yQdt9HzyXrI8M/hzxfumecYS95kfvIt40UZqPVNoEt0Va1M3PG54XtNPbg==", + "version": "8.1.4", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz", + "integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==", "dev": true, "requires": { "colorette": "^1.2.1", @@ -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 bcbe472..370d7f0 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", @@ -62,7 +64,7 @@ "gulp-terser": "^1.4.0", "gulp-zip": "^5.0.2", "merge-stream": "^2.0.0", - "postcss": "^8.1.3", + "postcss": "^8.1.4", "sass": "^1.27.0", "terser": "^5.3.8", "vinyl-buffer": "^1.0.1", diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js new file mode 100644 index 0000000..4a5fac6 --- /dev/null +++ b/src/javascript/enhancements/watch2getherChat.js @@ -0,0 +1,45 @@ +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.runAfterLoad(() => { + manipulateChatInput(); + }, "^/watch2gether/.*$"); +} + +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); + }); +} \ No newline at end of file diff --git a/src/javascript/index.js b/src/javascript/index.js index b58cb94..c773bf3 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -7,6 +7,7 @@ import { init as anilyr } from './enhancements/anilyr'; import { init as animeRequests } from './enhancements/animeRequests'; import { init as languageDisplay } from './enhancements/languageDisplay'; import { init as quickSearch } from './enhancements/quickSearch'; +import { init as watch2getherChat } from './enhancements/watch2getherChat'; // core initCore(); @@ -18,4 +19,5 @@ initHelpers(); anilyr(); animeRequests(); languageDisplay(); -quickSearch(); \ No newline at end of file +quickSearch(); +watch2getherChat(); \ No newline at end of file diff --git a/src/stylesheets/aniwatchplus.scss b/src/stylesheets/aniwatchplus.scss index cdcb559..0fcd7c1 100644 --- a/src/stylesheets/aniwatchplus.scss +++ b/src/stylesheets/aniwatchplus.scss @@ -2,4 +2,5 @@ @import './vars/colors'; // enhancements -@import './enhancements/lists.scss'; \ No newline at end of file +@import './enhancements/lists'; +@import './enhancements/watch2gether' \ No newline at end of file diff --git a/src/stylesheets/enhancements/_watch2gether.scss b/src/stylesheets/enhancements/_watch2gether.scss new file mode 100644 index 0000000..731dc5e --- /dev/null +++ b/src/stylesheets/enhancements/_watch2gether.scss @@ -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); + } + } + } + } + } +}