CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-22 10:19:53 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

progress on modules

Browse Source
This commit is contained in:
Guy Sandler 2026-05-20 22:42:59 -07:00
parent 1efcaa4081
commit 25d8e738b9
2 changed files with 224 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
js/content.js
View File

@ -6,6 +6,31 @@ function getCurrentCourseId() {
return match ? parseInt(match[1]) : null; return match ? parseInt(match[1]) : null;
} }
function getSidebarLayoutMode() {
if (current_page.match(/^\/courses\/(\d+)(?:\/|$)/)) return "course";
if (current_page === "/" || current_page === "") return "dash";
return "general";
}
function getSidebarStateMode(mode = getSidebarLayoutMode()) {
return mode === "course" ? "course" : "dashboard";
}
function getSidebarStateKey(mode = getSidebarLayoutMode()) {
return `better_sidebar_expanded_${getSidebarStateMode(mode)}`;
}
async function getSidebarExpandedState(mode = getSidebarLayoutMode()) {
const key = getSidebarStateKey(mode);
const storage = await chrome.storage.local.get(key);
if (typeof storage[key] === "boolean") return storage[key];
return mode === "course";
}
function setSidebarExpandedState(mode, expanded) {
chrome.storage.local.set({ [getSidebarStateKey(mode)]: expanded });
}
let assignments = null; let assignments = null;
let grades = null; let grades = null;
let announcements = []; let announcements = [];
@ -14,6 +39,7 @@ let assignmentsDue = [];
let options = {}; let options = {};
let timeCheck = null; let timeCheck = null;
let reminderCheck = null; let reminderCheck = null;
let betterSidebarLoading = false;
//let assignmentData = null; //let assignmentData = null;
/* /*
@ -269,6 +295,7 @@ function startExtension() {
changeFavicon(); changeFavicon();
updateReminders(); updateReminders();
applyCustomBackground(); applyCustomBackground();
ensureBetterSidebar();
//getClassAverages(); //getClassAverages();
@ -403,20 +430,17 @@ function applyOptionsChanges(changes) {
window.location.reload(); window.location.reload();
} }
case "better_sidebar": case "better_sidebar":
if (options.better_sidebar) setupBetterSidebar(); if (options.better_sidebar) {
// else window.location.reload(); ensureBetterSidebar();
else { } else {
document.getElementById("header").style.display = "block"; resetBetterSidebarLayout();
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "54px");
document.getElementById("better-sidebar-container").remove();
} }
break; break;
case "sidebar_scale": { case "sidebar_scale": {
const existingSidebar = document.getElementById("better-sidebar-container"); const existingSidebar = document.getElementById("better-sidebar-container");
if (existingSidebar) { if (existingSidebar) {
existingSidebar.remove(); const expander = existingSidebar.querySelector(".better-sidebar-expander");
const mode = current_page.match(/^\/courses\/(\d+)\/?$/) ? "course" : "dash"; updateSidebar(existingSidebar.dataset.expanded === "true", existingSidebar, expander);
setupBetterSidebar(mode);
} }
break; break;
} }
@ -424,6 +448,27 @@ function applyOptionsChanges(changes) {
}); });
} }
function resetBetterSidebarLayout() {
document.getElementById("header")?.style.removeProperty("display");
document.querySelector(".ic-Layout-wrapper")?.style.removeProperty("margin-left");
document.querySelector("#main")?.style.removeProperty("margin-left");
document.querySelector(".ic-app-nav-toggle-and-crumbs")?.style.removeProperty("display");
document.querySelector(".ic-Layout-contentWrapper")?.style.removeProperty("display");
document.querySelector(".ic-Layout-contentWrapper")?.style.removeProperty("align-items");
document.querySelector(".ic-Layout-contentWrapper")?.style.removeProperty("min-width");
document.querySelector(".ic-Layout-contentMain")?.style.removeProperty("flex");
document.querySelector(".ic-Layout-contentMain")?.style.removeProperty("min-width");
document.getElementById("left-side")?.style.removeProperty("display");
document.getElementById("better-sidebar-container")?.remove();
}
function ensureBetterSidebar() {
if (!options.better_sidebar) return;
if (document.querySelector("#better-sidebar-container")) return;
if (!document.querySelector("#wrapper") || !document.querySelector(".ic-Layout-contentWrapper")) return;
setupBetterSidebar(getSidebarLayoutMode());
}
function applyCustomBackground() { function applyCustomBackground() {
// let style = document.querySelector("#DashboardCard_Container") // let style = document.querySelector("#DashboardCard_Container")
let style = document.querySelector("#bettercanvas-background") || document.createElement('style'); let style = document.querySelector("#bettercanvas-background") || document.createElement('style');
@ -446,6 +491,52 @@ function applyCustomBackground() {
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
border-radius: 5px; border-radius: 5px;
} }
.header-bar,
.item-group-condensed,
.item-group-container {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.item-group-condensed .ig-header,
.item-group-condensed .ig-row,
.item-group-container .ig-header,
.item-group-container .ig-row,
.item-group-condensed .header,
.item-group-container .header {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
.item-group-condensed .context_module_item,
.item-group-container .context_module_item {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(10px) saturate(115%) !important;
-webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}
.item-group-condensed .context_module_item:hover,
.item-group-container .context_module_item:hover,
.item-group-condensed .context_module_item.context_module_item_hover,
.item-group-container .context_module_item.context_module_item_hover {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(16px) saturate(130%) !important;
-webkit-backdrop-filter: blur(16px) saturate(130%) !important;
border-radius: 10px !important;
}
.item-group-container {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--bcborders) 75%, transparent) !important;
}
.bettercanvas-gpa-card {background: var(--bcbackground-0) !important;} .bettercanvas-gpa-card {background: var(--bcbackground-0) !important;}
.bettercanvas-gpa {background: var(--bcbackground-0) !important;} .bettercanvas-gpa {background: var(--bcbackground-0) !important;}
.ic-DashboardCard {background: var(--bcbackground-0) !important;}`; // todo: liquid glass? .ic-DashboardCard {background: var(--bcbackground-0) !important;}`; // todo: liquid glass?
@ -472,12 +563,11 @@ function resetTimer() {
} }
function checkDashboardReady() { function checkDashboardReady() {
let callback; const callback = (mutationList) => {
for (const mutation of mutationList) {
if (mutation.type !== "childList") continue;
if (current_page == "/" || current_page == "") { if (current_page == "/" || current_page == "") {
console.log("I am dashboard"); console.log("I am dashboard");
callback = (mutationList) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
if (mutation.target == document.querySelector("#DashboardCard_Container")) { if (mutation.target == document.querySelector("#DashboardCard_Container")) {
let cards = document.querySelectorAll('.ic-DashboardCard'); let cards = document.querySelectorAll('.ic-DashboardCard');
changeGradientCards(); changeGradientCards();
@ -495,26 +585,25 @@ function checkDashboardReady() {
// loadBetterTodo(); // loadBetterTodo();
} }
} }
} } else if (current_page.match(/^\/courses\/(\d+)(?:\/|$)/)) {
}
};
}
// else return;
else { // all outside dashboard
console.log("I am outside", current_page);
if (current_page.match(/^\/courses\/(\d+)\/?$/)) { // course main pages
callback = (mutationList) => {
for (const mutation of mutationList) {
if (mutation.target == document.querySelector('#right-side')) { if (mutation.target == document.querySelector('#right-side')) {
if (!mutation.target.querySelector(".bettercanvas-todosidebar")) { if (!mutation.target.querySelector(".bettercanvas-todosidebar")) {
setupBetterTodo(); setupBetterTodo();
setupBetterSidebar("course"); setupBetterSidebar(getSidebarLayoutMode());
} }
} }
} else {
console.log("I am outside", current_page);
if (options.better_sidebar) {
ensureBetterSidebar();
}
}
if (options.better_sidebar) {
ensureBetterSidebar();
}
} }
}; };
}
}
const observer = new MutationObserver(callback); const observer = new MutationObserver(callback);
observer.observe(document.querySelector('html'), { childList: true, subtree: true }); observer.observe(document.querySelector('html'), { childList: true, subtree: true });
@ -1362,33 +1451,38 @@ function applySidebarScaleStyles(sidebarList) {
sidebarList.style.setProperty("--bc-sidebar-label-size", `${Math.round(14 * scale)}px`); sidebarList.style.setProperty("--bc-sidebar-label-size", `${Math.round(14 * scale)}px`);
} }
function setupBetterSidebar(mode = "dash") { async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
if (!options.better_sidebar) return; if (!options.better_sidebar) return;
if (document.querySelector('#better-sidebar-container')) return; if (document.querySelector('#better-sidebar-container')) return;
let wrapper = document.querySelector("#wrapper"); let wrapper = document.querySelector("#wrapper");
if (!wrapper) return; if (!wrapper || betterSidebarLoading) return;
betterSidebarLoading = true;
try { try {
const layoutMode = mode === "course" || mode === "dash" ? mode : getSidebarLayoutMode();
const mainWrapper = document.querySelector(".ic-Layout-contentWrapper"); const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
if (!mainWrapper) return;
let courseLinks; let courseLinks;
let expanded = false; let expanded = await getSidebarExpandedState(layoutMode);
if (mode == "dash") {
document.getElementById("header").style.display = "none";
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
mainWrapper.style.display = "flex"; mainWrapper.style.display = "flex";
mainWrapper.style.alignItems = "stretch";
mainWrapper.style.minWidth = "0";
if (layoutMode == "dash") {
document.getElementById("header")?.style.setProperty("display", "none");
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
} }
else if (mode == "course") { else if (layoutMode == "course") {
document.getElementById("header").style.display = "none"; document.getElementById("header")?.style.setProperty("display", "none");
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0"); document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
document.querySelector("#main")?.style.setProperty("margin-left", "0"); document.querySelector("#main")?.style.setProperty("margin-left", "0");
// document.getElementById("not_right_side").style.display = "flex"; const contentMain = document.querySelector(".ic-Layout-contentMain");
mainWrapper.style.display = "flex"; if (contentMain) {
document.querySelector(".ic-Layout-contentMain").style.flex = "1"; contentMain.style.flex = "1";
document.querySelector(".ic-Layout-contentMain").style.minWidth = "0"; contentMain.style.minWidth = "0";
}
courseLinks = getCourseLinks(); courseLinks = getCourseLinks();
document.querySelector(".ic-app-nav-toggle-and-crumbs").style.display = "none"; document.querySelector(".ic-app-nav-toggle-and-crumbs")?.style.setProperty("display", "none");
const leftSide = document.getElementById("left-side"); const leftSide = document.getElementById("left-side");
if (leftSide) leftSide.style.display = "none"; if (leftSide) leftSide.style.display = "none";
expanded = true;
} }
let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container", let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
@ -1398,10 +1492,11 @@ function setupBetterSidebar(mode = "dash") {
style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;" style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;"
}); });
applySidebarScaleStyles(sidebarList); applySidebarScaleStyles(sidebarList);
sidebarList.dataset.expanded = expanded ? "true" : "false";
// Populate sidebar from Canvas navigation menu dynamically // Populate sidebar from Canvas navigation menu dynamically
populateSidebarFromNav(sidebarContent); populateSidebarFromNav(sidebarContent);
if (mode == "course") { if (layoutMode == "course") {
const courseLinksContainer = makeElement("div", sidebarContent, { const courseLinksContainer = makeElement("div", sidebarContent, {
id: "better-course-links", id: "better-course-links",
style: "display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);align-items:stretch;margin:15px 8px 0;padding:12px;border-radius:8px;background:linear-gradient(135deg, rgba(var(--bc-primary-rgb), 0.08) 0%, rgba(var(--bc-primary-rgb), 0.04) 100%);border:1px solid rgba(var(--bc-primary-rgb), 0.15);" style: "display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);align-items:stretch;margin:15px 8px 0;padding:12px;border-radius:8px;background:linear-gradient(135deg, rgba(var(--bc-primary-rgb), 0.08) 0%, rgba(var(--bc-primary-rgb), 0.04) 100%);border:1px solid rgba(var(--bc-primary-rgb), 0.15);"
@ -1437,6 +1532,7 @@ function setupBetterSidebar(mode = "dash") {
let expander = makeElement("div", sidebarList, { let expander = makeElement("div", sidebarList, {
className: "better-sidebar-expander",
style: "display:flex;flex-direction:column;gap:0px;margin-top:auto;width:100%;justify-content:center;align-items:center;cursor:pointer;", style: "display:flex;flex-direction:column;gap:0px;margin-top:auto;width:100%;justify-content:center;align-items:center;cursor:pointer;",
}); });
expander.innerHTML = ` expander.innerHTML = `
@ -1449,14 +1545,19 @@ function setupBetterSidebar(mode = "dash") {
</svg> </svg>
` `
updateSidebar(expanded, sidebarList, expander); updateSidebar(expanded, sidebarList, expander);
setSidebarExpandedState(layoutMode, expanded);
// const labels = document.querySelectorAll(".better-sidebar-label"); // const labels = document.querySelectorAll(".better-sidebar-label");
// labels.forEach(label => label.style.display = "none"); // labels.forEach(label => label.style.display = "none");
expander.addEventListener("click", () => { expander.addEventListener("click", () => {
expanded = !expanded; expanded = !expanded;
sidebarList.dataset.expanded = expanded ? "true" : "false";
setSidebarExpandedState(layoutMode, expanded);
updateSidebar(expanded, sidebarList, expander); updateSidebar(expanded, sidebarList, expander);
}) })
} catch (e) { } catch (e) {
logError(e); logError(e);
} finally {
betterSidebarLoading = false;
} }
} }
function createSidebarButton(text, url, parent, icon) { function createSidebarButton(text, url, parent, icon) {

4
js/popup.js
View File

@ -55,7 +55,7 @@ const defaultOptions = {
}, },
"new_install": true, "new_install": true,
"assignments_due": true, "assignments_due": true,
"gpa_calc": true, "gpa_calc": false,
"dark_mode": true, "dark_mode": true,
"gradent_cards": false, "gradent_cards": false,
"disable_color_overlay": false, "disable_color_overlay": false,
@ -65,7 +65,7 @@ const defaultOptions = {
"num_assignments": 4, "num_assignments": 4,
"custom_domain": [""], "custom_domain": [""],
"assignments_done": [], "assignments_done": [],
"dashboard_grades": true, "dashboard_grades": false,
"assignment_date_format": false, "assignment_date_format": false,
"dashboard_notes": false, "dashboard_notes": false,
"dashboard_notes_text": "", "dashboard_notes_text": "",