diff --git a/src/js/popup.js b/src/js/popup.js index edc0662..075c185 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -2009,30 +2009,73 @@ Logic.registerPanel(P_CONTAINER_EDIT, { initializeRadioButtons() { const colorRadioTemplate = (containerColor) => { - return Utils.escaped` - `; + + // Create + const divRadioContainer = document.createElement("div"); + divRadioContainer.classList.add("radio-container"); + + // Create + const inputContainerColor = document.createElement("input"); + inputContainerColor.type = "radio"; + inputContainerColor.value = containerColor; + inputContainerColor.name = "container-color"; + inputContainerColor.id = `edit-container-panel-choose-color-${containerColor}`; + + // Create + const labelContainerColor = document.createElement("label"); + labelContainerColor.classList.add("usercontext-icon"); + labelContainerColor.classList.add("choose-color-icon"); + labelContainerColor.for = `edit-container-panel-choose-color-${containerColor}`; + labelContainerColor.setAttribute("data-identity-icon", "circle"); + labelContainerColor.setAttribute("data-identity-color", containerColor); + + // Append Children + // divRadioContainer > inputContainerColor | labelContainerColor + divRadioContainer.appendChild(inputContainerColor); + divRadioContainer.appendChild(labelContainerColor); + + return divRadioContainer; }; + const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"]; const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color"); colors.forEach((containerColor) => { - const templateInstance = document.createElement("div"); - templateInstance.classList.add("radio-container"); - // eslint-disable-next-line no-unsanitized/property - templateInstance.innerHTML = colorRadioTemplate(containerColor); + const templateInstance = colorRadioTemplate(containerColor); colorRadioFieldset.appendChild(templateInstance); }); const iconRadioTemplate = (containerIcon) => { - return Utils.escaped` - `; + // Create + const divRadioContainer = document.createElement("div"); + divRadioContainer.classList.add("radio-container"); + + // Create + const inputContainerIcon = document.createElement("input"); + inputContainerIcon.type = "radio"; + inputContainerIcon.value = containerIcon; + inputContainerIcon.name = "container-icon"; + inputContainerIcon.id = `edit-container-panel-choose-icon-${containerIcon}`; + + // Create + const labelContainerIcon = document.createElement("label"); + labelContainerIcon.classList.add("usercontext-icon"); + labelContainerIcon.classList.add("choose-color-icon"); + labelContainerIcon.for = `edit-container-panel-choose-icon-${containerIcon}`; + labelContainerIcon.setAttribute("data-identity-color", "grey"); + labelContainerIcon.setAttribute("data-identity-icon", containerIcon); + + // Append Children + // divRadioContainer > inputContainerIcon | labelContainerIcon + divRadioContainer.appendChild(inputContainerIcon); + divRadioContainer.appendChild(labelContainerIcon); + + return divRadioContainer; + }; const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle", "fence"]; const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon"); icons.forEach((containerIcon) => { - const templateInstance = document.createElement("div"); - templateInstance.classList.add("radio-container"); - // eslint-disable-next-line no-unsanitized/property - templateInstance.innerHTML = iconRadioTemplate(containerIcon); + const templateInstance = iconRadioTemplate(containerIcon); iconRadioFieldset.appendChild(templateInstance); }); },