* add css on area hover
* comments
This commit is contained in:
parent
cf548aaffa
commit
399236f6fe
2 changed files with 22 additions and 0 deletions
|
@ -3,12 +3,27 @@ window.addEventListener("load", () => main());
|
|||
const main = () => {
|
||||
Array.from(document.getElementsByClassName("upload-area")).forEach(
|
||||
(uploadArea) => {
|
||||
/* Handle event when a file is dropped hover the input area */
|
||||
uploadArea.addEventListener("drop", (event) => {
|
||||
fetchFile(event.dataTransfer.files);
|
||||
});
|
||||
|
||||
/* Handle color change when dragging a file hover the input area */
|
||||
const hoverCSS = "upload-area-hovered";
|
||||
uploadArea.addEventListener("dragover", () => {
|
||||
if (!uploadArea.classList.contains(hoverCSS)) {
|
||||
uploadArea.classList.add(hoverCSS);
|
||||
}
|
||||
});
|
||||
uploadArea.addEventListener("dragleave", () => {
|
||||
if (uploadArea.classList.contains(hoverCSS)) {
|
||||
uploadArea.classList.remove(hoverCSS);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
/* Handle when a file is added to the input element */
|
||||
const input = document.getElementById("upload");
|
||||
input.onchange = () => {
|
||||
fetchFile(input.files, input);
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
--grey: rgb(207, 216, 220);
|
||||
--shadow: rgba(0, 0, 0, 0.3);
|
||||
--border: rgb(45, 40, 22);
|
||||
--border-hover: rgb(184, 150, 48);
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
@ -30,6 +31,7 @@
|
|||
--grey: rgb(55, 71, 79);
|
||||
--shadow: rgba(125, 109, 60, 0.3);
|
||||
--border: rgb(213, 202, 168);
|
||||
--border-hover: rgb(223, 193, 99);
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
@ -95,6 +97,11 @@ main {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area-hovered {
|
||||
border: 2px dashed var(--border-hover);
|
||||
}
|
||||
|
||||
.desc-area {
|
||||
text-align: left;
|
||||
max-width: 30%;
|
||||
|
|
Reference in a new issue