From e7a479097012bb34760f3d8adb5769c5b61d07b6 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 25 Oct 2020 11:54:36 +0100 Subject: [PATCH 01/10] #91 Added base script file --- src/javascript/enhancements/watch2getherChat.js | 12 ++++++++++++ src/javascript/index.js | 4 +++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/javascript/enhancements/watch2getherChat.js diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js new file mode 100644 index 0000000..e611c1f --- /dev/null +++ b/src/javascript/enhancements/watch2getherChat.js @@ -0,0 +1,12 @@ +import * as core from '../utils/aniwatchCore'; +import * as helper from '../utils/helpers'; + +export function init() { + core.runAfterLoad(() => { + manipulateChatInput(); + }, "^/watch2gether/.*$"); +} + +function manipulateChatInput(){ + +} \ No newline at end of file diff --git a/src/javascript/index.js b/src/javascript/index.js index 9d86b8a..f09fe58 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -6,6 +6,7 @@ import { initHelpers } from './utils/helpers'; 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(); @@ -16,4 +17,5 @@ initHelpers(); // enhancements animeRequests(); languageDisplay(); -quickSearch(); \ No newline at end of file +quickSearch(); +watch2getherChat(); \ No newline at end of file From 3125e6720f77fdcd4934f8359c6f9de731a1d059 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 25 Oct 2020 12:47:32 +0100 Subject: [PATCH 02/10] #91 Added base implementation for chat counter Adds uuid dependency to create guids --- package-lock.json | 24 ++++++++++-- package.json | 4 +- .../enhancements/watch2getherChat.js | 38 +++++++++++++++++-- src/stylesheets/aniwatchplus.scss | 3 +- .../enhancements/_watch2gether.scss | 21 ++++++++++ 5 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 src/stylesheets/enhancements/_watch2gether.scss diff --git a/package-lock.json b/package-lock.json index d63b08e..ac58357 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 bcbe472..8f7fe19 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 index e611c1f..c8a207e 100644 --- a/src/javascript/enhancements/watch2getherChat.js +++ b/src/javascript/enhancements/watch2getherChat.js @@ -1,12 +1,44 @@ import * as core from '../utils/aniwatchCore'; import * as helper from '../utils/helpers'; +import { v4 as uuidv4 } from 'uuid'; export function init() { core.runAfterLoad(() => { - manipulateChatInput(); + manipulateChatInput(); }, "^/watch2gether/.*$"); } -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); + }); } \ 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); + } + } + } + } + } +} From 93747d5cfdee17fc98d656fada0a0f64f24e25cd Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 25 Oct 2020 13:02:24 +0100 Subject: [PATCH 03/10] #91 added comment why this does not work yet --- src/javascript/enhancements/watch2getherChat.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js index c8a207e..4a5fac6 100644 --- a/src/javascript/enhancements/watch2getherChat.js +++ b/src/javascript/enhancements/watch2getherChat.js @@ -3,6 +3,7 @@ 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/.*$"); From a561ccb2b6703f86c83345a7b656295603db6973 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:08:06 +0100 Subject: [PATCH 04/10] #91 Fixes SCSS formattings --- src/stylesheets/aniwatchplus.scss | 8 ++++---- src/stylesheets/enhancements/_tabs.scss | 5 ++--- 2 files changed, 6 insertions(+), 7 deletions(-) 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 +} From 542d3283231ba49486a1c44fbf725caca2f0c0e0 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:31:12 +0100 Subject: [PATCH 05/10] #91 Finalized the JS implementation of the charcounter --- .../enhancements/watch2getherChat.js | 48 +++++++++++++------ 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js index 4a5fac6..cd8df67 100644 --- a/src/javascript/enhancements/watch2getherChat.js +++ b/src/javascript/enhancements/watch2getherChat.js @@ -4,18 +4,20 @@ import { v4 as uuidv4 } from 'uuid'; export function init() { // UPS // runAfterLoad is not what we want...wait for runAfterLocationChange.... - core.runAfterLoad(() => { + core.runAfterLocationChange(() => { manipulateChatInput(); }, "^/watch2gether/.*$"); } -function manipulateChatInput() { +function manipulateChatInput() { let textarea = document.querySelector('.chat-input textarea'); // avoid duplicate registration if (typeof textarea.dataset.charCounterId !== 'undefined') { return; } + + addCharCounter(textarea); } function addCharCounter(textarea) { @@ -23,23 +25,39 @@ function addCharCounter(textarea) { 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'); + let charCounterSpan = document.createElement('span'); // create span for counter + charCounterSpan.classList.add('awp-w2g-chatCounter'); // id and "connection" - let counterId = `awp-${v4()}` - counterSpan.id = counterId; + let counterId = `awp-${uuidv4()}` + charCounterSpan.id = 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', () => { - 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); + textarea.addEventListener('keyup', () => { + console.log('TRIGGER') + updateCharCounter(textarea, charCounterSpan) }); +} + +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); + } } \ No newline at end of file From 05d66bb1081b36beabdc0a614863f4477fd1e0b1 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:31:26 +0100 Subject: [PATCH 06/10] #91 Updated package-lock --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 99abfb5..bf24cd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "aniwatch-plus", - "version": "0.2.1-beta.0", + "version": "0.3.0-beta", "lockfileVersion": 1, "requires": true, "dependencies": { From b256fa8e5ed49a194b9cbb24de68fe9f340fa4c8 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:35:09 +0100 Subject: [PATCH 07/10] #91 Optimized the JS code --- src/javascript/enhancements/watch2getherChat.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js index cd8df67..7e29f80 100644 --- a/src/javascript/enhancements/watch2getherChat.js +++ b/src/javascript/enhancements/watch2getherChat.js @@ -45,9 +45,6 @@ function addCharCounter(textarea) { 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; @@ -55,9 +52,11 @@ function updateCharCounter(textarea, charCounterSpan) { // 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) { + if (current >= max && !charCounterSpan.classList.contains(SHAKE_CLASS)) { + charCounterSpan.classList.add(SHAKE_CLASS); + setTimeout(() => { - charCounterSpan.classList.add(SHAKE_CLASS); - }, 100); + charCounterSpan.classList.remove(SHAKE_CLASS); + }, 200); } } \ No newline at end of file From 3dad24844703985d7250beb6669384358d5cbe46 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:35:54 +0100 Subject: [PATCH 08/10] #91 fixed comment --- src/javascript/enhancements/watch2getherChat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/enhancements/watch2getherChat.js b/src/javascript/enhancements/watch2getherChat.js index 7e29f80..c173f87 100644 --- a/src/javascript/enhancements/watch2getherChat.js +++ b/src/javascript/enhancements/watch2getherChat.js @@ -51,10 +51,10 @@ function updateCharCounter(textarea, charCounterSpan) { 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 && !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); From b82f98d20a80d3692adc0e4c106ed8e470e5de34 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 28 Oct 2020 22:36:51 +0100 Subject: [PATCH 09/10] #91 intensified the animation --- src/stylesheets/enhancements/_watch2gether.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/enhancements/_watch2gether.scss b/src/stylesheets/enhancements/_watch2gether.scss index c5d5ed5..c37cc62 100644 --- a/src/stylesheets/enhancements/_watch2gether.scss +++ b/src/stylesheets/enhancements/_watch2gether.scss @@ -14,11 +14,11 @@ @keyframes shake { from { - transform: rotate(3deg); + transform: rotate(5deg); } to { transform-origin: center center; - transform: rotate(-3deg); + transform: rotate(-5deg); } } } From d8e51f6fb12d7c8c520fd7b9826e553b41c1ad4d Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 28 Oct 2020 22:39:15 +0100 Subject: [PATCH 10/10] Apply suggestions from code review --- src/javascript/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/javascript/index.js b/src/javascript/index.js index d1e9a7e..8b14f9c 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -20,5 +20,6 @@ initHelpers(); anilyr(); animeRequests(); languageDisplay(); -notifications();quickSearch(); -watch2getherChat(); \ No newline at end of file +notifications(); +quickSearch(); +watch2getherChat();