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

promises WIP

Browse Source
master
km0 3 years ago
parent defa22e901
commit cd4e6907d8
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File

5
index.html
Unescape Escape View File

@ -11,9 +11,8 @@
<body> <body>
<div id="container"> <div id="container">
<div id="editor"></div> <div id="editor"></div>
<form class="text-input">
<form id="text-input" class="text-input"> <input id="input" placeholder="Insert your label" type="text" />
<input id="input" type="text" />
<button id="insert" type="submit">Insert</button> <button id="insert" type="submit">Insert</button>
<button id="cancel">x</button> <button id="cancel">x</button>
</form> </form>

35
script.js
Unescape Escape View File

@ -96,37 +96,44 @@ function drawLabel() {
if (width > minimumSizeX && height > minimumSizeY) { if (width > minimumSizeX && height > minimumSizeY) {
// Create a label and push it into the array of labels // 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: show the modal for text input in overlay
// TODO: temp editor freeze before the label is created // 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, // 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 // if the user click cancel-- > reject the promise and don't create the label
input.focus(); input.focus();
// TODO: after the first promise it breaks?? // Insert button
insert.addEventListener("click", (e) => { insert.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
if (input.value) { if (input.value) {
resolve(input.value); resolve();
} else {
reject("no input");
} }
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 // Add the text input to the label
let text = document.createElement("p"); let text = document.createElement("p");
text.classList.add("label--text"); text.classList.add("label--text");
text.innerHTML = textInput; text.innerHTML = input.value;
label.appendChild(text); label.appendChild(text);
});
labels.push(label); // labels.push(label);
container.appendChild(label); container.appendChild(label);
input.value = "";
// Reset the modal
input.value = "";
input.blur();
});
} }
} }

Write Preview
Loading…
Cancel
Save