common/static/common/scripts/app.js

@@ -107,6 +107,36 @@
         return;
       }
 
+      // Show multi OS install buttons based on active platform
+      if (btnInstallActionItem.length > 1) {
+        btnInstallActionItem.forEach(function(item) {
+          // Hide all items by default
+          item.classList.add('d-none');
+
+          // Get item platform
+          const itemPlatform = item.getAttribute('data-platform');
+          const itemPlatformBase = itemPlatform.split('-')[0];
+          const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
+
+
+          // Get active platform
+
+          /*
+          The navigator objects' 'platform' proporties are arbitrary, and specific to the browser.
+
+          For a light match, we can use the first 3 characters of the platform string.
+          */
+
+          const activePlatform = navigator.platform.toLowerCase();
+          const activePlatformPrefix = activePlatform.substring(0, 3);
+
+          // Show button if item platform matches active platform
+          if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
+            item.classList.remove('d-none');
+          }
+        });
+      }
+
       // Show btnInstallAction
       btnInstall.addEventListener('click', function() {
         // Hide btnInstallGroup

extensions/templates/extensions/detail.html

@@ -193,6 +193,12 @@
                     <dd>
                       <ul class="ps-3">
                         {% for file in latest.files.all %}
+                          {% comment %}
+                            TODOs:
+                            - @back-end (?) show only the largest size
+                            - @front-end remove the list
+                          {% endcomment %}
+
                           <li class="lh-sm">
                             {{ file.size_bytes|filesizeformat }}<br>
                             <span class="fs-sm text-muted">({{ file.get_platforms|join:", " }})</span>
@@ -272,7 +278,7 @@
           </div>
           <div class="fade js-btn-install-action">
             {% for download_item in download_list %}
-              <div class="btn-install-action-item js-btn-install-action-item" data-install-url="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}" download="{{ download_item.name }}">
+              <div class="btn-install-action-item js-btn-install-action-item" data-install-url="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}" data-platform="{{ download_item.platform }}" download="{{ download_item.name }}">
                 <div class="btn-install-drag-group js-btn-install-drag-group mb-2 rounded">
                   <button class="btn btn-flex btn-primary btn-install-drag cursor-move js-btn-install-drag w-100" draggable="true">
                     <i class="i-move"></i>
@@ -286,6 +292,8 @@
                 </small>
               </div>
             {% endfor %}
+
+            {# TODO: add dropdown for other button install action items #}
           </div>
 
           {# If JavaScript is disabled. #}