Alt mode + open links with alt + number

src/index.html

@@ -738,23 +738,24 @@ <h2>
             <template id="link-elem-template">
                 <li class="link link-elem">
                     <a rel="noreferrer noopener" draggable="false">
-                        <div>
+                        <div class="link-icon">
                             <img alt="" draggable="false" />
                         </div>
-                        <span></span>
+                        <span class="link-elem-title"></span>
                     </a>
                 </li>
             </template>
 
             <template id="link-folder-template">
                 <li class="link link-folder" tabindex="0">
-                    <div>
+                    <div class="link-icon">
                         <img alt="" draggable="false" />
                         <img alt="" draggable="false" />
                         <img alt="" draggable="false" />
                         <img alt="" draggable="false" />
                     </div>
-                    <span></span>
+
+                    <span class="link-folder-title"></span>
                 </li>
             </template>
 

src/scripts/features/links/folders.ts

@@ -14,8 +14,10 @@ queueMicrotask(() => {
     document.addEventListener('close-folder', closeFolder)
 })
 
-export async function folderClick(event: MouseEvent | KeyboardEvent): Promise<void> {
-    const li = getLiFromEvent(event)
+export async function folderClick(event: MouseEvent | KeyboardEvent, li?: HTMLLIElement): Promise<void> {
+    if (!li) {
+        li = getLiFromEvent(event)
+    }
 
     let rightClick = false
     let ctrlClick = false
@@ -26,7 +28,7 @@ export async function folderClick(event: MouseEvent | KeyboardEvent): Promise<vo
         ctrlClick = event.button === 0 && (event.ctrlKey || event.metaKey)
         middleClick = event.button === 1
     } else if (event instanceof KeyboardEvent) {
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (event.key === 'Enter' || event.key === ' ' || event.altKey) {
             event.preventDefault() // prevent scrolling when pressing Space
         } else return
     }

src/scripts/features/links/index.ts

@@ -125,6 +125,8 @@ export async function quickLinks(init?: LinksInit, event?: LinksUpdate): Promise
     domlinkblocks.classList.toggle('backgrounds', sync.linkbackgrounds)
     domlinkblocks.classList.toggle('hidden', !sync.quicklinks)
 
+    document.addEventListener('keydown', openLinksWithKeyboard)
+
     if (sync.linkgroups.synced.length > 0) {
         await initBookmarkSync(sync)
     }
@@ -248,6 +250,7 @@ export function initblocks(sync: Sync, local?: Local): true {
 
     setRadius(sync.linkiconradius)
     displayInterface('links')
+    limitAltableLinks()
 
     return true
 }
@@ -285,7 +288,7 @@ function createFolder(link: LinkFolder, folderChildren: Link[], style: Sync['lin
 
 function createElem(link: LinkElem, openInNewtab: boolean, style: Sync['linkstyle']): HTMLLIElement {
     const li = getHTMLTemplate<HTMLLIElement>('link-elem-template', 'li')
-    const span = li.querySelector('span')
+    const span = li.querySelector('span.link-elem-title')
     const anchor = li.querySelector('a')
     const img = li.querySelector('img')
 
@@ -915,3 +918,37 @@ function getIconFromLinkElem(link: LinkElem): string {
 function isLinkStyle(s: string): s is Sync['linkstyle'] {
     return ['large', 'medium', 'small', 'inline', 'text'].includes(s)
 }
+
+function openLinksWithKeyboard(event: KeyboardEvent): void {
+    const { altKey, ctrlKey, metaKey, code } = event
+    const isNotAltComboKey = !altKey || ctrlKey || metaKey
+    const codeNumber = parseInt(code.replace('Digit', '').replace('Numpad', ''))
+
+    if (isNotAltComboKey || isNaN(codeNumber)) {
+        return
+    }
+
+    const links = document.querySelectorAll<HTMLLIElement>('.link')
+    const link = links[codeNumber - 1]
+
+    if (!link) {
+        return
+    }
+
+    event.preventDefault()
+
+    if (link.classList.contains('link-folder')) {
+        folderClick(event, link)
+    } else {
+        link.querySelector('a')?.click()
+    }
+}
+
+// no way to do this in CSS with the pinned groups :(
+export function limitAltableLinks(): void {
+    const links = document.querySelectorAll<HTMLElement>('#linkblocks .link')
+
+    links.forEach((link, i) => {
+        link.classList.toggle('no-alt', i >= 9)
+    })
+}

src/scripts/features/others.ts

@@ -120,6 +120,35 @@ export function textShadow(init?: number, event?: number): void {
     }
 }
 
+export function altMode(): void {
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Alt') {
+            document.documentElement.dataset.altMode = 'true'
+        }
+    })
+
+    document.addEventListener('keyup', (event: KeyboardEvent) => {
+        if (event.key === 'Alt') {
+            document.documentElement.dataset.altMode = 'false'
+        }
+    })
+
+    self.addEventListener('blur', () => {
+        document.documentElement.dataset.altMode = 'false'
+    })
+
+    // in case the user clicks on another window whilst alting
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            document.documentElement.dataset.altMode = 'false'
+        }
+    })
+
+    document.addEventListener('contextmenu', () => {
+        document.documentElement.dataset.altMode = 'false'
+    })
+}
+
 // Unfocus address bar on chromium
 // https://stackoverflow.com/q/64868024
 // if (window.location.search !== '?r=1') {

src/scripts/index.ts

@@ -1,4 +1,4 @@
-import { darkmode, favicon, pageControl, tabTitle, textShadow } from './features/others.ts'
+import { altMode, darkmode, favicon, pageControl, tabTitle, textShadow } from './features/others.ts'
 import { supportersNotifications } from './features/supporters.ts'
 import { synchronization } from './features/synchronization/index.ts'
 import { backgroundsInit } from './features/backgrounds/index.ts'
@@ -93,6 +93,7 @@ async function startup(): Promise<void> {
     pageControl({ width: sync.pagewidth, gap: sync.pagegap })
     operaExtensionExplainer(local.operaExplained)
     tabsTracking()
+    altMode()
 
     document.documentElement.dataset.system = SYSTEM_OS as string
     document.documentElement.dataset.browser = BROWSER as string