Skip to content

Commit

Permalink
fix: improved key navigation, fix some issues, and refactored
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amoralchik
Amoralchik committed Feb 9, 2025
1 parent 44ec342 commit 4acbc5e
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 122 deletions.
134 changes: 134 additions & 0 deletions src/keyboard.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
export default document.addEventListener('keydown', (e) => {
if (window.location.pathname.includes('/download')) {
handleDownloadPageKey(e)
}
handleGeneralKey(e)
})

function handleDownloadPageKey(e: KeyboardEvent) {
const url = window.location.href
const isFirstSection =
url.endsWith('/download') || url.endsWith('/download?twilight')

if (!isFirstSection) {
return handleOsSpecificKeys(e, url)
}

switch (e.key) {
case '1':
clickAndScroll('os-select-windows')
break
case '2':
clickAndScroll('os-select-linux')
break
case '3':
document.querySelector<HTMLElement>('#macos-select')?.click()
break
default:
handleOsSpecificKeys(e, url)
}
}

function handleOsSpecificKeys(e: KeyboardEvent, url: string) {
if (url.endsWith('#os-select-windows')) {
switch (e.key) {
case '1':
clickAndScroll('windows-target-x86_64')
break
case '2':
clickAndScroll('windows-target-arm64')
break
}
} else if (
url.endsWith('#windows-target-x86_64') ||
url.endsWith('#windows-target-arm64')
) {
handleWindowsTargetKeys(e, url)
} else if (url.endsWith('#os-select-linux')) {
switch (e.key) {
case '1':
clickAndScroll('linux-target-x86_64')
break
case '2':
clickAndScroll('linux-target-aarch64')
break
}
} else if (
url.endsWith('#linux-target-x86_64') ||
url.endsWith('#linux-target-aarch64')
) {
handleLinuxTargetKeys(e)
}
}

function handleWindowsTargetKeys(e: KeyboardEvent, url: string | string[]) {
const twilight = url.includes('?twilight')
switch (e.key) {
case '1':
document
.querySelector<HTMLElement>('#windows-installer-download')
?.click()
break
case '2':
if (twilight) {
document.querySelector<HTMLElement>('#windows-zip-download')?.click()
}
break
}
}

function handleLinuxTargetKeys(e: KeyboardEvent) {
switch (e.key) {
case '1':
document.querySelector<HTMLElement>('#linux-tar-download')?.click()
break
case '2':
document.querySelector<HTMLElement>('#linux-appimage-download')?.click()
break
case '3':
document.querySelector<HTMLElement>('#linux-flathub-download')?.click()
break
}
}

function clickAndScroll(targetId: string) {
const targetElement = document.querySelector<HTMLElement>(`#${targetId}`)
if (targetElement) {
targetElement.click()
window.location.href = `#${targetId}`
}
}

function handleGeneralKey(e: KeyboardEvent) {
switch (e.key) {
case 's':
document
.querySelector<HTMLElement>('input[class="ac-theme-switch"]')
?.click()
break
case 'i':
window.location.href = '/'
break
case 'n':
window.location.href = '#nav-bar'
break
case 'f':
window.location.href = '#footer'
break
case 'd':
window.location.href = '/download'
break
case 'm':
window.location.href = '/mods'
break
case 'r':
window.location.href = '/release-notes'
break
case 't':
window.location.href = '/download?twilight'
break
case 'g':
window.open('https://github.com/zen-browser')
break
}
}
123 changes: 1 addition & 122 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import '@fontsource/bricolage-grotesque/400.css'
import NavBar from '../components/NavBar.astro'
import Footer from '../components/Footer.astro'
---

<script src="../keyboard"></script>
<script is:inline data-cfasync="false">
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
Expand Down Expand Up @@ -94,127 +94,6 @@ import Footer from '../components/Footer.astro'
<Footer />
</body>
</html>
<script>
document.addEventListener('keydown', (e) => {
if (window.location.pathname.includes('/download')) {
handleDownloadPageKey(e);
}
handleGeneralKey(e);
});

function handleDownloadPageKey(e) {
const url = window.location.href;

switch (e.key) {
case 'w':
clickAndScroll('os-select-windows');
break;
case 'l':
clickAndScroll('os-select-linux');
break;
case 'm':
document.querySelector('#macos-select')?.click();
break;
default:
handleOsSpecificKeys(e, url);
}
}

function handleOsSpecificKeys(e, url) {
if (url.includes('#os-select-windows')) {
switch (e.key) {
case '1':
clickAndScroll('windows-target-x86_64');
break;
case '2':
clickAndScroll('windows-target-arm64');
break;
}
} else if (url.includes('#windows-target-x86_64') || url.includes('#windows-target-arm64')) {
handleWindowsTargetKeys(e, url);
} else if (url.includes('#os-select-linux')) {
switch (e.key) {
case '1':
clickAndScroll('linux-target-x86_64');
break;
case '2':
clickAndScroll('linux-target-aarch64');
break;
}
} else if (url.includes('#linux-target-x86_64') || url.includes('#linux-target-aarch64')) {
handleLinuxTargetKeys(e);
}
}

function handleWindowsTargetKeys(e, url) {
const twilight = url.includes('?twilight');

switch (e.key) {
case '1':
document.querySelector('#windows-installer-download')?.click();
break;
case '2':
if (twilight) {
document.querySelector('#windows-zip-download')?.click();
}
break;
}
}

function handleLinuxTargetKeys(e) {
switch (e.key) {
case '1':
document.querySelector('#linux-tar-download')?.click();
break;
case '2':
document.querySelector('#linux-appimage-download')?.click();
break;
case '3':
document.querySelector('#linux-flathub-download')?.click();
break;
}
}

function clickAndScroll(targetId) {
const targetElement = document.querySelector(`#${targetId}`);
if (targetElement) {
targetElement.click();
window.location.href = `#${targetId}`;
}
}

function handleGeneralKey(e) {
switch (e.key) {
case 's':
window.location.href = '/';
break;
case 'n':
window.location.href = '#nav-bar';
break;
case 'f':
window.location.href = '#footer';
break;
case 'e':
window.location.href = '/#features';
break;
case 'd':
window.location.href = '/download';
break;
case 'z':
window.location.href = '/mods';
break;
case 'r':
window.location.href = '/release-notes';
break;
case 't':
window.location.href = '/download?twilight';
break;
case 'g':
window.open('https://github.com/zen-browser');
break;
}
}
</script>
<style is:global>
@font-face {
font-family: 'Junicode';
Expand Down

0 comments on commit 4acbc5e

Please sign in to comment.