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 0147e41..bc14010 100644 --- a/assets/static/js/custom_scripts.js +++ b/assets/static/js/custom_scripts.js @@ -4,34 +4,52 @@ "use strict"; /* Top-level variables */ - var 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 */ // Get the key corresponding to the current desktop operating system function getOSName() { - var platform = navigator.platform; + const platform = navigator.platform; if (!platform) { return "other"; } @@ -52,31 +70,44 @@ } // Get the button data corresponding to the current OS - function getButtonData() { - var osName = getOSName(); - return buttonData[osName]; + function getButtonsData() { + const osName = getOSName(); + return buttonsData[osName]; + } + + // 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) { + newButton + .getElementsByClassName("download-os-icon")[0] + .classList.add(icon); + } + return newButton; } /* Main functions */ - // Setup download button based on current OS + // Set up download button based on current OS function setupDownloadButton(downloadButton) { - var buttonData = getButtonData(); - downloadButton.href = buttonData.url; - downloadButton.getElementsByClassName("download-text")[0].textContent = - buttonData.text; - for (var i = 0; i < buttonData.icon.length; i++) { - downloadButton - .getElementsByClassName("download-os-icon")[0] - .classList.add(buttonData.icon[i]); + 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 */ // 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); }