[extensions-web] extension-detail: add download options.

[Yuri Konotopov <ykonotopov src gnome org>]

commit 201e75dc844f365a4d9beca15fa513fb651af436
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Sun Sep 17 02:42:20 2017 +0400

    extension-detail: add download options.
    
    Fixes: https://bugzilla.gnome.org/show_bug.cgi?id=666632

 sweettooth/extensions/models.py                    |   20 +++++
 .../extensions/templates/extensions/detail.html    |   15 ++++-
 sweettooth/extensions/views.py                     |    1 +
 sweettooth/static/css/sweettooth.css               |   13 +++
 sweettooth/static/js/extensionUtils.js             |   80 ++++++++++----------
 sweettooth/static/js/extensions.js                 |   46 +++++++++++
 sweettooth/static/js/main.js                       |    1 +
 7 files changed, 136 insertions(+), 40 deletions(-)
---
diff --git a/sweettooth/extensions/models.py b/sweettooth/extensions/models.py
index eb5a38c..7d0bd66 100644
--- a/sweettooth/extensions/models.py
+++ b/sweettooth/extensions/models.py
@@ -63,6 +63,22 @@ def build_shell_version_map(versions):
 
     return shell_version_map
 
+def build_shell_version_array(versions):
+    shell_version_map = {}
+
+    for version in versions:
+        for shell_version in version.shell_versions.all():
+            key = shell_version.version_string
+            if key not in shell_version_map:
+                shell_version_map[key] = {}
+
+            if version.pk not in shell_version_map[key]:
+                shell_version_map[key][version.pk] = dict(
+                    pk=version.pk,
+                    version=version.version)
+
+    return shell_version_map
+
 
 def make_screenshot_filename(obj, filename=None):
     return "screenshots/screenshot_%d.png" % (obj.pk,)
@@ -151,6 +167,10 @@ class Extension(models.Model):
     def visible_shell_version_map(self):
         return build_shell_version_map(self.visible_versions)
 
+    @property
+    def visible_shell_version_array(self):
+        return build_shell_version_array(self.visible_versions)
+
 class ExtensionPopularityItem(models.Model):
     extension = models.ForeignKey(Extension, db_index=True,
                                   related_name='popularity_items')
diff --git a/sweettooth/extensions/templates/extensions/detail.html 
b/sweettooth/extensions/templates/extensions/detail.html
index 3ad0f7e..ca125d3 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -5,7 +5,8 @@
     <div class="extension single-page {% block extra-ext-class %}{% endblock %}"
          data-epk="{{ extension.pk }}"
          data-uuid="{{ extension.uuid }}"
-         data-svm="{{ shell_version_map }}">
+         data-svm="{{ shell_version_map }}"
+         data-versions="{{ visible_versions }}">
       <div class="extension-header col-xs-12 col-sm-8 col-md-8 col-lg-8 no-padding">
         {% spaceless %}
         {% block icon %}
@@ -50,6 +51,18 @@
               <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
               {% endif %}
             </dl>
+            <dl>
+              <dt>Download</dt>
+              <dd class="extension-download">
+                  <select class="shell-version form-control">
+                      <option>Shell version…</option>
+                  </select>
+
+                  <select class="extension-version form-control">
+                      <option>Extension version…</option>
+                  </select>
+              </dd>
+            </dl>
         </div>
       </div>
 
diff --git a/sweettooth/extensions/views.py b/sweettooth/extensions/views.py
index f7b4f5b..1144e39 100644
--- a/sweettooth/extensions/views.py
+++ b/sweettooth/extensions/views.py
@@ -280,6 +280,7 @@ def extension_view(request, obj, **kwargs):
     context = dict(shell_version_map = json.dumps(extension.visible_shell_version_map),
                    extension = extension,
                    all_versions = extension.versions.order_by('-version'),
+                   visible_versions=json.dumps(extension.visible_shell_version_array),
                    is_visible = extension.latest_version is not None,
                    next=extension.get_absolute_url())
     return render(request, template_name, context)
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 12c25ac..e3ffcad 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -291,6 +291,19 @@ li.extension:last-child, #local_extensions div.extension:last-child {
     color: #666;
 }
 
+.extension .extension-download select {
+    display: inline;
+    width: auto;
+}
+
+.extension .extension-download .extension-version {
+    display: none;
+}
+
+.extension .extension-download.shell-selected .extension-version {
+    display: inline;
+}
+
 /* Upgrade, Configure, Uninstall buttons */
 
 .extension .controls {
diff --git a/sweettooth/static/js/extensionUtils.js b/sweettooth/static/js/extensionUtils.js
index 77c60dd..b1482b4 100644
--- a/sweettooth/static/js/extensionUtils.js
+++ b/sweettooth/static/js/extensionUtils.js
@@ -37,47 +37,49 @@ define([], function () {
                PER_USER: 2
        };
 
-       exports.grabProperExtensionVersion = function (map, current, findBestVersion) {
-               function getBestShellVersion() {
-                       function versionCompare(a, b) {
-                               function toInt(value) {
-                                       return parseInt(value);
-                               }
-
-                               if (a == b)
-                               {
-                                       return 0;
-                               }
-
-                               a = a.split('.').map(toInt);
-                               b = b.split('.').map(toInt);
-
-                               for (let i = 0; i < Math.max(a.length, b.length); i++)
-                               {
-                                       if (a.length < i + 1)
-                                       {
-                                               return -1;
-                                       }
-
-                                       if (b.length < i + 1)
-                                       {
-                                               return 1;
-                                       }
-
-                                       if (a[i] < b[i])
-                                       {
-                                               return -1;
-                                       }
-
-                                       if (b[i] < a[i])
-                                       {
-                                               return 1;
-                                       }
-                               }
-
-                               return 0;
+       function versionCompare(a, b) {
+               function toInt(value) {
+                       return parseInt(value);
+               }
+
+               if (a == b)
+               {
+                       return 0;
+               }
+
+               a = a.split('.').map(toInt);
+               b = b.split('.').map(toInt);
+
+               for (let i = 0; i < Math.max(a.length, b.length); i++)
+               {
+                       if (a.length < i + 1)
+                       {
+                               return -1;
+                       }
+
+                       if (b.length < i + 1)
+                       {
+                               return 1;
+                       }
+
+                       if (a[i] < b[i])
+                       {
+                               return -1;
+                       }
+
+                       if (b[i] < a[i])
+                       {
+                               return 1;
                        }
+               }
+
+               return 0;
+       }
 
+       exports.shellVersionCompare = versionCompare;
+
+       exports.grabProperExtensionVersion = function (map, current, findBestVersion) {
+               function getBestShellVersion() {
                        let supported_shell_versions = Object.keys(map).sort(versionCompare);
 
                        if (versionCompare(supported_shell_versions[0], current) == 1)
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index f08f437..0e1c1c0 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -39,6 +39,52 @@ define(['jquery', 'messages', 'dbus!_', 'extensionUtils', 'templates', 'paginato
                        });
                };
 
+               $.fn.addDownloadOptions = function () {
+                       return this.each(function () {
+                               let $extension = $(this);
+                               let $extension_download = $extension.find('.extension-download');
+                               let $shell_version_select = $extension.find('select.shell-version');
+                               let extension_versions = $extension.data('versions');
+                               let uuid = $extension.data('uuid');
+
+                               let shell_versions = Object.keys(extension_versions);
+                               shell_versions.sort(extensionUtils.shellVersionCompare).reverse();
+
+                               for(let shell_version of shell_versions)
+                               {
+                                       $shell_version_select.append(
+                                               $('<option />').val(shell_version).text(shell_version)
+                                       );
+                               }
+
+                               $extension.on('change', 'select.shell-version', function(event) {
+                                       let $extension_version_select = 
$extension_download.find('select.extension-version');
+                                       $extension_version_select.find('option:not(:first)').remove();
+
+                                       if($(this).prop('selectedIndex'))
+                                       {
+                                               let shell_version = $(this).val();
+                                               for (let extension_version_pk in 
extension_versions[shell_version])
+                                               {
+                                                       $extension_version_select.append(
+                                                               $('<option 
/>').val(extension_version_pk).text(extension_versions[shell_version][extension_version_pk].version)
+                                                       );
+                                               }
+                                       }
+                                       $extension_download.toggleClass('shell-selected', 
!!$(this).prop('selectedIndex'));
+                               });
+
+                               $extension.on('change', 'select.extension-version', function(event) {
+                                       if($(this).prop('selectedIndex'))
+                                       {
+                                               window.location = '/download-extension/'
+                                                       + encodeURIComponent(uuid) + 
'.shell-extension.zip?version_tag='
+                                                       + encodeURIComponent($(this).val());
+                                       }
+                               });
+                       });
+               };
+
                // While technically we shouldn't have mismatched API versions,
                // the plugin doesn't check whether the Shell matches, so if someone
                // is running with an old Shell version but a newer plugin, error out.
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index e88d849..310d3e1 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -63,6 +63,7 @@ function($, messages, modal, hashParamUtils, templates, staticfiles) {
 
         $('#local_extensions').addLocalExtensions();
         $('.extension.single-page').addExtensionSwitch();
+        $('.extension.single-page').addDownloadOptions();
 
         $.extend($.fn.raty.defaults, {
             path: '/static/images/',