change elements on the page along with the backup button (bug 640041)

jbalogh · Jun 30, 2011 · 550efce · 550efce
1 parent 47bafe1
commit 550efce
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 15 deletions.
diff --git a/apps/addons/templates/addons/button.html b/apps/addons/templates/addons/button.html
@@ -12,6 +12,10 @@
   {% if compat %}
      data-min="{{ compat.min.version }}"
      data-max="{{ compat.max.version }}"
+     data-version="{{ version.version }}"
+     data-compatible-apps="{{ version.compatible_apps[request.APP] }}"
+     data-lastupdated-isotime="{{ version.created|isotime }}"
+     data-lastupdated-datetime="{{ version.created|datetime }}"
   {% endif %}>
   <p class="install-button">
     {% set links = b.links() %}

diff --git a/apps/addons/templates/addons/details_box.html b/apps/addons/templates/addons/details_box.html
@@ -30,7 +30,7 @@
               <caption>{{ _('Add-on Information for {0}')|f(addon_name)|xssafe }}</caption>
             {% endwith %}
             <tbody>
-              <tr>
+              <tr class="addon-updated">
                 <th>{{ _('Updated') }}</th>
                 <td>
                   <time datetime="{{ addon.last_updated|isotime }}">{{
@@ -47,7 +47,7 @@
                 </tr>
               {% endif %}
               {% if addon.compatible_apps[APP] %}
-                <tr>
+                <tr class="addon-compatible">
                   <th>{{ _('Works with') }}</th>
                   <td>{{ addon.compatible_apps[APP] }}</td>
                 </tr>
@@ -214,4 +214,3 @@ <h3 id="releasenotes">{{ _('Release Notes', 'addons_display_release_notes') }}</
   {% if abuse_form %}
   {{ addon_report_abuse(hide=True, addon=addon) }}
   {% endif %}
-
diff --git a/media/js/zamboni/buttons.js b/media/js/zamboni/buttons.js
@@ -278,12 +278,25 @@ jQuery.fn.installButton = function() {
 
 jQuery.fn.showBackupButton = function() {
     this.each(function() {
-        var current = $(this).parent().find('.install'),
+        var $src, $dest,
+            $this = $(this),
+            $current = $this.parent().find('.install'),
             attr = 'data-version-supported';
-        if ($(this).find('.install').attr(attr) == 'true' &&
-            $(current).attr(attr) == 'false') {
-            $(current).closest('.install-shell').first().addClass('hidden');
-            $(this).removeClass('hidden').show();
+        if ($this.find('.install').attr(attr) == 'true' &&
+            $current.attr(attr) == 'false') {
+            $current.closest('.install-shell').first().addClass('hidden');
+            $this.removeClass('hidden').show();
+            // Alter other elements of the page, if they exist.
+            $dest = $('#addon-summary table');
+            if ($dest.exists()) {
+                $src = $this.find('div.install');
+                $dest.find('.addon-compatible td')
+                     .text($src.attr('data-compatible-apps'));
+                $dest.find('.addon-updated time')
+                     .attr('datetime', $src.attr('data-lastupdated-isotime'))
+                     .text($src.attr('data-lastupdated-datetime'));
+                $('h2.addon span.version').text($src.attr('data-version'));
+            }
         }
     });
 }

diff --git a/media/js/zamboni/tests/addon_tests.js b/media/js/zamboni/tests/addon_tests.js
@@ -1,11 +1,20 @@
-test('Buttons: Test backup button', function() {
-    $('.backup-button').showBackupButton();
+var buttonFixtures = {
+    setup: function() {
+        this.sandbox = tests.createSandbox('#buttons');
+    },
+    teardown: function() {
+        this.sandbox.remove();
+    }
+};
+
+module('Buttons', buttonFixtures);
 
+test('Test backup button', function() {
     var attr = 'data-version-supported',
-        current = $('#buttons .install').first();
-        current_wrapper = $('#buttons .install-shell').first();
-        backup = $('#buttons .backup-button .install').first();
-        backup_wrapper = $('#buttons .backup-button').first();
+        current = this.sandbox.find('.install').first();
+        current_wrapper = this.sandbox.find('.install-shell').first();
+        backup = this.sandbox.find('.backup-button .install').first();
+        backup_wrapper = this.sandbox.find('.backup-button').first();
 
     equals(backup_wrapper.hasClass('hidden'), false);
     equals(current_wrapper.hasClass('hidden'), true);
@@ -15,11 +24,17 @@ test('Buttons: Test backup button', function() {
     backup.attr(attr, 'false');
     current.attr(attr, 'true');
 
-    $('.backup-button').showBackupButton();
+    this.sandbox.find('.backup-button').showBackupButton();
     equals(backup_wrapper.hasClass('hidden'), true);
     equals(current_wrapper.hasClass('hidden'), false);
 });
 
+test('Test change elements on backup', function() {
+    this.sandbox.find('.backup-button').showBackupButton();
+    equals(this.sandbox.find('.addon-compatible td').text(), 'Fx 1.0');
+    equals(this.sandbox.find('.addon-updated time').text(), 'today');
+});
+
 var paypalFixtures = {
     setup: function() {
         this.sandbox = tests.createSandbox('#paypal');

diff --git a/templates/qunit.html b/templates/qunit.html
@@ -252,6 +252,13 @@ <h2 id="qunit-userAgent"></h2>
     <input id="csrfmiddlewaretoken" value="<csrf-from-input>">
   </div>
   <div id="buttons">
+    <h2 class="addon"><span class="version"></span></h2>
+    <div id="addon-summary">
+        <table>
+            <tr class="addon-compatible"><td></td></tr>
+            <tr class="addon-updated"><td><time></time></td></tr>
+        </table>
+    </div>
     <div class="install-shell">
         <div class="install featuredaddon"
              data-version-supported="false">
@@ -260,6 +267,12 @@ <h2 id="qunit-userAgent"></h2>
     <div class="backup-button hidden">
         <div class="install-shell">
             <div class="install featuredaddon"
+                 data-min=""
+                 data-max=""
+                 data-version="0.2"
+                 data-compatible-apps="Fx 1.0"
+                 data-lastupdated-isotime="today"
+                 data-lastupdated-datetime="today"
                  data-version-supported="true">
             </div>
         </div>