mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
refactor: fix buttons
This commit is contained in:
taroj1205
parent
5125bf91f2
commit
942a73d53c
2 changed files with 222 additions and 220 deletions
|
|
@ -12,11 +12,7 @@ import MoonIcon from '../icons/MoonIcon.astro'
|
||||||
<button
|
<button
|
||||||
id="theme-toggle"
|
id="theme-toggle"
|
||||||
type="button"
|
type="button"
|
||||||
class:list={[
|
class:list={['rounded-lg p-2.5 outline-none', className]}
|
||||||
'rounded-lg p-2.5 outline-none',
|
|
||||||
'bg-muted/50 shadow-sm',
|
|
||||||
className,
|
|
||||||
]}
|
|
||||||
aria-label={label}
|
aria-label={label}
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -261,257 +261,263 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<script>
|
<script>
|
||||||
const releases = {
|
document.addEventListener('astro:page-load', () => {
|
||||||
macos: {
|
const releases = {
|
||||||
intel: 'zen.macos-x86_64.dmg',
|
macos: {
|
||||||
arm: 'zen.macos-aarch64.dmg',
|
intel: 'zen.macos-x86_64.dmg',
|
||||||
},
|
arm: 'zen.macos-aarch64.dmg',
|
||||||
linux: {
|
|
||||||
x86_64: {
|
|
||||||
tar: 'zen.linux-x86_64.tar.bz2',
|
|
||||||
appImage: 'zen-x86_64.AppImage',
|
|
||||||
},
|
},
|
||||||
aarch64: {
|
linux: {
|
||||||
tar: 'zen.linux-aarch64.tar.bz2',
|
x86_64: {
|
||||||
appImage: 'zen-aarch64.AppImage',
|
tar: 'zen.linux-x86_64.tar.bz2',
|
||||||
|
appImage: 'zen-x86_64.AppImage',
|
||||||
|
},
|
||||||
|
aarch64: {
|
||||||
|
tar: 'zen.linux-aarch64.tar.bz2',
|
||||||
|
appImage: 'zen-aarch64.AppImage',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
windows: {
|
||||||
windows: {
|
x86_64: {
|
||||||
x86_64: {
|
installer: 'zen.installer.exe',
|
||||||
installer: 'zen.installer.exe',
|
zip: 'zen.win-x86_64.zip',
|
||||||
zip: 'zen.win-x86_64.zip',
|
},
|
||||||
|
arm64: {
|
||||||
|
installer: 'zen.installer-arm64.exe',
|
||||||
|
zip: 'zen.win-arm64.zip',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
arm64: {
|
} as any
|
||||||
installer: 'zen.installer-arm64.exe',
|
|
||||||
zip: 'zen.win-arm64.zip',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as any
|
|
||||||
|
|
||||||
const BASE_URL =
|
const BASE_URL =
|
||||||
'https://github.com/zen-browser/desktop/releases/latest/download'
|
'https://github.com/zen-browser/desktop/releases/latest/download'
|
||||||
const TWILIGHT_BASE_URL =
|
const TWILIGHT_BASE_URL =
|
||||||
'https://github.com/zen-browser/desktop/releases/download/twilight'
|
'https://github.com/zen-browser/desktop/releases/download/twilight'
|
||||||
|
|
||||||
var selectedOS: string | null = null
|
var selectedOS: string | null = null
|
||||||
var isTwilight: boolean = false
|
var isTwilight: boolean = false
|
||||||
|
|
||||||
var selectedArch: string | null = null
|
var selectedArch: string | null = null
|
||||||
|
|
||||||
function showButton(buttonId: string, show: boolean) {
|
function showButton(buttonId: string, show: boolean) {
|
||||||
const button = document.getElementById(buttonId) as HTMLButtonElement
|
const button = document.getElementById(buttonId) as HTMLButtonElement
|
||||||
if (show) {
|
if (show) {
|
||||||
button?.classList.remove('hidden')
|
button?.classList.remove('hidden')
|
||||||
} else {
|
} else {
|
||||||
button?.classList.add('hidden')
|
button?.classList.add('hidden')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function downloadRelease(os: string, arch: string, format: string = '') {
|
function downloadRelease(os: string, arch: string, format: string = '') {
|
||||||
console.log('Downloading release', os, arch, format)
|
console.log('Downloading release', os, arch, format)
|
||||||
let releaseName = releases[os][arch]
|
let releaseName = releases[os][arch]
|
||||||
if (os !== 'macos') {
|
if (os !== 'macos') {
|
||||||
releaseName = releases[os][arch][format]
|
releaseName = releases[os][arch][format]
|
||||||
|
}
|
||||||
|
const url = `${isTwilight ? TWILIGHT_BASE_URL : BASE_URL}/${releaseName}`
|
||||||
|
console.log('Downloading from', url)
|
||||||
|
window.open(url, '_blank')
|
||||||
}
|
}
|
||||||
const url = `${isTwilight ? TWILIGHT_BASE_URL : BASE_URL}/${releaseName}`
|
|
||||||
console.log('Downloading from', url)
|
|
||||||
window.open(url, '_blank')
|
|
||||||
}
|
|
||||||
|
|
||||||
function goNextForm() {
|
function goNextForm() {
|
||||||
if (selectedOS === null) {
|
if (selectedOS === null) {
|
||||||
const osSelect = document.getElementById('os-select') as HTMLFormElement
|
const osSelect = document.getElementById('os-select') as HTMLFormElement
|
||||||
const selectedRadio = osSelect.querySelector(
|
const selectedRadio = osSelect.querySelector(
|
||||||
"input[type='radio']:checked",
|
"input[type='radio']:checked",
|
||||||
) as HTMLInputElement
|
) as HTMLInputElement
|
||||||
selectedOS = selectedRadio.value
|
selectedOS = selectedRadio.value
|
||||||
document.getElementById('form-os-select')?.classList.add('hidden')
|
document.getElementById('form-os-select')?.classList.add('hidden')
|
||||||
|
|
||||||
if (selectedOS === 'macos') {
|
if (selectedOS === 'macos') {
|
||||||
const macosDownload = document.getElementById(
|
const macosDownload = document.getElementById(
|
||||||
'form-macos-download',
|
'form-macos-download',
|
||||||
) as HTMLDivElement
|
) as HTMLDivElement
|
||||||
macosDownload.classList.remove('hidden')
|
macosDownload.classList.remove('hidden')
|
||||||
showButton('next-button', false)
|
showButton('next-button', false)
|
||||||
} else if (selectedOS === 'linux') {
|
} else if (selectedOS === 'linux') {
|
||||||
const linuxDownload = document.getElementById(
|
const linuxDownload = document.getElementById(
|
||||||
|
'linux-target-download',
|
||||||
|
) as HTMLDivElement
|
||||||
|
linuxDownload.classList.remove('hidden')
|
||||||
|
} else if (selectedOS === 'windows') {
|
||||||
|
const windowsDownload = document.getElementById(
|
||||||
|
'windows-target-download',
|
||||||
|
) as HTMLDivElement
|
||||||
|
windowsDownload.classList.remove('hidden')
|
||||||
|
}
|
||||||
|
showButton('back-button', true) // Show Back button after first step
|
||||||
|
} else if (selectedOS === 'linux' && selectedArch === null) {
|
||||||
|
const linuxTargetSelect = document.getElementById(
|
||||||
'linux-target-download',
|
'linux-target-download',
|
||||||
|
) as HTMLFormElement
|
||||||
|
const selectedRadio = linuxTargetSelect.querySelector(
|
||||||
|
"input[type='radio']:checked",
|
||||||
|
) as HTMLInputElement
|
||||||
|
selectedArch = selectedRadio.value
|
||||||
|
document
|
||||||
|
.getElementById('linux-target-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
|
||||||
|
const linuxDownload = document.getElementById(
|
||||||
|
'form-linux-download',
|
||||||
) as HTMLDivElement
|
) as HTMLDivElement
|
||||||
linuxDownload.classList.remove('hidden')
|
linuxDownload.classList.remove('hidden')
|
||||||
} else if (selectedOS === 'windows') {
|
|
||||||
const windowsDownload = document.getElementById(
|
showButton('next-button', false)
|
||||||
|
} else if (selectedOS === 'windows' && selectedArch === null) {
|
||||||
|
const windowsTargetSelect = document.getElementById(
|
||||||
'windows-target-download',
|
'windows-target-download',
|
||||||
|
) as HTMLFormElement
|
||||||
|
const selectedRadio = windowsTargetSelect.querySelector(
|
||||||
|
"input[type='radio']:checked",
|
||||||
|
) as HTMLInputElement
|
||||||
|
selectedArch = selectedRadio.value
|
||||||
|
document
|
||||||
|
.getElementById('windows-target-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
|
||||||
|
const windowsDownload = document.getElementById(
|
||||||
|
'windows-download',
|
||||||
) as HTMLDivElement
|
) as HTMLDivElement
|
||||||
windowsDownload.classList.remove('hidden')
|
windowsDownload.classList.remove('hidden')
|
||||||
|
|
||||||
|
showButton('next-button', false)
|
||||||
|
} else {
|
||||||
|
throw new Error('Unknown state')
|
||||||
}
|
}
|
||||||
showButton('back-button', true) // Show Back button after first step
|
}
|
||||||
} else if (selectedOS === 'linux' && selectedArch === null) {
|
|
||||||
const linuxTargetSelect = document.getElementById(
|
function goPreviousForm() {
|
||||||
'linux-target-download',
|
if (selectedArch) {
|
||||||
) as HTMLFormElement
|
// Go back to architecture selection
|
||||||
const selectedRadio = linuxTargetSelect.querySelector(
|
if (selectedOS === 'linux') {
|
||||||
"input[type='radio']:checked",
|
document
|
||||||
|
.getElementById('form-linux-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
document
|
||||||
|
.getElementById('linux-target-download')
|
||||||
|
?.classList.remove('hidden')
|
||||||
|
} else if (selectedOS === 'windows') {
|
||||||
|
document.getElementById('windows-download')?.classList.add('hidden')
|
||||||
|
document
|
||||||
|
.getElementById('windows-target-download')
|
||||||
|
?.classList.remove('hidden')
|
||||||
|
}
|
||||||
|
selectedArch = null
|
||||||
|
showButton('back-button', true)
|
||||||
|
showButton('next-button', true)
|
||||||
|
} else if (selectedOS) {
|
||||||
|
// Go back to OS selection
|
||||||
|
if (selectedOS === 'macos') {
|
||||||
|
document
|
||||||
|
.getElementById('form-macos-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
} else if (selectedOS === 'linux') {
|
||||||
|
document
|
||||||
|
.getElementById('linux-target-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
} else if (selectedOS === 'windows') {
|
||||||
|
document
|
||||||
|
.getElementById('windows-target-download')
|
||||||
|
?.classList.add('hidden')
|
||||||
|
}
|
||||||
|
document.getElementById('form-os-select')?.classList.remove('hidden')
|
||||||
|
selectedOS = null
|
||||||
|
showButton('back-button', false)
|
||||||
|
showButton('next-button', true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showButton('back-button', false) // Hide Back button on page load
|
||||||
|
showButton('next-button', true) // Ensure Next button is visible on load
|
||||||
|
|
||||||
|
function filloutDefaultOS() {
|
||||||
|
const osSelect = document.getElementById('os-select') as HTMLFormElement
|
||||||
|
const osSelectWindows = document.getElementById(
|
||||||
|
'os-select-windows',
|
||||||
) as HTMLInputElement
|
) as HTMLInputElement
|
||||||
selectedArch = selectedRadio.value
|
const osSelectLinux = document.getElementById(
|
||||||
document.getElementById('linux-target-download')?.classList.add('hidden')
|
'os-select-linux',
|
||||||
|
) as HTMLInputElement
|
||||||
const linuxDownload = document.getElementById(
|
const osSelectMacOS = document.getElementById(
|
||||||
'form-linux-download',
|
'os-select-macos',
|
||||||
) as HTMLDivElement
|
|
||||||
linuxDownload.classList.remove('hidden')
|
|
||||||
|
|
||||||
showButton('next-button', false)
|
|
||||||
} else if (selectedOS === 'windows' && selectedArch === null) {
|
|
||||||
const windowsTargetSelect = document.getElementById(
|
|
||||||
'windows-target-download',
|
|
||||||
) as HTMLFormElement
|
|
||||||
const selectedRadio = windowsTargetSelect.querySelector(
|
|
||||||
"input[type='radio']:checked",
|
|
||||||
) as HTMLInputElement
|
) as HTMLInputElement
|
||||||
selectedArch = selectedRadio.value
|
|
||||||
document
|
|
||||||
.getElementById('windows-target-download')
|
|
||||||
?.classList.add('hidden')
|
|
||||||
|
|
||||||
const windowsDownload = document.getElementById(
|
if (navigator.platform.includes('Win')) {
|
||||||
'windows-download',
|
osSelectWindows.checked = true
|
||||||
) as HTMLDivElement
|
} else if (navigator.platform.includes('Linux')) {
|
||||||
windowsDownload.classList.remove('hidden')
|
osSelectLinux.checked = true
|
||||||
|
} else if (navigator.platform.includes('Mac')) {
|
||||||
showButton('next-button', false)
|
osSelectMacOS.checked = true
|
||||||
} else {
|
|
||||||
throw new Error('Unknown state')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function goPreviousForm() {
|
|
||||||
if (selectedArch) {
|
|
||||||
// Go back to architecture selection
|
|
||||||
if (selectedOS === 'linux') {
|
|
||||||
document.getElementById('form-linux-download')?.classList.add('hidden')
|
|
||||||
document
|
|
||||||
.getElementById('linux-target-download')
|
|
||||||
?.classList.remove('hidden')
|
|
||||||
} else if (selectedOS === 'windows') {
|
|
||||||
document.getElementById('windows-download')?.classList.add('hidden')
|
|
||||||
document
|
|
||||||
.getElementById('windows-target-download')
|
|
||||||
?.classList.remove('hidden')
|
|
||||||
}
|
}
|
||||||
selectedArch = null
|
}
|
||||||
showButton('back-button', true)
|
|
||||||
showButton('next-button', true)
|
function getIfTwilight() {
|
||||||
} else if (selectedOS) {
|
const urlParams = new URLSearchParams(window.location.search)
|
||||||
// Go back to OS selection
|
isTwilight = urlParams.has('twilight')
|
||||||
if (selectedOS === 'macos') {
|
if (isTwilight) {
|
||||||
document.getElementById('form-macos-download')?.classList.add('hidden')
|
console.log('Twilight mode enabled')
|
||||||
} else if (selectedOS === 'linux') {
|
const name = document.getElementById('zen-name')
|
||||||
document
|
const twilightInfo = document.getElementById('twilight-info')
|
||||||
.getElementById('linux-target-download')
|
if (name) name.innerHTML = 'Twilight'
|
||||||
?.classList.add('hidden')
|
if (twilightInfo) twilightInfo.classList.remove('hidden')
|
||||||
} else if (selectedOS === 'windows') {
|
} else {
|
||||||
document
|
document.getElementById('windows-zip-download')?.classList.add('hidden')
|
||||||
.getElementById('windows-target-download')
|
|
||||||
?.classList.add('hidden')
|
|
||||||
}
|
}
|
||||||
document.getElementById('form-os-select')?.classList.remove('hidden')
|
|
||||||
selectedOS = null
|
|
||||||
showButton('back-button', false)
|
|
||||||
showButton('next-button', true)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
showButton('back-button', false) // Hide Back button on page load
|
getIfTwilight()
|
||||||
showButton('next-button', true) // Ensure Next button is visible on load
|
|
||||||
|
|
||||||
function filloutDefaultOS() {
|
document.getElementById('next-button')?.addEventListener('click', () => {
|
||||||
const osSelect = document.getElementById('os-select') as HTMLFormElement
|
goNextForm()
|
||||||
const osSelectWindows = document.getElementById(
|
|
||||||
'os-select-windows',
|
|
||||||
) as HTMLInputElement
|
|
||||||
const osSelectLinux = document.getElementById(
|
|
||||||
'os-select-linux',
|
|
||||||
) as HTMLInputElement
|
|
||||||
const osSelectMacOS = document.getElementById(
|
|
||||||
'os-select-macos',
|
|
||||||
) as HTMLInputElement
|
|
||||||
|
|
||||||
if (navigator.platform.includes('Win')) {
|
|
||||||
osSelectWindows.checked = true
|
|
||||||
} else if (navigator.platform.includes('Linux')) {
|
|
||||||
osSelectLinux.checked = true
|
|
||||||
} else if (navigator.platform.includes('Mac')) {
|
|
||||||
osSelectMacOS.checked = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIfTwilight() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search)
|
|
||||||
isTwilight = urlParams.has('twilight')
|
|
||||||
if (isTwilight) {
|
|
||||||
console.log('Twilight mode enabled')
|
|
||||||
const name = document.getElementById('zen-name')
|
|
||||||
const twilightInfo = document.getElementById('twilight-info')
|
|
||||||
if (name) name.innerHTML = 'Twilight'
|
|
||||||
if (twilightInfo) twilightInfo.classList.remove('hidden')
|
|
||||||
} else {
|
|
||||||
document.getElementById('windows-zip-download')?.classList.add('hidden')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getIfTwilight()
|
|
||||||
|
|
||||||
document.getElementById('next-button')?.addEventListener('click', () => {
|
|
||||||
goNextForm()
|
|
||||||
})
|
|
||||||
|
|
||||||
document.getElementById('back-button')?.addEventListener('click', () => {
|
|
||||||
goPreviousForm()
|
|
||||||
})
|
|
||||||
|
|
||||||
document
|
|
||||||
.getElementById('macos-arm-download')
|
|
||||||
?.addEventListener('click', () => {
|
|
||||||
downloadRelease('macos', 'arm')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document.getElementById('back-button')?.addEventListener('click', () => {
|
||||||
.getElementById('macos-intel-download')
|
goPreviousForm()
|
||||||
?.addEventListener('click', () => {
|
|
||||||
downloadRelease('macos', 'intel')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('linux-tar-download')
|
.getElementById('macos-arm-download')
|
||||||
?.addEventListener('click', () => {
|
?.addEventListener('click', () => {
|
||||||
downloadRelease('linux', selectedArch as string, 'tar')
|
downloadRelease('macos', 'arm')
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('linux-appimage-download')
|
.getElementById('macos-intel-download')
|
||||||
?.addEventListener('click', () => {
|
?.addEventListener('click', () => {
|
||||||
downloadRelease('linux', selectedArch as string, 'appImage')
|
downloadRelease('macos', 'intel')
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('linux-flathub-download')
|
.getElementById('linux-tar-download')
|
||||||
?.addEventListener('click', () => {
|
?.addEventListener('click', () => {
|
||||||
window.open('https://flathub.org/apps/app.zen_browser.zen')
|
downloadRelease('linux', selectedArch as string, 'tar')
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('windows-installer-download')
|
.getElementById('linux-appimage-download')
|
||||||
?.addEventListener('click', () => {
|
?.addEventListener('click', () => {
|
||||||
downloadRelease('windows', selectedArch as string, 'installer')
|
downloadRelease('linux', selectedArch as string, 'appImage')
|
||||||
})
|
})
|
||||||
|
|
||||||
document
|
document
|
||||||
.getElementById('windows-zip-download')
|
.getElementById('linux-flathub-download')
|
||||||
?.addEventListener('click', () => {
|
?.addEventListener('click', () => {
|
||||||
//downloadRelease("windows", selectedArch as string, "zip");
|
window.open('https://flathub.org/apps/app.zen_browser.zen')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('windows-installer-download')
|
||||||
|
?.addEventListener('click', () => {
|
||||||
|
downloadRelease('windows', selectedArch as string, 'installer')
|
||||||
|
})
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById('windows-zip-download')
|
||||||
|
?.addEventListener('click', () => {
|
||||||
|
//downloadRelease("windows", selectedArch as string, "zip");
|
||||||
|
})
|
||||||
|
|
||||||
document.addEventListener('astro:page-load', () => {
|
|
||||||
filloutDefaultOS()
|
filloutDefaultOS()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue