[extensions-web] js: Port Local Extensions page list to mustache

[Jasper St. Pierre <jstpierre src gnome org>]

commit e5614d2d089af91795dd1a21241a744f6631e2de
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Fri Mar 30 19:45:56 2012 -0400

    js: Port Local Extensions page list to mustache

 sweettooth/static/js/extensions.js                 |   60 ++++++++-----------
 .../templates/extensions/configure_button.mustache |    1 +
 .../static/js/templates/extensions/info.mustache   |   24 ++++++++
 sweettooth/static/js/templates/templatedata.js     |    2 +-
 4 files changed, 51 insertions(+), 36 deletions(-)
---
diff --git a/sweettooth/static/js/extensions.js b/sweettooth/static/js/extensions.js
index 82a4447..fe1bf89 100644
--- a/sweettooth/static/js/extensions.js
+++ b/sweettooth/static/js/extensions.js
@@ -89,9 +89,10 @@ function($, messages, dbusProxy, extensionUtils, templates) {
         });
     };
 
-    function addExtensionSwitch(uuid, extension, $elem) {
+    function addExtensionSwitch(extension, $elem) {
+        var uuid = extension.uuid;
         var $switch = $elem.find('.switch');
-        var _state = ExtensionState.UNINSTALLED;
+        var _state = extension.state !== undefined ? extension.state : ExtensionState.UNINSTALLED;
 
         $elem.data({'elem': $elem,
                     'state': _state,
@@ -206,20 +207,23 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                             });
                         }
 
-                        var $elem = $('<div>', {'class': 'extension'}).
-                            append($('<div>', {'class': 'switch'})).
-                            append($('<img>', {'class': 'icon'})).
-                            append($('<h3>', {'class': 'extension-name'}).text(extension.name)).
-                            append($('<span>', {'class': 'author'})).
-                            append($('<p>', {'class': 'description'}).text(extension.description));
+                        // Give us a dummy element that we'll replace when
+                        // rendering below, to keep renderExtension simple.
+                        var $elem = $('<a>');
 
-                        $elem.data('uuid', extension.uuid);
+                        function renderExtension() {
+                            var svm = extension.shell_version_map;
+                            if (svm)
+                                extension.want_uninstall = (extensionUtils.grabProperExtensionVersion(svm, dbusProxy.ShellVersion) !== null);
+                            extension.want_configure = (extension.hasPrefs && extension.state !== ExtensionState.OUT_OF_DATE);
 
-                        if (extension.hasPrefs && extension.state !== ExtensionState.OUT_OF_DATE)
-                            $elem.addLaunchExtensionPrefsButton(true);
+                            $elem = $(templates.extensions.info(extension)).replaceAll($elem);
 
-                        if (extension.state === ExtensionState.OUT_OF_DATE)
-                            $elem.addClass('out-of-date');
+                            if (extension.state === ExtensionState.OUT_OF_DATE)
+                                $elem.addClass('out-of-date');
+
+                            addExtensionSwitch(extension, $elem);
+                        }
 
                         $.ajax({
                             url: "/ajax/detail/",
@@ -228,25 +232,12 @@ function($, messages, dbusProxy, extensionUtils, templates) {
                                     version: extension.version },
                             type: "GET",
                         }).done(function(result) {
-                            $elem.
-                                find('span.author').text(" by ").append($('<a>', {'href': "/accounts/profile/" + result.creator}).text(result.creator)).end().
-                                find('img.icon').detach().end().
-                                find('h3').html($('<a>', {'href': result.link}).append($('<img>', {'class': 'icon', 'src': result.icon})).append(extension.name)).end();
-
-                            // The PK might not exist if the extension wasn't
-                            // installed from GNOME Shell Extensions.
-                            if (result.pk !== undefined) {
-                                $elem.
-                                    data('pk', result.pk).
-                                    append($('<button>', {'class': 'uninstall', 'title': "Uninstall"}).text("Uninstall").bind('click', uninstall));
-                            }
-
-                            addExtensionSwitch(uuid, extension, $elem);
-                        }).fail(function(e) {
-                            // If the extension doesn't exist, add a switch anyway
-                            // so the user can toggle the enabled state.
-                            if (e.status == 404)
-                                addExtensionSwitch(uuid, extension, $elem);
+                            $.extend(extension, result);
+                            renderExtension();
+                        }).fail(function(error) {
+                            // Had an error looking up the data for the
+                            //extension -- that's OK, just render it anyway.
+                            renderExtension();
                         });
 
                         $container.append($elem);
@@ -295,7 +286,7 @@ function($, messages, dbusProxy, extensionUtils, templates) {
             });
 
             dbusProxy.GetExtensionInfo(uuid).done(function(meta) {
-                addExtensionSwitch(uuid, meta, $extension);
+                addExtensionSwitch(meta, $extension);
             });
         });
     };
@@ -317,8 +308,7 @@ function($, messages, dbusProxy, extensionUtils, templates) {
         function launchExtensionPrefsButton($elem, uuid) {
             $elem.
                 find('.description').
-                before($('<span>', {'class': 'launch-prefs-button'}).
-                       text("Configure").
+                before($(templates.extensions.configure_button()).
                        click(function() {
                            dbusProxy.LaunchExtensionPrefs(uuid);
                        }));
diff --git a/sweettooth/static/js/templates/extensions/configure_button.mustache b/sweettooth/static/js/templates/extensions/configure_button.mustache
new file mode 100644
index 0000000..f91d401
--- /dev/null
+++ b/sweettooth/static/js/templates/extensions/configure_button.mustache
@@ -0,0 +1 @@
+<span class="launch-prefs-button">Configure</span>
diff --git a/sweettooth/static/js/templates/extensions/info.mustache b/sweettooth/static/js/templates/extensions/info.mustache
new file mode 100644
index 0000000..d7b7f1d
--- /dev/null
+++ b/sweettooth/static/js/templates/extensions/info.mustache
@@ -0,0 +1,24 @@
+<div class="extension" data-uuid="{{uuid}}">
+  <div class="switch"></div>
+  <img class="icon" src="{{icon}}">
+  <h3 class="extension-name">
+    {{#link}}
+      <a href="{{link}}" class="title-link"> <img src="{{icon}}" class="icon"> {{name}} </a>
+    {{/link}}
+    {{^link}}
+    {{name}}
+    {{/link}}
+  </h3>
+  {{#creator}}
+    <span class="author">by <a href="{{creator_url}}"> {{creator}} </a></span>
+  {{/creator}}
+  {{#want_configure}}
+    {{>extensions.configure_button}}
+  {{/want_configure}}
+  <p class="description">
+    {{description}}
+  </p>
+  {{#want_uninstall}}
+    <button class="uninstall" title="Uninstall">Uninstall</button>
+  {{/want_uninstall}}
+</div>
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 6b17a87..6a1f89d 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -1,4 +1,4 @@
 
 "use strict";
 
-define({"paginator": {"loading_page": "<div class=\"loading-page\">\n  Loading page... please wait.\n</div>"}, "messages": {"cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.", "cannot_list_local": "GNOME Shell Extensions cannot list your installed extensions.", "dummy_proxy": "You do not appear to have an up to date version of GNOME3. You won't be able to install extensions from here. See the <a href=\"about/#old-version\">about page</a> for more information."}, "upgrade": {"need_upgrade": "You have version {{current_version}} of \"{{extension_name}}\". The latest version is version {{latest_version}}. Click here to upgrade.", "latest_version": "You have the latest version of {{extension_name}}."}, "extensions": {"error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with
  this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", "uninstall": "You uninstalled <b>{{name}}. <a href=\"#\">Undo?</a>"}});
+define({"paginator": {"loading_page": "<div class=\"loading-page\">\n  Loading page... please wait.\n</div>"}, "messages": {"cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.", "cannot_list_local": "GNOME Shell Extensions cannot list your installed extensions.", "dummy_proxy": "You do not appear to have an up to date version of GNOME3. You won't be able to install extensions from here. See the <a href=\"about/#old-version\">about page</a> for more information."}, "upgrade": {"need_upgrade": "You have version {{current_version}} of \"{{extension_name}}\". The latest version is version {{latest_version}}. Click here to upgrade.", "latest_version": "You have the latest version of {{extension_name}}."}, "extensions": {"info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n  <div class=\"switch\"></div>\n  <img class=\"icon\" src=\"{{icon}}\">\n  <h3 class=\"extension-name\">\n    {{#link}}\n      <a href=\"{{link}}\" class=\"title-link\"> <
 img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n    {{/link}}\n    {{^link}}\n    {{name}}\n    {{/link}}\n  </h3>\n  {{#creator}}\n    <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n  {{/creator}}\n  {{#want_configure}}\n    {{>extensions.configure_button}}\n  {{/want_configure}}\n  <p class=\"description\">\n    {{description}}\n  </p>\n  {{#want_uninstall}}\n    <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n  {{/want_uninstall}}\n</div>", "configure_button": "<span class=\"launch-prefs-button\">Configure</span>", "error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n  {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n    Shell version: {{sv}}\n    Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", "uninstall": "You uninstall
 ed <b>{{name}}. <a href=\"#\">Undo?</a>"}});