From cd4e6907d88be28112b4d3cf0bac0b99dd938db5 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Tue, 2 Nov 2021 09:25:23 +0100 Subject: [PATCH] promises WIP --- index.html | 5 ++--- script.js | 35 +++++++++++++++++++++-------------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 6890d86..0d9a7e2 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,8 @@
- -
- + +
diff --git a/script.js b/script.js index e7c14a6..cd9bbdd 100644 --- a/script.js +++ b/script.js @@ -96,37 +96,44 @@ function drawLabel() { if (width > minimumSizeX && height > minimumSizeY) { // Create a label and push it into the array of labels - let label = createLabel(minX, minY, width, height, labels.length); - let userInput = new Promise(function (resolve, reject) { + new Promise(function (resolve, reject) { // TODO: show the modal for text input in overlay // TODO: temp editor freeze before the label is created // then if the user click insert and there is a value in the input-- > resolve the promise and return the text input to create the label, // if the user click cancel-- > reject the promise and don't create the label - input.focus(); - // TODO: after the first promise it breaks?? + // Insert button insert.addEventListener("click", (e) => { e.preventDefault(); if (input.value) { - resolve(input.value); - } else { - reject("no input"); + resolve(); } - input.value = ""; }); - }).then((textInput) => { + + // Cancel button + cancel.addEventListener("click", (e) => { + e.preventDefault(); + reject("no input"); + }); + }).then(() => { + // Create the label + let label = createLabel(minX, minY, width, height, labels.length); + // Add the text input to the label let text = document.createElement("p"); text.classList.add("label--text"); - text.innerHTML = textInput; + text.innerHTML = input.value; label.appendChild(text); - }); - labels.push(label); - container.appendChild(label); - input.value = ""; + // labels.push(label); + container.appendChild(label); + + // Reset the modal + input.value = ""; + input.blur(); + }); } }