overlay and image loader wip

3 years ago · e8afdfdfc8
parent c08b00b7bc
commit e8afdfdfc8
4 changed files with 58 additions and 16 deletions
--- a/index.html
+++ b/index.html
@ -11,9 +11,9 @@
 	</head>
 	<body>
 		<div id="container">
-			<figure class="background-image">
-				<!-- <img src="img.jpg" alt="" /> -->
+			<figure class="background-container">
 				<input type="file" />
+				<img id="background-image" draggable="false" src="#" />
 			</figure>
 			<div id="editor"></div>
 			<div class="text-input">
--- a/labels.js
+++ b/labels.js
@ -27,7 +27,7 @@ let showEditor = false;
 // Store the coordinates and trigger the function
 container.addEventListener("mousedown", (e) => {
 	// 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;
 		startY = e.y;

@ -38,7 +38,7 @@ container.addEventListener("mousedown", (e) => {
 });

 container.addEventListener("mouseup", (e) => {
-	if (e.target.tagName !== "BUTTON") {
+	if (e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
 		endX = e.x;
 		endY = e.y;

--- a/picture.js
+++ b/picture.js
@ -1,10 +1,16 @@
-document.querySelector('input[type="file"]').addEventListener("change", function () {
-	if (this.files && this.files[0]) {
-		var img = document.querySelector("img");
-		img.onload = () => {
-			URL.revokeObjectURL(img.src); // no longer needed, free memory
-		};
+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]) {
+			let img = document.querySelector("img");
+			img.onload = () => {
+				img.classList.add("visible");
+				input.classList.add("hidden");
+				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
+		}
+	});
 });
--- a/style.css
+++ b/style.css
@ -93,7 +93,7 @@ body {
 	justify-content: center;
 	align-items: center;

-	background-color: rgba(250, 93, 65, 0.9);
+	background-color: rgba(255, 99, 71, 0.95);
 }

 .text-input.visible {
@ -102,7 +102,19 @@ body {

 .modal {
 	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 {
@ -111,11 +123,35 @@ body {
 	background: none;
 	border: none;
 	cursor: pointer;
+	font-size: 1.5rem;
+}
+
+#cancel {
+	font-weight: normal;
 }

-.background-image {
+.background-container {
 	position: absolute;
 	left: 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;
 }