CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 01:49:54 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

better sidebar 1

Browse Source 
progress
This commit is contained in:
Guy Sandler 2026-04-29 22:07:09 -07:00
parent 0602af48c4
commit 094e297f0d
2 changed files with 97 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -70,6 +70,10 @@ Actually Better Canvas adds more with more to come!
- better what if grade
- global search
- fix darkmode fixer
- make sidebar and todo list work on all pages that need them
- grade history with graph
- preview font
- button to remove all card images
## Extra features that might be added:
- card grade position, card outline

78
js/content.js
View File

@ -390,6 +390,21 @@ function applyOptionsChanges(changes) {
case "customBackgroundLink":
applyCustomBackground();
break;
case "better_todo":
if (options.better_todo) {
setupBetterTodo();
} else {
window.location.reload();
}
case "better_sidebar":
if (options.better_sidebar) setupBetterSidebar();
// else window.location.reload();
else {
document.getElementById("header").style.display = "block";
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "54px");
document.getElementById("better-sidebar-container").remove();
}
break;
}
});
}
@ -442,8 +457,10 @@ function resetTimer() {
}
function checkDashboardReady() {
if (current_page !== "/" && current_page !== "") return;
const callback = (mutationList) => {
let callback;
if (current_page == "/" || current_page == "") {
console.log("I am dashboard");
callback = (mutationList) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
if (mutation.target == document.querySelector("#DashboardCard_Container")) {
@ -466,6 +483,24 @@ function checkDashboardReady() {
}
}
};
} else return;
// else { // all outside dashboard
// console.log("I am outside", current_page);
// if (current_page.match(/^\/courses\/(\d+)\/?$/)) {
// }
// callback = (mutationList) => {
// for (const mutation of mutationList) {
// if (mutation.target == document.querySelector('#right-side')) {
// if (!mutation.target.querySelector(".bettercanvas-todosidebar")) {
// // setupBetterTodo(); figure this out per class
// setupBetterSidebar();
// // loadBetterTodo();
// }
// }
// }
// };
// }
const observer = new MutationObserver(callback);
observer.observe(document.querySelector('html'), { childList: true, subtree: true });
@ -1294,23 +1329,33 @@ function setupBetterSidebar() {
let wrapper = document.querySelector("#wrapper");
if (!wrapper) return;
try {
document.querySelector("#header")?.remove();
// document.querySelector("#header")?.remove();
document.getElementById("header").style.display = "none";
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
// rebuild sidebar
const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
mainWrapper.style.display = "flex";
let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
style: "display:flex;flex-direction:column;width:250px;justify-content:center;gap:20px;padding:20px;box-sizing:border-box;position:relative;background-color:red;"
style: "display:flex;flex-direction:column;width:150px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:red;height:100vh;position:sticky;top:0;left:0;"
}, true);
sidebarList.innerHTML = `
let sidebarContent = makeElement("div", sidebarList, {
style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;background-color:blue;margin:5px;"
});
// sidebar contents
createSidebarButton("Dashboard", domain+"/", sidebarContent);
createSidebarButton("Courses", domain+"/courses", sidebarContent);
createSidebarButton("Groups", domain+"/groups", sidebarContent);
createSidebarButton("Calendar", domain+"/calendar", sidebarContent);
createSidebarButton("Inbox", domain+"/conversations", sidebarContent);
createSidebarButton("Studio", domain+"accounts/1/external_tools/69?launch_type=global_navigation", sidebarContent);
`;
let expander = makeElement("div", sidebarList, {
style: "display:flex;flex-direction:column;gap:10px;position:absolute:bottom:10px;"
style: "display:flex;flex-direction:column;gap:0px;margin-top:auto;"
});
expander.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:50px;height:50px;transition:all .3s ease;cursor:pointer;">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:40px;height:40px;transition:all .3s ease;cursor:pointer;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
@ -1318,11 +1363,24 @@ function setupBetterSidebar() {
</g>
</svg>
`
} catch (e) {
logError(e);
}
}
function createSidebarButton(text, url, parent) {
let button = makeElement("a", parent, {
style: "width:80%;height:30px;cursor:pointer;text-align:center;text-decoration:none;display:flex;justify-content:center;align-items:center;color:var(--bctext-0);font-weight:bold;",
className: "bettercanvas-custom-btn",
textContent: text,
href: url,
});
// button.addEventListener("click", (event) => {
// if (event.ctrlKey || event.metaKey) {
// window.open(domain+url, '_blank');
// } else {
// window.location.href = domain+url;
// }
// });
}
let delay;