Bug 574286, new ratings widget

apps/bandwagon/helpers.py

@@ -50,10 +50,8 @@ def barometer(context, collection):
 
     if request.user.is_authenticated():
         # TODO: Use reverse when bandwagon is on Zamboni.
-        base_action = remora_url(u'collections/vote/%s' % collection.url_slug)
-        up_action = base_action + '/up'
-        down_action = base_action + '/down'
-        cancel = base_action + '/cancel'
+        up_action = collection.upvote_url()
+        down_action = collection.downvote_url()
         up_title = _('Add a positive vote for this collection')
         down_title = _('Add a negative vote for this collection')
         cancel_title = _('Remove my vote for this collection')
@@ -63,12 +61,13 @@ def barometer(context, collection):
             user_vote = votes[0]
 
     else:
-        up_action = down_action = cancel_action = login_link(c)
+        up_action = down_action = login_link(c)
         login_title = _('Log in to vote for this collection')
         up_title = down_title = cancel_title = login_title
 
     up_class = 'upvotes'
     down_class = 'downvotes'
+    cancel_class = 'cancel_vote'
 
     total_votes = collection.upvotes + collection.downvotes
 
@@ -81,9 +80,13 @@ def barometer(context, collection):
         down_width = max(down_ratio - 1, 0)
 
     if user_vote:
-        up_class += ' voted'
-        down_class += ' voted'
-    up_class
+        if user_vote.vote > 0:
+            up_class += ' voted'
+        else:
+            down_class += ' voted'
+    else:
+        cancel_class += ' hidden'
+
     c.update(locals())
     c.update({'c': collection})
     return c

apps/bandwagon/models.py

@@ -122,11 +122,23 @@ class Collection(amo.models.ModelBase):
 
     def get_url_path(self):
         if settings.NEW_COLLECTIONS:
-            nick = self.author.nickname if self.author else 'anonymous'
-            return reverse('collections.detail', args=[nick, self.slug])
+            return reverse('collections.detail',
+                            args=[self.author_nickname, self.slug])
         else:
             return '/collection/%s' % self.url_slug
 
+    def upvote_url(self):
+        return reverse('collections.vote',
+                       args=[self.author_nickname, self.slug, 'up'])
+
+    def downvote_url(self):
+        return reverse('collections.vote',
+                       args=[self.author_nickname, self.slug, 'down'])
+
+    @property
+    def author_nickname(self):
+        return self.author.nickname if self.author else 'anonymous'
+
     @classmethod
     def get_fallback(cls):
         return cls._meta.get_field('default_locale')

apps/bandwagon/templates/bandwagon/barometer.html

@@ -1,12 +1,33 @@
 <div class="barometer">
-
-  <form method="post" action="{{ up_action }}">
+  <form method="post" class="upvote" action="{{ up_action }}">
     <input class="{{ up_class }}" value="{{ c.upvotes }}" type="submit"
            title="{{ up_title }}"/>
   </form>
 
-  <form method="post" action="{{ down_action }}">
+  <form method="post" class="downvote" action="{{ down_action }}">
     <input class="{{ down_class }}" value="{{ c.downvotes }}" type="submit"
            title="{{ down_title }}">
   </form>
+  {# L10n: Link to remove a collection vote #}
+  <a class="{{ cancel_class }}" href="#" title="{{ cancel_title }}">{{ _('Remove') }}</a>
+  {% if user.is_anonymous() %}
+    <div class="collection-rate-dropdown install-note">
+      <div class="collection-rate-login">
+        <p>
+          {% trans %}
+          To rate collections, you must have an add-ons
+          account.
+          {% endtrans %}
+        </p>
+        <p class="register-button">
+          <a class="button" href="{{ remora_url('users/register') }}">{{ _('Create an Add-ons Account') }}</a>
+        </p>
+        <p>
+          {% trans login=login_link() %}
+            or <a href="{{ login }}">log in to your current account</a>
+          {% endtrans %}
+        </p>
+      </div>
+    </div>
+  {% endif %}
 </div>

media/css/main-mozilla.css

@@ -2801,6 +2801,12 @@ html[xmlns] .clearfix {
 
 .barometer form {
     display: inline-block;
+    position: relative;
+}
+
+.barometer .cancel_vote {
+    font-size: .9em;
+    margin: 0 0 0 .5em;
 }
 
 /* .upvotes and .downvotes are the numbers + thumb images, in inputs. */

media/css/zamboni/zamboni.css

@@ -2380,14 +2380,26 @@ h6.author, .author a {
     left: -42px;
 }
 
-.collection-add-dropdown {
+.collection-add-dropdown, .collection-rate-dropdown {
     margin: 0;
     display: none;
     width: 200px;
-    left: -42px;
     padding: 1em;
 }
 
+.collection-rate-dropdown {
+    margin-top:1em;
+}
+
+.upvote .collection-rate-dropdown {
+    left: -56px;
+}
+
+.downvote .collection-rate-dropdown {
+    left: inherit;
+    right: -76px;
+}
+
 .collection-add-dropdown a {
     color: #0055EE;
 }

media/js/zamboni/collections.js

@@ -269,18 +269,74 @@ $(document).ready(collections.recently_viewed);
 $(document).ready(function() {
     /* Hijack the voting forms to submit over xhr.
      *
-     * On success we get all this HTML back again, so it's replaced with a more
-     * up-to-date version of itself.
+     * On success we update the vote counts,
+     * and show/hide the 'Remove' link.
      */
      var callback = function(e) {
         e.preventDefault();
-        var the_form = this;
-        $.post(this.action, $(this).serialize(), function(content) {
-           $(the_form).closest('.barometer').parent().html(content)
-               .find('form').submit(callback);
+        var the_form = $(this);
+        $.post(this.action, $(this).serialize(), function(content, status, xhr) {
+            if (xhr.status == 200) {
+                var barometer = the_form.closest('.barometer');
+                var oldvote = $('input.voted', barometer);
+                var newvote = $('input[type="submit"]', the_form);
+                var cancel = $('.cancel_vote', barometer);
+
+                //If the vote cancels an existing vote, cancel said vote
+                if (oldvote.length) {
+                    oldvote.get(0).value--;
+                    oldvote.removeClass('voted');
+                    cancel.hide();
+                }
+
+                //Render new vote if it wasn't a double
+                if (oldvote.get(0) !== newvote.get(0)) {
+                    newvote.get(0).value++;
+                    newvote.addClass('voted');
+                    cancel.show();
+                }
+            }
         });
     };
-    $('body[data-anonymous["false"]] .barometer form').submit(callback);
+    if (z.anonymous) {
+        $('.barometer form').submit(function(e) {
+            e.preventDefault();
+            var the_form = this;
+            var dropdown = $('.collection-rate-dropdown', $(the_form).closest('.barometer'));
+                if ($(the_form).hasClass('downvote')) {
+                    dropdown.addClass('left');
+                } else {
+                    dropdown.removeClass('left');
+                }
+                dropdown.detach().appendTo(the_form).show();
+
+            // Clear popup when we click outside it.
+            setTimeout(function(){
+                function cb(e) {
+                    _root = dropdown.get(0);
+                    // Bail if the click was somewhere on the popup.
+                    if (e.type == 'click' &&
+                        _root == e.target ||
+                        _.indexOf($(e.target).parents(), _root) != -1) {
+                        return;
+                    }
+                    dropdown.hide();
+                    $(document.body).unbind('click newPopup', cb);
+                }
+
+                $(document.body).bind('click newPopup', cb);
+            }, 0);
+
+        });
+    } else {
+        $('.barometer form').submit(callback);
+        $('.barometer .cancel_vote').click(function (e) {
+            e.preventDefault();
+            //Clicking 'Remove' re-submits the user's vote, canceling it.
+            $('input.voted', $(this).closest('.barometer')).closest('form').submit();
+        });
+    }
+
 })
 
 $(document).ready(function(){