www/src/components/download/DownloadScript.astro

105 lines
3.4 KiB
Text

<script>
// Handle platform selection
const platformButtons = document.querySelectorAll('.platform-selector')
const platformSections = document.querySelectorAll('.platform-section')
// Function to detect OS and select appropriate platform
function detectOS() {
const userAgent = window.navigator.userAgent
let detectedOS = 'mac' // Default to macOS
if (userAgent.indexOf('Windows') !== -1) {
detectedOS = 'windows'
} else if (userAgent.indexOf('Linux') !== -1) {
detectedOS = 'linux'
}
return detectedOS
}
// Initialize platform based on user's OS
async function initializePlatform() {
const detectedOS = detectOS()
selectPlatform(detectedOS)
}
// Function to select a platform
async function selectPlatform(platform: string) {
// Update button styling
for (const button of platformButtons) {
const buttonPlatform = button.getAttribute('data-platform')
if (buttonPlatform === platform) {
button.setAttribute('data-active', 'true')
} else {
button.setAttribute('data-active', 'false')
}
}
// Show/hide platform sections
for (const section of platformSections) {
if (section.id === `${platform}-downloads`) {
section.setAttribute('data-active', 'true')
} else {
section.setAttribute('data-active', 'false')
}
}
}
// Handle platform button clicks
for (const button of platformButtons) {
button.addEventListener('click', () => {
const platform = button.getAttribute('data-platform') ?? ''
selectPlatform(platform)
})
}
// Check for twilight mode
async function checkTwilightMode() {
const urlParams = new URLSearchParams(window.location.search)
const isTwilight = urlParams.has('twilight')
if (isTwilight) {
const twilightInfoElem = document.getElementById('twilight-info')
twilightInfoElem?.setAttribute('data-twilight', 'true')
// Update UI to show twilight mode with animation
const titleElem = document.getElementById('download-title')
if (titleElem) {
const zenText = titleElem.innerHTML
titleElem.innerHTML = zenText.replace('Zen', 'Twilight')
}
const tags = document.querySelectorAll('.release-type-tag')
for (const tag of tags) {
tag.innerHTML = tag.innerHTML.replace('Beta', 'Twilight')
}
// Apply twilight mode to all relevant elements
const coralElements = document.querySelectorAll(
'.download-browser-logo, .release-type-tag, .decorative-gradient, .download-link, .download-arrow-icon, .download-card__icon, .checksum-icon-btn, .copy-btn, .flathub-download',
)
for (const element of coralElements) {
element.setAttribute('data-twilight', 'true')
}
// Replace all download links with twilight versions
const downloadLinks = document.querySelectorAll('a.download-link')
for (const link of downloadLinks) {
if (!link.id.includes('beta')) {
const href = link.getAttribute('href')
if (href && href.includes('/latest/download/')) {
const twilightHref = href.replace(
'/latest/download/',
'/download/twilight/',
)
link.setAttribute('href', twilightHref)
}
}
}
}
}
// Initialize the page
initializePlatform()
checkTwilightMode()
</script>