Feature/#109 adaptive font color for badges #149

Merged
Serraniel merged 6 commits from feature/#109-adaptive-font-color-for-badges into develop 2020-12-24 11:11:04 +01:00
8 changed files with 59 additions and 12 deletions
Showing only changes of commit 2b9404e21c - Show all commits

20
package-lock.json generated
View file

@ -3318,13 +3318,12 @@
} }
}, },
"color": { "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": { "requires": {
"color-convert": "^1.9.1", "color-convert": "^1.9.1",
"color-string": "^1.5.2" "color-string": "^1.5.4"
} }
}, },
"color-convert": { "color-convert": {
@ -3341,10 +3340,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}, },
"color-string": { "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": { "requires": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@ -11530,7 +11528,6 @@
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"dev": true,
"requires": { "requires": {
"is-arrayish": "^0.3.1" "is-arrayish": "^0.3.1"
}, },
@ -11538,8 +11535,7 @@
"is-arrayish": { "is-arrayish": {
"version": "0.3.2", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "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
} }
} }
}, },

View file

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

View file

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

View file

@ -5,6 +5,7 @@ import { initHelpers } from './utils/helpers';
// enhancements // enhancements
import { init as anilyr } from './enhancements/anilyr'; import { init as anilyr } from './enhancements/anilyr';
import { init as animeRequests } from './enhancements/animeRequests'; import { init as animeRequests } from './enhancements/animeRequests';
import { init as fontColor } from './enhancements/fontColor';
import { init as languageDisplay } from './enhancements/languageDisplay'; import { init as languageDisplay } from './enhancements/languageDisplay';
import { init as notifications } from './enhancements/notifications'; import { init as notifications } from './enhancements/notifications';
import { init as quickSearch } from './enhancements/quickSearch'; import { init as quickSearch } from './enhancements/quickSearch';
@ -21,6 +22,7 @@ initHelpers();
// enhancements // enhancements
anilyr(); anilyr();
animeRequests(); animeRequests();
fontColor();
languageDisplay(); languageDisplay();
notifications(); notifications();
quickSearch(); quickSearch();

View file

@ -6,6 +6,7 @@ export const SETTINGS_websiteDisplayQuickSearch = 'websiteDisplayQuickSearch';
export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab'; export const SETTINGS_websiteShowNotificationsCountInTab = 'websiteShowNotificationsCountInTab';
export const SETTINGS_websiteHideUnusedTabs = 'websiteHideUnusedTabs'; export const SETTINGS_websiteHideUnusedTabs = 'websiteHideUnusedTabs';
export const SETTINGS_websiteOptimizeListAppearance = 'websiteOptimizeListAppearance'; export const SETTINGS_websiteOptimizeListAppearance = 'websiteOptimizeListAppearance';
export const SETTINGS_websiteOptimizeFontColors = 'websiteOptimizeFontColors';
// anime // anime
export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay'; export const SETTINGS_animeLanguageDisplay = 'animeLanguageDisplay';
// requests // requests

View file

@ -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')
}
}

View file

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

View file

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