From 830051120e7bc189a8e47777c0e3e7362f03929b Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Thu, 8 Feb 2024 14:37:29 -0600 Subject: [PATCH 1/2] Use modern ES6 (const/let, for...of) in custom scripts --- assets/static/js/custom_scripts.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/static/js/custom_scripts.js b/assets/static/js/custom_scripts.js index 0147e41..0279a5c 100644 --- a/assets/static/js/custom_scripts.js +++ b/assets/static/js/custom_scripts.js @@ -4,7 +4,7 @@ "use strict"; /* Top-level variables */ - var buttonData = { + const buttonData = { win: { text: "Download for Windows", icon: ["fab", "fa-windows"], @@ -31,7 +31,7 @@ // Get the key corresponding to the current desktop operating system function getOSName() { - var platform = navigator.platform; + const platform = navigator.platform; if (!platform) { return "other"; } @@ -53,7 +53,7 @@ // Get the button data corresponding to the current OS function getButtonData() { - var osName = getOSName(); + const osName = getOSName(); return buttonData[osName]; } @@ -61,14 +61,14 @@ // Setup download button based on current OS function setupDownloadButton(downloadButton) { - var buttonData = getButtonData(); + const buttonData = getButtonData(); downloadButton.href = buttonData.url; downloadButton.getElementsByClassName("download-text")[0].textContent = buttonData.text; - for (var i = 0; i < buttonData.icon.length; i++) { + for (const icon of buttonData.icon) { downloadButton .getElementsByClassName("download-os-icon")[0] - .classList.add(buttonData.icon[i]); + .classList.add(icon); } } @@ -76,7 +76,7 @@ // On initial DOM ready, set up the tour and the version dropdown document.addEventListener("DOMContentLoaded", function () { - var downloadButton = document.getElementById("download-buttons-button"); + const downloadButton = document.getElementById("download-buttons-button"); if (downloadButton) { setupDownloadButton(downloadButton); } From 1248fd7eb28008954f8de65e5f7767a3085886f9 Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Thu, 8 Feb 2024 16:45:56 -0600 Subject: [PATCH 2/2] Support >=1 download buttons per-OS & use to fix macOS M1/Intel --- assets/static/css/custom_styles.css | 4 +- assets/static/js/custom_scripts.js | 93 +++++++++++++++++++---------- 2 files changed, 64 insertions(+), 33 deletions(-) diff --git a/assets/static/css/custom_styles.css b/assets/static/css/custom_styles.css index e2f3930..37bb449 100644 --- a/assets/static/css/custom_styles.css +++ b/assets/static/css/custom_styles.css @@ -129,9 +129,9 @@ /*** Download button formatting ***/ #section-download-buttons .content-button { - margin-bottom: 0; + margin-bottom: 1em; margin-top: 0; - min-width: 380px; + min-width: 460px; } @media screen and (max-width: 480px) { diff --git a/assets/static/js/custom_scripts.js b/assets/static/js/custom_scripts.js index 0279a5c..bc14010 100644 --- a/assets/static/js/custom_scripts.js +++ b/assets/static/js/custom_scripts.js @@ -4,27 +4,45 @@ "use strict"; /* Top-level variables */ - const buttonData = { - win: { - text: "Download for Windows", - icon: ["fab", "fa-windows"], - url: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder_64bit_full.exe", - }, - mac: { - text: "Download for macOS", - icon: ["fab", "fa-apple"], - url: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder.dmg", - }, - linux: { - text: "Download for Linux (Anaconda)", - icon: ["fab", "fa-linux"], - url: "https://www.anaconda.com/download/", - }, - other: { - text: "Download Spyder", - icon: ["fas", "fa-download"], - url: "https://github.com/spyder-ide/spyder/releases/latest", - }, + const buttonsData = { + win: [ + { + id: "download-windows", + text: "Download for Windows", + icon: ["fab", "fa-windows"], + url: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder_64bit_full.exe", + }, + ], + mac: [ + { + id: "download-mac-m1", + text: "Download for macOS (M1)", + icon: ["fab", "fa-apple"], + url: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder_arm64.dmg", + }, + { + id: "download-mac-intel", + text: "Download for macOS (Intel)", + icon: ["fab", "fa-apple"], + url: "https://github.com/spyder-ide/spyder/releases/latest/download/Spyder_x86_64.dmg", + }, + ], + linux: [ + { + id: "download-linux", + text: "Download for Linux (Anaconda)", + icon: ["fab", "fa-linux"], + url: "https://www.anaconda.com/download/", + }, + ], + other: [ + { + id: "download-other", + text: "Download Spyder", + icon: ["fas", "fa-download"], + url: "https://github.com/spyder-ide/spyder/releases/latest", + }, + ], }; /* Helper functions */ @@ -52,24 +70,37 @@ } // Get the button data corresponding to the current OS - function getButtonData() { + function getButtonsData() { const osName = getOSName(); - return buttonData[osName]; + return buttonsData[osName]; } - /* Main functions */ - - // Setup download button based on current OS - function setupDownloadButton(downloadButton) { - const buttonData = getButtonData(); - downloadButton.href = buttonData.url; - downloadButton.getElementsByClassName("download-text")[0].textContent = + // Create the download button nodes from a prototype + function createDownloadButton(templateButton, buttonData) { + const newButton = templateButton.cloneNode(true); + newButton.id = buttonData.id; + newButton.href = buttonData.url; + newButton.getElementsByClassName("download-text")[0].textContent = buttonData.text; for (const icon of buttonData.icon) { - downloadButton + newButton .getElementsByClassName("download-os-icon")[0] .classList.add(icon); } + return newButton; + } + + /* Main functions */ + + // Set up download button based on current OS + function setupDownloadButton(downloadButton) { + const downloadButtonContainer = document.createElement("div"); + downloadButtonContainer.id = "download-buttons-container"; + for (const buttonData of getButtonsData()) { + const newButton = createDownloadButton(downloadButton, buttonData); + downloadButtonContainer.appendChild(newButton); + } + downloadButton.replaceWith(downloadButtonContainer); } /* Fire events */