rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace innerText method for iconRadioTemplate and colorRadioTemplate functions

Browse source
This commit is contained in:
Maxx Crawford 2023-02-13 11:42:03 -06:00
parent e92a1ac53b
commit 842abbd986
No known key found for this signature in database
GPG key ID: 71DBD3273B65FEF9
1 changed files with 55 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/js/popup.js
View file

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