fix(sidebar): hide Analytics via toggle

This commit is contained in:
2026-06-22 18:02:24 +09:30
parent e3ec6c80d0
commit f570e47e27
14 changed files with 334 additions and 109 deletions
+29
View File
@@ -0,0 +1,29 @@
import type { Plugin } from "vite";
/**
* Vite's default base (`/`) emits absolute chunk paths like `/assets/chunk.js`.
* In content scripts those resolve against the SEQTA page origin on Firefox,
* not the extension — causing MIME type / NS_ERROR_CORRUPTED_CONTENT failures.
*
* Use relative base plus `chrome.runtime.getURL` for dynamic import targets.
*/
export function extensionChunkUrls(): Plugin {
return {
name: "extension-chunk-urls",
config() {
return {
base: "./",
experimental: {
renderBuiltUrl(filename, { hostType, type }) {
if (type === "chunk" && hostType === "js") {
const path = filename.replace(/^\//, "");
return {
runtime: `chrome.runtime.getURL(${JSON.stringify(path)})`,
};
}
},
},
};
},
};
}
+1
View File
@@ -626,6 +626,7 @@ browser.runtime.onInstalled.addListener(function (event) {
void migrateGlobalSearchDefaultsFor365Upgrade(event.previousVersion);
void resetThemeOfTheMonthDisabledFor366Upgrade(event.previousVersion);
void resetThemeOfTheMonthDismissalFor370Upgrade(event.previousVersion);
reloadSeqtaPages();
}
});
+48
View File
@@ -512,6 +512,54 @@ ul.magicDelete > li.deleting {
#menu:has(> ul > li.hasChildren.active) > ul > li:not(.hasChildren.active) {
pointer-events: none !important;
}
/* Edit Sidebar: every row + toggle must stay clickable (drill stack disables siblings). */
#menu.bsplus-sidebar-edit-mode li.item,
#menu.bsplus-sidebar-edit-mode section.item,
#menu.bsplus-sidebar-edit-mode .bsplus-sidebar-offscreen,
#menu.bsplus-sidebar-edit-mode .bsplus-sidebar-offscreen * {
pointer-events: auto !important;
user-select: auto !important;
}
#menu.bsplus-sidebar-edit-mode:has(> ul > li.hasChildren.active)
> ul
> li:not(.hasChildren.active) {
pointer-events: auto !important;
}
#menu.bsplus-sidebar-edit-mode > ul > .bsplus-sidebar-offscreen:not(.hasChildren.active),
#menu.bsplus-sidebar-edit-mode .sub .bsplus-sidebar-offscreen:not(.hasChildren.active) {
position: relative !important;
left: auto !important;
width: auto !important;
height: auto !important;
margin: inherit !important;
padding: inherit !important;
overflow: visible !important;
clip: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
#menu.bsplus-sidebar-edit-mode .item.draggable {
display: flex !important;
align-items: center;
gap: 0.5rem;
}
#menu.bsplus-sidebar-edit-mode .item.draggable > label {
flex: 1;
min-width: 0;
}
#menu.bsplus-sidebar-edit-mode .onoffswitch {
pointer-events: auto !important;
flex-shrink: 0;
position: relative;
z-index: 2;
}
#menu section > label {
align-items: center;
box-sizing: border-box;
@@ -3,6 +3,11 @@ import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
import { waitForElm } from "@/seqta/utils/waitForElm";
import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
import { processMenuItemNode } from "@/seqta/utils/sidebarMenuIcons";
import { MenuOptionsOpen } from "@/seqta/utils/Openers/OpenMenuOptions";
import {
applyMenuItemVisibility,
isMenuItemHidden,
} from "@/seqta/utils/menuItemVisibility";
import { loadAnalyticsPage } from "../loadAnalyticsPage";
import styles from "../styles.css?inline";
@@ -17,7 +22,7 @@ const gradeAnalyticsPlugin: Plugin<{}> = {
"Adds an analytics page with grade trends, distribution charts, and assessment history",
version: "1.0.0",
settings: {},
disableToggle: false,
disableToggle: true,
styles,
run: async () => {
@@ -25,6 +30,10 @@ const gradeAnalyticsPlugin: Plugin<{}> = {
return () => {};
}
if (isMenuItemHidden("analytics")) {
return () => {};
}
const menuList = (await waitForElm("#menu > ul, #menu ul", true, 100, 60)) as HTMLElement;
const analyticsItem = document.createElement("li");
@@ -44,8 +53,11 @@ const gradeAnalyticsPlugin: Plugin<{}> = {
}
processMenuItemNode(analyticsItem);
applyMenuItemVisibility();
const menuObserver = new MutationObserver(() => {
if (MenuOptionsOpen) return;
if (isMenuItemHidden("analytics")) return;
if (!menuList.contains(analyticsItem)) {
if (homeButton?.parentElement === menuList) {
homeButton.insertAdjacentElement("afterend", analyticsItem);
@@ -53,11 +65,20 @@ const gradeAnalyticsPlugin: Plugin<{}> = {
menuList.insertBefore(analyticsItem, menuList.firstChild);
}
processMenuItemNode(analyticsItem);
applyMenuItemVisibility();
}
});
menuObserver.observe(menuList, { childList: true });
const onClick = (e: Event) => {
const target = e.target as HTMLElement;
if (
MenuOptionsOpen ||
analyticsItem.classList.contains("draggable") ||
target.closest(".onoffswitch, .editmenuoption-container")
) {
return;
}
e.preventDefault();
window.history.pushState({}, "", "/#?page=/analytics");
void loadAnalyticsPage();
+1 -1
View File
@@ -20,7 +20,7 @@ const gradeAnalyticsPluginLazy = defineLazyPlugin({
"Grade trends, distribution charts, and assessment history synced from SEQTA",
version: "1.0.0",
settings,
disableToggle: false,
disableToggle: true,
defaultEnabled: true,
styles,
loader: () => import("./core/index"),
+39 -30
View File
@@ -40,29 +40,7 @@ import IconFamily from "@/resources/fonts/IconFamily.woff";
// Stylesheets
import iframeCSS from "@/css/iframe.scss?raw";
function SetDisplayNone(ElementName: string) {
return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`;
}
async function HideMenuItems(): Promise<void> {
try {
let stylesheetInnerText: string = "";
for (const [menuItem, { toggle }] of Object.entries(
settingsState.menuitems,
)) {
if (!toggle) {
stylesheetInnerText += SetDisplayNone(menuItem);
console.info(`[BetterSEQTA+] Hiding ${menuItem} menu item`);
}
}
const menuItemStyle: HTMLStyleElement = document.createElement("style");
menuItemStyle.innerText = stylesheetInnerText;
document.head.appendChild(menuItemStyle);
} catch (error) {
console.error("[BetterSEQTA+] An error occurred:", error);
}
}
import { applyMenuItemVisibility } from "@/seqta/utils/menuItemVisibility";
export function hideSideBar() {
const sidebar = document.getElementById("menu"); // The sidebar element to be closed
@@ -368,11 +346,18 @@ async function handleSublink(sublink: string | undefined): Promise<void> {
}
async function handleNewsPage(): Promise<void> {
console.info("[BetterSEQTA+] Started Init");
if (settingsState.onoff) {
SendNewsPage();
if (!settingsState.onoff) {
finishLoad();
return;
}
console.info("[BetterSEQTA+] Started Init");
try {
await SendNewsPage();
} catch (error) {
console.error("[BetterSEQTA+] Failed to load news page:", error);
}
finishLoad();
}
async function handleDefault(): Promise<void> {
@@ -674,8 +659,24 @@ export function showConflictPopup() {
}
export function init() {
const tryMountDisabledUi = async () => {
if (document.getElementById("AddedSettings")) return;
try {
await waitForElm("#content");
} catch {
try {
await waitForElm("#container");
} catch {
await waitForElm("body");
}
}
AppendElementsToDisabledPage();
};
const handleDisabled = () => {
waitForElm(".code", true, 50).then(AppendElementsToDisabledPage);
void tryMountDisabledUi();
};
if (settingsState.onoff) {
@@ -705,7 +706,7 @@ export function init() {
});
loading();
InjectCustomIcons();
HideMenuItems();
applyMenuItemVisibility();
tryLoad();
// Auto-focus WISP direct online submission editor when pane opens
@@ -787,7 +788,7 @@ export function init() {
} else {
handleDisabled();
InjectCustomIcons();
window.addEventListener("load", handleDisabled);
window.addEventListener("load", handleDisabled, { once: true });
}
}
@@ -807,6 +808,8 @@ function InjectCustomIcons() {
}
export function AppendElementsToDisabledPage() {
if (document.getElementById("AddedSettings")) return;
console.info("[BetterSEQTA+] Appending elements to disabled page");
AddBetterSEQTAElements();
@@ -822,7 +825,13 @@ export function AppendElementsToDisabledPage() {
border-radius: 50%;
margin: 7px !important;
cursor: pointer;
color: white !important;
color: #38373d !important;
background: rgba(0, 0, 0, 0.08);
display: flex !important;
align-items: center;
justify-content: center;
visibility: visible !important;
z-index: 1000;
}
.addedButton svg {
margin: 6px;
+31 -1
View File
@@ -278,7 +278,13 @@ function setupEventListeners() {
}
async function createSettingsButton(parent?: Element) {
const target = parent ?? document.getElementById("content")!;
if (document.getElementById("AddedSettings")) return;
const target =
parent ??
document.getElementById("content") ??
document.getElementById("container") ??
document.body;
target.append(
stringToHTML(/* html */ `
<button class="addedButton tooltip" id="AddedSettings">
@@ -599,7 +605,31 @@ function getDrillFolderChain(
return chain;
}
function isSidebarEditMode(): boolean {
const menu = document.getElementById("menu");
return (
document.querySelector(".editmenuoption-container") != null ||
menu?.classList.contains("bsplus-sidebar-edit-mode") === true
);
}
function clearSidebarAccessibilityLocks() {
const menu = document.getElementById("menu");
if (!menu) return;
const entries = menu.querySelectorAll("li, section");
for (const entry of entries) {
if (!(entry instanceof HTMLElement)) continue;
entry.classList.remove(BSPLUS_SIDEBAR_OFFSCREEN);
}
}
function updateSidebarAccessibility() {
if (isSidebarEditMode()) {
clearSidebarAccessibilityLocks();
return;
}
const menu = document.getElementById("menu");
if (!menu) return;
+93 -70
View File
@@ -1,10 +1,40 @@
import type { SettingsState } from "@/types/storage";
import { settingsState } from "../listeners/SettingsState";
import { applyMenuItemVisibility } from "../menuItemVisibility";
import stringToHTML from "../stringToHTML";
import Sortable from "sortablejs";
export let MenuOptionsOpen = false;
function mergeMenuItemsFromDom(): Record<string, { toggle: boolean }> {
const menu = document.getElementById("menu");
const merged = {
...(settingsState.menuitems as Record<string, { toggle: boolean }>),
};
if (!menu?.firstChild) return merged;
const children = menu.firstChild.childNodes;
for (let i = 0; i < children.length; i++) {
const key = (children[i] as HTMLElement).dataset.key;
if (key && !merged[key]) {
merged[key] = { toggle: true };
}
}
return merged;
}
function storeMenuSettings(): void {
const menuItems: Record<string, { toggle: boolean }> = {};
const inputs = document.querySelectorAll<HTMLInputElement>(".menuitem");
for (const input of inputs) {
if (input.id) {
menuItems[input.id] = { toggle: input.checked };
}
}
settingsState.menuitems =
menuItems as SettingsState["menuitems"];
}
export function OpenMenuOptions() {
var container = document.getElementById("container");
var menu = document.getElementById("menu");
@@ -22,19 +52,20 @@ export function OpenMenuOptions() {
if (settingsState.defaultmenuorder.length != childnodes.length) {
for (let i = 0; i < childnodes.length; i++) {
const element = childnodes[i];
const key = (element as HTMLElement).dataset.key;
if (
!settingsState.defaultmenuorder.indexOf(
(element as HTMLElement).dataset.key,
)
key &&
settingsState.defaultmenuorder.indexOf(key) === -1
) {
let newdefaultmenuorder = settingsState.defaultmenuorder;
newdefaultmenuorder.push((element as HTMLElement).dataset.key);
newdefaultmenuorder.push(key);
settingsState.defaultmenuorder = newdefaultmenuorder;
}
}
}
MenuOptionsOpen = true;
menu!.classList.add("bsplus-sidebar-edit-mode");
var cover = document.createElement("div");
cover.classList.add("notMenuCover");
@@ -53,7 +84,7 @@ export function OpenMenuOptions() {
var savebutton = document.createElement("div");
savebutton.classList.add("editmenuoption");
savebutton.innerText = "Save";
savebutton.id = "restoredefaultoption";
savebutton.id = "savemenuoption";
menusettings.appendChild(defaultbutton);
menusettings.appendChild(savebutton);
@@ -86,81 +117,51 @@ export function OpenMenuOptions() {
}
if (Object.keys(settingsState.menuitems).length == 0) {
menubuttons = menu!.firstChild!.childNodes;
let menuItems = {} as any;
for (var i = 0; i < menubuttons.length; i++) {
var id = (menubuttons[i] as HTMLElement).dataset.key;
const element: any = {};
element.toggle = true;
(menuItems[id as keyof typeof menuItems] as any) = element;
}
settingsState.menuitems = menuItems;
settingsState.menuitems = mergeMenuItemsFromDom() as SettingsState["menuitems"];
} else {
settingsState.menuitems = mergeMenuItemsFromDom() as SettingsState["menuitems"];
}
var menubuttons: any = document.getElementsByClassName("menuitem");
let menuItems = settingsState.menuitems as any;
let menuItems = settingsState.menuitems as Record<string, { toggle: boolean }>;
let buttons = document.getElementsByClassName("menuitem");
for (let i = 0; i < buttons.length; i++) {
let id = buttons[i].id as string | undefined;
if (menuItems[id as keyof typeof menuItems]) {
(buttons[i] as HTMLInputElement).checked =
menuItems[id as keyof typeof menuItems].toggle;
} else {
(buttons[i] as HTMLInputElement).checked = true;
}
(buttons[i] as HTMLInputElement).checked = true;
const input = buttons[i] as HTMLInputElement;
const id = input.id;
input.checked =
id && menuItems[id] ? menuItems[id].toggle : true;
}
let sortable: Sortable | undefined;
try {
var el = document.querySelector("#menu > ul");
var sortable = Sortable.create(el as HTMLElement, {
sortable = Sortable.create(el as HTMLElement, {
draggable: ".draggable",
dataIdAttr: "data-key",
animation: 150,
easing: "cubic-bezier(.5,0,.5,1)",
onEnd: function () {
saveNewOrder(sortable);
saveNewOrder(sortable!);
},
});
} catch (err) {
console.error(err);
}
function changeDisplayProperty(element: any) {
if (!element.checked) {
element.parentNode.parentNode.style.display = "var(--menuHidden)";
}
if (element.checked) {
element.parentNode.parentNode.style.setProperty(
"display",
"flex",
"important",
);
function changeDisplayProperty(input: HTMLInputElement) {
const row = input.closest("li, section") as HTMLElement | null;
if (!row) return;
if (!input.checked) {
row.style.display = "var(--menuHidden)";
} else {
row.style.setProperty("display", "flex", "important");
}
}
function StoreMenuSettings() {
let menu = document.getElementById("menu");
const menuItems: any = {};
let menubuttons = menu!.firstChild!.childNodes;
const button = document.getElementsByClassName("menuitem");
for (let i = 0; i < menubuttons.length; i++) {
const id = (menubuttons[i] as HTMLElement).dataset.key;
const element: any = {};
element.toggle = (button[i] as HTMLInputElement).checked;
menuItems[id as keyof typeof menuItems] = element;
}
settingsState.menuitems = menuItems;
}
for (let i = 0; i < menubuttons.length; i++) {
const element = menubuttons[i];
element.addEventListener("change", () => {
element.parentElement.parentElement.getAttribute("data-key");
StoreMenuSettings();
changeDisplayProperty(element);
const menuInputs = document.querySelectorAll<HTMLInputElement>(".menuitem");
for (const input of menuInputs) {
input.addEventListener("change", () => {
storeMenuSettings();
changeDisplayProperty(input);
});
}
@@ -168,6 +169,7 @@ export function OpenMenuOptions() {
menusettings?.remove();
cover?.remove();
MenuOptionsOpen = false;
menu!.classList.remove("bsplus-sidebar-edit-mode");
menu!.style.setProperty("--menuHidden", "none");
for (let i = 0; i < ListItems.length; i++) {
@@ -189,10 +191,21 @@ export function OpenMenuOptions() {
for (let i = 0; i < switches.length; i++) {
switches[i].remove();
}
applyMenuItemVisibility();
}
function saveAndClose() {
storeMenuSettings();
if (sortable) {
saveNewOrder(sortable);
}
applyMenuItemVisibility();
closeAll();
}
cover?.addEventListener("click", closeAll);
savebutton?.addEventListener("click", closeAll);
savebutton?.addEventListener("click", saveAndClose);
defaultbutton?.addEventListener("click", function () {
const options = settingsState.defaultmenuorder;
@@ -200,20 +213,27 @@ export function OpenMenuOptions() {
ChangeMenuItemPositions(options);
for (let i = 0; i < menubuttons.length; i++) {
const element = menubuttons[i];
element.checked = true;
element.parentNode.parentNode.style.setProperty(
"display",
"flex",
"important",
);
const inputs = document.querySelectorAll<HTMLInputElement>(".menuitem");
const restored: Record<string, { toggle: boolean }> = {};
for (const input of inputs) {
input.checked = true;
const row = input.closest("li, section") as HTMLElement | null;
if (row) {
row.style.setProperty("display", "flex", "important");
}
if (input.id) {
restored[input.id] = { toggle: true };
}
}
settingsState.menuitems = restored as SettingsState["menuitems"];
if (sortable) {
saveNewOrder(sortable);
}
saveNewOrder(sortable);
});
}
function saveNewOrder(sortable: any) {
function saveNewOrder(sortable: Sortable) {
var order = sortable.toArray();
settingsState.menuorder = order;
}
@@ -238,7 +258,10 @@ export function ChangeMenuItemPositions(menuorder: SettingsState["menuorder"]) {
var newArr = [];
for (var i = 0; i < listorder.length; i++) {
newArr[listorder[i]] = menuList[i];
const index = listorder[i];
if (index >= 0) {
newArr[index] = menuList[i];
}
}
let listItemsDOM = document.getElementById("menu")!.firstChild;
+12 -6
View File
@@ -12,11 +12,15 @@ export async function SendNewsPage() {
await delay(10);
const element = document.querySelector("[data-key=news]");
element!.classList.add("active");
element?.classList.add("active");
// Remove all current elements in the main div to add new elements
const main = document.getElementById("main");
main!.innerHTML = "";
if (!main) {
console.warn("[BetterSEQTA+] News page: #main not found");
return;
}
main.innerHTML = "";
const displayCountry = (() => {
switch (settingsState.newsSource?.toLowerCase()) {
@@ -40,10 +44,12 @@ export async function SendNewsPage() {
</div>
</div>`);
main!.append(html.firstChild!);
main.append(html.firstChild!);
const titlediv = document.getElementById("title")!.firstChild;
(titlediv! as HTMLElement).innerText = "News";
const titleBar = document.getElementById("title")?.firstChild;
if (titleBar) {
(titleBar as HTMLElement).innerText = "News";
}
AppendLoadingSymbol("newsloading", "#news-container");
const response = (await browser.runtime.sendMessage({
+1
View File
@@ -38,6 +38,7 @@ export function getDefaultSettingsState(): SettingsState {
settings: { toggle: true },
timetable: { toggle: true },
welcome: { toggle: true },
analytics: { toggle: true },
},
menuorder: [],
subjectfilters: {},
@@ -5,6 +5,8 @@ import { applySelectedFont } from "@/seqta/ui/fonts/Manager";
// Shortcuts rendering
import { renderShortcuts } from "@/seqta/utils/Render/renderShortcuts";
import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
import { applyMenuItemVisibility } from "@/seqta/utils/menuItemVisibility";
import { ChangeMenuItemPositions } from "@/seqta/utils/Openers/OpenMenuOptions";
import browser from "webextension-polyfill";
import type { CustomShortcut } from "@/types/storage";
@@ -42,6 +44,12 @@ export class StorageChangeHandler {
this.handleIconOnlySidebarChange.bind(this),
);
settingsState.register("selectedFont", () => applySelectedFont());
settingsState.register("menuitems", () => applyMenuItemVisibility());
settingsState.register("menuorder", (order) => {
if (Array.isArray(order) && order.length > 0) {
ChangeMenuItemPositions(order);
}
});
}
private handleIconOnlySidebarChange(newValue: boolean | undefined) {
+45
View File
@@ -0,0 +1,45 @@
import { settingsState } from "./listeners/SettingsState";
const STYLE_ID = "bsplus-menuitem-visibility";
function isEditSidebarOpen(): boolean {
return document.querySelector(".editmenuoption-container") != null;
}
function hideRule(menuItem: string): string {
return `li[data-key=${menuItem}],section[data-key=${menuItem}]{display:var(--menuHidden) !important;transition:1s;}`;
}
/** Whether a sidebar key is hidden via Edit Sidebar toggles. */
export function isMenuItemHidden(key: string): boolean {
const items = settingsState.menuitems as Record<string, { toggle?: boolean }>;
const entry = items?.[key];
return entry != null && entry.toggle === false;
}
/** Apply hide rules from `menuitems` (re-runnable after edit / storage sync). */
export function applyMenuItemVisibility(): void {
if (isEditSidebarOpen()) return;
try {
let css = "";
for (const [menuItem, config] of Object.entries(
settingsState.menuitems ?? {},
)) {
if (config && !config.toggle) {
css += hideRule(menuItem);
console.info(`[BetterSEQTA+] Hiding ${menuItem} menu item`);
}
}
let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
if (!styleEl) {
styleEl = document.createElement("style");
styleEl.id = STYLE_ID;
document.head.appendChild(styleEl);
}
styleEl.textContent = css;
} catch (error) {
console.error("[BetterSEQTA+] Failed to apply menu item visibility:", error);
}
}
+2
View File
@@ -6,6 +6,7 @@ export interface SettingsState {
lessonalert: boolean;
menuitems: {
assessments: ToggleItem;
analytics: ToggleItem;
courses: ToggleItem;
dashboard: ToggleItem;
documents: ToggleItem;
@@ -21,6 +22,7 @@ export interface SettingsState {
settings: ToggleItem;
timetable: ToggleItem;
welcome: ToggleItem;
[key: string]: ToggleItem;
};
menuorder: any[];
onoff: boolean;
+2
View File
@@ -8,6 +8,7 @@ import type { BuildTarget, Manifest } from "./lib/types";
import ClosePlugin from "./lib/closePlugin";
import fixCrxWorkerLiveReload from "./lib/fixCrxWorkerLiveReload";
import { firefoxStripFunctionProbe } from "./lib/firefoxStripFunctionProbe";
import { extensionChunkUrls } from "./lib/extensionChunkUrls";
import million from "million/compiler";
@@ -71,6 +72,7 @@ export default defineConfig(({ command }) => ({
__BUILD_LABEL__: JSON.stringify(process.env.BUILD_LABEL ?? ""),
},
plugins: [
extensionChunkUrls(),
base64Loader,
InlineWorkerPlugin(),
svelte({