Skip to content

Commit 8eabcf5

Browse files
joshwallerrjoshwallerr
committed
Added checks to see if pill menu buttons already exist to prevent duplication
1 parent 74a370e commit 8eabcf5

File tree

1 file changed

+67
-61
lines changed

1 file changed

+67
-61
lines changed

‎popup.js‎

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -884,9 +884,7 @@ function initPopup() {
884884
const blockPatterns = [
885885
/javascript.+required/i,
886886
/enable javascript/i,
887-
/bot detected/i,
888887
/captcha/i,
889-
/blocked/i,
890888
/javascript.+enable/i,
891889
];
892890

@@ -902,15 +900,6 @@ function initPopup() {
902900
document.getElementById('summary-section-main').style.borderLeft = "3px solid rgb(34 197 94)";
903901
let termType = policyKeys[i];
904902

905-
let pillButton = document.createElement('div');
906-
pillButton.textContent = termType;
907-
pillButton.id = termType.toLowerCase().replace(/[^a-z0-9]/g, '-') + '-menu';
908-
pillButton.className = "rounded-full px-3 py-1 text-xs font-semibold text-gray-300 mr-2 mb-1 mt-1 bg-slate-50 cursor-pointer border-solid border max-w-fit";
909-
pillButton.style.borderColor = "lightgray";
910-
pillButton.title = "Show only " + termType;
911-
document.getElementById('summary-menu').style.display = "flex";
912-
summaryMenu.appendChild(pillButton);
913-
914903
let policyDiv = document.createElement('div');
915904
policyDiv.id = termType.toLowerCase().replace(/[^a-z0-9]/g, '-');
916905

@@ -1100,59 +1089,76 @@ function initPopup() {
11001089
}
11011090
container.appendChild(policyDiv); // append policyDiv to container
11021091

1103-
pillButton.addEventListener('click', function() {
1104-
let toggledPill = summaryMenu.querySelector('.toggle-on');
1105-
1106-
if (toggledPill && toggledPill !== pillButton) {
1107-
toggledPill.classList.remove('toggle-on');
1108-
toggledPill.classList.remove('!bg-white', '!text-gray-700', '!border-black');
1109-
toggledPill.innerHTML = toggledPill.innerHTML.replace(' <span style="vertical-align: middle; font-size: small;">\u00D7</span>', '');
1110-
// Hide the policyDiv that corresponds to the untoggled pill
1111-
document.getElementById(toggledPill.id.replace('-menu', '')).style.display = 'none';
1112-
}
1113-
1114-
if (!pillButton.classList.contains('toggle-on')) {
1115-
pillButton.classList.add('toggle-on');
1116-
pillButton.classList.add('!bg-white', '!text-gray-700', '!border-black');
1117-
pillButton.innerHTML += ' <span style="vertical-align: middle; font-size: small;">\u00D7</span>';
1118-
// Show the policyDiv that corresponds to the clicked pill
1119-
document.getElementById(pillButton.id.replace('-menu', '')).style.display = 'block';
1120-
1121-
// get all elements that are immediate children of summaries-container
1122-
let summaryDivs = document.getElementById('summaries-container').children;
1123-
1124-
// loop through all summaryDivs
1125-
for (let i = 0; i < summaryDivs.length; i++) {
1126-
if (summaryDivs[i].id !== pillButton.id.replace('-menu', '') && summaryDivs[i].id !== 'summaries-container-placeholder') {
1127-
summaryDivs[i].style.display = 'none';
1128-
}
1092+
let pillId = termType.toLowerCase().replace(/[^a-z0-9]/g, '-') + '-menu';
1093+
let pillElement = document.getElementById(`${pillId}`);
1094+
console.log(pillElement);
11291095

1130-
let hrElements = summaryDivs[i].querySelectorAll('hr');
1131-
for (let j = 0; j < hrElements.length; j++) {
1132-
hrElements[j].style.display = 'none';
1133-
}
1134-
}
1135-
1136-
} else {
1137-
pillButton.classList.remove('toggle-on');
1138-
pillButton.classList.remove('!bg-white', '!text-gray-700', '!border-black');
1139-
pillButton.innerHTML = pillButton.innerHTML.replace(' <span style="vertical-align: middle; font-size: small;">\u00D7</span>', '');
1140-
// Show all policyDivs when a pill is untoggled
1141-
let policyDivs = document.querySelectorAll('div[id$="-menu"]');
1142-
console.log(policyDivs);
1143-
for (let i = 0; i < policyDivs.length; i++) {
1144-
if (policyDivs[i].id !== 'summary-menu') {
1145-
document.getElementById(policyDivs[i].id.replace('-menu', '')).style.display = 'block';
1146-
}
1096+
if (!pillElement) {
1097+
console.log("creating pill: " + pillId);
1098+
let pillButton = document.createElement('div');
1099+
pillButton.textContent = termType;
1100+
pillButton.id = termType.toLowerCase().replace(/[^a-z0-9]/g, '-') + '-menu';
1101+
pillButton.className = "rounded-full px-3 py-1 text-xs font-semibold text-gray-300 mr-2 mb-1 mt-1 bg-slate-50 cursor-pointer border-solid border max-w-fit";
1102+
pillButton.style.borderColor = "lightgray";
1103+
pillButton.title = "Show only " + termType;
1104+
document.getElementById('summary-menu').style.display = "flex";
1105+
summaryMenu.appendChild(pillButton);
11471106

1148-
// show all horizontal lines inside the #summaries-container when a pill is untoggled
1149-
let hrElements = document.getElementById('summaries-container').querySelectorAll('hr');
1150-
for (let j = 0; j < hrElements.length; j++) {
1151-
hrElements[j].style.display = 'block';
1107+
pillButton.addEventListener('click', function() {
1108+
let toggledPill = summaryMenu.querySelector('.toggle-on');
1109+
1110+
if (toggledPill && toggledPill !== pillButton) {
1111+
toggledPill.classList.remove('toggle-on');
1112+
toggledPill.classList.remove('!bg-white', '!text-gray-700', '!border-black');
1113+
toggledPill.innerHTML = toggledPill.innerHTML.replace(' <span style="vertical-align: middle; font-size: small;">\u00D7</span>', '');
1114+
// Hide the policyDiv that corresponds to the untoggled pill
1115+
document.getElementById(toggledPill.id.replace('-menu', '')).style.display = 'none';
1116+
}
1117+
1118+
if (!pillButton.classList.contains('toggle-on')) {
1119+
pillButton.classList.add('toggle-on');
1120+
pillButton.classList.add('!bg-white', '!text-gray-700', '!border-black');
1121+
pillButton.innerHTML += ' <span style="vertical-align: middle; font-size: small;">\u00D7</span>';
1122+
// Show the policyDiv that corresponds to the clicked pill
1123+
document.getElementById(pillButton.id.replace('-menu', '')).style.display = 'block';
1124+
1125+
// get all elements that are immediate children of summaries-container
1126+
let summaryDivs = document.getElementById('summaries-container').children;
1127+
1128+
// loop through all summaryDivs
1129+
for (let i = 0; i < summaryDivs.length; i++) {
1130+
if (summaryDivs[i].id !== pillButton.id.replace('-menu', '') && summaryDivs[i].id !== 'summaries-container-placeholder') {
1131+
summaryDivs[i].style.display = 'none';
1132+
}
1133+
1134+
let hrElements = summaryDivs[i].querySelectorAll('hr');
1135+
for (let j = 0; j < hrElements.length; j++) {
1136+
hrElements[j].style.display = 'none';
1137+
}
11521138
}
1153-
}
1154-
}
1155-
});
1139+
1140+
} else {
1141+
pillButton.classList.remove('toggle-on');
1142+
pillButton.classList.remove('!bg-white', '!text-gray-700', '!border-black');
1143+
pillButton.innerHTML = pillButton.innerHTML.replace(' <span style="vertical-align: middle; font-size: small;">\u00D7</span>', '');
1144+
// Show all policyDivs when a pill is untoggled
1145+
let policyDivs = document.querySelectorAll('div[id$="-menu"]');
1146+
console.log(policyDivs);
1147+
for (let i = 0; i < policyDivs.length; i++) {
1148+
if (policyDivs[i].id !== 'summary-menu') {
1149+
document.getElementById(policyDivs[i].id.replace('-menu', '')).style.display = 'block';
1150+
}
1151+
1152+
// show all horizontal lines inside the #summaries-container when a pill is untoggled
1153+
let hrElements = document.getElementById('summaries-container').querySelectorAll('hr');
1154+
for (let j = 0; j < hrElements.length; j++) {
1155+
hrElements[j].style.display = 'block';
1156+
}
1157+
}
1158+
}
1159+
createdPills[pillId] = true;
1160+
});
1161+
}
11561162
}
11571163
});
11581164
updatePremiumFeaturesVisibility();

0 commit comments

Comments
 (0)