74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
const InputComponents = (() => {
|
|
setInputEvents();
|
|
|
|
function setInputEvents() {
|
|
// Make the checkboxes toggleable
|
|
let checkboxes = document.getElementsByClassName("checkbox");
|
|
for (let i=0; i<checkboxes.length; i++) {
|
|
Events.on("click", checkboxes[i], toggleBox);
|
|
}
|
|
}
|
|
|
|
function toggleBox(event) {
|
|
if (event.target.classList.contains("checked"))
|
|
event.target.classList.remove("checked");
|
|
else
|
|
event.target.classList.add("checked");
|
|
}
|
|
|
|
function createNumber(id, label) {
|
|
let element = document.createElement("label");
|
|
let inputEl = document.createElement("input");
|
|
|
|
inputEl.id = id;
|
|
inputEl.type = "number";
|
|
element.innerHTML = label;
|
|
|
|
element.appendChild(inputEl);
|
|
|
|
return element;
|
|
}
|
|
|
|
function createCheckbox(id, label) {
|
|
let element = document.createElement("div");
|
|
let inner = document.createElement("div");
|
|
let hiddenInput = document.createElement("input");
|
|
let box = document.createElement("div");
|
|
let labelEl = document.createElement("label");
|
|
|
|
labelEl.innerHTML = label;
|
|
box.innerHTML = '\
|
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
|
|
width="405.272px" height="405.272px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;"\
|
|
xml:space="preserve">\
|
|
<g>\
|
|
<path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836\
|
|
c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064\
|
|
c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/>\
|
|
</g>\
|
|
</svg>';
|
|
|
|
element.className = "checkbox-holder";
|
|
inner.className = "checkbox";
|
|
hiddenInput.type = "hidden";
|
|
box.className = "box";
|
|
box.id = id;
|
|
|
|
inner.appendChild(labelEl);
|
|
inner.appendChild(hiddenInput);
|
|
inner.appendChild(box);
|
|
element.appendChild(inner);
|
|
|
|
}
|
|
|
|
function updated() {
|
|
setInputEvents();
|
|
}
|
|
|
|
return {
|
|
updated,
|
|
createCheckbox,
|
|
createNumber
|
|
}
|
|
})();
|