mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
add webpack to organize code
This commit is contained in:
Seth Burkart
@@ -0,0 +1,342 @@
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
const onoffselection = document.querySelector("#onoff");
|
||||
const notificationcollector = document.querySelector("#notification");
|
||||
const lessonalert = document.querySelector("#lessonalert");
|
||||
const aboutsection = document.querySelector("#aboutsection");
|
||||
const shortcutsection = document.querySelector("#shortcutsection");
|
||||
const miscsection = document.querySelector('#miscsection');
|
||||
const mainpage = document.querySelector("#mainpage");
|
||||
const colorpicker = document.querySelector("#colorpicker");
|
||||
const animatedbk = document.querySelector('#animatedbk');
|
||||
const customshortcutbutton = document.getElementsByClassName('custom-shortcuts-button')[0];
|
||||
const customshortcutdiv = document.getElementsByClassName('custom-shortcuts-container')[0];
|
||||
const customshortcutsubmit = document.getElementsByClassName('custom-shortcuts-submit')[0];
|
||||
const customshortcutinputname = document.querySelector('#shortcutname');
|
||||
const customshortcutinputurl = document.querySelector('#shortcuturl');
|
||||
|
||||
const shortcutmenuitemselection = document.getElementsByClassName('menushortcut')[0];
|
||||
|
||||
const applybutton = document.querySelector('#applychanges')
|
||||
|
||||
const navbuttons = document.getElementsByClassName("navitem");
|
||||
const menupages = document.getElementsByClassName("menu-page")
|
||||
|
||||
const allinputs = document.getElementsByTagName('input');
|
||||
|
||||
const menupage = document.querySelector("#menupage");
|
||||
|
||||
const shortcutpage = document.querySelector("#shortcutpage");
|
||||
|
||||
const miscpage = document.querySelector('#miscpage');
|
||||
|
||||
var shortcutbuttons = document.getElementsByClassName("shortcutitem");
|
||||
|
||||
const github = document.getElementById("github");
|
||||
|
||||
const version = document.getElementById('version');
|
||||
const domainbutton = document.getElementById('domain-button');
|
||||
|
||||
var validURL = false;
|
||||
var validName = false;
|
||||
|
||||
function openGithub() {
|
||||
chrome.tabs.create({ url: "https://github.com/SethBurkart123/BetterThanBetterSeqta" });
|
||||
}
|
||||
|
||||
|
||||
function openPage(page) {
|
||||
mainpage.style.left = "-350px";
|
||||
page.style.right = '0px';
|
||||
}
|
||||
|
||||
function backToMainMenu() {
|
||||
mainpage.style.left = "0px";
|
||||
|
||||
menupage.style.right = "-350px";
|
||||
shortcutpage.style.right = "-350px";
|
||||
miscpage.style.right = "-350px";
|
||||
}
|
||||
|
||||
function resetActive() {
|
||||
for (let i = 0; i < navbuttons.length; i++) {
|
||||
navbuttons[i].classList.remove('activenav');
|
||||
}
|
||||
for (let i = 0; i < menupages.length; i++) {
|
||||
menupages[i].classList.add('hiddenmenu');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function FindSEQTATab() {
|
||||
chrome.tabs.query({}, function (tabs) {
|
||||
for (let tab of tabs) {
|
||||
if (tab.title.includes("SEQTA Learn")) {
|
||||
chrome.tabs.reload(tab.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/*
|
||||
Store the currently selected settings using chrome.storage.local.
|
||||
*/
|
||||
function storeSettings() {
|
||||
chrome.storage.local.set({ onoff: onoffselection.checked }, function () {
|
||||
FindSEQTATab();
|
||||
});
|
||||
}
|
||||
|
||||
function storeNotificationSettings() {
|
||||
chrome.storage.local.set(
|
||||
{ notificationcollector: notificationcollector.checked });
|
||||
chrome.storage.local.set({ lessonalert: lessonalert.checked });
|
||||
chrome.storage.local.set({ animatedbk: animatedbk.checked });
|
||||
}
|
||||
|
||||
|
||||
function StoreAllSettings() {
|
||||
chrome.storage.local.get(["shortcuts"], function (result) {
|
||||
var shortcuts = Object.values(result)[0];
|
||||
for (var i = 0; i < shortcutbuttons.length; i++) {
|
||||
shortcuts[i].enabled = shortcutbuttons[i].checked;
|
||||
}
|
||||
chrome.storage.local.set({ shortcuts: shortcuts });
|
||||
});
|
||||
|
||||
FindSEQTATab();
|
||||
}
|
||||
/*
|
||||
Update the options UI with the settings values retrieved from storage,
|
||||
or the default settings if the stored settings are empty.
|
||||
*/
|
||||
function updateUI(restoredSettings) {
|
||||
if (typeof restoredSettings.onoff == 'undefined') {
|
||||
chrome.runtime.sendMessage({ type: "setDefaultStorage" });
|
||||
|
||||
chrome.storage.local.get(null, function (result) {
|
||||
updateUI(result);
|
||||
});
|
||||
} else {
|
||||
onoffselection.checked = restoredSettings.onoff;
|
||||
notificationcollector.checked = restoredSettings.notificationcollector;
|
||||
lessonalert.checked = restoredSettings.lessonalert;
|
||||
animatedbk.checked = restoredSettings.animatedbk;
|
||||
chrome.storage.local.get(["shortcuts"], function (result) {
|
||||
var shortcuts = Object.values(result)[0];
|
||||
for (var i = 0; i < shortcutbuttons.length; i++) {
|
||||
shortcutbuttons[i].checked = shortcuts[i].enabled;
|
||||
}
|
||||
chrome.storage.local.set({ shortcuts: shortcuts });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var stringtoHTML = function (str) {
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(str, "text/html");
|
||||
return doc.body;
|
||||
};
|
||||
|
||||
function CreateShortcutDiv(name) {
|
||||
|
||||
div = stringtoHTML(`
|
||||
<div class="item-container menushortcuts" data-customshortcut="${name}">
|
||||
<div class="text-container">
|
||||
<h1 class="addonitem" style="font-size: 8px !important;font-weight: 300;">Custom</h1>
|
||||
<h1 class="addonitem">${name}</h1>
|
||||
</div>
|
||||
<svg id="delete-${name}" style="width:24px;height:24px;margin: 9px;cursor:pointer;" viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"></path></svg>
|
||||
</div>`).firstChild;
|
||||
|
||||
shortcutmenuitemselection.append(div);
|
||||
|
||||
const deletebutton = document.getElementById(`delete-${name}`);
|
||||
deletebutton.addEventListener('click', function () {
|
||||
DeleteCustomShortcut(name);
|
||||
applybutton.style.left = "4px";
|
||||
});
|
||||
}
|
||||
|
||||
function AddCustomShortcuts() {
|
||||
chrome.storage.local.get(["customshortcuts"], function (result) {
|
||||
var customshortcuts = Object.values(result)[0];
|
||||
for (let i = 0; i < customshortcuts.length; i++) {
|
||||
const element = customshortcuts[i];
|
||||
CreateShortcutDiv(
|
||||
element.name,
|
||||
)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function DeleteCustomShortcut(name) {
|
||||
item = document.querySelector(`[data-customshortcut="${name}"]`);
|
||||
item.remove();
|
||||
chrome.storage.local.get(["customshortcuts"], function (result) {
|
||||
var customshortcuts = Object.values(result)[0];
|
||||
for (let i = 0; i < customshortcuts.length; i++) {
|
||||
if (customshortcuts[i].name == name) {
|
||||
customshortcuts.splice(i, 1);
|
||||
}
|
||||
}
|
||||
chrome.storage.local.set({ customshortcuts: customshortcuts });
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function CustomShortcutMenu() {
|
||||
customshortcutinputname.value = '';
|
||||
customshortcutinputurl.value = '';
|
||||
validURL = false;
|
||||
validName = false;
|
||||
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
|
||||
if (customshortcutdiv.classList.contains('custom-shortcuts-container-shown')) {
|
||||
customshortcutdiv.classList.remove('custom-shortcuts-container-shown')
|
||||
} else {
|
||||
customshortcutdiv.classList.add('custom-shortcuts-container-shown')
|
||||
};
|
||||
}
|
||||
|
||||
function CreateCustomShortcut() {
|
||||
const shortcutname = customshortcutinputname.value;
|
||||
var shortcuturl = customshortcutinputurl.value;
|
||||
|
||||
if (!(shortcuturl.includes('http'))) {
|
||||
shortcuturl = "https://" + shortcuturl;
|
||||
}
|
||||
|
||||
chrome.storage.local.get(["customshortcuts"], function (result) {
|
||||
var customshortcuts = Object.values(result)[0];
|
||||
customshortcuts.push({ name: shortcutname, url: shortcuturl, icon: (shortcutname[0]).toUpperCase() });
|
||||
chrome.storage.local.set({ customshortcuts: customshortcuts });
|
||||
});
|
||||
|
||||
CreateShortcutDiv(
|
||||
shortcutname
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
function onError(e) {
|
||||
console.error(e);
|
||||
}
|
||||
/*
|
||||
On opening the options page, fetch stored settings and update the UI with them.
|
||||
*/
|
||||
chrome.storage.local.get(null, function (result) {
|
||||
document.getElementsByClassName('clr-field')[0].style.color = result.selectedColor;
|
||||
colorpicker.value = result.selectedColor;
|
||||
console.log(result);
|
||||
updateUI(result);
|
||||
});
|
||||
|
||||
/*
|
||||
On blur, save the currently selected settings.
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
version.innerHTML = `v${chrome.runtime.getManifest().version}`;
|
||||
github.addEventListener("click", openGithub);
|
||||
|
||||
domainbutton.addEventListener('click', function (event) {
|
||||
chrome.runtime.sendMessage({ type: "addPermissions" });
|
||||
})
|
||||
|
||||
aboutsection.addEventListener("click", () => { resetActive(); aboutsection.classList.add('activenav'); menupage.classList.remove('hiddenmenu') });
|
||||
|
||||
shortcutsection.addEventListener("click", () => { resetActive(); shortcutsection.classList.add('activenav'); shortcutpage.classList.remove('hiddenmenu') });
|
||||
|
||||
miscsection.addEventListener("click", () => { resetActive(); miscsection.classList.add('activenav'); miscpage.classList.remove('hiddenmenu') });
|
||||
|
||||
customshortcutbutton.addEventListener("click", () => { CustomShortcutMenu(); })
|
||||
customshortcutsubmit.addEventListener("click", () => { if (validName && validURL) { CreateCustomShortcut(); CustomShortcutMenu() } });
|
||||
|
||||
var sameName = false;
|
||||
customshortcutinputname.addEventListener("input", function () {
|
||||
sameName = false;
|
||||
chrome.storage.local.get(["customshortcuts"], function (result) {
|
||||
var customshortcuts = Object.values(result)[0];
|
||||
for (let i = 0; i < customshortcuts.length; i++) {
|
||||
if (customshortcuts[i].name == customshortcutinputname.value) {
|
||||
sameName = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (customshortcutinputname.value.length > 0 && customshortcutinputname.value.length < 22 && !sameName) {
|
||||
validName = true;
|
||||
} else {
|
||||
validName = false;
|
||||
}
|
||||
|
||||
if (validName && validURL) {
|
||||
customshortcutsubmit.classList.add("customshortcut-submit-valid");
|
||||
}
|
||||
else {
|
||||
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
customshortcutinputurl.addEventListener("input", function () {
|
||||
if (customshortcutinputurl.value.length > 0 && customshortcutinputurl.value.includes('.')) {
|
||||
validURL = true;
|
||||
} else {
|
||||
validURL = false;
|
||||
}
|
||||
|
||||
if (validName && validURL) {
|
||||
customshortcutsubmit.classList.add("customshortcut-submit-valid");
|
||||
}
|
||||
else {
|
||||
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
|
||||
}
|
||||
})
|
||||
|
||||
AddCustomShortcuts();
|
||||
});
|
||||
|
||||
onoffselection.addEventListener("change", storeSettings);
|
||||
notificationcollector.addEventListener(
|
||||
"change",
|
||||
storeNotificationSettings
|
||||
);
|
||||
lessonalert.addEventListener("change", storeNotificationSettings)
|
||||
|
||||
animatedbk.addEventListener("change", storeNotificationSettings)
|
||||
|
||||
for (let i = 0; i < allinputs.length; i++) {
|
||||
if (allinputs[i].id != 'colorpicker' && allinputs[i].id != "shortcuturl" && allinputs[i].id != "shortcutname") {
|
||||
allinputs[i].addEventListener("change", () => { applybutton.style.left = "4px" })
|
||||
}
|
||||
}
|
||||
|
||||
applybutton.addEventListener('click', () => { StoreAllSettings(); applybutton.style.left = "-150px" })
|
||||
|
||||
|
||||
colorpicker.addEventListener("input", function () {
|
||||
var colorPreview = document.querySelector('#clr-color-preview')
|
||||
if (colorPreview.style.color) {
|
||||
var hex = colorPreview.style.color.split("(")[1].split(")")[0];
|
||||
hex = hex.split(",");
|
||||
var b = hex.map(function (x) { //For each array element
|
||||
x = parseInt(x).toString(16); //Convert to a base16 string
|
||||
return (x.length == 1) ? "0" + x : x; //Add zero if we get only one character
|
||||
})
|
||||
b = "#" + b.join("");
|
||||
|
||||
chrome.storage.local.set({ selectedColor: b })
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user