mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-11 01:59:58 +00:00
Update site design/text to match new version
This commit is contained in:
hensm
329
docs/index.js
329
docs/index.js
@@ -1,9 +1,13 @@
|
||||
/* eslint-env browser */
|
||||
"use strict";
|
||||
|
||||
// Set FAQ fragment IDs
|
||||
for (const faq of document.querySelectorAll(".faq")) {
|
||||
const summary = faq.querySelector(".faq__summary");
|
||||
const formattedSummary = summary.textContent.trim().replace(/ /g, "_");
|
||||
const formattedSummary = summary.textContent
|
||||
.replace(/\s\s+/g, " ")
|
||||
.trim()
|
||||
.replace(/ /g, "_");
|
||||
|
||||
faq.id = formattedSummary;
|
||||
|
||||
@@ -14,36 +18,33 @@ for (const faq of document.querySelectorAll(".faq")) {
|
||||
}
|
||||
}
|
||||
|
||||
function updateThemeClass(mediaQuery) {
|
||||
if (mediaQuery.matches) {
|
||||
document.documentElement.classList.remove("theme-dark");
|
||||
document.documentElement.classList.add("theme-light");
|
||||
} else {
|
||||
document.documentElement.classList.remove("theme-light");
|
||||
document.documentElement.classList.add("theme-dark");
|
||||
window.addEventListener("hashchange", () => {
|
||||
const targetElement = document.getElementById(
|
||||
decodeURI(window.location.hash.slice(1))
|
||||
);
|
||||
if (targetElement && targetElement instanceof HTMLDetailsElement) {
|
||||
targetElement.open = true;
|
||||
}
|
||||
}
|
||||
|
||||
const prefersLightScheme = window.matchMedia("(prefers-color-scheme: light)");
|
||||
|
||||
updateThemeClass(prefersLightScheme);
|
||||
prefersLightScheme.addListener(updateThemeClass);
|
||||
|
||||
const downloadAppBtn = document.querySelector(".download__app");
|
||||
const downloadAppOther = document.querySelector(".download__app-other");
|
||||
const downloadAppOtherSummary =
|
||||
downloadAppOther.querySelector(":scope > summary");
|
||||
});
|
||||
|
||||
// Ext download button
|
||||
const downloadExtBtn = document.querySelector(".download__ext");
|
||||
|
||||
// App download buttons
|
||||
const appList = document.querySelector(".app-list");
|
||||
const appListWin64Btn = document.querySelector(".app-list__win64");
|
||||
const appListWin32Btn = document.querySelector(".app-list__win32");
|
||||
const appListMacBtn = document.querySelector(".app-list__mac");
|
||||
const appListDebBtn = document.querySelector(".app-list__deb");
|
||||
const appListRpmBtn = document.querySelector(".app-list__rpm");
|
||||
const downloadsBridgeAll = document.querySelector(".download__bridge-all");
|
||||
const downloadsBridgeList = document.querySelector(".download__bridge-list");
|
||||
const downloadsBridgePrimary = document.querySelector(
|
||||
".download__bridge-primary"
|
||||
);
|
||||
|
||||
const downloadsBridgeWin = document.createElement("div");
|
||||
const downloadsBridgeMac = document.createElement("div");
|
||||
const downloadsBridgeLinux = document.createElement("div");
|
||||
|
||||
downloadsBridgeList.append(
|
||||
downloadsBridgeWin,
|
||||
downloadsBridgeMac,
|
||||
downloadsBridgeLinux
|
||||
);
|
||||
|
||||
let platform;
|
||||
|
||||
@@ -51,148 +52,174 @@ switch (navigator.platform) {
|
||||
case "Win32":
|
||||
case "Win64":
|
||||
platform = "win";
|
||||
downloadAppBtn.textContent = "Windows Bridge";
|
||||
appListWin64Btn.hidden = true;
|
||||
break;
|
||||
|
||||
case "MacIntel":
|
||||
platform = "mac";
|
||||
downloadAppBtn.textContent = "macOS Bridge";
|
||||
appListMacBtn.hidden = true;
|
||||
break;
|
||||
|
||||
default:
|
||||
/**
|
||||
* Hide default download button and display other downloads
|
||||
* without details summary.
|
||||
*/
|
||||
downloadAppBtn.remove();
|
||||
downloadAppOther.open = true;
|
||||
downloadAppOtherSummary.hidden = true;
|
||||
|
||||
appList.classList.add("app-list--buttons");
|
||||
appListWin32Btn.classList.add("button");
|
||||
appListWin64Btn.classList.add("button");
|
||||
appListMacBtn.classList.add("button");
|
||||
appListDebBtn.classList.add("button");
|
||||
appListRpmBtn.classList.add("button");
|
||||
}
|
||||
|
||||
function populateAppListApp(element, fileUrl, fileName, fileSize, version) {
|
||||
element.href = fileUrl;
|
||||
element.title = `${fileName} (${fileSize})`;
|
||||
element.dataset.fileSize = fileSize;
|
||||
element.dataset.version = version;
|
||||
element.removeAttribute("disabled");
|
||||
function addBridgeDownload(
|
||||
tag,
|
||||
version,
|
||||
url,
|
||||
title,
|
||||
bridgePlatform,
|
||||
linuxPackage
|
||||
) {
|
||||
const downloadButton = document.createElement("a");
|
||||
downloadButton.classList.add("button", "button--puffy");
|
||||
downloadButton.href = url;
|
||||
downloadButton.title = title;
|
||||
downloadButton.dataset.platform = linuxPackage ?? bridgePlatform;
|
||||
|
||||
const tagElement = document.createElement("span");
|
||||
tagElement.classList.add("app-tag");
|
||||
tagElement.textContent = tag;
|
||||
|
||||
switch (bridgePlatform) {
|
||||
case "win":
|
||||
downloadButton.textContent = "Windows";
|
||||
downloadsBridgeWin.append(downloadButton);
|
||||
break;
|
||||
case "mac":
|
||||
downloadButton.textContent = "macOS";
|
||||
downloadsBridgeMac.append(downloadButton);
|
||||
break;
|
||||
case "linux":
|
||||
downloadButton.textContent = "Linux";
|
||||
downloadsBridgeLinux.append(downloadButton);
|
||||
break;
|
||||
}
|
||||
|
||||
if (bridgePlatform === platform) {
|
||||
const primaryDownloadButton = downloadButton.cloneNode(true);
|
||||
primaryDownloadButton.textContent += " Bridge";
|
||||
primaryDownloadButton.append(tagElement.cloneNode(true));
|
||||
|
||||
primaryDownloadButton.classList.add("download__app");
|
||||
downloadsBridgePrimary.append(primaryDownloadButton);
|
||||
}
|
||||
|
||||
downloadButton.append(tagElement);
|
||||
}
|
||||
|
||||
const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases";
|
||||
function populateDownloads(releaseList) {
|
||||
let extensionUrl;
|
||||
let extensionVersion;
|
||||
let extensionTitle;
|
||||
|
||||
fetch(ENDPOINT_URL)
|
||||
.then(res => res.json())
|
||||
.then(onResponse)
|
||||
.catch(onError);
|
||||
let bridgeVersion;
|
||||
const bridgeAssets = [];
|
||||
|
||||
function onResponse(res) {
|
||||
for (const release of res.reverse()) {
|
||||
const PATTERN_FILE_EXT = /.*\.(.*)$/;
|
||||
const PATTERN_ARCH = /.*(x86|x64|arm64)\..*$/;
|
||||
|
||||
for (const release of releaseList) {
|
||||
const releaseBridgeAssets = [];
|
||||
for (const asset of release.assets) {
|
||||
const formattedSize = formatSize(asset.size);
|
||||
const { tag_name } = release;
|
||||
const fileExtension = asset.name.match(PATTERN_FILE_EXT).pop();
|
||||
if (fileExtension === "xpi") {
|
||||
if (extensionUrl) break;
|
||||
|
||||
const REGEX_EXT = /.*\.(.*)$/;
|
||||
const REGEX_ARCH = /.*(x(?:86|64))\..*$/;
|
||||
|
||||
switch (asset.name.match(REGEX_EXT).pop()) {
|
||||
case "xpi":
|
||||
downloadExtBtn.href = asset.browser_download_url;
|
||||
downloadExtBtn.title = `${asset.name} (${formattedSize})`;
|
||||
downloadExtBtn.dataset.version = tag_name;
|
||||
downloadExtBtn.removeAttribute("disabled");
|
||||
break;
|
||||
|
||||
case "exe":
|
||||
switch (asset.name.match(REGEX_ARCH).pop()) {
|
||||
case "x86":
|
||||
populateAppListApp(
|
||||
appListWin32Btn,
|
||||
asset.browser_download_url,
|
||||
asset.name,
|
||||
formattedSize,
|
||||
tag_name
|
||||
);
|
||||
break;
|
||||
case "x64":
|
||||
populateAppListApp(
|
||||
appListWin64Btn,
|
||||
asset.browser_download_url,
|
||||
asset.name,
|
||||
formattedSize,
|
||||
tag_name
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case "pkg":
|
||||
populateAppListApp(
|
||||
appListMacBtn,
|
||||
asset.browser_download_url,
|
||||
asset.name,
|
||||
formattedSize,
|
||||
tag_name
|
||||
);
|
||||
break;
|
||||
|
||||
case "deb":
|
||||
populateAppListApp(
|
||||
appListDebBtn,
|
||||
asset.browser_download_url,
|
||||
asset.name,
|
||||
formattedSize,
|
||||
tag_name
|
||||
);
|
||||
break;
|
||||
|
||||
case "rpm":
|
||||
populateAppListApp(
|
||||
appListRpmBtn,
|
||||
asset.browser_download_url,
|
||||
asset.name,
|
||||
formattedSize,
|
||||
tag_name
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (platform) {
|
||||
switch (platform) {
|
||||
case "win":
|
||||
downloadAppBtn.href = appListWin64Btn.href;
|
||||
downloadAppBtn.title = appListWin64Btn.title;
|
||||
downloadAppBtn.dataset.version =
|
||||
appListWin64Btn.dataset.version;
|
||||
break;
|
||||
case "mac":
|
||||
downloadAppBtn.href = appListMacBtn.href;
|
||||
downloadAppBtn.title = appListMacBtn.title;
|
||||
downloadAppBtn.dataset.version = appListMacBtn.dataset.version;
|
||||
break;
|
||||
|
||||
default: {
|
||||
return;
|
||||
extensionUrl = asset.browser_download_url;
|
||||
extensionVersion = release.tag_name;
|
||||
extensionTitle = `${asset.name} (${formatSize(asset.size)})`;
|
||||
} else {
|
||||
switch (fileExtension) {
|
||||
case "exe":
|
||||
case "pkg":
|
||||
case "deb":
|
||||
case "rpm":
|
||||
if (bridgeAssets.length) break;
|
||||
releaseBridgeAssets.push(asset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
downloadAppBtn.removeAttribute("disabled");
|
||||
if (releaseBridgeAssets.length) {
|
||||
bridgeVersion = release.tag_name;
|
||||
bridgeAssets.push(...releaseBridgeAssets);
|
||||
}
|
||||
}
|
||||
|
||||
downloadExtBtn.href = extensionUrl;
|
||||
downloadExtBtn.title = extensionTitle;
|
||||
downloadExtBtn.dataset.version = extensionVersion;
|
||||
downloadExtBtn.removeAttribute("disabled");
|
||||
|
||||
for (const asset of bridgeAssets) {
|
||||
const fileExtension = asset.name.match(PATTERN_FILE_EXT).pop();
|
||||
const arch = asset.name.match(PATTERN_ARCH).pop();
|
||||
|
||||
const assetTitle = `${asset.name} (${formatSize(asset.size)})`;
|
||||
|
||||
let assetTag;
|
||||
let assetPlatform;
|
||||
|
||||
switch (fileExtension) {
|
||||
case "exe":
|
||||
switch (arch) {
|
||||
case "x64":
|
||||
assetTag = "64-bit";
|
||||
assetPlatform = "win";
|
||||
break;
|
||||
case "x86":
|
||||
assetTag = "32-bit";
|
||||
assetPlatform = "win";
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case "pkg":
|
||||
switch (arch) {
|
||||
case "x64":
|
||||
assetTag = "Intel";
|
||||
assetPlatform = "mac";
|
||||
break;
|
||||
case "arm64":
|
||||
assetTag = "ARM";
|
||||
assetPlatform = "mac";
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case "deb":
|
||||
assetTag = "DEB";
|
||||
assetPlatform = "linux";
|
||||
break;
|
||||
case "rpm":
|
||||
assetTag = "RPM";
|
||||
assetPlatform = "linux";
|
||||
break;
|
||||
}
|
||||
|
||||
addBridgeDownload(
|
||||
assetTag,
|
||||
bridgeVersion,
|
||||
asset.browser_download_url,
|
||||
assetTitle,
|
||||
assetPlatform,
|
||||
fileExtension === "deb" || fileExtension === "rpm"
|
||||
? fileExtension
|
||||
: undefined
|
||||
);
|
||||
}
|
||||
|
||||
if (!platform) {
|
||||
downloadsBridgeAll.open = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onError(err) {
|
||||
console.error("Failed to fetch download links", err);
|
||||
}
|
||||
(async () => {
|
||||
try {
|
||||
populateDownloads(
|
||||
await fetch(
|
||||
"https://api.github.com/repos/hensm/fx_cast/releases"
|
||||
).then(res => res.json())
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch downloads!", err);
|
||||
}
|
||||
})();
|
||||
|
||||
function formatSize(bytes, precision = 1, useMetric = false) {
|
||||
const factor = useMetric ? 1000 : 1024;
|
||||
@@ -222,9 +249,5 @@ function formatSize(bytes, precision = 1, useMetric = false) {
|
||||
return `${(bytes / txbyte).toFixed(precision)} ${
|
||||
useMetric ? "TB" : "TiB"
|
||||
}`;
|
||||
} else if (bytes >= pxbyte) {
|
||||
return `${(bytes / pxbyte).toFixed(precision)} ${
|
||||
useMetric ? "PB" : "PiB"
|
||||
}`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user