Ctrl+shift+f for favorite menu

yr.user.js

@@ -1,8 +1,8 @@
 // ==UserScript==
 // @name         YR.no - Hotkeys
-// @namespace    http://tampermonkey.net/
-// @version      1.2.2
-// @description  Navigate the yr.no navbar using `Ctrl` + `←`/`→` (For MAC: `Control` + `Option` + `←`/`→`). Navigate to 21-day forecast, radar map or daily table view using `Alt` + `L`, `Alt` + `R` or `Alt` + `V`.
+// @namespace    https://git.ntnu.no/M365-Drift/MonkeyMagic/
+// @version      1.3.0
+// @description  Navigate the yr.no navbar using `Ctrl` + `←`/`→`. Navigate to 21-day forecast, radar map or daily table view using `Alt` + `L`, `Alt` + `R` or `Alt` + `V`. Show a menu to navigate through favorite locations with `Ctrl` + `Shift` + `F`.
 // @author       Øyvind Nilsen (on@ntnu.no)
 // @match        https://www.yr.no/*
 // @grant        none
@@ -41,6 +41,87 @@
         }
     };
 
+    // Create the menu element
+    const menu = document.createElement('div');
+    menu.style.position = 'fixed';
+    menu.style.top = '50%';
+    menu.style.left = '50%';
+    menu.style.transform = 'translate(-50%, -50%)';
+    menu.style.backgroundColor = 'white';
+    menu.style.border = '1px solid black';
+    menu.style.padding = '10px';
+    menu.style.zIndex = '10000';
+    menu.style.display = 'none';
+    menu.style.transition = 'opacity 0.4s';
+    document.body.appendChild(menu);
+
+    // Function to show the menu
+    async function showMenu() {
+        // Get favourited locations from localStorage
+        let favourites = JSON.parse(localStorage.getItem('favouritedLocations') || '[]');
+
+        // Get visited locations from localStorage
+        let visited = JSON.parse(localStorage.getItem('visitedLocations') || '[]');
+
+        // Combine the two arrays
+        let combinedLocations = favourites.concat(visited);
+
+        const locationPromises = combinedLocations.map(id => fetch(`https://www.yr.no/api/v0/locations/${id}?language=${lang_code}`).then(response => response.json()));
+        const locations = await Promise.all(locationPromises);
+
+        menu.innerHTML = '<ul>' + locations.map((location, index) => `
+            <li data-id="${location.id}" data-index="${index}">
+                <span class="weather-location-list-item__star--filled"></span>
+                ${location.name}
+            </li>`).join('') + '</ul>';
+        menu.style.display = 'block';
+        menu.style.opacity = '1';
+        selectedIndex = 0;
+        highlightSelected();
+    }
+
+    // Function to hide the menu
+    function hideMenu() {
+        menu.style.opacity = '0';
+        setTimeout(() => {
+            menu.style.display = 'none';
+        }, 400);
+    }
+
+    // Function to highlight the selected item
+    function highlightSelected() {
+        const items = menu.querySelectorAll('li');
+        items.forEach((item, index) => {
+            item.style.backgroundColor = index === selectedIndex ? 'lightblue' : 'white';
+        });
+    }
+
+    // Variables to keep track of the selected index
+    let selectedIndex = 0;
+
+    // Event listener for keydown events
+    document.addEventListener('keydown', function(event) {
+        if (event.ctrlKey && event.shiftKey && event.key === 'F') {
+            showMenu();
+        } else if (menu.style.display === 'block') {
+            const items = menu.querySelectorAll('li');
+            if (event.key === 'Escape') {
+                hideMenu();
+            } else if (event.key === 'ArrowUp') {
+                selectedIndex = (selectedIndex > 0) ? selectedIndex - 1 : items.length - 1;
+                highlightSelected();
+            } else if (event.key === 'ArrowDown') {
+                selectedIndex = (selectedIndex < items.length - 1) ? selectedIndex + 1 : 0;
+                highlightSelected();
+            } else if (event.key === 'Enter') {
+                const selectedItem = items[selectedIndex];
+                const locationId = selectedItem.getAttribute('data-id');
+                var tablePath = translations['daily-table'][lang_code];
+                window.location.href = `https://www.yr.no/${lang_code}/${tablePath}/${locationId}/`;
+            }
+        }
+    });
+
     // Function to navigate to the next or previous menu item
     function navigateNavbar(direction) {
         const navbar = document.querySelector('#location-header__list');