label text input promises wip

master
km0 3 years ago
parent 060133ce77
commit e411475ab2

@ -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>

@ -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) {
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
// The index is +1 because it is
let label = createLabel(minX, minY, width, height, labels.length);
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;
}

@ -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;
}

Loading…
Cancel
Save