Skip to content

Commit e1b6e38

Browse files
rgantzosrgantzos
committed
Selection option
1 parent 8a62f4a commit e1b6e38

File tree

2 files changed

+230
-109
lines changed

2 files changed

+230
-109
lines changed

‎extras/popup/popup.js‎

Lines changed: 198 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,12 @@ if (document.querySelector(".feedback-btn")) {
161161
.querySelector(".feedback-btn")
162162
.addEventListener("click", function () {
163163
chrome.tabs.create({
164-
url: "https://auth.itinerary.eu.org/auth/?redirect="+ btoa("https://scratch.mit.edu/ste/dashboard/verify/?system=feedback")+"&name=ScratchTools",
164+
url:
165+
"https://auth.itinerary.eu.org/auth/?redirect=" +
166+
btoa(
167+
"https://scratch.mit.edu/ste/dashboard/verify/?system=feedback"
168+
) +
169+
"&name=ScratchTools",
165170
});
166171
});
167172
}
@@ -685,104 +690,183 @@ async function getFeatures() {
685690
if (feature.options) {
686691
for (var optionPlace in feature.options) {
687692
var option = feature.options[optionPlace];
688-
var input = document.createElement("input");
689-
input.type = ["text", "checkbox", "number", "color"][option.type || 0];
690-
input.dataset.id = option.id;
691-
input.dataset.feature = feature.id;
692-
var optionData = (await chrome.storage.sync.get(option.id))[option.id];
693-
input.value = optionData || "";
694-
input.placeholder = `Enter ${input.type}`;
695-
var optionDiv = document.createElement("div")
696-
optionDiv.className = "option";
697-
var label = document.createElement("label");
698-
label.textContent = option.name;
699-
optionDiv.appendChild(label)
700-
701-
if (input.type === "checkbox") {
702-
input.checked = optionData || false;
703-
var specialLabel = document.createElement("label");
704-
specialLabel.className = "special-switch";
705-
input.classList.add = "checkbox"
706-
var span = document.createElement("span");
707-
span.className = "slider round";
708-
specialLabel.appendChild(input);
709-
specialLabel.appendChild(span);
710-
optionDiv.appendChild(specialLabel)
693+
if (option.type === 4) {
694+
var optionDiv = document.createElement("div");
695+
optionDiv.className = "option";
696+
var label = document.createElement("label");
697+
label.textContent = option.name;
698+
optionDiv.appendChild(label);
699+
700+
let options = document.createElement("div");
701+
options.className = "option-selection";
702+
options.dataset.id = option.id;
703+
var optionData = (await chrome.storage.sync.get(option.id))[
704+
option.id
705+
];
706+
for (var i in option.options) {
707+
let oData = option.options[i];
708+
709+
let span = document.createElement("span");
710+
span.textContent = oData.name;
711+
span.dataset.id = oData.value;
712+
713+
span.addEventListener("click", async function () {
714+
let id = this.dataset.id;
715+
716+
let feature = this.closest(".feature");
717+
let featureId = feature.dataset.id;
718+
719+
let optionId = this.parentElement.dataset.id;
720+
721+
this.parentElement
722+
.querySelector(".option-selected")
723+
.classList.remove("option-selected");
724+
this.classList.add("option-selected");
725+
726+
await chrome.storage.sync.set({
727+
[optionId]: id,
728+
});
729+
chrome.tabs.query({}, function (tabs) {
730+
for (var i = 0; i < tabs.length; i++) {
731+
try {
732+
chrome.scripting.executeScript({
733+
args: [featureId, optionId, id],
734+
target: { tabId: tabs[i].id },
735+
func: updateSettingsFunction,
736+
world: "MAIN",
737+
});
738+
function updateSettingsFunction(feature, name, value) {
739+
ScratchTools.Storage[name] = value;
740+
if (allSettingChangeFunctions[feature]) {
741+
allSettingChangeFunctions[feature]({
742+
key: name,
743+
value,
744+
});
745+
}
746+
}
747+
} catch (err) {
748+
console.log(err);
749+
}
750+
}
751+
});
752+
});
753+
if (optionData === span.dataset.id || (!optionData && i < 1)) {
754+
span.classList.add("option-selected");
755+
}
756+
options.appendChild(span);
757+
}
758+
optionDiv.appendChild(options);
711759
} else {
712-
optionDiv.appendChild(input)
760+
var input = document.createElement("input");
761+
input.type = ["text", "checkbox", "number", "color"][
762+
option.type || 0
763+
];
764+
input.dataset.id = option.id;
765+
input.dataset.feature = feature.id;
766+
var optionData = (await chrome.storage.sync.get(option.id))[
767+
option.id
768+
];
769+
input.value = optionData || "";
770+
input.placeholder = `Enter ${input.type}`;
771+
var optionDiv = document.createElement("div");
772+
optionDiv.className = "option";
773+
var label = document.createElement("label");
774+
label.textContent = option.name;
775+
optionDiv.appendChild(label);
776+
777+
if (input.type === "checkbox") {
778+
input.checked = optionData || false;
779+
var specialLabel = document.createElement("label");
780+
specialLabel.className = "special-switch";
781+
input.classList.add = "checkbox";
782+
var span = document.createElement("span");
783+
span.className = "slider round";
784+
specialLabel.appendChild(input);
785+
specialLabel.appendChild(span);
786+
optionDiv.appendChild(specialLabel);
787+
} else {
788+
optionDiv.appendChild(input);
789+
}
713790
}
714-
div.appendChild(optionDiv)
791+
div.appendChild(optionDiv);
715792

716-
input.dataset.validation = btoa(
717-
JSON.stringify(option.validation || [])
718-
);
719-
input.addEventListener("input", async function () {
720-
var validation = JSON.parse(atob(this.dataset.validation));
721-
var ready = true;
722-
var input = this;
723-
validation.forEach(function (validate) {
724-
if (ready) {
725-
input.style.outline = "none";
726-
if (
727-
input.nextSibling?.className?.includes("validation-explanation")
728-
) {
729-
input.nextSibling.remove();
730-
}
731-
if (!new RegExp(validate.regex).test(input.value)) {
732-
ready = false;
733-
input.style.outline = "2px solid #f72f4a";
734-
var explanation = document.createElement("span");
735-
explanation.className = "validation-explanation";
736-
explanation.textContent = validate.explanation;
737-
explanation.style.color = "#f72f4a";
738-
explanation.style.marginBottom = "1rem";
739-
input.insertAdjacentElement("afterend", explanation);
793+
if (option.type === 4) {
794+
input.dataset.validation = btoa(
795+
JSON.stringify(option.validation || [])
796+
);
797+
input.addEventListener("input", async function () {
798+
var validation = JSON.parse(atob(this.dataset.validation));
799+
var ready = true;
800+
var input = this;
801+
validation.forEach(function (validate) {
802+
if (ready) {
803+
input.style.outline = "none";
804+
if (
805+
input.nextSibling?.className?.includes(
806+
"validation-explanation"
807+
)
808+
) {
809+
input.nextSibling.remove();
810+
}
811+
if (!new RegExp(validate.regex).test(input.value)) {
812+
ready = false;
813+
input.style.outline = "2px solid #f72f4a";
814+
var explanation = document.createElement("span");
815+
explanation.className = "validation-explanation";
816+
explanation.textContent = validate.explanation;
817+
explanation.style.color = "#f72f4a";
818+
explanation.style.marginBottom = "1rem";
819+
input.insertAdjacentElement("afterend", explanation);
820+
}
740821
}
741-
}
742-
});
743-
if (ready) {
744-
if (this.type !== "checkbox") {
745-
finalValue = this.value;
746-
} else {
747-
var data = await chrome.storage.sync.get(this.dataset.id);
748-
if (data[this.dataset.id]) {
749-
this.checked = false;
750-
finalValue = false;
822+
});
823+
if (ready) {
824+
if (this.type !== "checkbox") {
825+
finalValue = this.value;
751826
} else {
752-
this.checked = true;
753-
finalValue = true;
827+
var data = await chrome.storage.sync.get(this.dataset.id);
828+
if (data[this.dataset.id]) {
829+
this.checked = false;
830+
finalValue = false;
831+
} else {
832+
this.checked = true;
833+
finalValue = true;
834+
}
754835
}
755-
}
756-
var saveData = {};
757-
saveData[this.dataset.id] = finalValue;
758-
await chrome.storage.sync.set(saveData);
759-
var featureToUpdate = this;
760-
chrome.tabs.query({}, function (tabs) {
761-
for (var i = 0; i < tabs.length; i++) {
762-
try {
763-
chrome.scripting.executeScript({
764-
args: [
765-
featureToUpdate.dataset.feature,
766-
featureToUpdate.dataset.id,
767-
finalValue,
768-
],
769-
target: { tabId: tabs[i].id },
770-
func: updateSettingsFunction,
771-
world: "MAIN",
772-
});
773-
function updateSettingsFunction(feature, name, value) {
774-
ScratchTools.Storage[name] = value;
775-
if (allSettingChangeFunctions[feature]) {
776-
allSettingChangeFunctions[feature]({ key: name, value });
836+
var saveData = {};
837+
saveData[this.dataset.id] = finalValue;
838+
await chrome.storage.sync.set(saveData);
839+
var featureToUpdate = this;
840+
chrome.tabs.query({}, function (tabs) {
841+
for (var i = 0; i < tabs.length; i++) {
842+
try {
843+
chrome.scripting.executeScript({
844+
args: [
845+
featureToUpdate.dataset.feature,
846+
featureToUpdate.dataset.id,
847+
finalValue,
848+
],
849+
target: { tabId: tabs[i].id },
850+
func: updateSettingsFunction,
851+
world: "MAIN",
852+
});
853+
function updateSettingsFunction(feature, name, value) {
854+
ScratchTools.Storage[name] = value;
855+
if (allSettingChangeFunctions[feature]) {
856+
allSettingChangeFunctions[feature]({
857+
key: name,
858+
value,
859+
});
860+
}
777861
}
862+
} catch (err) {
863+
console.log(err);
778864
}
779-
} catch (err) {
780-
console.log(err);
781865
}
782-
}
783-
});
784-
}
785-
});
866+
});
867+
}
868+
});
869+
}
786870
}
787871
}
788872

@@ -859,7 +943,7 @@ async function getFeatures() {
859943
document.querySelector(".settings").appendChild(div);
860944
}
861945
}
862-
getTrending()
946+
getTrending();
863947
}
864948
getFeatures();
865949

@@ -1328,11 +1412,11 @@ function generateComponents(components) {
13281412

13291413
if (el.if.type === "any") {
13301414
if (!conditions.find((cond) => cond)) {
1331-
div.style.display = "none"
1415+
div.style.display = "none";
13321416
}
13331417
} else if (el.if.type === "all") {
13341418
if (conditions.find((cond) => !cond) !== undefined) {
1335-
div.style.display = "none"
1419+
div.style.display = "none";
13361420
}
13371421
}
13381422
}
@@ -1343,14 +1427,17 @@ function generateComponents(components) {
13431427
}
13441428

13451429
async function getTrending() {
1346-
let data = await (await fetch("https://data.scratchtools.app/trending/")).json()
1430+
let data = await (
1431+
await fetch("https://data.scratchtools.app/trending/")
1432+
).json();
13471433

1348-
data.forEach(function(el) {
1434+
data.forEach(function (el) {
13491435
if (!document.querySelector(`div.feature[data-id='${el}']`)) return;
13501436

1351-
let icon = document.createElement("span")
1352-
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z" fill="var(--theme)"/></svg>'
1353-
icon.className = "icon"
1437+
let icon = document.createElement("span");
1438+
icon.innerHTML =
1439+
'<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z" fill="var(--theme)"/></svg>';
1440+
icon.className = "icon";
13541441

13551442
icon.addEventListener("click", function () {
13561443
ScratchTools.modals.create({
@@ -1360,8 +1447,8 @@ async function getTrending() {
13601447
});
13611448
});
13621449

1363-
document.querySelector(`div.feature[data-id='${el}'] > h3`).prepend(icon)
1364-
})
1450+
document.querySelector(`div.feature[data-id='${el}'] > h3`).prepend(icon);
1451+
});
13651452
}
13661453

13671454
async function getCommit() {
@@ -1377,14 +1464,16 @@ async function getCommit() {
13771464
} catch (err) {}
13781465
}
13791466

1380-
13811467
var iconsclicks = 0;
13821468

1383-
document.querySelector(".searchbaricon")?.addEventListener("click", function () {
1384-
iconsclicks += 1;
1385-
if (iconsclicks > 9) {
1386-
chrome.tabs.create({
1387-
url: "chrome-extension://" + chrome.runtime.id + "/extras/game/index.html",
1388-
});
1389-
}
1390-
})
1469+
document
1470+
.querySelector(".searchbaricon")
1471+
?.addEventListener("click", function () {
1472+
iconsclicks += 1;
1473+
if (iconsclicks > 9) {
1474+
chrome.tabs.create({
1475+
url:
1476+
"chrome-extension://" + chrome.runtime.id + "/extras/game/index.html",
1477+
});
1478+
}
1479+
});

0 commit comments

Comments
 (0)