Alt mode + open links with alt + number

src/index.html

@@ -969,23 +969,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
             folderClick(event)
         } else return
@@ -118,6 +120,7 @@ async function closeFolder(): Promise<void> {
             group.classList.remove('hiding')
         }
     }
+
 }
 
 function openAllLinks(data: Sync, li: HTMLLIElement): void {

src/scripts/features/links/index.ts

@@ -132,6 +132,7 @@ export async function quickLinks(init?: LinksInit, event?: LinksUpdate): Promise
     initGroups(sync, !!init)
     initRows(sync.linksrow, sync.linkstyle)
     initblocks(sync, local)
+    setOpenLinkWithKeyboardEvents()
 }
 
 // Initialisation
@@ -248,6 +249,7 @@ export function initblocks(sync: Sync, local?: Local): true {
 
     setRadius(sync.linkiconradius)
     displayInterface('links')
+    limitAltableLinks()
 
     return true
 }
@@ -285,7 +287,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')
 
@@ -482,6 +484,7 @@ export async function linksUpdate(update: LinksUpdate): Promise<void> {
         return
     }
 
+
     storage.sync.set(data)
 }
 
@@ -915,3 +918,42 @@ function getIconFromLinkElem(link: LinkElem): string {
 function isLinkStyle(s: string): s is Sync['linkstyle'] {
     return ['large', 'medium', 'small', 'inline', 'text'].includes(s)
 }
+
+function setOpenLinkWithKeyboardEvents(): void {
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+        // avoid key combos
+        if (!event.altKey || event.ctrlKey || event.metaKey) return
+        let index: number | null = null
+
+        if (event.code.startsWith('Digit')) {
+            index = Number(event.code.replace('Digit', ''))
+        }
+
+        if (event.code.startsWith('Numpad')) {
+            index = Number(event.code.replace('Numpad', ''))
+        }
+
+        if (index === null || Number.isNaN(index)) return
+
+        const link = document.querySelectorAll('.link')[index - 1] as HTMLLIElement
+
+        if (!link) return
+        event.preventDefault()
+
+        // if folder
+        if (link.classList.contains('link-folder')) {
+            folderClick(event, link)
+        } else { // if link
+            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,31 @@ export function textShadow(init?: number, event?: number): void {
     }
 }
 
+export function altMode(): void {
+    const root = document.documentElement
+
+    const set = (value: boolean) => {
+        root.dataset.altMode = String(value)
+    }
+
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Alt') set(true)
+    })
+
+    document.addEventListener('keyup', (event: KeyboardEvent) => {
+        if (event.key === 'Alt') set(false)
+    })
+
+    self.addEventListener('blur', () => set(false))
+
+    // in case the user clicks on another window whilst alting
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) set(false)
+    })
+
+    document.addEventListener('contextmenu', () => set(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 { darkmode, favicon, pageControl, tabTitle, textShadow, altMode } 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

src/styles/features/links.css

@@ -202,6 +202,7 @@
     width: var(--icon-size);
     height: var(--icon-size);
     box-sizing: border-box;
+    position: relative;
 }
 
 .link a {
@@ -334,6 +335,57 @@
     background-color: white;
 }
 
+#linkblocks {
+    counter-reset: links 0;
+}
+
+.link {
+    counter-increment: links;
+}
+
+.link-icon {
+    overflow: hidden;
+}
+
+[data-alt-mode='true'] .link:not(.no-alt) .link-icon::before {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    background-color: rgb(34 34 34 / 0.91);
+    font-family: var(--monospace-font-family);
+    font-weight: bold;
+    z-index: 10;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+[data-alt-mode='true'] .link:not(.no-alt) .link-icon::before {
+    content: counter(links);
+}
+
+[data-alt-mode='true'] .small .link-icon::before {
+    font-size: 1.4em;
+}
+
+[data-alt-mode='true'] .medium .link-icon::before {
+    font-size: 1.5em;
+}
+
+[data-alt-mode='true'] .large .link-icon::before {
+    font-size: 2em;
+}
+
+[data-alt-mode='true'] .inline .link-icon::before {
+    font-size: 1.2em;
+}
+
 /* Link styles */
 
 /* Large */