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"> <link rel="stylesheet" href="style.css">
<title>Cover Builder</title> <title>Cover Builder</title>
</head> </head>
<body onresize="renewReflection();"> <body onresize="renew();">
<div id="header"> <div id="header">
<span>Cover Builder</span> <span>Cover Builder</span>
</div> </div>
<div id="content"> <div id="content">
<div class="block"> <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"> <label for="file" id="filelabel">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"> <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> <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(); const colorThief = new ColorThief();
function renewReflection() { function renew() {
setTimeout(function () { setTimeout(function () {
var ref = document.getElementById("reflection"); adjustReflection();
var img = document.getElementById("img"); getAndSetColors();
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();
}, 100); }, 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) { function copyToClipboard(string) {
var el = document.createElement('textarea'); var el = document.createElement('textarea');
el.value = string; el.value = string;
@@ -25,46 +29,65 @@ function copyToClipboard(string) {
document.body.removeChild(el); document.body.removeChild(el);
} }
function reload_palette() { function getAndSetDominantColor() {
const img = document.getElementById("img"); const img = document.getElementById("img");
var dc = [0, 0, 0]; var rgbCol;
var palette = [[0, 0, 0]];
if (img.complete) { if (img.complete) {
dc = colorThief.getColor(img); rgbCol = colorThief.getColor(img);
palette = colorThief.getPalette(img);
} else { } else {
img.addEventListener('load', function () { img.addEventListener('load', function () {
dc = colorThief.getColor(img); rgbCol = colorThief.getColor(img);
palette = colorThief.getPalette(img); });
})
} }
document.getElementById("dc").style.backgroundColor = rgbToHex(dc[0], dc[1], dc[2]); var hexCol = rgbToHex(rgbCol[0], rgbCol[1], rgbCol[2]);
document.getElementById("dc").title = rgbToHex(dc[0], dc[1], dc[2]); var dc = document.getElementById("dc");
img.style.borderColor = rgbToHex(dc[0], dc[1], dc[2]);
var tag; dc.style.backgroundColor = hexCol;
var el = document.getElementById("palette"); dc.title = hexCol;
el.innerHTML = ""; 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 = document.createElement("div");
tag.classList.add("col"); tag.classList.add("col");
tag.style.backgroundColor = rgbToHex(a[0], a[1], a[2]); tag.style.backgroundColor = hexCol;
tag.title = rgbToHex(a[0], a[1], a[2]); tag.title = hexCol;
el.appendChild(tag); palette.appendChild(tag);
}); });
var cols = document.getElementsByClassName("col"); var cols = document.getElementsByClassName("col");
[...cols].forEach(function (c) { [...cols].forEach(function (co) {
c.addEventListener('click', function () { co.addEventListener('click', function () {
copyToClipboard(c.title); copyToClipboard(co.title);
img.style.borderColor = c.title; img.style.borderColor = co.title;
}); });
}); });
} }
function getAndSetColors() {
getAndSetDominantColor();
getAndSetPalette();
}
function componentToHex(c) { function componentToHex(c) {
var hex = c.toString(16); var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex; return hex.length == 1 ? "0" + hex : hex;
@@ -76,4 +99,4 @@ function rgbToHex(r, g, b) {
//########################################################################################################################## //##########################################################################################################################
renewReflection(); renew();