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 2

Browse Source 
more css, icons, and some progress on course page.
This commit is contained in:
Guy Sandler 2026-04-30 19:50:33 -07:00
parent f4733f1dbe
commit d0477c5445
1 changed files with 169 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
js/content.js
View File

@ -483,24 +483,23 @@ function checkDashboardReady() {
} }
} }
}; };
} else return; }
// else { // all outside dashboard // else return;
// console.log("I am outside", current_page); else { // all outside dashboard
// if (current_page.match(/^\/courses\/(\d+)\/?$/)) { console.log("I am outside", current_page);
if (current_page.match(/^\/courses\/(\d+)\/?$/)) { // course main pages
// } callback = (mutationList) => {
// callback = (mutationList) => { for (const mutation of 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(); figure this out per class setupBetterSidebar("course");
// setupBetterSidebar(); }
// // loadBetterTodo(); }
// } }
// } };
// } }
// }; }
// }
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 });
@ -1323,39 +1322,143 @@ function setupBetterTodo() {
} }
} }
function setupBetterSidebar() { function setupBetterSidebar(mode = "dash") {
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) return;
try { try {
// document.querySelector("#header")?.remove(); const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
document.getElementById("header").style.display = "none"; let courseLinks;
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0"); let expanded = false;
// rebuild sidebar if (mode == "dash") {
const mainWrapper = document.querySelector(".ic-Layout-contentWrapper"); document.getElementById("header").style.display = "none";
mainWrapper.style.display = "flex"; document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
mainWrapper.style.display = "flex";
}
else if (mode == "course") {
document.getElementById("header").style.display = "none";
document.querySelector(".ic-Layout-wrapper")?.style.setProperty("margin-left", "0");
// document.getElementById("not_right_side").style.display = "flex";
mainWrapper.style.display = "flex";
document.querySelector(".ic-Layout-contentMain").style.flex = "1";
document.querySelector(".ic-Layout-contentMain").style.minWidth = "0";
courseLinks = getCourseLinks();
document.querySelector(".ic-app-nav-toggle-and-crumbs").style.display = "none";
expanded = true;
}
let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container", let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
style: "display:flex;flex-direction:column;width:150px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcbackground-0);height:100vh;position:sticky;top:0;left:0;" style: `display:flex;flex-direction:column;width:50px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcbackground-0);height:100vh;position:sticky;top:0;left:0;`
}, true); }, true);
let sidebarContent = makeElement("div", sidebarList, { let sidebarContent = makeElement("div", sidebarList, {
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;"
}); });
// sidebar contents // sidebar contents
createSidebarButton("Dashboard", domain+"/", sidebarContent); createSidebarButton("Dashboard", domain + "/", sidebarContent,
createSidebarButton("Courses", domain+"/courses", sidebarContent); `<svg fill="var(--bctext-0)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
createSidebarButton("Groups", domain+"/groups", sidebarContent); <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
createSidebarButton("Calendar", domain+"/calendar", sidebarContent); <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
createSidebarButton("Inbox", domain+"/conversations", sidebarContent); <g id="SVGRepo_iconCarrier">
createSidebarButton("Studio", domain+"accounts/1/external_tools/69?launch_type=global_navigation", sidebarContent); <rect x="2" y="2" width="9" height="11" rx="2"></rect>
<rect x="13" y="2" width="9" height="7" rx="2"></rect>
<rect x="2" y="15" width="9" height="7" rx="2"></rect>
<rect x="13" y="11" width="9" height="11" rx="2"></rect>
</g>
</svg>`,
);
createSidebarButton(
"Courses",
domain + "/courses",
sidebarContent,
`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M20 12V4C20 2.89543 19.1046 2 18 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V18.5" stroke="var(--bctext-0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M13 2V14L16.8182 11L20 14V5" stroke="var(--bctext-0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>`,
);
createSidebarButton(
"Groups",
domain + "/groups",
sidebarContent,
`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 6C14.3432 6 13 7.34315 13 9C13 10.6569 14.3432 12 16 12C17.6569 12 19 10.6569 19 9C19 7.34315 17.6569 6 16 6ZM11 9C11 6.23858 13.2386 4 16 4C18.7614 4 21 6.23858 21 9C21 10.3193 20.489 11.5193 19.6542 12.4128C21.4951 13.0124 22.9176 14.1993 23.8264 15.5329C24.1374 15.9893 24.0195 16.6114 23.5631 16.9224C23.1068 17.2334 22.4846 17.1155 22.1736 16.6591C21.1979 15.2273 19.4178 14 17 14C13.166 14 11 17.0742 11 19C11 19.5523 10.5523 20 10 20C9.44773 20 9.00001 19.5523 9.00001 19C9.00001 18.308 9.15848 17.57 9.46082 16.8425C9.38379 16.7931 9.3123 16.7323 9.24889 16.6602C8.42804 15.7262 7.15417 15 5.50001 15C3.84585 15 2.57199 15.7262 1.75114 16.6602C1.38655 17.075 0.754692 17.1157 0.339855 16.7511C-0.0749807 16.3865 -0.115709 15.7547 0.248886 15.3398C0.809035 14.7025 1.51784 14.1364 2.35725 13.7207C1.51989 12.9035 1.00001 11.7625 1.00001 10.5C1.00001 8.01472 3.01473 6 5.50001 6C7.98529 6 10 8.01472 10 10.5C10 11.7625 9.48013 12.9035 8.64278 13.7207C9.36518 14.0785 9.99085 14.5476 10.5083 15.0777C11.152 14.2659 11.9886 13.5382 12.9922 12.9945C11.7822 12.0819 11 10.6323 11 9ZM3.00001 10.5C3.00001 9.11929 4.1193 8 5.50001 8C6.88072 8 8.00001 9.11929 8.00001 10.5C8.00001 11.8807 6.88072 13 5.50001 13C4.1193 13 3.00001 11.8807 3.00001 10.5Z" fill="var(--bctext-0)"></path>
</g>
</svg>`,
);
createSidebarButton(
"Calendar",
domain + "/calendar",
sidebarContent,
`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="var(--bctext-0)" stroke-width="2" stroke-linecap="round"></path>
</g>
</svg>`,
);
createSidebarButton(
"Inbox",
domain + "/conversations",
sidebarContent,
`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M4 18L9 12M20 18L15 12M3 8L10.225 12.8166C10.8665 13.2443 11.1872 13.4582 11.5339 13.5412C11.8403 13.6147 12.1597 13.6147 12.4661 13.5412C12.8128 13.4582 13.1335 13.2443 13.775 12.8166L21 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="var(--bctext-0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>`,
);
createSidebarButton(
"Studio",
domain +
"accounts/1/external_tools/69?launch_type=global_navigation",
sidebarContent,
`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.34315 1 3 2.34315 3 4V17V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V17V4C21 2.34315 19.6569 1 18 1H6ZM5 20V17C5 16.4477 5.44772 16 6 16H18C18.5523 16 19 16.4477 19 17V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20ZM18 14C18.3506 14 18.6872 14.0602 19 14.1707V4C19 3.44772 18.5523 3 18 3H6C5.44772 3 5 3.44772 5 4V14.1707C5.31278 14.0602 5.64936 14 6 14H18ZM14.5 19.25C15.1904 19.25 15.75 18.6904 15.75 18C15.75 17.3096 15.1904 16.75 14.5 16.75C13.8096 16.75 13.25 17.3096 13.25 18C13.25 18.6904 13.8096 19.25 14.5 19.25Z" fill="var(--bctext-0)"></path>
</g>
</svg>`,
);
if (mode == "course") {
makeElement("h1", sidebarContent, {
textContent: "Course Links:",
style: "font-size: 20px;color:var(--bctext-0);margin-top:5px;margin-bottom:5px;"
})
courseLinks.forEach((link) => {
createSidebarButton(
link.name,
domain + link.url,
sidebarContent,
`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg0" style="width:20px;height:20px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M7.05025 1.53553C8.03344 0.552348 9.36692 0 10.7574 0C13.6528 0 16 2.34721 16 5.24264C16 6.63308 15.4477 7.96656 14.4645 8.94975L12.4142 11L11 9.58579L13.0503 7.53553C13.6584 6.92742 14 6.10264 14 5.24264C14 3.45178 12.5482 2 10.7574 2C9.89736 2 9.07258 2.34163 8.46447 2.94975L6.41421 5L5 3.58579L7.05025 1.53553Z" fill="var(--bctext-0)"></path>
<path d="M7.53553 13.0503L9.58579 11L11 12.4142L8.94975 14.4645C7.96656 15.4477 6.63308 16 5.24264 16C2.34721 16 0 13.6528 0 10.7574C0 9.36693 0.552347 8.03344 1.53553 7.05025L3.58579 5L5 6.41421L2.94975 8.46447C2.34163 9.07258 2 9.89736 2 10.7574C2 12.5482 3.45178 14 5.24264 14C6.10264 14 6.92742 13.6584 7.53553 13.0503Z" fill="var(--bctext-0)"></path>
<path d="M5.70711 11.7071L11.7071 5.70711L10.2929 4.29289L4.29289 10.2929L5.70711 11.707１Z" fill="var(--bctext-0)"></path>
</g>
</svg>`
);
});
}
let expander = makeElement("div", sidebarList, { let expander = makeElement("div", sidebarList, {
style: "display:flex;flex-direction:column;gap:0px;margin-top:auto;width:100%;justify-content:center;align-items:center;" 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 = `
<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;"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:30px;height:30px;transition:all .3s ease;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
@ -1363,35 +1466,45 @@ function setupBetterSidebar() {
</g> </g>
</svg> </svg>
` `
let expanded = false; updateSidebar(expanded, sidebarList, expander);
expander.addEventListener("click", () => { // const labels = document.querySelectorAll(".better-sidebar-label");
if (expanded) { // labels.forEach(label => label.style.display = "none");
sidebarList.style.width = "100px"; expander.addEventListener("click", () => {
expander.style.transform = "rotate(0deg)"; expanded = !expanded;
} else { updateSidebar(expanded, sidebarList, expander);
sidebarList.style.width = "150px";
expander.style.transform = "rotate(180deg)";
}
expanded = !expanded;
}) })
} catch (e) { } catch (e) {
logError(e); logError(e);
} }
} }
function createSidebarButton(text, url, parent) { function createSidebarButton(text, url, parent, icon) {
let button = makeElement("a", 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;background-color:var(--bcbackground-2);", style: "width:40%;height:30px;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:var(--bctext-0) !important;font-weight:bold;",
className: "bettercanvas-custom-btn", className: "bettercanvas-custom-btn better-sidebar-btn",
textContent: text,
href: url, href: url,
}); });
// button.addEventListener("click", (event) => { button.innerHTML = `${icon ? `${icon}<span class="better-sidebar-label" style="font-size:clamp(10px, 2vw, 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">${text}</span>` : `<span class="better-sidebar-label">${text}</span>`}`;
// if (event.ctrlKey || event.metaKey) { }
// window.open(domain+url, '_blank'); function updateSidebar(expanded, sidebarList, expander) {
// } else { sidebarList.style.width = expanded ? "150px" : "50px";
// window.location.href = domain+url; expander.style.transform = expanded ? "rotate(180deg)" : "rotate(0deg)";
// } const labels = document.querySelectorAll(".better-sidebar-label");
// }); labels.forEach(label => label.style.display = expanded ? "block" : "none");
const buttons = document.querySelectorAll(".better-sidebar-btn");
buttons.forEach(label => label.style.width = expanded ? "80%" : "40%");
}
function getCourseLinks() {
const linkList = document.getElementById("section-tabs");
const links = linkList.querySelectorAll("a");
const courseLinks = [];
links.forEach(link => {
const url = new URL(link.href).pathname;
courseLinks.push({
name: link.textContent.trim(),
url: url
});
})
return courseLinks;
} }
let delay; let delay;