kamo
/
collecting-labels
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

overlay and image loader wip

Browse Source
master
km0 3 years ago
parent c08b00b7bc
commit e8afdfdfc8
4 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File

4
index.html
Unescape Escape View File

@ -11,9 +11,9 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<figure class="background-image"> <figure class="background-container">
<!-- <img src="img.jpg" alt="" /> -->
<input type="file" /> <input type="file" />
<img id="background-image" draggable="false" src="#" />
</figure> </figure>
<div id="editor"></div> <div id="editor"></div>
<div class="text-input"> <div class="text-input">

4
labels.js
Unescape Escape View File

@ -27,7 +27,7 @@ let showEditor = false;
// Store the coordinates and trigger the function // Store the coordinates and trigger the function
container.addEventListener("mousedown", (e) => { container.addEventListener("mousedown", (e) => {
// Avoid inserting a new label if the user is clicking on a close button) // Avoid inserting a new label if the user is clicking on a close button)
if (e.target.tagName !== "BUTTON") { if (e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
startX = e.x; startX = e.x;
startY = e.y; startY = e.y;
@ -38,7 +38,7 @@ container.addEventListener("mousedown", (e) => {
}); });
container.addEventListener("mouseup", (e) => { container.addEventListener("mouseup", (e) => {
if (e.target.tagName !== "BUTTON") { if (e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
endX = e.x; endX = e.x;
endY = e.y; endY = e.y;

10
picture.js
Unescape Escape View File

@ -1,10 +1,16 @@
document.querySelector('input[type="file"]').addEventListener("change", function () { window.addEventListener("load", function () {
let input = document.querySelector('input[type="file"]');
input.addEventListener("change", function () {
console.log(this.files);
if (this.files && this.files[0]) { if (this.files && this.files[0]) {
var img = document.querySelector("img"); let img = document.querySelector("img");
img.onload = () => { img.onload = () => {
img.classList.add("visible");
input.classList.add("hidden");
URL.revokeObjectURL(img.src); // no longer needed, free memory URL.revokeObjectURL(img.src); // no longer needed, free memory
}; };
img.src = URL.createObjectURL(this.files[0]); // set src to blob url img.src = URL.createObjectURL(this.files[0]); // set src to blob url
} }
});
}); });

44
style.css
Unescape Escape View File

@ -93,7 +93,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgba(250, 93, 65, 0.9); background-color: rgba(255, 99, 71, 0.95);
} }
.text-input.visible { .text-input.visible {
@ -102,7 +102,19 @@ body {
.modal { .modal {
padding: 64px; padding: 64px;
background-color: tomato; }
.modal input {
font-size: 1.5rem;
background: none;
border: none;
color: white;
border-bottom: 1px solid white;
}
.modal input:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.25);
} }
.text-input button { .text-input button {
@ -111,11 +123,35 @@ body {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 1.5rem;
}
#cancel {
font-weight: normal;
} }
.background-image { .background-container {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(50%, 50%); transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
}
.background-container img {
display: none;
max-width: 70w;
max-height: 70vh;
object-fit: contain;
user-select: none;
pointer-events: none;
}
.background-container img.visible {
display: initial;
}
.hidden {
display: none;
} }

Write Preview
Loading…
Cancel
Save