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 todolist 1

Browse Source 
a lot of progress
This commit is contained in:
Guy Sandler 2026-04-16 22:21:05 -07:00
parent de2cb476a5
commit b362c05a45
1 changed files with 157 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
js/content.js
View File

@ -3,6 +3,8 @@ const current_page = window.location.pathname;
let assignments = null; let assignments = null;
let grades = null; let grades = null;
let announcements = []; let announcements = [];
let completed = [];
let assignmentsDue = [];
let options = {}; let options = {};
let timeCheck = null; let timeCheck = null;
let reminderCheck = null; let reminderCheck = null;
@ -706,22 +708,22 @@ async function getCards(api = null) {
Better todo list Better todo list
*/ */
function setAssignmentState(id, updates) { // function setAssignmentState(id, updates) {
let states = options.assignment_states; // let states = options.assignment_states;
let length = JSON.stringify(states).length; // let length = JSON.stringify(states).length;
// remove the oldest states if the size is approaching the storage limit // // remove the oldest states if the size is approaching the storage limit
if (length > 7400) { // if (length > 7400) {
let keys = Object.keys(states).sort((a, b) => states[b].expire - states[a].expire); // let keys = Object.keys(states).sort((a, b) => states[b].expire - states[a].expire);
keys.splice(-5); // keys.splice(-5);
let newStates = {}; // let newStates = {};
keys.forEach(key => { // keys.forEach(key => {
newStates[key] = states[key]; // newStates[key] = states[key];
}); // });
states = newStates; // states = newStates;
} // }
states[id] = states[id] ? { ...states[id], ...updates } : updates; // states[id] = states[id] ? { ...states[id], ...updates } : updates;
chrome.storage.sync.set({ assignment_states: states }).then(() => { cardAssignments = preloadAssignmentEls(); loadBetterTodo(); loadCardAssignments(); }); // chrome.storage.sync.set({ assignment_states: states }).then(() => { cardAssignments = preloadAssignmentEls(); loadBetterTodo(); loadCardAssignments(); });
} // }
function createTodoCreateBtn(location) { function createTodoCreateBtn(location) {
let confirmButton = makeElement("button", location, { "className": "bettercanvas-custom-btn", "textContent": "Create" }); let confirmButton = makeElement("button", location, { "className": "bettercanvas-custom-btn", "textContent": "Create" });
@ -782,68 +784,149 @@ function createTodoCreateBtn(location) {
}); });
} }
function createTodoHeader(location) { // better todo html layer 1
let todoHeader = makeElement("h2", location, { "className": "todo-list-header", "style": "display: flex; align-items:center; justify-content:space-between;" }); // function createTodoHeader(location) {
//todoHeader.style = "display: flex; align-items:center; justify-content:space-between;"; // let todoHeader = makeElement("h2", location, { "className": "todo-list-header", "style": "display: flex; align-items:center; justify-content:space-between;" });
if (!options.custom_cards || Object.keys(options.custom_cards).length === 0) return; // //todoHeader.style = "display: flex; align-items:center; justify-content:space-between;";
let addFillout = makeElement("div", location, { "className": "bettercanvas-add-assignment" }); // if (!options.custom_cards || Object.keys(options.custom_cards).length === 0) return;
let now = new Date(); // let addFillout = makeElement("div", location, { "className": "bettercanvas-add-assignment" });
let year = now.getFullYear(); // let now = new Date();
let month = now.getMonth() + 1; // let year = now.getFullYear();
let day = now.getDate(); // let month = now.getMonth() + 1;
month = month < 10 ? "0" + month : month; // let day = now.getDate();
day = day < 10 ? "0" + day : day; // month = month < 10 ? "0" + month : month;
addFillout.innerHTML = '<input type="text" placeholder="Name" id="bettercanvas-custom-name" class="bettercanvas-custom-input"></input><select id="bettercanvas-custom-course" class="bettercanvas-custom-input"><option value="" disabled selected>Select course</option></select><div style="display: flex;gap:5px"><input type="date" id="bettercanvas-custom-date" class="bettercanvas-custom-input"></input><input type="time" id="bettercanvas-custom-time" class="bettercanvas-custom-input" value="23:59"></input></div>'; // day = day < 10 ? "0" + day : day;
addFillout.querySelector("#bettercanvas-custom-date").value = year + "-" + month + "-" + day; // addFillout.innerHTML = '<input type="text" placeholder="Name" id="bettercanvas-custom-name" class="bettercanvas-custom-input"></input><select id="bettercanvas-custom-course" class="bettercanvas-custom-input"><option value="" disabled selected>Select course</option></select><div style="display: flex;gap:5px"><input type="date" id="bettercanvas-custom-date" class="bettercanvas-custom-input"></input><input type="time" id="bettercanvas-custom-time" class="bettercanvas-custom-input" value="23:59"></input></div>';
let selectCourse = document.querySelector("#bettercanvas-custom-course"); // addFillout.querySelector("#bettercanvas-custom-date").value = year + "-" + month + "-" + day;
Object.keys(options.custom_cards).forEach(id => { // let selectCourse = document.querySelector("#bettercanvas-custom-course");
let card = options.custom_cards[id]; // Object.keys(options.custom_cards).forEach(id => {
let courseName = makeElement("option", selectCourse, { "className": "bettercanvas-select-course-option", "textContent": card.default }); // let card = options.custom_cards[id];
courseName.value = id; // let courseName = makeElement("option", selectCourse, { "className": "bettercanvas-select-course-option", "textContent": card.default });
}); // courseName.value = id;
// });
createTodoCreateBtn(addFillout); // createTodoCreateBtn(addFillout);
let headerText = makeElement("span", todoHeader, { "className": "bettercanvas-todo-header", "textContent": "To Do" }); // let headerText = makeElement("span", todoHeader, { "className": "bettercanvas-todo-header", "textContent": "To Do" });
let addButton = makeElement("button", todoHeader, { "className": "bettercanvas-custom-btn", "textContent": "+ Add" }); // let addButton = makeElement("button", todoHeader, { "className": "bettercanvas-custom-btn", "textContent": "+ Add" });
addButton.addEventListener("click", () => { // addButton.addEventListener("click", () => {
addFillout.classList.toggle("bettercanvas-custom-open"); // addFillout.classList.toggle("bettercanvas-custom-open");
}); // });
headerText.addEventListener("click", () => { // headerText.addEventListener("click", () => {
if (filter === "todo") { // if (filter === "todo") {
filter = "done"; // filter = "done";
headerText.textContent = "Done"; // headerText.textContent = "Done";
} else { // } else {
filter = "todo"; // filter = "todo";
headerText.textContent = "To Do"; // headerText.textContent = "To Do";
} // }
moreAssignmentCount = 0; // moreAssignmentCount = 0;
moreAnnouncementCount = 0; // moreAnnouncementCount = 0;
loadBetterTodo(); // loadBetterTodo();
}); // });
// }
function convertToDueDate(dueAt) {
// "2026-04-13T15:30:00Z" to Apr 4 at 3:30 PM
final = "due "
let date = new Date(dueAt);
final += date.toLocaleString("en-US", { month: "short", day: "numeric" });
final += " at " + date.toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true });
return final;
} }
// better todo html
betterTodoFilter = "tasks"
async function createTodoSections(location) {
// make outer
let filterControl = makeElement("div", location, { "id": "better-todo-filter" });
filterControl.innerHTML =
`<div id="filterbuttongroup" style="color:black">
<button id="announcement">announcement</button>
<button id="assignments">assignments</button>
<button id="completed">completed</button>
</div>`;
let header = makeElement("div", location, { id: "better-todo-header" });
header.style =
"display: flex; align-items:center; justify-content:space-between;";
header.innerHTML = "<h2>Tasks</h2><h2>Wed Apr 8</h2>";
let mainSection = makeElement("div", location, {
id: "better-todo-main",
});
mainSection.style = "display:flex;flex-direction:column;gap:10px;margin-top:10px;";
assignments.then(data => {
// types: announcement
console.log(data);
data.forEach(item => {
announcements = data.filter(item => item.plannable_type == "announcement");
// announcements.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date));
assignmentsDue = data.filter((item) => item.plannable_type == "assignment" && !item.submissions.submitted);
// assignmentsDue.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date));
completed = data.filter(item => item.plannable_type == "assignment" && item.submissions.submitted);
// completed.sort((a, b) => new Date(a.plannable_date) - new Date(b.plannable_date));
});
function createTodoSections(location) { if (betterTodoFilter == "tasks") {
let todoHeader = createTodoHeader(location); assignmentsDue.forEach((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";
let todoAssignments = makeElement("ul", location, { "id": "bettercanvas-todo-list" }); let assignment = makeElement("div", mainSection, {
/* class: "better-todo-assignment",
let todoAssignments = document.createElement("ul"); });
todoAssignments.id = "bettercanvas-todo-list"; // assignment.innerHTML = `
location.appendChild(todoAssignments); // <div style="width:10px;height:10px;background-color:${courseColor}">${courseColor}</div>
*/ // <a href="${domain + item.html_url}">${item.plannable.title}</a>\
let announcementHeader = makeElement("h2", location, { "className": "todo-list-header", "textContent": "Announcements" }); // <span>${new Date(item.plannable_date).toLocaleString()}</span>
let todoAnnouncements = makeElement("ul", location, { "id": "bettercanvas-announcement-list" }); // `;
/* assignment.innerHTML = `
let todoAnnouncements = document.createElement("ul"); <div style="display:flex;align-items:center;gap:5px;width:100%;height:60px;background:var(--bcbackground-1);border-radius:5px;">
todoAnnouncements.id = "bettercanvas-announcement-list"; <div style="width:40px;display:flex;align-items:center;justify-content:center;background-color:${courseColor};height:100%;border-radius:5px 0 0 5px;">
location.appendChild(todoAnnouncements); <div style="width:20px;height:20px;">
*/ <svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
let loader = '<div class="bettercanvas-todo-item-loader"><div style="width: 100px" class="bettercanvas-skeleton-text"></div><div style="width: 200px" class="bettercanvas-skeleton-text"></div><div class="bettercanvas-skeleton-text"></div></div>'; <g id="SVGRepo_bgCarrier" stroke-width="1"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
for (let i = 0; i < options.num_todo_items; i++) { <g id="SVGRepo_iconCarrier">
todoAssignments.innerHTML += loader; <path d="M1468.214 0v551.145L840.27 1179.089c-31.623 31.623-49.693 74.54-49.693 119.715v395.289h395.288c45.176 0 88.093-18.07 119.716-49.694l162.633-162.633v438.206H0V0h1468.214Zm129.428 581.3c22.137-22.136 57.825-22.136 79.962 0l225.879 225.879c22.023 22.023 22.023 57.712 0 79.848l-677.638 677.637c-10.616 10.503-24.96 16.49-39.98 16.49H903.516v-282.35c0-15.02 5.986-29.364 16.49-39.867Zm-920.005 548.095H338.82v112.94h338.818v-112.94Zm225.88-225.879H338.818v112.94h564.697v-112.94Zm734.106-202.5-89.561 89.56 146.03 146.031 89.562-89.56-146.031-146.031Zm-508.228-362.197H338.82v338.818h790.576V338.82Z" fill-rule="evenodd"></path>
todoAnnouncements.innerHTML += loader; </g></svg>
} </div>
</div>
<div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;">
<div style="display:flex;flex-direction:column;gap:3px;">
<span style="color:${courseColor};font-size:12px;margin-top:-2px;">${item.context_name}</span>
<a href="${domain + item.html_url}" style="color:inherit;text-decoration:none;font-weight:bold;text-overflow:ellipsis;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-5px;">${item.plannable.title}</a>
<span style="color:gray;font-size:12px;margin-top:-5px;">${convertToDueDate(item.plannable.due_at)}</span>
</div>
</div>
</div>
`;
});
}
})
// let todoHeader = createTodoHeader(location);
// let todoAssignments = makeElement("ul", location, { "id": "bettercanvas-todo-list" });
// /*
// let todoAssignments = document.createElement("ul");
// todoAssignments.id = "bettercanvas-todo-list";
// location.appendChild(todoAssignments);
// */
// let announcementHeader = makeElement("h2", location, { "className": "todo-list-header", "textContent": "Announcements" });
// let todoAnnouncements = makeElement("ul", location, { "id": "bettercanvas-announcement-list" });
// /*
// let todoAnnouncements = document.createElement("ul");
// todoAnnouncements.id = "bettercanvas-announcement-list";
// location.appendChild(todoAnnouncements);
// */
// let loader = '<div class="bettercanvas-todo-item-loader"><div style="width: 100px" class="bettercanvas-skeleton-text"></div><div style="width: 200px" class="bettercanvas-skeleton-text"></div><div class="bettercanvas-skeleton-text"></div></div>';
// for (let i = 0; i < options.num_todo_items; i++) {
// todoAssignments.innerHTML += loader;
// todoAnnouncements.innerHTML += loader;
// }
} }
function createTodoViewMore(location, type) { function createTodoViewMore(location, type) {
@ -860,6 +943,7 @@ function createTodoViewMore(location, type) {
}); });
} }
// better todo init
function setupBetterTodo() { function setupBetterTodo() {
if (options.better_todo !== true) return; if (options.better_todo !== true) return;
if (document.querySelector('#bettercanvas-todo-list')) return; if (document.querySelector('#bettercanvas-todo-list')) return;