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

Added proper whole-page drag-and-drop support

Browse Source
This commit is contained in:
Marvin Scham
2021-05-03 12:08:13 +02:00
parent c3a983b2aa
commit 1de6400210
5 changed files with 85 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
main.html
View File

@@ -14,7 +14,7 @@
</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]); renew();"> <input type="file" name="file" id="file">
<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>

19
script.js
View File

@@ -47,6 +47,7 @@ function getAndSetDominantColor() {
dc.style.backgroundColor = hexCol; dc.style.backgroundColor = hexCol;
dc.title = hexCol; dc.title = hexCol;
img.style.borderColor = hexCol; img.style.borderColor = hexCol;
copyToClipboard(hexCol);
} }
function getAndSetPalette() { function getAndSetPalette() {
@@ -99,8 +100,24 @@ function rgbToHex(r, g, b) {
//########################################################################################################################## //##########################################################################################################################
const custom = document.getElementById("custom"); const file = document.getElementById("file");
file.addEventListener("change", function () {
document.getElementById('img').src = window.URL.createObjectURL(this.files[0]);
renew();
});
const body = document.getElementsByTagName("body")[0];
body.addEventListener("dragover", function () {
file.classList.add("show");
});
["dragleave", "drop"].forEach(function (a) {
file.addEventListener(a, function () {
file.classList.remove("show");
});
});
const custom = document.getElementById("custom");
custom.addEventListener("keyup", function () { custom.addEventListener("keyup", function () {
if (custom.value.length == 7) { if (custom.value.length == 7) {
document.getElementById("img").style.borderColor = custom.value; document.getElementById("img").style.borderColor = custom.value;

34
style.css
View File

@@ -14,6 +14,7 @@ body {
right: 0; right: 0;
line-height: 100px; line-height: 100px;
text-align: center; text-align: center;
z-index: 2;
} }
#header span { #header span {
@@ -104,15 +105,34 @@ h1 {
} }
#content input#file { #content input#file {
position: absolute; position: fixed;
height: 85px; background-color: rgba(0, 0, 0, 0.5);
max-width: calc(800px + 4rem); z-index: 1;
width: calc(100% - 2rem); top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
visibility: hidden;
opacity: 0;
}
#content input#file.show {
visibility: visible;
opacity: 1;
}
#content input#file:after {
content: 'Drop cover image anywhere...';
color: white;
text-shadow: black 2px 0px 0px, black 1.75517px 0.95885px 0px, black 1.0806px 1.68294px 0px, black 0.14147px 1.99499px 0px, black -0.83229px 1.81859px 0px, black -1.60229px 1.19694px 0px, black -1.97998px 0.28224px 0px, black -1.87291px -0.70157px 0px, black -1.30729px -1.5136px 0px, black -0.42159px -1.95506px 0px, black 0.56732px -1.91785px 0px, black 1.41734px -1.41108px 0px, black 1.92034px -0.55883px 0px;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
left: 50%; font-size: 2rem;
top: 116px;
opacity: 0;
} }
#content input#file:hover { #content input#file:hover {

2
style.css.map
View File

@@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAAA,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,kBAAkB;CAChC;;AAED,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,aAAa;EAC/B,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,WAAW,EAAE,KAAK;EAClB,UAAU,EAAE,MAAM;CAMnB;;AAdD,AAUE,OAVK,CAUL,IAAI,CAAC;EACH,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,GAAG;CACf;;AAGH,AAAA,EAAE,CAAC;EACD,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,IAAI;CACpB;;AAED,AAAA,QAAQ,CAAC;EACP,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,mBAAmB;EAC/B,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,IAAI;CAmGrB;;AAvGD,AAME,QANM,CAMN,GAAG,AAAA,MAAM,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAEhB,WAAI,EAAE,IAAI;EACV,YAAK,EAAE,IAAI;CAMd;;AApBH,AAiBI,QAjBI,CAMN,GAAG,AAAA,MAAM,AAWN,YAAa,CAAA,KAAK,EAAE;EACnB,UAAU,EAAE,IAAI;CACjB;;AAnBL,AAsBE,QAtBM,CAsBN,GAAG,AAAA,UAAU,CAAC;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,gBAAgB;CAmB5B;;AA7CH,AA4BI,QA5BI,CAsBN,GAAG,AAAA,UAAU,CAMX,IAAI,CAAC;EACH,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,cAAc;EAC3B,UAAU,EAAE,wCAAwC;CACrD;;AAlCL,AAoCI,QApCI,CAsBN,GAAG,AAAA,UAAU,CAcX,GAAG,AAAA,WAAW,CAAC;EACb,UAAU,EAAE,mBAAmB;EAC/B,eAAe,EAAE,KAAK;EACtB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,gBAAgB;CAC7B;;AA5CL,AA+CE,QA/CM,CA+CN,IAAI,CAAC;EACH,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,0BAA0B;EACtC,gBAAgB,EAAE,IAAI;CAKvB;;AA1DH,AAuDI,QAvDI,CA+CN,IAAI,AAQD,UAAW,CAAA,KAAK,EAAE;EACjB,WAAW,EAAE,GAAG;CACjB;;AAzDL,AA4DE,QA5DM,CA4DN,UAAU,CAAC;EACT,UAAU,EAAE,IAAI;CAUjB;;AAvEH,AA+DI,QA/DI,CA4DN,UAAU,CAGR,KAAK,CAAC;EACJ,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,0BAA0B;CAKvC;;AAtEL,AAmEM,QAnEE,CA4DN,UAAU,CAGR,KAAK,AAIF,QAAQ,CAAC;EACR,gBAAgB,EAAE,UAAU;CAC7B;;AArEP,AAyEE,QAzEM,CAyEN,KAAK,AAAA,KAAK,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,kBAAkB;EAC7B,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,gBAAgB;EAC3B,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,KAAK;EACV,OAAO,EAAE,CAAC;CAqBX;;AAtGH,AAmFI,QAnFI,CAyEN,KAAK,AAAA,KAAK,AAUP,MAAM,CAAC;EACN,MAAM,EAAE,OAAO;CAKhB;;AAzFL,AAsFM,QAtFE,CAyEN,KAAK,AAAA,KAAK,AAUP,MAAM,GAGD,KAAK,CAAC;EACR,UAAU,EAAE,OAAiB;CAC9B;;AAxFP,AA2FI,QA3FI,CAyEN,KAAK,AAAA,KAAK,GAkBJ,KAAK,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,aAAa;EAC/B,OAAO,EAAE,WAAW;EACpB,UAAU,EAAE,0BAA0B;CAMvC;;AArGL,AAiGM,QAjGE,CAyEN,KAAK,AAAA,KAAK,GAkBJ,KAAK,CAMP,GAAG,CAAC;EACF,IAAI,EAAE,KAAK;EACX,aAAa,EAAE,GAAG;CACnB;;AAKP,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAe;EACjC,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;CAKnB;;AAXD,AAQE,OARK,CAQL,CAAC,CAAC;EACA,KAAK,EAAE,KAAK;CACb", "mappings": "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",
"sources": [ "sources": [
"style.scss" "style.scss"
], ],

45
style.scss
View File

@@ -14,6 +14,7 @@ body {
right: 0; right: 0;
line-height: 100px; line-height: 100px;
text-align: center; text-align: center;
z-index: 2;
span { span {
color: white; color: white;
@@ -100,15 +101,45 @@ h1 {
} }
input#file { input#file {
position: absolute; position: fixed;
height: 85px; background-color: rgba(0, 0, 0, 0.5);
max-width: calc(800px + 4rem); z-index: 1;
width: calc(100% - 2rem); top: 0;
transform: translateX(-50%); left: 0;
left: 50%; height: 100%;
top: 116px; width: 100%;
transition: opacity 0.3s ease;
visibility: hidden;
opacity: 0; opacity: 0;
&.show {
visibility: visible;
opacity: 1;
}
&:after {
content: 'Drop cover image anywhere...';
color: white;
text-shadow: rgb(0, 0, 0) 2px 0px 0px,
rgb(0, 0, 0) 1.75517px 0.958851px 0px,
rgb(0, 0, 0) 1.0806px 1.68294px 0px,
rgb(0, 0, 0) 0.141474px 1.99499px 0px,
rgb(0, 0, 0) -0.832294px 1.81859px 0px,
rgb(0, 0, 0) -1.60229px 1.19694px 0px,
rgb(0, 0, 0) -1.97998px 0.28224px 0px,
rgb(0, 0, 0) -1.87291px -0.701566px 0px,
rgb(0, 0, 0) -1.30729px -1.5136px 0px,
rgb(0, 0, 0) -0.421592px -1.95506px 0px,
rgb(0, 0, 0) 0.567324px -1.91785px 0px,
rgb(0, 0, 0) 1.41734px -1.41108px 0px,
rgb(0, 0, 0) 1.92034px -0.558831px 0px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%);
font-size: 2rem;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;