label text input promises wip

3 years ago · e411475ab2
parent 060133ce77
commit e411475ab2
3 changed files with 55 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -11,6 +11,12 @@
 	<body>
 		<div id="container">
 			<div id="editor"></div>
+
+			<form class="text-input">
+				<input id="input" type="text" />
+				<button id="insert" type="submit">Insert</button>
+				<button id="cancel">x</button>
+			</form>
 		</div>
 	</body>
 </html>
--- a/script.js
+++ b/script.js
@ -2,6 +2,10 @@
 const container = document.getElementById("container");
 const editor = document.getElementById("editor");

+const input = document.getElementById("input");
+const insert = document.getElementById("insert");
+const cancel = document.getElementById("cancel");
+
 // List of labels
 let labels = [];
 let closing = false;
@ -90,16 +94,24 @@ function drawLabel() {
 	let height = maxY - minY;

 	if (width > minimumSizeX && height > minimumSizeY) {
-		// Create a label and push it into the array of labels
-		// The index is +1 because it is
-		let label = createLabel(minX, minY, width, height, labels.length);
-		labels.push(label);
-		container.appendChild(label);
+		new Promise(function (resolve, reject) {
+			insert.addEventListener("click", (e) => {
+				if (input.value) {
+					resolve(input.value);
+				} else reject("no input");
+				e.preventDefault();
+			});
+		}).then((textInput) => {
+			// Create a label and push it into the array of labels
+			let label = createLabel(minX, minY, width, height, labels.length, textInput);
+			labels.push(label);
+			container.appendChild(label);
+		});
 	}
 }

 // Create the label element
-function createLabel(x, y, width, height, index) {
+function createLabel(x, y, width, height, index, input) {
 	let label = document.createElement("div");
 	label.classList.add("label");
 	label.style.left = `${x}px`;
@ -125,8 +137,13 @@ function createLabel(x, y, width, height, index) {
 	close.addEventListener("click", (e) => {
 		label.remove();
 	});
-
 	label.appendChild(close);

+	// Add the text
+	let text = document.createElement("p");
+	text.classList.add("label--text");
+	text.innerHTML = input;
+	label.appendChild(text);
+
 	return label;
 }
--- a/style.css
+++ b/style.css
@ -32,6 +32,8 @@ body {
 	position: absolute;
 	background-color: tomato;
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+
+	overflow: hidden;
 }

 .label--number {
@ -59,3 +61,26 @@ body {

 	cursor: pointer;
 }
+.label--text {
+	margin: 1ch 0;
+	padding: 0 1ch;
+
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	text-overflow: ellipsis;
+}
+
+.text-input {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.text-input button {
+	background: none;
+	border: none;
+	cursor: pointer;
+}