v3.3

Added collapsable menus feature.

README.md

@@ -113,6 +113,17 @@ Muestra el número de tareas pendientes en una insignia de notificaciones. Este
 
 ---
 
+## 💥 Secciones colapsables
+
+<img src="images/collapsableMenus.png"/>
+
+> Por matias-saavedra-g
+
+### Descripción:
+Permite colapsar las secciones en la página de inicio de [U-Cursos](https://www.u-cursos.cl/), y tiene memoria para saber en qué estado quedaron en la última sesión.
+
+---
+
 ## ⚙ Menú de Configuración
 
 <img src="images/menuGen.png"/>

changelog.html

@@ -1264,6 +1264,8 @@ <h3 class="atx" id="la-version-32-incluye">La versión 3.2 incluye:</h3>
 </li>
 <li><p>🔔 Notificación de Tareas Pendientes</p>
 </li>
+<li><p>💥 Secciones Colapsables</p>
+</li>
 <li><p>⚙ Menú de Configuración</p>
 </li>
 </ul>

js/collapsableMenus.js

@@ -0,0 +1,65 @@
+(function() {
+    // Función para establecer un dato en LocalStorage
+    function setLocalStorageItem(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+
+    // Función para obtener un dato de LocalStorage
+    function getLocalStorageItem(key) {
+        const item = localStorage.getItem(key);
+        return item ? JSON.parse(item) : null;
+    }
+
+    // Make every section collapsable and adds a button next to each section to collapse it using fa-compress
+    // and fa-expand icons
+    // Each section is identified by document.querySelector("#modulos")
+    // Where each div inside "#modulos" has an h1 which is the title of the section. We want to collapse everything except the title
+    function makeCollapsable() {
+        const modulos = document.querySelector("#modulos");
+        modulos.querySelectorAll("div > h1").forEach(section => {
+            const content = section.nextElementSibling;
+            section.style.cursor = "pointer";
+            section.innerHTML += " <i class='fas fa-compress'></i>";
+            section.addEventListener("click", () => {
+                content.style.display = content.style.display === "none" ? "block" : "none";
+                // Save state to local storage
+                saveCollapsableState();
+            });
+        });
+    }
+
+
+    // Save every collapsable state in LocalStorage
+    function saveCollapsableState() {
+        const modulos = document.querySelector("#modulos");
+        const state = {};
+        modulos.querySelectorAll("div > h1").forEach(section => {
+            const content = section.nextElementSibling;
+            state[section.innerText] = content.style.display;
+        });
+        setLocalStorageItem("collapsableState", state);
+    }
+
+    // Load every collapsable state from LocalStorage
+    function loadCollapsableState() {
+        const modulos = document.querySelector("#modulos");
+        const state = getLocalStorageItem("collapsableState");
+        if (!state) {return}
+        modulos.querySelectorAll("div > h1").forEach(section => {
+            const content = section.nextElementSibling;
+            content.style.display = state[section.innerText];
+        });
+    }
+
+    // Verificar si la configuración de easyCopyCourseDetails está activada
+    const collapsableMenusConfig = JSON.parse(localStorage.getItem("settings")).features.collapsableMenus
+    if (getLocalStorageItem("settings")) {
+        if (!collapsableMenusConfig) {return}
+    }
+
+    // Call the functions
+    makeCollapsable();
+    loadCollapsableState();
+    window.addEventListener("beforeunload", saveCollapsableState);
+
+})();

js/menuGen.js

@@ -24,6 +24,7 @@
                 weekCounter: true,
                 pendingTasks: true,
                 easyCopyCourseDetails: true,
+                collapsableMenus: true,
             },
         };
 
@@ -54,6 +55,7 @@
             { id: "weekCounter", name: "Contador de Semanas" },
             { id: "pendingTasks", name: "Insignia Tareas Pendientes" },
             { id: "easyCopyCourseDetails", name: "Copia Fácil de Detalles del Curso" },
+            { id: "collapsableMenus", name: "Menús Colapsables" },
         ];
 
         featuresList.forEach(feature => {

manifest.json

@@ -96,6 +96,11 @@
       "matches": ["*://www.u-cursos.cl/*"],
       "js": ["js/easterEgg.js"],
       "run_at": "document_end"
+    },
+    {
+      "matches": ["*://www.u-cursos.cl/*"],
+      "js": ["js/collapsableMenus.js"],
+      "run_at": "document_end"
     }
   ],
   "action": {