mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Choose or drop image for upload
Fix up some JS Update Icons
This commit is contained in:
parent
0e1514bf93
commit
69d264739b
13 changed files with 279 additions and 194 deletions
|
@ -5,26 +5,29 @@ function imgFade(obj, time = 250) {
|
|||
// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
|
||||
function colourContrast(bgColor, lightColor, darkColor, threshold = 0.179) {
|
||||
// if color is in hex format then convert to rgb else parese rgb
|
||||
let r = 0
|
||||
let g = 0
|
||||
let b = 0
|
||||
if (bgColor.charAt(0) === '#') {
|
||||
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
|
||||
var r = parseInt(color.substring(0, 2), 16); // hexToR
|
||||
var g = parseInt(color.substring(2, 4), 16); // hexToG
|
||||
var b = parseInt(color.substring(4, 6), 16); // hexToB
|
||||
const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
|
||||
r = parseInt(color.substring(0, 2), 16); // hexToR
|
||||
g = parseInt(color.substring(2, 4), 16); // hexToG
|
||||
b = parseInt(color.substring(4, 6), 16); // hexToB
|
||||
} else {
|
||||
var color = bgColor.replace('rgb(', '').replace(')', '').split(',');
|
||||
var r = color[0];
|
||||
var g = color[1];
|
||||
var b = color[2];
|
||||
const color = bgColor.replace('rgb(', '').replace(')', '').split(',');
|
||||
r = color[0];
|
||||
g = color[1];
|
||||
b = color[2];
|
||||
}
|
||||
|
||||
var uicolors = [r / 255, g / 255, b / 255];
|
||||
var c = uicolors.map((col) => {
|
||||
const uicolors = [r / 255, g / 255, b / 255];
|
||||
const c = uicolors.map((col) => {
|
||||
if (col <= 0.03928) {
|
||||
return col / 12.92;
|
||||
}
|
||||
return Math.pow((col + 0.055) / 1.055, 2.4);
|
||||
});
|
||||
var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
|
||||
const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
|
||||
return (L > threshold) ? darkColor : lightColor;
|
||||
}
|
||||
// Lazy load images when they are in view
|
||||
|
@ -48,8 +51,7 @@ window.onload = function () {
|
|||
const lightColor = '#E8E3E3';
|
||||
let contrastCheck = document.querySelectorAll('#contrast-check');
|
||||
for (let i = 0; i < contrastCheck.length; i++) {
|
||||
console.log(contrastCheck[i].getAttribute('data-color'));
|
||||
bgColor = contrastCheck[i].getAttribute('data-color');
|
||||
let bgColor = contrastCheck[i].getAttribute('data-color');
|
||||
contrastCheck[i].style.color = colourContrast(bgColor, lightColor, darkColor);
|
||||
}
|
||||
|
||||
|
@ -89,4 +91,4 @@ window.onscroll = function () {
|
|||
};
|
||||
window.onresize = function () {
|
||||
loadOnView();
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue