diff --git a/js/content.js b/js/content.js index e77b535..19b1048 100644 --- a/js/content.js +++ b/js/content.js @@ -483,24 +483,23 @@ 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(); - // } - // } - // } - // }; - // } + } + // 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.querySelector(".bettercanvas-todosidebar")) { + setupBetterTodo(); + setupBetterSidebar("course"); + } + } + } + }; + } + } const observer = new MutationObserver(callback); 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 (document.querySelector('#better-sidebar-container')) return; let wrapper = document.querySelector("#wrapper"); if (!wrapper) return; try { - // 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"; + const mainWrapper = document.querySelector(".ic-Layout-contentWrapper"); + let courseLinks; + let expanded = false; + if (mode == "dash") { + document.getElementById("header").style.display = "none"; + 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", - 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); 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;" }); // 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); + 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, + ` + + + + + + `, + ); + + 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, + ` + + + + + + + + ` + ); + }); + } 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 = ` - + @@ -1363,35 +1466,45 @@ function setupBetterSidebar() { ` - let expanded = false; - expander.addEventListener("click", () => { - if (expanded) { - sidebarList.style.width = "100px"; - expander.style.transform = "rotate(0deg)"; - } else { - sidebarList.style.width = "150px"; - expander.style.transform = "rotate(180deg)"; - } - expanded = !expanded; + updateSidebar(expanded, sidebarList, expander); + // const labels = document.querySelectorAll(".better-sidebar-label"); + // labels.forEach(label => label.style.display = "none"); + expander.addEventListener("click", () => { + expanded = !expanded; + updateSidebar(expanded, sidebarList, expander); }) } catch (e) { logError(e); } } -function createSidebarButton(text, url, parent) { +function createSidebarButton(text, url, parent, icon) { 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);", - className: "bettercanvas-custom-btn", - textContent: text, + 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 better-sidebar-btn", href: url, }); - // button.addEventListener("click", (event) => { - // if (event.ctrlKey || event.metaKey) { - // window.open(domain+url, '_blank'); - // } else { - // window.location.href = domain+url; - // } - // }); + button.innerHTML = `${icon ? `${icon}${text}` : `${text}`}`; +} +function updateSidebar(expanded, sidebarList, expander) { + sidebarList.style.width = expanded ? "150px" : "50px"; + 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;