Add custom layout feature

tdx-enhanced.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         tdx-enhanced
 // @namespace    ecn
-// @version      2025-02-03-01
+// @version      2025-02-04-01
 // @description  enhanced tdx coloring & formatting. follows system color scheme.
 // @author       Purdue STEM IT - it@purdue.edu
 // @match        https://service.purdue.edu/TDNext/*
@@ -359,6 +359,46 @@
         }
     }
 
+    function parseOtherElements() {
+        let path = document.location.pathname
+
+        let desktopLayout = settings('get','layout')
+        let desktop = document.querySelector("#divContent")
+        if (desktop && desktopLayout) {
+            let col1 = desktop.querySelector("#Column1")
+            let col2 = desktop.querySelector("#Column2")
+            let col3 = desktop.querySelector("#Column3")
+
+            //100% / 33-66%
+            if (desktopLayout=="1_100-66-33" && col2 && col3) {
+                console.log("Applying layout:",desktopLayout)
+
+                //define width classes
+                let col2WidthClass = "col-md-8"
+                let col3WidthClass = "col-md-4"
+
+                //resize column 2
+                for (const cls of col2.classList) {
+                    if (cls.startsWith("col-md")) {
+                        console.log("Found col2 width class:",cls)
+                        col2.classList.remove(cls)
+                        col2.classList.add(col2WidthClass)
+                        break
+                    }
+                }
+
+                //resize column 3
+                for (const cls of col3.classList) {
+                    if (cls.startsWith("col-md")) {
+                        col3.classList.remove(cls)
+                        col3.classList.add(col3WidthClass)
+                        break
+                    }
+                }
+            }
+        }
+    }
+
     function invertHex(hex) {
       return (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase()
     }
@@ -993,6 +1033,13 @@
                         </div>
                     </div>
                 </div>
+                <div>
+                    <h5>Layout</h5>
+                    <select name="layout" id="layout">
+                        <option value="default">Default</option>
+                        <option value="1_100-66-33">100% / 66-33%</option>
+                    </select>
+                </div>
                 <div>
                     <h4>Link Behavior</h4>
                     <input type="radio" id="linkBehavior-windows" name="linkBehavior" value="windows">
@@ -1240,6 +1287,7 @@
     settings("apply")
     parseTicket()
     checkPath()
+    parseOtherElements()
 
     addEventListener("storage", (event) => {
         //console.log("Storage event:",event)
@@ -2463,6 +2511,12 @@ div.feed-entry {
     border: 1px solid var(--border-0);
 }
 
+/* CUSTOM LAYOUTS */
+
+.layout-container {
+    display: flow-root;
+}
+
 
     `