From 6de8da162459ca0e7318a3da9ecc6065e13b524b Mon Sep 17 00:00:00 2001
From: AdoreJC <admin@sichenjack.com>
Date: Mon, 30 Sep 2024 20:03:59 -0500
Subject: [PATCH] Fix issue #78, custom images not working in list view.

---
 js/content.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/js/content.js b/js/content.js
index 2075f99c..0931e763 100644
--- a/js/content.js
+++ b/js/content.js
@@ -170,6 +170,7 @@ function applyOptionsChanges(changes) {
             case ("custom_cards_2"):
             case ("custom_cards_3"):
                 customizeCards();
+                customizeGroupingCards();
                 break;
             case ("todo_hr24"):
             case ("num_todo_items"):
@@ -244,6 +245,27 @@ function checkDashboardReady() {
                         setupBetterTodo();
                         loadBetterTodo();
                     }
+                } else if (mutation.target == document.querySelector('#dashboard-planner')) {
+                    // listen to dom node add when scrolling up and down
+                    const observer1 = new MutationObserver(mutations => {
+                        mutations.forEach(mutation => {
+                            if (mutation.addedNodes.length > 0) {
+                                mutation.addedNodes.forEach(addedNode => {
+                                    if (addedNode.querySelectorAll) {
+                                        let newGroupings = addedNode.querySelectorAll('.planner-grouping');
+                                        if (newGroupings.length > 0) {
+                                            customizeGroupingCards(newGroupings);
+                                        }
+                                    }
+                                });
+                            }
+                        });
+                    });
+                    // listen to dom changes
+                    const targetNode = document.querySelector('#dashboard-planner');
+                    if (targetNode) {
+                        observer1.observe(targetNode, { childList: true, subtree: true });
+                    }
                 }
             }
         }
@@ -1434,6 +1456,28 @@ function getCardId(card) {
     return -1;
 }
 
+// Get course id in list view for custom settings
+function getGroupingCardId(card) {
+    let hrefElement = card.querySelector(".Grouping-styles__heroHover");
+    if (!hrefElement || !hrefElement.href) return -1;
+
+    let id = hrefElement.href.split("courses/")[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 {
@@ -1505,6 +1549,37 @@ function customizeCards(c = null) {
     }
 }
 
+// Custom the card in list view
+function customizeGroupingCards(c = null) {
+    if (!options.custom_cards) return;
+    try {
+        let cards = c ? c : document.querySelectorAll('.Grouping-styles__heroHover');
+        if (cards.length === 0 || cards[0].querySelectorAll(".Grouping-styles__heroHover").length === 0) return;
+
+        cards.forEach(card => {
+            const id = getGroupingCardId(card);
+            let cardOptions = options["custom_cards"][id] || null;
+            if (!cardOptions) return;
+
+            if (cardOptions.img === "none") {
+                let currentImg = card.querySelector(".Grouping-styles__heroHover");
+                if (currentImg) {
+                    card.querySelector(".Grouping-styles__overlay").style.opacity = 1;
+                }
+            } else if (cardOptions.img !== "") {
+                let topColor = card.querySelector(".Grouping-styles__overlay");
+                let container = card.querySelector(".Grouping-styles__heroHover");
+                if (container) {
+                    container.style.backgroundImage = "url(\"" + cardOptions.img + "\")";
+                    topColor.style.opacity = 0.5;
+                }
+            }
+        });
+    } catch (e) {
+        logError(e);
+    }
+}
+
 function getCustomLinkImage(path) {
     if (path.includes("webassign.net")) {
         return "https://www.cengage.com/favicon.ico";
@@ -1805,7 +1880,7 @@ function applyAestheticChanges() {
     style.textContent = "";
     if (options.condensed_cards === true) style.textContent += ".ic-DashboardCard__header_hero {height:60px!important}.ic-DashboardCard__header-subtitle, .ic-DashboardCard__header-term{display:none}";
     if (options.remlogo === true) style.textContent += ".ic-app-header__logomark-container{display:none}";
-    if (options.disable_color_overlay === true) style.textContent += ".ic-DashboardCard__header_hero{opacity: 0!important} .ic-DashboardCard__header-button-bg{opacity: 1!important}";
+    if (options.disable_color_overlay === true) style.textContent += ".ic-DashboardCard__header_hero{opacity: 0!important} .ic-DashboardCard__header-button-bg{opacity: 1!important} .Grouping-styles__overlay{opacity: 0!important;}";
     if (options.hide_feedback === true) style.textContent += ".recent_feedback {display: none}";
     if (options.full_width === true) style.textContent += ".ic-Layout-wrapper{max-width:100%!important}";
     //if (options.full_width === true) style.textContent += ".ic-DashboardCard__link{position:absolute;top:0;left:0;max-width:100%;}.ic-DashboardCard__header_content{background:none!important;padding-top:18px;}.ic-DashboardCard{position:relative;width:333px}.bettercanvas-card-assignment{position:absolute;bottom:0;left:0;}.bettercanvas-assignment-container{background:none!important}.ic-DashboardCard__action-container{display:none}.ic-DashboardCard__header-title span{color:#fff!important;font-size:16px;margin-top:8px;}.ic-DashboardCard__header-term{display:none}";