fix embeds, headings, and sticky columns

tdx-enhanced.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         tdx-enhanced
 // @namespace    purdue-it
-// @version      2025-05-29-558
+// @version      2025-05-29-570
 // @description  enhanced tdx coloring & formatting. follows system color scheme.
 // @author       Purdue STEM IT - it@purdue.edu
 // @match        https://service.purdue.edu/TDWorkManagement*
@@ -84,7 +84,7 @@
 
     /* BEGIN FUNCTIONS */
 
-    function updateHeading(mutation,numItems,totalItems) {
+    function updateHeading(mutation) {
         let headings = mutation.querySelectorAll(".tdx-control-bar__title")
 
         for (const heading of headings) {
@@ -105,7 +105,7 @@
                     let title = document.createElement("h4")
                     title.classList = heading.classList
                     title.innerText = embedData.name
-                    let moduleBody = heading.parentNode.parentNode.querySelector(".ModuleContent")
+                    let moduleBody = heading.parentNode.parentNode.parentNode.querySelector(".tdx-widget")
                     let embed = document.createElement("iframe")
                     embed.classList = "customEmbed"
                     embed.src = embedData.url
@@ -376,9 +376,10 @@
         //apply sticky columns
         let stickyColumns = settings('get','stickyColumns')
         if (stickyColumns) {
-            [...document.querySelectorAll(".desktop-column")].forEach(column=>{
+            [...document.querySelectorAll(".tdx-dashboard__column")].forEach(column=>{
                 column.style.position = "sticky"
-                column.style.top = "45px"
+                column.style.alignSelf = "flex-start"
+                column.style.top = "4px"
             });
         }
     }
@@ -393,9 +394,6 @@
         let table = element.querySelector("table")
         let items = [];
 
-        var numItems = null
-        var totalItems = null
-
         if (table) {
             let headers = [];
             //console.log("Table",table);
@@ -437,25 +435,9 @@
                 //being coloring
                 parseItem(item)
             })
-
-            //update panel heading above table
-            numItems = items.length
-            //totalItems = null
-
-            /*
-            let pagination = t.querySelector(".pull-right .bootstrap-pagination-label")
-            if (pagination) {
-                let pTxt = pagination.innerText
-                pTxt = pTxt.split(" ")[0]
-                totalItems = pTxt
-            }
-            */
-
-
-            //console.log("Items:",items)
         }
 
-        updateHeading(element,numItems,totalItems)
+        //updateHeading(element)
     }
 
     function createHighlightBubble(element,bgColor,txtColor) {
@@ -775,7 +757,6 @@
             //attempt color coded tables on non-desktop pages
             let tables = frame.querySelectorAll("table");
             [...tables].forEach(table=>{
-                console.log("Table in frame:",table,table.parentElement)
                 parseTable(table.parentElement)
             })
 
@@ -813,10 +794,16 @@
                 parseTicket(t.querySelectorAll(".feed-reply"))
             }
 
+            //parse dashboard widgets
             if (t.id=="tdx-workmgmt-container-collection") {
                 parseOtherElements()
             }
 
+            let module = t.querySelector("div > .tdx-dashboard__widget-container")
+            if (module) {
+                updateHeading(t)
+            }
+
             //search whole document, frames may reset when reopened
             let frames = document.querySelectorAll("iframe")
             if (frames) {
@@ -1000,11 +987,6 @@
                     </div>
                 </div>
                 <div>
-                    <h3>Layout</h3>
-                    <select name="layout" id="layout">
-                        <option value="default">Default</option>
-                        <option value="1_100-66-33">100% / 66-33%</option>
-                    </select>
                     <div>
                         <input type="checkbox" id="stickyColumns" name="stickyColumns" value="enabled" />
                         <label for="stickyColumns">Sticky Columns</label>
@@ -1162,13 +1144,15 @@
                     }
 
                     console.log("Apply setting:",setting,value)
-                    if (form) {
-                        let elements = form.elements
-                        form[setting].value = value
-                        if (form[setting].type=="checkbox") {
-                            form[setting].checked = value=="enabled" ? true : false
+                    try {
+                        if (form) {
+                            let elements = form.elements
+                            form[setting].value = value
+                            if (form[setting].type=="checkbox") {
+                                form[setting].checked = value=="enabled" ? true : false
+                            }
                         }
-                    }
+                    } catch {}
                 }
 
                 if ('colorMode' in data) {
@@ -2385,6 +2369,17 @@ span.input-group-btn .btn-default {
     border-color: var(--col-300);
 }
 
+.tdx-tile-list__item-container,
+.tdx-tile-list__item-container:visited {
+    background-color: var(--col-100) !important;
+    color: var(--col-400) !important;
+}
+
+.tdx-tile-list__item-container:hover, .tdx-tile-list__item-container:focus {
+    background-color: var(--col-400) !important;
+    color: var(--col-100) !important;
+}
+
 .btn-primary {
     background-color: var(--col-600);
     color: var(--txt-5);