From 2b9404e21c25188abdda6fb33f782c42304e3f1d Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sat, 14 Nov 2020 19:17:47 +0100 Subject: [PATCH] #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