Fix download button on macOS & add M1 and Intel options (#223)

spyder-ide · Feb 9, 2024 · 2da762d · 2da762d
2 parents e53fb35 + 1248fd7
commit 2da762d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 37 deletions.
diff --git 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
@@ -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);
     }