Merge pull request #149 from Serraniel/feature/#109-adaptive-font-color-for-badges

Feature/#109 adaptive font color for badges

package-lock.json

@@ -3326,13 +3326,12 @@
             }
         },
         "color": {
-            "version": "3.1.2",
+            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
+            "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
-            "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+            "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
-            "dev": true,
             "requires": {
                 "color-convert": "^1.9.1",
-                "color-string": "^1.5.2"
+                "color-string": "^1.5.4"
             }
         },
         "color-convert": {
@@ -3349,10 +3348,9 @@
             "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
         "color-string": {
-            "version": "1.5.3",
+            "version": "1.5.4",
-            "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+            "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
-            "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+            "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
-            "dev": true,
             "requires": {
                 "color-name": "^1.0.0",
                 "simple-swizzle": "^0.2.2"
@@ -11572,7 +11570,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"
             },
@@ -11580,8 +11577,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==",
+                    "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-                    "dev": true
                 }
             }
         },

package.json

@@ -33,6 +33,7 @@
     },
     "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
     "dependencies": {
+        "color": "^3.1.3",
         "uuid": "^8.3.2"
     },
     "devDependencies": {

src/html/settings.html

@@ -25,6 +25,9 @@
         <input type="checkbox" id="websiteOptimizeListAppearance" data-default-value="true" />
         <label for="websiteOptimizeListAppearance">Optimize appearance of lists</label><br />
 
+        <input type="checkbox" id="websiteOptimizeFontColors" data-default-value="true" />
+        <label for="websiteOptimizeFontColors">Optimize font colors</label><br />
+
         <h3>Anime</h3>
         <input type="checkbox" id="animeLanguageDisplay" data-default-value="true" />
         <label for="animeLanguageDisplay">Optimize presentation of available subs and dubs</label><br />

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();

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 

src/javascript/enhancements/fontColor.js

@@ -0,0 +1,82 @@
+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';
+const DARKCOLOR_CLASS = 'awp-fontColor-dark';
+const __observedBadges = [];
+
+export function init() {
+    getGlobalConfiguration().getProperty(SETTINGS_websiteOptimizeFontColors, value => {
+        if (value) {
+            core.runAfterLoad(() => {
+                checkRunColorOptimization(document.documentElement);
+            }, ".*");
+
+            core.runAfterLocationChange(() => {
+                checkRunColorOptimization(document.documentElement);
+            }, ".*");
+
+            core.registerScript(node => {
+                checkRunColorOptimization(node);
+            }, ".*");
+        }
+    });
+}
+
+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');
+
+    // some elements do not have a computed background color
+    if (colorStr.length > 0) {
+        let color = new Color(colorStr)
+        badge.classList.toggle(DARKCOLOR_CLASS, color.isLight());
+    }
+}

src/stylesheets/aniwatchplus.scss

@@ -2,6 +2,7 @@
 @import "./vars/colors";
 
 // enhancements
+@import "./enhancements/fontColor";
 @import "./enhancements/lists";
 @import "./enhancements/tabs";
 @import "./enhancements/watch2gether";

src/stylesheets/enhancements/_fontColor.scss

@@ -0,0 +1,7 @@
+.awp{
+    &-fontColor{
+        &-dark{
+            color: $aniwatchDark !important;
+        }
+    }
+}

src/stylesheets/vars/_colors.scss

@@ -1,2 +1,5 @@
 $aniwatchBlue: #348fff;
+$aniwatchDark: #282a39;
+
+
 $gray: rgba(155, 155, 155, 0.2);