From 2b9404e21c25188abdda6fb33f782c42304e3f1d Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sat, 14 Nov 2020 19:17:47 +0100 Subject: [PATCH 1/5] #109 Added base implementation for bade font colors Added color dependency for calculating background color and if dark or light. Also added a settings option ofc --- package-lock.json | 20 +++++------ package.json | 1 + src/html/settings.html | 3 ++ src/javascript/app.js | 2 ++ src/javascript/configuration/configuration.js | 1 + src/javascript/enhancements/fontColor.js | 36 +++++++++++++++++++ src/stylesheets/aniwatchplus.scss | 1 + src/stylesheets/enhancements/_fontColor.scss | 7 ++++ 8 files changed, 59 insertions(+), 12 deletions(-) create mode 100644 src/javascript/enhancements/fontColor.js create mode 100644 src/stylesheets/enhancements/_fontColor.scss diff --git a/package-lock.json b/package-lock.json index 81ce610..4f7561d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3318,13 +3318,12 @@ } }, "color": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", - "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", - "dev": true, + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz", + "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==", "requires": { "color-convert": "^1.9.1", - "color-string": "^1.5.2" + "color-string": "^1.5.4" } }, "color-convert": { @@ -3341,10 +3340,9 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", - "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", - "dev": true, + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz", + "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==", "requires": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" @@ -11530,7 +11528,6 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", - "dev": true, "requires": { "is-arrayish": "^0.3.1" }, @@ -11538,8 +11535,7 @@ "is-arrayish": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", - "dev": true + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" } } }, diff --git a/package.json b/package.json index f1531ae..5b41ddb 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ }, "homepage": "https://github.com/Serraniel/AniwatchPlus#readme", "dependencies": { + "color": "^3.1.3", "uuid": "^8.3.1" }, "devDependencies": { diff --git a/src/html/settings.html b/src/html/settings.html index b63bf93..82d48c8 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -25,6 +25,9 @@
+ +
+

Anime


diff --git a/src/javascript/app.js b/src/javascript/app.js index d34e051..a5966eb 100644 --- a/src/javascript/app.js +++ b/src/javascript/app.js @@ -5,6 +5,7 @@ import { initHelpers } from './utils/helpers'; // enhancements import { init as anilyr } from './enhancements/anilyr'; import { init as animeRequests } from './enhancements/animeRequests'; +import { init as fontColor } from './enhancements/fontColor'; import { init as languageDisplay } from './enhancements/languageDisplay'; import { init as notifications } from './enhancements/notifications'; import { init as quickSearch } from './enhancements/quickSearch'; @@ -21,6 +22,7 @@ initHelpers(); // enhancements anilyr(); animeRequests(); +fontColor(); languageDisplay(); notifications(); quickSearch(); diff --git a/src/javascript/configuration/configuration.js b/src/javascript/configuration/configuration.js index 23ad4fd..a0939f6 100644 --- a/src/javascript/configuration/configuration.js +++ b/src/javascript/configuration/configuration.js @@ -6,6 +6,7 @@ export const SETTINGS_websiteDisplayQuickSearch = 'websiteDisplayQuickSearch'; export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab'; export const SETTINGS_websiteHideUnusedTabs = 'websiteHideUnusedTabs'; export const SETTINGS_websiteOptimizeListAppearance = 'websiteOptimizeListAppearance'; +export const SETTINGS_websiteOptimizeFontColors = 'websiteOptimizeFontColors'; // anime export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay'; // requests diff --git a/src/javascript/enhancements/fontColor.js b/src/javascript/enhancements/fontColor.js new file mode 100644 index 0000000..37014e8 --- /dev/null +++ b/src/javascript/enhancements/fontColor.js @@ -0,0 +1,36 @@ +import Color from 'color'; +import { getGlobalConfiguration, SETTINGS_websiteOptimizeFontColors } from '../configuration/configuration'; +import * as core from '../utils/aniwatchCore'; +import * as helper from '../utils/helpers'; + +const BADGE_CLASS = 'label'; + +export function init() { + getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeFontColors, value => { + if (value) { + core.registerScript(node => { + console.log(node); + // run the scripts + if (helper.isHtmlElement(node)) { + + if (node.classList.contains(BADGE_CLASS)) { + optimizeFontColorsBadges(node); + } + else { + node.querySelectorAll(`.${BADGE_CLASS}`).forEach(element => { + optimizeFontColorsBadges(element); + }); + } + } + }, ".*"); + } + }); +} + +function optimizeFontColorsBadges(badge) { + let color = window.getComputedStyle(badge, null).getPropertyValue('background-color'); + let c = new Color(color) + if (c.isLight()) { + badge.classList.add('awp-fontColor-dark') + } +} \ No newline at end of file diff --git a/src/stylesheets/aniwatchplus.scss b/src/stylesheets/aniwatchplus.scss index 29ff151..ff84d01 100644 --- a/src/stylesheets/aniwatchplus.scss +++ b/src/stylesheets/aniwatchplus.scss @@ -2,6 +2,7 @@ @import "./vars/colors"; // enhancements +@import "./enhancements/fontColor"; @import "./enhancements/lists"; @import "./enhancements/tabs"; @import "./enhancements/watch2gether"; diff --git a/src/stylesheets/enhancements/_fontColor.scss b/src/stylesheets/enhancements/_fontColor.scss new file mode 100644 index 0000000..7abf5ff --- /dev/null +++ b/src/stylesheets/enhancements/_fontColor.scss @@ -0,0 +1,7 @@ +.awp{ + &-fontColor{ + &-dark{ + color: #262626 !important; + } + } +} \ No newline at end of file From a33a047de7be8e46137243928bc26bdaddb51c06 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sat, 14 Nov 2020 19:26:28 +0100 Subject: [PATCH 2/5] #109 added and used aniwatch dark color in css --- src/stylesheets/enhancements/_fontColor.scss | 2 +- src/stylesheets/vars/_colors.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/stylesheets/enhancements/_fontColor.scss b/src/stylesheets/enhancements/_fontColor.scss index 7abf5ff..d209588 100644 --- a/src/stylesheets/enhancements/_fontColor.scss +++ b/src/stylesheets/enhancements/_fontColor.scss @@ -1,7 +1,7 @@ .awp{ &-fontColor{ &-dark{ - color: #262626 !important; + color: $aniwatchDark !important; } } } \ No newline at end of file diff --git a/src/stylesheets/vars/_colors.scss b/src/stylesheets/vars/_colors.scss index 4e6f2b7..afaf996 100644 --- a/src/stylesheets/vars/_colors.scss +++ b/src/stylesheets/vars/_colors.scss @@ -1,2 +1,5 @@ $aniwatchBlue: #348fff; +$aniwatchDark: #282a39; + + $gray: rgba(155, 155, 155, 0.2); From a94f7b85191812efdca758b204131cfeeecbdf1c Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sat, 14 Nov 2020 19:34:51 +0100 Subject: [PATCH 3/5] #109 run script for font color after location change and initial load for already existing badges. --- src/javascript/enhancements/fontColor.js | 51 +++++++++++++++--------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/src/javascript/enhancements/fontColor.js b/src/javascript/enhancements/fontColor.js index 37014e8..cef07c3 100644 --- a/src/javascript/enhancements/fontColor.js +++ b/src/javascript/enhancements/fontColor.js @@ -7,30 +7,45 @@ const BADGE_CLASS = 'label'; export function init() { getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeFontColors, value => { - if (value) { - core.registerScript(node => { - console.log(node); - // run the scripts - if (helper.isHtmlElement(node)) { + if (value) { + core.runAfterLoad(() => { + checkRunColorOptimization(document.documentElement); + }, ".*"); - if (node.classList.contains(BADGE_CLASS)) { - optimizeFontColorsBadges(node); - } - else { - node.querySelectorAll(`.${BADGE_CLASS}`).forEach(element => { - optimizeFontColorsBadges(element); - }); - } - } + core.runAfterLocationChange(() => { + checkRunColorOptimization(document.documentElement); + }, ".*"); + + core.registerScript(node => { + checkRunColorOptimization(node); }, ".*"); } }); } +function checkRunColorOptimization(node) { + console.log(node); + + // run the scripts + if (helper.isHtmlElement(node)) { + if (node.classList.contains(BADGE_CLASS)) { + optimizeFontColorsBadges(node); + } + else { + node.querySelectorAll(`.${BADGE_CLASS}`).forEach(element => { + optimizeFontColorsBadges(element); + }); + } + } +} + function optimizeFontColorsBadges(badge) { - let color = window.getComputedStyle(badge, null).getPropertyValue('background-color'); - let c = new Color(color) - if (c.isLight()) { - badge.classList.add('awp-fontColor-dark') + let colorStr = window.getComputedStyle(badge, null).getPropertyValue('background-color'); + + if (colorStr.length > 0) { // some elements do not have a computed background color + let color = new Color(colorStr) + if (color.isLight()) { + badge.classList.add('awp-fontColor-dark') + } } } \ No newline at end of file From 9a28e3a09d33b1886908aae4d94e2a282eb90202 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sat, 14 Nov 2020 19:40:17 +0100 Subject: [PATCH 4/5] #109 Removed consoel log --- src/javascript/enhancements/fontColor.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/javascript/enhancements/fontColor.js b/src/javascript/enhancements/fontColor.js index cef07c3..54ea387 100644 --- a/src/javascript/enhancements/fontColor.js +++ b/src/javascript/enhancements/fontColor.js @@ -24,7 +24,6 @@ export function init() { } function checkRunColorOptimization(node) { - console.log(node); // run the scripts if (helper.isHtmlElement(node)) { From 2e61cf3ede106ada67b9423c9e489012be78b102 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Wed, 23 Dec 2020 20:01:06 +0100 Subject: [PATCH 5/5] #109 Added observer to react to late changes of a badge class --- src/javascript/enhancements/fontColor.js | 42 +++++++++++++++++++++--- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/src/javascript/enhancements/fontColor.js b/src/javascript/enhancements/fontColor.js index 54ea387..6d3ddeb 100644 --- a/src/javascript/enhancements/fontColor.js +++ b/src/javascript/enhancements/fontColor.js @@ -4,6 +4,8 @@ import * as core from '../utils/aniwatchCore'; import * as helper from '../utils/helpers'; const BADGE_CLASS = 'label'; +const DARKCOLOR_CLASS = 'awp-fontColor-dark'; +const __observedBadges = []; export function init() { getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeFontColors, value => { @@ -24,27 +26,57 @@ export function init() { } function checkRunColorOptimization(node) { - // run the scripts if (helper.isHtmlElement(node)) { if (node.classList.contains(BADGE_CLASS)) { + tryRegisterObserverForBadge(node); optimizeFontColorsBadges(node); } else { node.querySelectorAll(`.${BADGE_CLASS}`).forEach(element => { + tryRegisterObserverForBadge(element); optimizeFontColorsBadges(element); }); } } } +function tryRegisterObserverForBadge(badge) { + // some badges change there color via late loading so we also have to observe the classlist + // example: Navigating from a list to an anime -> "Currently Airing" late loads the color badge + // this only happens when navigating from a list, direct loading works + + if (__observedBadges.indexOf(badge) >= 0) { + return; + } + + let obsever = new MutationObserver(mutations => { + mutations.forEach(mutation => { + // prevent recursive calls when our class is added / removed + if ((mutation.oldValue?.indexOf(DARKCOLOR_CLASS) ?? -1 ^ mutation.target?.classList?.indexOf(DARKCOLOR_CLASS) ?? -1) === 0) { + return; + } + else { + optimizeFontColorsBadges(mutation.target); + } + }); + }); + + obsever.observe(badge, { + attributes: true, + attributeFilter: ['class'], + attributeOldValue: true, + }); + + __observedBadges.push(badge); +} + function optimizeFontColorsBadges(badge) { let colorStr = window.getComputedStyle(badge, null).getPropertyValue('background-color'); - if (colorStr.length > 0) { // some elements do not have a computed background color + // some elements do not have a computed background color + if (colorStr.length > 0) { let color = new Color(colorStr) - if (color.isLight()) { - badge.classList.add('awp-fontColor-dark') - } + badge.classList.toggle(DARKCOLOR_CLASS, color.isLight()); } } \ No newline at end of file