`;
list.appendChild(row);
}
const labelEl = row.querySelector('.cr-pl-label');
labelEl.textContent = courseRingLabel(entry.courseId);
labelEl.style.color = color;
row.querySelector('.cr-pl-pct').textContent = `${pct}% (${entry.completed}/${entry.total})`;
const track = row.children[1];
track.style.background = `color-mix(in srgb, ${color} 25%, transparent)`;
const fill = row.querySelector('.cr-pl-fill');
fill.style.background = color;
if (!fill.dataset.init) {
fill.dataset.init = '1';
requestAnimationFrame(() => requestAnimationFrame(() => fill.style.width = `${pct}%`));
} else {
fill.style.width = `${pct}%`;
}
row.style.transition = 'opacity .3s ease';
row.style.opacity = progressFilterDim(entry.courseId) ? '0.4' : '';
attachProgressFilterClick(row, entry.courseId);
row.onmouseenter = () => { row.style.opacity = '0.8'; };
row.onmouseleave = () => { row.style.opacity = progressFilterDim(entry.courseId) ? '0.4' : ''; };
});
}
// Mode "line": one horizontal bar where each class's COMPLETED portion is packed
// to the left (full course color) and its UNCOMPLETED portion to the right
// (faded course color), with no gaps between segments. Overall % shown above.
function renderProgressOneLine(wrapper, shown, totalAll, completedAll, percent) {
let box = wrapper.querySelector('.canvasrefined-progress-oneline');
if (!box) {
box = document.createElement('div');
box.className = 'canvasrefined-progress-oneline';
box.style.cssText = 'display:flex;flex-direction:column;gap:5px;width:100%;box-sizing:border-box;';
wrapper.appendChild(box);
}
let head = box.querySelector('.cr-ol-head');
if (!head) {
head = document.createElement('div');
head.className = 'cr-ol-head';
head.style.cssText = 'display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--bctext-0);';
head.innerHTML = `Overall`;
box.appendChild(head);
}
box.querySelector('.cr-ol-pct').textContent = `${percent}% (${completedAll}/${totalAll})`;
// Clicking the "Overall" header clears the active class filter.
if (getCurrentCourseId() == null) {
head.style.cursor = betterTodoProgressFilter != null ? 'pointer' : '';
head.onclick = () => {
if (betterTodoProgressFilter == null) return;
betterTodoProgressFilter = null;
const loc = document.querySelector("#canvasrefined-todo-list");
if (loc) { clearTodoList(); createTodoSections(loc); }
};
} else {
head.style.cursor = '';
head.onclick = null;
}
let bar = box.querySelector('.cr-ol-bar');
if (!bar) {
bar = document.createElement('div');
bar.className = 'cr-ol-bar';
// position:relative so absolutely-positioned segments anchor to it
bar.style.cssText = 'position:relative;width:100%;height:14px;border-radius:999px;overflow:hidden;background:var(--bcbackground-1);';
box.appendChild(bar);
}
// Build the segment list left -> right: ALL completed blocks first (each
// class's full course color), then ALL remaining blocks (each class's faded
// course color). This keeps every completed segment on the left and every
// remaining segment on the right. Consecutive segments share edges, so
// there are no gaps between them.
const segs = [];
let left = 0;
// First pass: completed blocks for every class (left side).
shown.forEach((entry, idx) => {
const color = courseRingColor(entry.courseId, idx);
const doneW = totalAll === 0 ? 0 : (entry.completed / totalAll) * 100;
if (doneW > 0) { segs.push({ left, w: doneW, bg: color, courseId: entry.courseId }); left += doneW; } // completed: full color
});
// Second pass: remaining blocks for every class (right side).
shown.forEach((entry, idx) => {
const color = courseRingColor(entry.courseId, idx);
const remW = totalAll === 0 ? 0 : ((entry.total - entry.completed) / totalAll) * 100;
if (remW > 0) { segs.push({ left, w: remW, bg: `color-mix(in srgb, ${color} 25%, transparent)`, courseId: entry.courseId }); left += remW; } // remaining: faded
});
while (bar.children.length > segs.length) bar.lastChild.remove();
segs.forEach((seg, idx) => {
let el = bar.children[idx];
if (!el) {
el = document.createElement('div');
el.className = 'cr-ol-seg';
el.style.cssText = 'position:absolute;top:0;height:100%;transition:left .6s ease,width .6s ease,background .3s ease,opacity .3s ease;';
bar.appendChild(el);
}
el.style.left = `${seg.left}%`;
el.style.width = `${seg.w}%`;
el.style.background = seg.bg;
el.style.opacity = progressFilterDim(seg.courseId) ? '0.35' : '';
attachProgressFilterClick(el, seg.courseId);
el.onmouseenter = () => { el.style.opacity = '0.8'; };
el.onmouseleave = () => { el.style.opacity = progressFilterDim(seg.courseId) ? '0.35' : ''; };
});
}
function renderProgressRings(container, scopedData) {
const mode = getProgressRingMode();
if (mode === "none") { container.innerHTML = ""; return; }
const allAssignments = scopedData.filter(item => (item.plannable_type == "assignment" || item.plannable_type == "planner_note"));
const groups = {};
allAssignments.forEach(item => {
const cid = String(item.course_id || item.context_id || item.plannable?.course_id || "personal");
groups[cid] = groups[cid] || [];
groups[cid].push(item);
});
const entries = Object.keys(groups).map(cid => {
const arr = groups[cid];
const completed = arr.filter(it => (it.submissions?.submitted || it.planner_override?.marked_complete)).length;
return { courseId: cid, total: arr.length, completed };
}).filter(e => e.total > 0);
if (!entries.length) { container.innerHTML = ""; return; }
// sort by total desc and limit to 6 courses
entries.sort((a, b) => b.total - a.total);
const shown = entries.slice(0, 6);
const totalAll = shown.reduce((s, e) => s + e.total, 0);
const completedAll = shown.reduce((s, e) => s + e.completed, 0);
const percent = totalAll === 0 ? 0 : Math.round((completedAll / totalAll) * 100);
// wrapper reused across renders; clear on mode switch so each mode rebuilds fresh DOM
let wrapper = container.querySelector('.canvasrefined-progress-wrapper');
if (!wrapper) {
wrapper = document.createElement('div');
wrapper.className = 'canvasrefined-progress-wrapper';
wrapper.style.cssText = 'display:flex;flex-direction:column;align-items:center;position:relative;width:100%;box-sizing:border-box;';
container.appendChild(wrapper);
}
if (wrapper.dataset.mode !== mode) {
wrapper.innerHTML = '';
wrapper.dataset.mode = mode;
}
if (mode === "rings") {
renderProgressRingsMode(wrapper, shown, totalAll, completedAll, percent);
} else if (mode === "rainbow") {
renderProgressRainbow(wrapper, shown, totalAll, completedAll, percent);
} else if (mode === "lines") {
renderProgressLines(wrapper, shown);
} else if (mode === "line") {
renderProgressOneLine(wrapper, shown, totalAll, completedAll, percent);
}
}
function buildPlannerNotePayload(form) {
const title = form.querySelector("#better-todo-new-task-title")?.value?.trim();
const details = form.querySelector("#better-todo-new-task-details")?.value?.trim();
const courseIdRaw = form.querySelector("#better-todo-new-task-course")?.value;
const dateValue = form.querySelector("#better-todo-new-task-date")?.value;
const timeValue = form.querySelector("#better-todo-new-task-time")?.value;
const link = form.querySelector("#better-todo-new-task-link")?.value?.trim() || "";
if (!title) {
throw new Error("Task title is required.");
}
if (!dateValue || !timeValue) {
throw new Error("Please choose both a date and time.");
}
const localDateTime = new Date(`${dateValue}T${timeValue}:00`);
if (Number.isNaN(localDateTime.getTime())) {
throw new Error("Invalid task date.");
}
return {
title,
details,
link,
courseId: courseIdRaw ? parseInt(courseIdRaw) : null,
// Canvas accepts local timestamp strings more reliably than UTC ISO strings for planner notes.
todoDate: `${dateValue}T${timeValue}:00`,
};
}
async function createCanvasPlannerNote(payload) {
const csrfToken = CSRFtoken();
const plannerNote = {
title: payload.title,
todo_date: payload.todoDate,
};
if (payload.details) plannerNote.details = payload.details;
if (payload.courseId) plannerNote.course_id = payload.courseId;
const attempts = [
{
headers: {
"content-type": "application/json",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
body: JSON.stringify({ planner_note: plannerNote }),
},
{
headers: {
"content-type": "application/json",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
body: JSON.stringify(plannerNote),
},
{
headers: {
"content-type": "application/x-www-form-urlencoded; charset=UTF-8",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
body: (() => {
const formBody = new URLSearchParams();
formBody.set("planner_note[title]", plannerNote.title);
formBody.set("planner_note[todo_date]", plannerNote.todo_date);
if (plannerNote.details) formBody.set("planner_note[details]", plannerNote.details);
if (plannerNote.course_id) formBody.set("planner_note[course_id]", plannerNote.course_id);
return formBody.toString();
})(),
},
];
let lastError = "Canvas rejected task creation.";
for (const attempt of attempts) {
const response = await fetch(domain + "/api/v1/planner_notes", {
method: "POST",
headers: attempt.headers,
body: attempt.body,
});
if (response.status === 200 || response.status === 201) {
return response.json();
}
try {
const errData = await response.json();
if (errData?.errors?.length) {
lastError = errData.errors.join(" ");
} else if (errData?.message) {
lastError = errData.message;
}
} catch (_) {
// Keep prior error text when body is not JSON.
}
}
throw new Error(lastError || "Canvas rejected task creation.");
}
/* Custom task links: Canvas planner notes have no link field, so store a
user link in sync storage keyed by the note id. */
function getCustomTaskLinks() {
return (options && options.custom_task_links) || {};
}
function getCustomTaskLinkId(item) {
return item?.plannable_id ?? item?.plannable?.id ?? null;
}
function normalizeTaskLink(link) {
if (!link) return "";
link = String(link).trim();
if (!link) return "";
if (/^https?:\/\//i.test(link)) return link;
if (link.startsWith("//")) return "https:" + link;
return domain + (link.startsWith("/") ? link : "/" + link);
}
function customTaskHref(item) {
const id = getCustomTaskLinkId(item);
const links = getCustomTaskLinks();
if (id != null && links[String(id)]) {
return normalizeTaskLink(links[String(id)]);
}
const courseId = item?.course_id || item?.plannable?.course_id || item?.context_id;
if (courseId) return `${domain}/courses/${courseId}`;
return `${domain}/`;
}
function saveCustomTaskLink(noteId, link) {
if (noteId == null) return;
const links = { ...getCustomTaskLinks() };
const key = String(noteId);
if (link && String(link).trim()) {
links[key] = String(link).trim();
} else {
delete links[key];
}
options = { ...options, custom_task_links: links };
chrome.storage.sync.set({ custom_task_links: links });
}
function deleteCustomTaskLink(noteId) {
if (noteId == null) return;
const links = { ...getCustomTaskLinks() };
delete links[String(noteId)];
options = { ...options, custom_task_links: links };
chrome.storage.sync.set({ custom_task_links: links });
}
async function updateCanvasPlannerNote(id, payload) {
if (!id) throw new Error("Missing task id.");
const csrfToken = CSRFtoken();
// Canvas's planner_notes update endpoint permits FLAT parameters
// (title, details, course_id, todo_date) — NOT nested under planner_note.
// Sending nested params is silently ignored, so note.update({}) runs and
// returns 200 with the unchanged note, making edits appear to "not save".
// Always include details (even empty) so the field can be cleared.
const plannerNote = {
title: payload.title,
todo_date: payload.todoDate,
details: payload.details || "",
// Sending course_id as empty string disassociates the note from its course.
course_id: payload.courseId || "",
};
const attempts = [
{
headers: {
"content-type": "application/json",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
body: JSON.stringify(plannerNote),
},
{
headers: {
"content-type": "application/x-www-form-urlencoded; charset=UTF-8",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
body: (() => {
const formBody = new URLSearchParams();
formBody.set("title", plannerNote.title);
formBody.set("todo_date", plannerNote.todo_date);
formBody.set("details", plannerNote.details);
formBody.set("course_id", plannerNote.course_id);
return formBody.toString();
})(),
},
];
let lastError = "Canvas rejected task update.";
for (const attempt of attempts) {
const response = await fetch(`${domain}/api/v1/planner_notes/${id}`, {
method: "PUT",
headers: attempt.headers,
body: attempt.body,
});
if (response.status === 200 || response.status === 201) {
return response.json();
}
try {
const errData = await response.json();
if (errData?.errors?.length) {
lastError = errData.errors.join(" ");
} else if (errData?.message) {
lastError = errData.message;
}
} catch (_) {
// Keep prior error text when body is not JSON.
}
}
throw new Error(lastError || "Canvas rejected task update.");
}
async function deleteCanvasPlannerNote(id) {
if (!id) throw new Error("Missing task id.");
const csrfToken = CSRFtoken();
const response = await fetch(`${domain}/api/v1/planner_notes/${id}`, {
method: "DELETE",
headers: {
"content-type": "application/json",
"accept": "application/json",
"X-CSRF-Token": csrfToken,
},
});
if (response.status === 200 || response.status === 201 || response.status === 204) {
return true;
}
let lastError = "Canvas rejected task deletion.";
try {
const errData = await response.json();
if (errData?.errors?.length) lastError = errData.errors.join(" ");
else if (errData?.message) lastError = errData.message;
} catch (_) { /* ignore */ }
throw new Error(lastError);
}
/* Scroll a task form field into view, leaving room below for the native date/time picker. */
function scrollTodoIntoView(el, smooth = true) {
if (!el) return;
const sidebar = document.getElementById("right-side-wrapper");
const style = sidebar ? getComputedStyle(sidebar) : null;
const scrollsSidebar = sidebar &&
(style.overflowY === "auto" || style.overflowY === "scroll") &&
sidebar.scrollHeight > sidebar.clientHeight;
const behavior = smooth ? "smooth" : "auto";
if (scrollsSidebar) {
const rect = el.getBoundingClientRect();
const sRect = sidebar.getBoundingClientRect();
const elTop = rect.top - sRect.top + sidebar.scrollTop;
// Keep the element near the top so the picker below it stays on screen.
const target = elTop - (sidebar.clientHeight - rect.height) * 0.3;
sidebar.scrollTo({ top: Math.max(0, target), behavior });
} else {
el.scrollIntoView({ block: "center", behavior });
}
}
function fillTaskCourseOptions(courseSelect) {
const cards = options.custom_cards || {};
const courseColors = options.custom_cards_3 || {};
const currentCourseId = getCurrentCourseId();
// Hidden courses should not be offered as a target for custom tasks.
const entries = Object.entries(cards)
.filter(([, card]) => card?.hidden !== true)
.map(([id, card]) => ({
id,
label: card?.default || `Course ${id}`,
color:
courseColors?.[String(id)]?.color ??
courseColors?.[id]?.color ??
"#c7cdd1",
}))
.sort((a, b) => a.label.localeCompare(b.label));
courseSelect.innerHTML = '';
courseSelect.options[0].dataset.color = "#c7cdd1";
entries.forEach(entry => {
const option = makeElement("option", courseSelect, {
value: entry.id,
textContent: entry.label,
});
option.dataset.color = entry.color;
option.style.color = entry.color;
if (currentCourseId && String(currentCourseId) === String(entry.id)) {
option.selected = true;
}
});
}
function updateTaskCourseSelectColor(courseSelect) {
const selectedOption = courseSelect?.options?.[courseSelect.selectedIndex];
const color = selectedOption?.dataset?.color || "#c7cdd1";
courseSelect.style.borderLeft = `4px solid ${color}`;
courseSelect.style.paddingLeft = "8px";
}
function ensureTodoTaskMenu(location, feedbackElement) {
let actionsRow = location.querySelector("#better-todo-actions-row");
if (!actionsRow) {
actionsRow = makeElement("div", location, {
id: "better-todo-actions-row",
style: "display:flex;flex-direction:column;gap:8px;margin-top:14px;",
});
const addTaskButton = makeElement("button", actionsRow, {
id: "better-todo-add-task-btn",
className: "canvasrefined-custom-btn",
textContent: "+ Add Task",
style: "width:100%;padding:6px 8px;cursor:pointer;",
});
const menu = makeElement("div", actionsRow, {
id: "better-todo-add-task-menu",
className: "canvasrefined-add-assignment",
});
menu.innerHTML = `
Tasks
${todayString}
`; // placeholder for progress rings above the tab/filter control makeElement("div", location, { id: "better-todo-progress-placeholder", style: "display:flex;justify-content:center;margin-top:8px;" }); let filterControl = makeElement("div", location, { "id": "better-todo-filter" }); filterControl.innerHTML = `';
listItemContainer.querySelector(".canvasrefined-todo-item").href = item.html_url;
listItemContainer.dataset.id = item.plannable_id;
listItemContainer.querySelector('.canvasrefined-todo-icon').innerHTML += svg;
let listItem = listItemContainer.querySelector(".canvasrefined-todo-item");
const courseColor =
options.custom_cards_3?.[String(item.course_id)]?.color ??
options.custom_cards_3?.[item.course_id]?.color ??
options.custom_cards_3?.[item.plannable?.course_id]?.color ??
"#cccccc";
if (itemState?.["lbl"] && itemState["lbl"] !== "") {
makeElement("span", listItem.querySelector(".canvasrefined-todo-item-header"), { "className": "canvasrefined-todo-label", "textContent": itemState["lbl"] });
}
if (itemState?.["crs"] === true) {
listItemContainer.querySelector(".canvasrefined-todo-item").style.textDecoration = "line-through";
}
let title = makeElement("a", listItem.querySelector(".canvasrefined-todo-item-header"), { "className": "canvasrefined-todoitem-title", "textContent": item.plannable.title });
if (options.todo_hide_feedback === true) title.style = "color:" + courseColor + "!important;";
let course = makeElement("p", listItem, { "className": "canvasrefined-todoitem-course", "textContent": item.context_name });
course.style.color = courseColor;
let format = formatTodoDate(date, item.submissions, hr24);
let todoDate = makeElement("p", listItem, { "className": "canvasrefined-todoitem-date", "textContent": format.date });
if (format.dueSoon) todoDate.classList.add("canvasrefined-due-soon");
if (options.hover_preview === true) {
const customItem = item.planner_override && item.planner_override.custom && item.planner_override.custom === true;
listItem.addEventListener("mouseover", () => {
listItem.classList.add("canvasrefined-todo-hover");
let preview = listItemContainer.querySelector(".canvasrefined-hover-preview");
let previewTitle = preview.querySelector(".canvasrefined-preview-title");
let previewText = preview.querySelector(".canvasrefined-preview-text");
clearTimeout(delay);
delay = setTimeout(async () => {
if (listItem.classList.contains("canvasrefined-todo-hover")) {
previewTitle.textContent = item.plannable.title;
// custom assignment (planner note): preview its description/details
if (customItem) {
const details = item.plannable && item.plannable.details ? item.plannable.details : "";
previewText.textContent = details === "" ? "No details given" : details.replace(/<\/?[^>]+(>|$)/g, " ");
} else {
console.log(item);
let found = false;
let searchCount = 1;
while (searchCount < 5 && found === false) {
for (let i = 0; i < announcements.length; i++) {
if (announcements[i].id === item.plannable_id) {
found = true;
if (previewText.textContent === "") {
let description = item.plannable_type === "announcement" ? announcements[i].message : announcements[i].description;
previewText.textContent = description === "" ? "No details given" : description.replace(/<\/?[^>]+(>|$)/g, " ");
}
break;
}
}
if (found === false) {
let apiLink = domain + "/api/v1/";
if (item.plannable_type === "assignment") {
apiLink += `courses/${item.course_id}/assignments/${item.plannable_id}`;
} else if (item.plannable_type === "announcement") {
apiLink += `announcements?context_codes[]=course_${item.course_id}&per_page=3&page=${searchCount}`;
}
let data = await getData(apiLink);
item.plannable_type === "announcement" ? announcements.push(...data) : announcements.push(data);
searchCount++;
}
}
if (found === false) {
previewText.textContent = "Couldn't load preview";
}
}
preview.style.display = "block";
}
}, 250);
});
listItem.addEventListener("mouseleave", () => {
listItem.classList.remove("canvasrefined-todo-hover");
listItemContainer.querySelector(".canvasrefined-hover-preview").style.display = "none";
});
}
const actions = listItemContainer.querySelector(".canvasrefined-todo-actions");
let clickOutActions = (e) => {
if (e.target.className.includes("canvasrefined")) return;
document.body.removeEventListener("click", clickOutActions);
actions.style.display = "none";
}
listItemContainer.querySelector(".canvasrefined-todo-actions-btn").addEventListener("click", () => {
actions.style.display = "block";
setTimeout(() => {
document.body.addEventListener("click", clickOutActions);
}, 100);
});
let removeBtn = makeElement("div", actions, { "className": "canvasrefined-todo-action", "textContent": "Remove" });
removeBtn.innerHTML += x_svg;
const dueAt = new Date(item.plannable_date).getTime();
let crossOffBtn = makeElement("div", actions, { "className": "canvasrefined-todo-action", "textContent": "Cross off" });
crossOffBtn.innerHTML += check_svg;
crossOffBtn.addEventListener("click", () => {
setAssignmentState(item.plannable_id, { "crs": listItemContainer.querySelector(".canvasrefined-todo-item").style.textDecoration === "line-through" ? false : true, "expire": dueAt });
});
let label = makeElement("span", actions, { "className": "canvasrefined-todo-action-tag", "textContent": "Label:" });
label.innerHTML += tag_svg;
let labelInput = makeElement("input", actions, { "className": "canvasrefined-todo-input", "type": "text", "placeholder": "Label", "value": itemState && itemState["lbl"] ? itemState["lbl"] : "" });
labelInput.addEventListener("change", (e) => {
setAssignmentState(item.plannable_id, { "lbl": e.target.value, "expire": dueAt });
});
removeBtn.addEventListener('click', function () {
setAssignmentState(item.plannable_id, { "rem": filter === "todo", "expire": dueAt });
if (item.planner_override && item.planner_override.custom && item.planner_override.custom === true) {
// set item as complete locally
chrome.storage.sync.get("custom_assignments_overflow", overflow => {
chrome.storage.sync.get(overflow["custom_assignments_overflow"], storage => {
overflow["custom_assignments_overflow"].forEach(overflow => {
for (let i = 0; i < storage[overflow].length; i++) {
if (storage[overflow][i].plannable_id === item.plannable_id) {
storage[overflow].splice(i, 1);
chrome.storage.sync.set({ [overflow]: storage[overflow] }).then(() => {
});
break;
}
}
});
});
});
}
});
if (item.plannable_type === "announcement") {
announcementsToInsert.push(listItemContainer);
} else {
assignmentsToInsert.push(listItemContainer);
if (item.submissions && item.submissions.submitted) {
listItemContainer.classList.add("canvasrefined-todo-item-completed");
}
}
});
// appending assignments all at once
todoAssignments.textContent = "";
if (assignmentsToInsert.length > 0) {
let i;
for (i = 0; i < (assignmentsToInsert.length > maxAssignmentCount ? maxAssignmentCount : assignmentsToInsert.length); i++) {
todoAssignments.append(assignmentsToInsert[i]);
}
if (i !== assignmentsToInsert.length) createTodoViewMore(todoAssignments, "assignment");
} else {
makeElement("p", todoAssignments, { "className": "canvasrefined-none-due", "textContent": "None" });
}
// appending announcements all at once
todoAnnouncements.textContent = "";
if (announcementsToInsert.length > 0) {
let i;
for (i = announcementsToInsert.length - 1; i >= (announcementsToInsert.length - maxAnnouncementCount < 0 ? 0 : announcementsToInsert.length - maxAnnouncementCount); i--) {
todoAnnouncements.append(announcementsToInsert[i]);
}
if (i !== -1) createTodoViewMore(todoAnnouncements, "announcement");
} else {
makeElement("p", todoAnnouncements, { "className": "canvasrefined-none-due", "textContent": "None" });
}
cleanCustomAssignments();
});
});
} catch (e) {
logError(e);
}
}
/*
Card color palettes
*/
let changeColorInterval = null;
let colorChanges = [];
async function changeColorPreset(colors) {
if (colors.length === 0) return;
// reset everything
//let res = await getData(`${domain}/api/v1/users/self/colors`);
clearInterval(changeColorInterval);
const csrfToken = CSRFtoken();
const delay = 250;
previous = []
colorChanges = [];
// sort cards
let cards = document.querySelectorAll(".ic-DashboardCard__header");
let sortedCards = [];
cards.forEach(card => {
sortedCards.push({ "href": card.querySelector(".ic-DashboardCard__link").href, "el": card });
});
sortedCards.sort((a, b) => a.href > b.href ? 1 : -1);
// push each color change into a queue
try {
sortedCards.forEach((card, i) => {
let previousColor = rgbToHex(card.el.querySelector(".ic-DashboardCard__header_hero").style.backgroundColor);
previous.push(previousColor);
// Object.keys(res.custom_colors).forEach(item => {
//let item_id = item.split("_")[1];
let course_id = card.href.split("courses/")[1];
//if (card.href.includes(item_id)) {
let cnum = i % colors.length;
let changeCardColor = () => {
fetch(domain + "/api/v1/users/self/colors/courses_" + course_id,
{
method: "PUT",
headers: {
"content-type": "application/json",
'accept': 'application/json',
'X-CSRF-Token': csrfToken,
},
body: JSON.stringify({ "hexcode": colors[cnum] })
}).then(() => {
card.el.querySelector(".ic-DashboardCard__header_hero").style.backgroundColor = colors[cnum];
card.el.querySelector(".ic-DashboardCard__header-title span").style.color = colors[cnum];
card.el.querySelector(".ic-DashboardCard__header-button-bg").style.backgroundColor = colors[cnum];
});
}
colorChanges.push(changeCardColor);
card.el.querySelector(".ic-DashboardCard__header_hero").style.backgroundColor = colors[cnum];
card.el.querySelector(".ic-DashboardCard__header-title span").style.color = colors[cnum];
card.el.querySelector(".ic-DashboardCard__header-button-bg").style.backgroundColor = colors[cnum];
//}
// });
});
} catch (e) {
logError(e);
colorChanges = [];
}
changeGradientCards();
// go through the queue until empty
changeColorInterval = setInterval(() => {
if (colorChanges.length > 0) {
let current = colorChanges.shift();
current();
} else {
clearInterval(changeColorInterval);
}
}, delay);
// set colors to revert back to
chrome.storage.local.get("previous_colors", local => {
const now = Date.now();
if (local["previous_colors"] === null || now >= local["previous_colors"].expire) {
chrome.storage.local.set({ "previous_colors": { "colors": previous, "expire": now + 86400000 } });
}
});
}
/*
Dark mode
*/
// Light-mode fallbacks for the --bc* variables, always emitted so extension UI renders in light mode; dark mode overrides below.
const BC_LIGHT_DEFAULTS = {
"background-0": "#ffffff",
"background-1": "#c7c7c7",
"background-2": "#d9d9d9",
"borders": "#808080",
"links": "#418df1",
"sidebar": "#e3e3e3",
"sidebar-text": "#000000",
"text-0": "#000000",
"text-1": "#050505",
"text-2": "#4f4f4f"
};
function generateDarkModeCSS() {
// Always-on light-mode defaults so var(--bc*) resolves in light mode too.
let css = ":root{\n";
Object.keys(BC_LIGHT_DEFAULTS).forEach((key) => {
css += " --bc" + key + ": " + BC_LIGHT_DEFAULTS[key] + ";\n";
});
css += "}\n\n";
const darkOn = options.dark_mode === true || options.device_dark === true;
if (!darkOn) return css;
let darkBlock = ":root{\n";
if (options.dark_preset) {
Object.keys(options.dark_preset).forEach((key) => {
darkBlock += " --bc" + key + ": " + options.dark_preset[key] + ";\n";
});
}
darkBlock += "}\n\n";
darkBlock += DARKMODE_CSS;
if (options.device_dark === true) {
css += "@media (prefers-color-scheme: dark) {\n" + darkBlock + "\n}";
} else {
css += darkBlock;
}
return css;
}
let darkStyleInserted = false;
function toggleDarkMode() {
const css = generateDarkModeCSS();
const darkOn = options.dark_mode === true || options.device_dark === true;
// Reuse the existing #darkcss style if present (never create a duplicate), so a
// document_start dark-mode bootstrap and later updates stay on one element.
let style = document.querySelector("#darkcss");
if (!style) {
style = document.createElement('style');
style.id = 'darkcss';
document.documentElement.append(style);
}
style.textContent = css;
style.className = darkOn ? "canvasrefined-darkmode-enabled" : "";
darkStyleInserted = true;
runiframeChecker();
}
function runDarkModeFixer(override = false) {
if (options.dark_mode !== true) return { "path": "canvasrefined-darkmode_off", "time": "" };
if (override === false && !options["dark_mode_fix"].includes(window.location.pathname)) return { "path": "canvasrefined-none", "time": "" };
let output = inspectDarkMode();
return { "path": window.location.pathname, "time": output.time };
}
function autoDarkModeCheck() {
let date = new Date();
let currentHour = date.getHours();
let currentMinute = date.getMinutes();
let status = false;
if (options.auto_dark === false) return;
let startHour = parseInt(options.auto_dark_start["hour"]);
let startMinute = parseInt(options.auto_dark_start["minute"]);
let endHour = parseInt(options.auto_dark_end["hour"]);
let endMinute = parseInt(options.auto_dark_end["minute"]);
if (currentHour === startHour) {
status = currentMinute >= startMinute;
} else if (currentHour === endHour) {
status = currentMinute <= endMinute;
} else if (startHour > endHour) {
status = currentHour > startHour || currentHour < endHour;
} else if (startHour < endHour) {
status = currentHour > startHour && currentHour < endHour;
}
if (options.auto_dark === true) {
// Skip the write (and the storage.onChanged cascade it would trigger) when the
// computed state already matches dark_mode, so the 60s timer is a cheap no-op.
if (status === options.dark_mode) return;
options.dark_mode = status;
chrome.storage.sync.set({ "dark_mode": status }, toggleDarkMode);
}
}
// }
function toggleAutoDarkMode() {
clearInterval(timeCheck);
if (options.auto_dark && options.auto_dark === false) return;
autoDarkModeCheck();
timeCheck = setInterval(autoDarkModeCheck, 60000);
}
let iframeObserver;
function runiframeChecker() {
if (current_page === "/" || current_page === "") return;
if (options.dark_mode !== true) {
if (iframeObserver) iframeObserver.disconnect();
document.querySelectorAll('iframe').forEach((frame) => {
if (frame.contentDocument && frame.contentDocument.documentElement && frame.contentDocument.documentElement.querySelector('#darkcss')) {
frame.contentDocument.documentElement.querySelector('#darkcss').textContent = '';
frame.contentDocument.body.classList.remove("canvasrefined--darkmode--enabled");
}
});
return;
}
const callback = (mutationList) => {
for (const mutation of mutationList) {
if (mutation.type !== 'childList' || !mutation.addedNodes.length) continue;
for (const node of mutation.addedNodes) {
if (node.nodeName !== 'IFRAME') continue;
// Cross-origin iframes expose no contentDocument; access it safely so we
// don't throw a TypeError into the console on every added iframe.
let doc;
try { doc = node.contentDocument; } catch (_) { continue; }
if (!doc || !doc.documentElement || !doc.body) continue;
try {
const new_style_element = document.createElement("style");
new_style_element.textContent = generateDarkModeCSS();
new_style_element.id = "darkcss";
doc.body.classList.add("canvasrefined--darkmode--enabled");
doc.documentElement.prepend(new_style_element);
} catch (_) { /* cross-origin or detached frame: ignore */ }
}
}
};
iframeObserver = new MutationObserver(callback);
iframeObserver.observe(document.documentElement, { childList: true, subtree: true });
}
/*
Dashboard grades
*/
function insertGrades() {
if (options.dashboard_grades === true) {
grades.then(data => {
try {
let cards = document.querySelectorAll('.ic-DashboardCard');
if (cards.length === 0 || cards[0].querySelectorAll(".ic-DashboardCard__link").length === 0) return;
for (let i = 0; i < cards.length; i++) {
let course_id = parseInt(cards[i].querySelector(".ic-DashboardCard__link").href.split("courses/")[1]);
data.forEach(grade => {
if (course_id === grade.id) {
let gradepercent = grade.enrollments[0].has_grading_periods === true ? grade.enrollments[0].current_period_computed_current_score : grade.enrollments[0].computed_current_score;
//let gradepercent = grade.enrollments[0].computed_current_score;
let percent = (gradepercent || "--") + "%";
let gradeContainer = cards[i].querySelector(".canvasrefined-card-grade") || makeElement("a", cards[i].querySelector(".ic-DashboardCard__header"), { "className": "canvasrefined-card-grade", "textContent": percent });
if (options.grade_hover === true) {
gradeContainer.classList.add("canvasrefined-hover-only");
} else {
gradeContainer.classList.remove("canvasrefined-hover-only");
}
gradeContainer.setAttribute("href", `${domain}/courses/${course_id}/grades`);
gradeContainer.style.display = "block";
}
});
}
} catch (e) {
logError(e);
}
});
} else {
document.querySelectorAll('.canvasrefined-card-grade').forEach(grade => {
grade.style.display = "none";
});
}
}
/*
Card assignments
*/
function createCardAssignment(assignment) {
let assignmentContainer = document.createElement("div");
assignmentContainer.className = "canvasrefined-assignment-container";
let assignmentName = makeElement("a", assignmentContainer, { "className": "canvasrefined-assignment-link", "textContent": assignment.plannable.title, "href": assignment.html_url });
let assignmentDueAt = makeElement("span", assignmentContainer, { "className": "canvasrefined-assignment-dueat", "textContent": formatCardDue(new Date(assignment.plannable_date)) });
if (assignment.overdue === true) assignmentDueAt.classList.add("canvasrefined-assignment-overdue");
if (assignment?.submissions?.submitted === true) {
assignmentContainer.classList.add("canvasrefined-completed");
} else {
if (options.assignment_states[assignment.plannable_id]?.["crs"] === true) {
assignmentContainer.classList.add("canvasrefined-completed");
}
}
assignmentDueAt.addEventListener('mouseup', function () {
assignmentContainer.classList.toggle("canvasrefined-completed");
const status = assignmentContainer.classList.contains("canvasrefined-completed");
setAssignmentState(assignment.plannable_id, { "crs": status, "expire": assignment.plannable_date });
});
return assignmentContainer;
}
let cardAssignments;
/* Equal Height Cards: stretch each card's assignment area to match the tallest
one, using min-height so cards can still grow. */
let equalHeightResizeTimer = null;
function equalizeCardHeights() {
const cards = document.querySelectorAll(".ic-DashboardCard");
if (cards.length === 0) return;
const enabled = options.equal_height_cards === true && options.assignments_due === true;
// Clear prior min-height so we can measure fresh or fully reset.
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) area.style.removeProperty("min-height");
});
if (!enabled) return;
// Stretch each assignment area to the tallest one.
let maxHeight = 0;
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) maxHeight = Math.max(maxHeight, area.offsetHeight);
});
if (maxHeight > 0) {
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) area.style.minHeight = maxHeight + "px";
});
}
}
window.addEventListener("resize", () => {
if (equalHeightResizeTimer) clearTimeout(equalHeightResizeTimer);
equalHeightResizeTimer = setTimeout(equalizeCardHeights, 150);
});
function preloadAssignmentEls() {
return new Promise((resolve, reject) => {
let assignmentEls = {};
const now = new Date();
assignments.then((data) => {
data = combineAssignments(data);
data.forEach(item => {
let due = new Date(item.plannable_date);
item.overdue = now >= due;
let o = {
"submitted": item.submissions && item.submissions.submitted === true,
"override": item.planner_override && item.planner_override.marked_complete,
"type": item.plannable_type,
"due": due,
"el": createCardAssignment(item)
}
if (assignmentEls[item.course_id]) {
assignmentEls[item.course_id].push(o);
} else {
assignmentEls[item.course_id] = [o];
}
});
resolve(assignmentEls);
});
});
}
function loadCardAssignments() {
if (options.assignments_due !== true) {
document.querySelectorAll(".canvasrefined-card-assignment").forEach(card => {
card.style.display = "none";
});
equalizeCardHeights();
return;
}
setupCardAssignments();
cardAssignments.then(els => {
try {
let cards = document.querySelectorAll('.ic-DashboardCard');
if (cards.length === 0) return;
const now = new Date();
cards.forEach(card => {
let count = 0;
let link = card.querySelector(".ic-DashboardCard__link");
if (!link) return;
let course_id = link.href.split("courses/")[1];
let cardContainer = card.querySelector('.canvasrefined-card-container');
if (!cardContainer) return;
cardContainer.textContent = "";
if (cardContainer.parentElement) {
cardContainer.parentElement.style.display = "block";
}
if (els[course_id]) {
els[course_id].forEach(assignment => {
if (count >= options.num_assignments) return;
if (options.hide_completed_cards === true && assignment.submitted === true) return;
if ((options.card_overdues !== true && now >= assignment.due) || (options.card_overdues === true && assignment.submitted === true)) return;
if (assignment.type !== "assignment" && assignment.type !== "quiz" && assignment.type !== "discussion_topic") return;
if (assignment.override === true) return;
//assignment.el.querySelector(".canvasrefined-assignment-dueat").textContent = formatCardDue(assignment.due);
cardContainer.appendChild(assignment.el);
count++;
});
}
if (count === 0) {
let assignmentContainer = makeElement("div", cardContainer, { "className": "canvasrefined-assignment-container" });
let assignmentDivLink = makeElement("a", assignmentContainer, { "className": "canvasrefined-assignment-link", "textContent": "None" });
}
});
// Wait one frame so the browser lays out the freshly appended
// assignment rows before measuring/equalizing card heights.
requestAnimationFrame(equalizeCardHeights);
} catch (e) {
logError(e);
}
});
}
function setupCardAssignments() {
if (options.assignments_due !== true) return;
try {
let containersCount = document.querySelectorAll('.canvasrefined-card-container').length;
if (document.querySelectorAll('.ic-DashboardCard').length > 0 && containersCount > 0) return;
let cards = document.querySelectorAll('.ic-DashboardCard');
cards.forEach(card => {
let assignmentContainer = card.querySelector(".canvasrefined-card-assignment") || makeElement("div", card, { "className": "canvasrefined-card-assignment" });
let assignmentsDueHeader = card.querySelector(".canvasrefined-card-header-container") || makeElement("div", assignmentContainer, { "className": "canvasrefined-card-header-container" });
let assignmentsDueLabel = card.querySelector(".canvasrefined-card-header") || makeElement("h3", assignmentsDueHeader, { "className": "canvasrefined-card-header", "textContent": chrome.i18n.getMessage("due") });
let cardContainer = card.querySelector(".canvasrefined-card-container") || makeElement("div", assignmentContainer, { "className": "canvasrefined-card-container" });
let skeletonText = card.querySelector(".canvasrefined-skeleton-text") || makeElement("div", cardContainer, { "className": "canvasrefined-skeleton-text" });
});
} catch (e) {
logError(e);
}
}
/*
Card customization
*/
function getCardId(card) {
let link = card.querySelector(".ic-DashboardCard__link");
if (!link) return -1;
let href = link.href;
if (!href || !href.includes("courses/")) return -1;
let id = href.split("courses/")[1];
if (!id) return -1;
// no ~
if (!id.includes("~")) return id;
// has ~ but dashboard card method is used
if (options["custom_cards"][id]) return id;
// weird case, some canvases replace consecutive 0s with a ~ in the id
// but the number of 0s isn't consistent between schools
id = id.split("~");
let re = new RegExp(`${id[0]}0+${id[1]}`);
for (const c of Object.keys(options["custom_cards"])) {
if (c.match(re)) return c;
}
return -1;
}
function customizeCards(c = null) {
if (!options.custom_cards) return;
try {
let cards = c ? c : document.querySelectorAll('.ic-DashboardCard');
if (cards.length && cards.length > 0 && cards[0].querySelectorAll(".ic-DashboardCard__link").length === 0) return;
cards.forEach(card => {
const id = getCardId(card);
let cardOptions = options["custom_cards"][id] || null;
let cardOptions_2 = options["custom_cards_2"][id] || null;
if (!cardOptions) return;
// hide card
card.style.display = cardOptions.hidden === true ? "none" : "inline-block";
// card image
if (cardOptions.img === "none") {
let currentImg = card.querySelector(".ic-DashboardCard__header_image");
if (currentImg) {
card.querySelector(".ic-DashboardCard__header_hero").style.opacity = 1;
}
} else if (cardOptions.img !== "") {
let topColor = card.querySelector(".ic-DashboardCard__header_hero");
let container = card.querySelector(".ic-DashboardCard__header_image") || makeElement("div", card, { "className": "ic-DashboardCard__header_image" });
card.querySelector(".ic-DashboardCard__header").prepend(container);
container.appendChild(topColor);
container.style.backgroundImage = "url(\"" + cardOptions.img + "\")";
topColor.style.opacity = .5;
}
// card name
if (cardOptions.name !== "") {
card.querySelector(".ic-DashboardCard__header-title > span").textContent = cardOptions.name;
}
// card code
if (cardOptions.code !== "") {
card.querySelector(".ic-DashboardCard__header-subtitle").textContent = cardOptions.code;
}
// card links
let links = card.querySelectorAll(".ic-DashboardCard__action");
for (let i = links.length; i < 4; i++) {
makeElement("a", card.querySelector(".ic-DashboardCard__action-container"), { "className": "ic-DashboardCard__action" });
}
links = card.querySelectorAll(".ic-DashboardCard__action");
for (let i = 0; i < 4; i++) {
let img = links[i].querySelector(".canvasrefined-link-image") || makeElement("img", links[i], { "className": "canvasrefined-link-image" });
links[i].style.display = "inherit";
if (cardOptions_2.links[i].path === "none") {
links[i].style.display = "none";
} else if (cardOptions_2.links[i].is_default === false) {
links[i].href = cardOptions_2.links[i].path;
img.src = getCustomLinkImage(cardOptions_2.links[i].path);
if (links[i].querySelector(".ic-DashboardCard__action-layout")) links[i].querySelector(".ic-DashboardCard__action-layout").style.display = "none";
img.style.display = "block";
} else {
if (links[i].querySelector(".ic-DashboardCard__action-layout")) links[i].querySelector(".ic-DashboardCard__action-layout").style.display = "inherit";
img.style.display = "none";
}
img.addEventListener("error", () => {
img.src = "https://www.instructure.com/favicon.ico";
})
}
});
} catch (e) {
logError(e);
}
}
function getCustomLinkImage(path) {
if (path.includes("webassign.net")) {
return "https://www.cengage.com/favicon.ico";
} else if (path.includes("docs.google")) {
return "https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico";
} else {
let url = { "hostname": "instructure.com/" };
try {
url = new URL(path);
} catch (e) {
logError(e);
}
return "https://" + url.hostname + "/favicon.ico";;
}
}
/*
GPA calculator
*/
function calculateGPA2() {
let qualityPoints = 0, numCredits = 0, weightedQualityPoints = 0, cumulativePoints = 0, cumulativeCredits = 0;
document.querySelectorAll('.canvasrefined-gpa-course').forEach(course => {
const weight = course.querySelector('.canvasrefined-course-weight').value;
const credits = parseFloat(course.querySelector('.canvasrefined-course-credit').value);
const grade = parseFloat(course.querySelector('.canvasrefined-course-percent').value);
if (weight === "dnc" || !credits || !grade) return;
let letter = "--";
let gpa;
if (grade >= options.gpa_calc_bounds["A+"].cutoff) {
gpa = options.gpa_calc_bounds["A+"].gpa;
letter = "A+";
} else if (grade >= options.gpa_calc_bounds["A"].cutoff) {
gpa = options.gpa_calc_bounds["A"].gpa;
letter = "A";
} else if (grade >= options.gpa_calc_bounds["A-"].cutoff) {
gpa = options.gpa_calc_bounds["A-"].gpa;
letter = "A-";
} else if (grade >= options.gpa_calc_bounds["B+"].cutoff) {
gpa = options.gpa_calc_bounds["B+"].gpa;
letter = "B+";
} else if (grade >= options.gpa_calc_bounds["B"].cutoff) {
gpa = options.gpa_calc_bounds["B"].gpa;
letter = "B";
} else if (grade >= options.gpa_calc_bounds["B-"].cutoff) {
gpa = options.gpa_calc_bounds["B-"].gpa;
letter = "B-"
} else if (grade >= options.gpa_calc_bounds["C+"].cutoff) {
gpa = options.gpa_calc_bounds["C+"].gpa;
letter = "C+";
} else if (grade >= options.gpa_calc_bounds["C"].cutoff) {
gpa = options.gpa_calc_bounds["C"].gpa;
letter = "C";
} else if (grade >= options.gpa_calc_bounds["C-"].cutoff) {
gpa = options.gpa_calc_bounds["C-"].gpa;
letter = "C-";
} else if (grade >= options.gpa_calc_bounds["D+"].cutoff) {
gpa = options.gpa_calc_bounds["D+"].gpa;
letter = "D+";
} else if (grade >= options.gpa_calc_bounds["D"].cutoff) {
gpa = options.gpa_calc_bounds["D"].gpa;
letter = "D";
} else if (grade >= options.gpa_calc_bounds["D-"].cutoff) {
gpa = options.gpa_calc_bounds["D-"].gpa;
letter = "D-";
} else {
letter = "F";
gpa = options.gpa_calc_bounds["F"].gpa;
}
course.querySelector(".canvasrefined-gpa-letter-grade").textContent = letter;
let weightMultiplier = 0;
if (weight === "ap") {
weightMultiplier = 1;
} else if (weight === "honors") {
weightMultiplier = .5;
}
qualityPoints += gpa * credits;
weightedQualityPoints += (gpa + weightMultiplier) * credits;
numCredits += credits;
});
document.querySelector("#canvasrefined-gpa-unweighted").textContent = (qualityPoints / numCredits).toFixed(2);
document.querySelector("#canvasrefined-gpa-weighted").textContent = (weightedQualityPoints / numCredits).toFixed(2);
const cGPA = document.querySelector("#canvasrefined-cumulative-gpa");
const g = parseFloat(cGPA.querySelector(".canvasrefined-course-percent").value);
const c = parseInt(cGPA.querySelector(".canvasrefined-course-credit").value);
document.querySelector("#canvasrefined-gpa-cumulative").textContent = (((options.gpa_calc_weighted === true ? weightedQualityPoints : qualityPoints) + (g * c)) / (numCredits + c)).toFixed(2);
}
function changeGPASettings(course_id, update) {
calculateGPA2();
chrome.storage.sync.get(["custom_cards", "cumulative_gpa"], storage => {
if (course_id === "cumulative") {
chrome.storage.sync.set({ "cumulative_gpa": { ...storage["cumulative_gpa"], ...update } });
} else {
chrome.storage.sync.set({ "custom_cards": { ...storage["custom_cards"], [course_id]: { ...storage["custom_cards"][course_id], ...update } } });
}
});
}
function createGPACalcCourse(location, course) {
let customs;
if (course.access_restricted_by_date === true) {
return null;
} if (course.id === "cumulative") {
customs = options["cumulative_gpa"];
} else if (options.custom_cards && options.custom_cards[course.id]) {
customs = options.custom_cards[course.id];
} else {
return;
customs = { "name": course.name, "hidden": false, "weight": "regular", "credits": 1, "gr": null };
}
if (customs.hidden === true) return;
let courseContainer = makeElement("div", location, { "className": course.id === "cumulative" ? "canvasrefined-gpa-cumulative" : "canvasrefined-gpa-course", "innerHTML": '' });
let courseName = makeElement("p", courseContainer, { "className": "canvasrefined-gpa-name", "textContent": customs.name === "" ? course.course_code : customs.name });
let changerContainer = makeElement("div", courseContainer, { "className": "canvasrefined-gpa-percent-container" });
let credits = makeElement("div", courseContainer, { "className": "canvasrefined-course-credits", "innerHTML": 'cr' });
let creditsChanger = credits.querySelector(".canvasrefined-course-credit");
creditsChanger.value = customs.credits;
let changer = makeElement("input", changerContainer, { "className": "canvasrefined-course-percent" });
let percent = makeElement("span", changerContainer, { "className": "canvasrefined-course-percent-sign", "textContent": course.id === "cumulative" ? "/4" : "%" });
let courseGrade = course?.enrollments[0].has_grading_periods === true ? course.enrollments[0].current_period_computed_current_score : course.enrollments[0].computed_current_score;
if (customs["gr"] !== null) {
changer.value = customs["gr"];
} else if (courseGrade) {
changer.value = courseGrade;
} else {
changer.value = "--";
}
if (course.id !== "cumulative") {
let weightSelections = makeElement("form", courseContainer, { "className": "canvasrefined-course-weights" });
weightSelections.innerHTML = '';
let weightChanger = weightSelections.querySelector(".canvasrefined-course-weight");
weightChanger.value = changer.value === "--" ? "dnc" : customs.weight;
weightChanger.addEventListener('change', () => changeGPASettings(course.id, { "weight": weightSelections.querySelector(".canvasrefined-course-weight").value }));
let useCustomGr = makeElement("input", courseContainer, { "className": "canvasrefined-course-customgr", "type": "checkbox", "checked": customs.gr !== null ? true : false });
let useCustomGrLabel = makeElement("span", courseContainer, { "className": "canvasrefined-course-customgr-label", "textContent": "Save custom grade" });
useCustomGr.addEventListener("input", () => {
if (options["custom_cards"][course.id]) {
if (options["custom_cards"][course.id]["gr"] !== undefined && options["custom_cards"][course.id]["gr"] !== null) {
changer.value = courseGrade;
changeGPASettings(course.id, { "gr": null });
} else {
changeGPASettings(course.id, { "gr": changer.value });
}
}
});
}
changer.addEventListener('input', (e) => {
if (course.id === "cumulative" || (options["custom_cards"][course.id]["gr"] !== undefined && options["custom_cards"][course.id]["gr"] !== null)) {
changeGPASettings(course.id, { "gr": e.target.value });
} else {
calculateGPA2();
}
});
credits.querySelector(".canvasrefined-course-credit").addEventListener('input', () => changeGPASettings(course.id, { "credits": credits.querySelector(".canvasrefined-course-credit").value }));
return courseContainer;
}
function setupGPACalc() {
if (current_page !== "/" && current_page !== "") return;
try {
grades?.then(result => {
const sortableContainer = document.querySelector(".ic-DashboardCard__box__container");
const dashboardContainer = sortableContainer || document.querySelector("#DashboardCard_Container");
if (!dashboardContainer) return;
let container2 = document.querySelector(".canvasrefined-gpa-card");
let container = document.querySelector(".canvasrefined-gpa");
const alreadyRendered = container2?.dataset?.canvasrefinedGpaRendered === "true" && container?.dataset?.canvasrefinedGpaRendered === "true";
if (!container2) {
container2 = document.createElement("div");
container2.className = "canvasrefined-gpa-card";
}
if (!container) {
container = document.createElement("div");
container.className = "canvasrefined-gpa";
}
container2.style.display = options.gpa_calc === true ? "inline-block" : "none";
if (!alreadyRendered) {
container2.innerHTML = `
GPA
Current
Weighted
Cumulative
GPA Calculator
';
if (options.gpa_calc_prepend === true) {
dashboardContainer.prepend(container2);
dashboardContainer.prepend(container);
} else {
dashboardContainer.appendChild(container2);
dashboardContainer.appendChild(container);
}
let location = document.querySelector(".canvasrefined-gpa-courses");
if (!location) return;
let cumulative = createGPACalcCourse(location, { "id": "cumulative", "enrollments": [{ "has_grading_periods": true, "current_period_computed_current_score": 0 }] });
cumulative.id = "canvasrefined-cumulative-gpa";
result.forEach(course => createGPACalcCourse(location, course));
container.style.display = "none";
editBtn.addEventListener("click", () => {
if (container.style.display === "none") {
container.style.display = "inline-block";
editBtn.textContent = "Close Calculator";
} else {
container.style.display = "none";
editBtn.textContent = "Edit Calculator";
}
});
container2.dataset.canvasrefinedGpaRendered = "true";
container.dataset.canvasrefinedGpaRendered = "true";
} else {
const weighted = container2.querySelector("#canvasrefined-gpa-weighted")?.parentElement;
const cumulative = container2.querySelector("#canvasrefined-gpa-cumulative")?.parentElement;
if (weighted) weighted.style.display = options.gpa_calc_weighted ? "block" : "none";
if (cumulative) cumulative.style.display = options.gpa_calc_cumulative ? "block" : "none";
const shouldPrepend = options.gpa_calc_prepend === true;
if (shouldPrepend) {
if (dashboardContainer.children[0] !== container || dashboardContainer.children[1] !== container2) {
dashboardContainer.insertBefore(container, dashboardContainer.firstChild);
dashboardContainer.insertBefore(container2, container.nextSibling);
}
} else {
if (dashboardContainer.lastElementChild !== container || container2.nextElementSibling !== container) {
dashboardContainer.appendChild(container2);
dashboardContainer.appendChild(container);
}
}
}
try {
if (sortableContainer && window.jQuery && window.jQuery.fn && window.jQuery.fn.sortable) {
window.jQuery(sortableContainer).sortable('refresh');
}
} catch (e) {}
calculateGPA2();
});
} catch (e) {
logError(e);
}
}
/*
Dashboard notes
*/
let dashboardNotesTimer;
function delayDashboardNotesStorage(text) {
clearTimeout(dashboardNotesTimer);
dashboardNotesTimer = setTimeout(() => {
chrome.storage.sync.set({ dashboard_notes_text: text });
}, 250);
}
/* Fallback Markdown renderer used only if js/markdown.js failed to load. */
function crRenderMarkdownFallback(src) {
if (src == null) return "";
const escapeHtml = (s) => String(s).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
const sanitizeUrl = (u) => {
const v = String(u == null ? "" : u).trim();
if (!v) return "";
if (/^(https?:|mailto:|ftp:|tel:)/i.test(v)) return v;
if (/^(javascript:|vbscript:|file:|data:)/i.test(v)) return "#";
if (/^[#/?]/.test(v)) return v;
if (/^[a-z][a-z0-9+.-]*:/i.test(v)) return "#";
return v;
};
let text = String(src).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
const out = [];
const lines = text.split("\n");
let i = 0;
let taskSeq = 0; // ordinal of rendered task items, stable across code-block stashing
const inline = (t) => {
let h = escapeHtml(t);
h = h.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (m, alt, url, title) =>
`
${c}`);
h = h.replace(/\*\*([^*]+?)\*\*/g, "$1");
h = h.replace(/~~([^~]+?)~~/g, ""); i++; continue; } if (/^>\s?/.test(line)) { const q = []; while (i < lines.length && /^>\s?/.test(lines[i])) { q.push(inline(lines[i].replace(/^>\s?/, ""))); i++; } out.push(`
${q.join("`); continue; } if (/^\s*[-*+]\s+/.test(line)) { const items = []; while (i < lines.length) { const m = lines[i].match(/^\s*[-*+]\s+(.*)$/); if (!m) break; const tk = m[1].match(/^\[([ xX])\]\s+(.*)$/); if (tk) { items.push(`
")}
- ${items.join("")}
- ${items.join("")}
${para.map(inline).join("
")}