schmoekerei/coverbuilder
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrote JS for better readability

Browse Source
This commit is contained in:
Marvin Scham
2021-05-02 03:04:22 +02:00
parent 4b3136d9c6
commit ef1f8c63b9
2 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
main.html
View File

@@ -8,13 +8,13 @@
<link rel="stylesheet" href="style.css">
<title>Cover Builder</title>
</head>
<body onresize="renewReflection();">
<body onresize="renew();">
<div id="header">
<span>Cover Builder</span>
</div>
<div id="content">
<div class="block">
<input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renewReflection();">
<input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renew();">
<label for="file" id="filelabel">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>

87
script.js
View File

@@ -1,18 +1,22 @@
const colorThief = new ColorThief();
function renewReflection() {
function renew() {
setTimeout(function () {
var ref = document.getElementById("reflection");
var img = document.getElementById("img");
var container = document.getElementById("container");
ref.style.width = img.offsetWidth + "px";
ref.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
img.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
reload_palette();
adjustReflection();
getAndSetColors();
}, 100);
}
function adjustReflection() {
var ref = document.getElementById("reflection");
var img = document.getElementById("img");
var container = document.getElementById("container");
ref.style.width = img.offsetWidth + "px";
ref.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
img.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px";
}
function copyToClipboard(string) {
var el = document.createElement('textarea');
el.value = string;
@@ -25,46 +29,65 @@ function copyToClipboard(string) {
document.body.removeChild(el);
}
function reload_palette() {
function getAndSetDominantColor() {
const img = document.getElementById("img");
var dc = [0, 0, 0];
var palette = [[0, 0, 0]];
var rgbCol;
if (img.complete) {
dc = colorThief.getColor(img);
palette = colorThief.getPalette(img);
rgbCol = colorThief.getColor(img);
} else {
img.addEventListener('load', function () {
dc = colorThief.getColor(img);
palette = colorThief.getPalette(img);
})
rgbCol = colorThief.getColor(img);
});
}
document.getElementById("dc").style.backgroundColor = rgbToHex(dc[0], dc[1], dc[2]);
document.getElementById("dc").title = rgbToHex(dc[0], dc[1], dc[2]);
img.style.borderColor = rgbToHex(dc[0], dc[1], dc[2]);
var hexCol = rgbToHex(rgbCol[0], rgbCol[1], rgbCol[2]);
var dc = document.getElementById("dc");
var tag;
var el = document.getElementById("palette");
el.innerHTML = "";
dc.style.backgroundColor = hexCol;
dc.title = hexCol;
img.style.borderColor = hexCol;
}
function getAndSetPalette() {
const img = document.getElementById("img");
var tag, rgbCols, hexCol;
var palette = document.getElementById("palette");
palette.innerHTML = "" // Remove old palette
if (img.complete) {
rgbCols = colorThief.getPalette(img);
} else {
img.addEventListener('load', function () {
rgbCols = colorThief.getPalette(img);
});
}
rgbCols.forEach(function (c) {
hexCol = rgbToHex(c[0], c[1], c[2]);
palette.forEach(function (a) {
tag = document.createElement("div");
tag.classList.add("col");
tag.style.backgroundColor = rgbToHex(a[0], a[1], a[2]);
tag.title = rgbToHex(a[0], a[1], a[2]);
el.appendChild(tag);
tag.style.backgroundColor = hexCol;
tag.title = hexCol;
palette.appendChild(tag);
});
var cols = document.getElementsByClassName("col");
[...cols].forEach(function (c) {
c.addEventListener('click', function () {
copyToClipboard(c.title);
img.style.borderColor = c.title;
[...cols].forEach(function (co) {
co.addEventListener('click', function () {
copyToClipboard(co.title);
img.style.borderColor = co.title;
});
});
}
function getAndSetColors() {
getAndSetDominantColor();
getAndSetPalette();
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
@@ -76,4 +99,4 @@ function rgbToHex(r, g, b) {
//##########################################################################################################################
renewReflection();
renew();