bugfixes

modern-bas.user.js

@@ -1,10 +1,13 @@
 // ==UserScript==
 // @name         BAS - Modern Style Toggle
 // @namespace    https://git.ntnu.no/M365-Drift/MonkeyMagic
-// @version      1.0.5
+// @version      1.0.8
 // @description  Apply modern styling to BAS/Cereweb with toggle between modern and classic
 // @author       Øyvind Nilsen (on@ntnu.no)
 // @match        https://bas.ntnu.no/*
+// @exclude      https://bas.ntnu.no/groupadmin/*
+// @exclude      https://bas.ntnu.no/userclient/*
+// @exclude      https://bas.ntnu.no/login
 // @resource     modernCSS https://raw.git.ntnu.no/M365-Drift/MonkeyMagic/main/modern-bas.css
 // @grant        GM_addStyle
 // @grant        GM_getResourceText
@@ -19,50 +22,19 @@
 
     let modernStyleElement = null;
     let isModernMode = GM_getValue('modernMode', true); // Default to modern
-
+    const helpLinkDiv = document.getElementById('help_link');
     // Create toggle button
     function createToggleButton() {
-        const toggleButton = document.createElement('div');
-        toggleButton.id = 'bas-style-toggle';
-        toggleButton.innerHTML = `
-            <button id="style-toggle-btn" style="
-                position: fixed;
-                top: 10px;
-                right: 10px;
-                z-index: 10000;
-                background: ${isModernMode ? '#0d6efd' : '#6c757d'};
-                color: white;
-                border: none;
-                border-radius: 6px;
-                padding: 8px 16px;
-                font-size: 14px;
-                font-weight: 500;
-                cursor: pointer;
-                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-                transition: all 0.3s ease;
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            ">
-                ${isModernMode ? '🎨 Modern' : '📰 Classic'}
-            </button>
-        `;
-
-        // Add hover effects
-        const button = toggleButton.querySelector('#style-toggle-btn');
-        button.addEventListener('mouseenter', () => {
-            button.style.transform = 'scale(1.05)';
-            button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)';
-        });
-
-        button.addEventListener('mouseleave', () => {
-            button.style.transform = 'scale(1)';
-            button.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
-        });
-
-        // Add click handler
-        button.addEventListener('click', toggleStyle);
-
-        document.body.appendChild(toggleButton);
-        return button;
+        // Create and append style link if it doesn't exist
+        if (helpLinkDiv && !document.getElementById('modern-style-toggler')) {
+            const styleToggleLink = document.createElement('a');
+            var ToggleText = isModernMode ? 'Style: Modern' : 'Style: Classic';
+            styleToggleLink.innerText = ToggleText;
+            styleToggleLink.href = '#';
+            styleToggleLink.id = 'modern-style-toggler';
+            styleToggleLink.addEventListener('click', toggleStyle);
+            helpLinkDiv.appendChild(styleToggleLink);
+        }
     }
 
     function applyModernStyle() {
@@ -87,23 +59,26 @@
             }
         });
 
+
         // Create and append logout link
         const loggedinDiv = document.getElementsByClassName("loggedin")[0];
         if (loggedinDiv) {
             const logoutLink = loggedinDiv.querySelector('a.logoutlink');
-            const helpLinkDiv = document.getElementById('help_link');
+
 
             if (logoutLink && helpLinkDiv) {
                 // Avoid duplicating the link
                 if (!helpLinkDiv.querySelector('a[href="/logout"]')) {
                     const newLogoutLink = document.createElement('a');
                     newLogoutLink.href = logoutLink.href;
-                    const usr_name = document.getElementsByClassName("loggedin")[0].innerText.split(' ')[0]
+                    newLogoutLink.id = 'modern-logout-link';
+                    const usr_name = document.getElementsByClassName("loggedin")[0].innerText.trim().split(' ')[0]
                     newLogoutLink.innerHTML = 'Log out (' + usr_name + ')';
                     helpLinkDiv.appendChild(newLogoutLink);
                 }
             }
         }
+
     }
 
     function applyClassicStyle() {
@@ -125,7 +100,7 @@
         // Remove the modern logout link if it exists
         const helpLinkDiv = document.getElementById('help_link');
         if (helpLinkDiv) {
-            const modernLogoutLink = helpLinkDiv.querySelector('a[href="/logout"]');
+            const modernLogoutLink = helpLinkDiv.querySelector('#modern-logout-link');
             if (modernLogoutLink) {
                 modernLogoutLink.remove();
             }
@@ -138,16 +113,14 @@
         isModernMode = !isModernMode;
         GM_setValue('modernMode', isModernMode);
 
-        const button = document.getElementById('style-toggle-btn');
+        const button = document.getElementById('modern-style-toggler');
 
         if (isModernMode) {
             applyModernStyle();
-            button.textContent = '🎨 Modern';
-            button.style.background = '#0d6efd';
+            button.textContent = 'Style: Modern';
         } else {
             applyClassicStyle();
-            button.textContent = '📰 Classic';
-            button.style.background = '#6c757d';
+            button.textContent = 'Style: Classic';
         }
 
         // Add a brief animation to show the change
@@ -181,16 +154,4 @@
     } else {
         initializeStyles();
     }
-
-    // Handle page navigation (for SPAs)
-    let currentUrl = location.href;
-    new MutationObserver(() => {
-        if (location.href !== currentUrl) {
-            currentUrl = location.href;
-            // Re-create toggle button if it was removed
-            if (!document.getElementById('bas-style-toggle')) {
-                setTimeout(createToggleButton, 100);
-            }
-        }
-    }).observe(document, { subtree: true, childList: true });
 })();