kamo
/
concrete-label
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

label text input promises wip

Browse Source
master
km0 3 years ago
parent 060133ce77
commit e411475ab2
3 changed files with 55 additions and 7 deletions
Show Stats Download Patch File Download Diff File

6
index.html
Unescape Escape View File

@ -11,6 +11,12 @@
<body> <body>
<div id="container"> <div id="container">
<div id="editor"></div> <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> </div>
</body> </body>
</html> </html>

25
script.js
Unescape Escape View File

@ -2,6 +2,10 @@
const container = document.getElementById("container"); const container = document.getElementById("container");
const editor = document.getElementById("editor"); const editor = document.getElementById("editor");
const input = document.getElementById("input");
const insert = document.getElementById("insert");
const cancel = document.getElementById("cancel");
// List of labels // List of labels
let labels = []; let labels = [];
let closing = false; let closing = false;
@ -90,16 +94,24 @@ function drawLabel() {
let height = maxY - minY; let height = maxY - minY;
if (width > minimumSizeX && height > minimumSizeY) { 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 // 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, textInput);
let label = createLabel(minX, minY, width, height, labels.length);
labels.push(label); labels.push(label);
container.appendChild(label); container.appendChild(label);
});
} }
} }
// Create the label element // Create the label element
function createLabel(x, y, width, height, index) { function createLabel(x, y, width, height, index, input) {
let label = document.createElement("div"); let label = document.createElement("div");
label.classList.add("label"); label.classList.add("label");
label.style.left = `${x}px`; label.style.left = `${x}px`;
@ -125,8 +137,13 @@ function createLabel(x, y, width, height, index) {
close.addEventListener("click", (e) => { close.addEventListener("click", (e) => {
label.remove(); label.remove();
}); });
label.appendChild(close); label.appendChild(close);
// Add the text
let text = document.createElement("p");
text.classList.add("label--text");
text.innerHTML = input;
label.appendChild(text);
return label; return label;
} }

25
style.css
Unescape Escape View File

@ -32,6 +32,8 @@ body {
position: absolute; position: absolute;
background-color: tomato; background-color: tomato;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
} }
.label--number { .label--number {
@ -59,3 +61,26 @@ body {
cursor: pointer; 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;
}

Write Preview
Loading…
Cancel
Save