moved post vote buttons to css background, simplified the vote button handler javascript

7 files changed, 83 insertions, 91 deletions

diff --git a/askbot/models/meta.py b/askbot/models/meta.py
index 9022a7ec..cbec7d33 100644
--- a/askbot/models/meta.py
+++ b/askbot/models/meta.py
@@ -49,6 +49,10 @@ class Vote(base.MetaContent, base.UserContent):
     def __unicode__(self):
         return '[%s] voted at %s: %s' %(self.user, self.voted_at, self.vote)
 
+    def __int__(self):
+        """1 if upvote -1 if downvote"""
+        return self.vote
+
     def is_upvote(self):
         return self.vote == self.VOTE_UP
 
diff --git a/askbot/skins/common/media/js/post.js b/askbot/skins/common/media/js/post.js
index 52772cc0..82f76bc8 100644
--- a/askbot/skins/common/media/js/post.js
+++ b/askbot/skins/common/media/js/post.js
@@ -321,27 +321,27 @@ var Vote = function(){
         return $(favoriteNumber);
     };
     var getQuestionVoteUpButton = function(){
-        var questionVoteUpButton = 'div.'+ voteContainerId +' img[id^='+ imgIdPrefixQuestionVoteup +']';
+        var questionVoteUpButton = 'div.'+ voteContainerId +' div[id^='+ imgIdPrefixQuestionVoteup +']';
         return $(questionVoteUpButton);
     };
     var getQuestionVoteDownButton = function(){
-        var questionVoteDownButton = 'div.'+ voteContainerId +' img[id^='+ imgIdPrefixQuestionVotedown +']';
+        var questionVoteDownButton = 'div.'+ voteContainerId +' div[id^='+ imgIdPrefixQuestionVotedown +']';
         return $(questionVoteDownButton);
     };
     var getAnswerVoteUpButtons = function(){
-        var answerVoteUpButton = 'div.'+ voteContainerId +' img[id^='+ imgIdPrefixAnswerVoteup +']';
+        var answerVoteUpButton = 'div.'+ voteContainerId +' div[id^='+ imgIdPrefixAnswerVoteup +']';
         return $(answerVoteUpButton);
     };
     var getAnswerVoteDownButtons = function(){
-        var answerVoteDownButton = 'div.'+ voteContainerId +' img[id^='+ imgIdPrefixAnswerVotedown +']';
+        var answerVoteDownButton = 'div.'+ voteContainerId +' div[id^='+ imgIdPrefixAnswerVotedown +']';
         return $(answerVoteDownButton);
     };
     var getAnswerVoteUpButton = function(id){
-        var answerVoteUpButton = 'div.'+ voteContainerId +' img[id='+ imgIdPrefixAnswerVoteup + id + ']';
+        var answerVoteUpButton = 'div.'+ voteContainerId +' div[id='+ imgIdPrefixAnswerVoteup + id + ']';
         return $(answerVoteUpButton);
     };
     var getAnswerVoteDownButton = function(id){
-        var answerVoteDownButton = 'div.'+ voteContainerId +' img[id='+ imgIdPrefixAnswerVotedown + id + ']';
+        var answerVoteDownButton = 'div.'+ voteContainerId +' div[id='+ imgIdPrefixAnswerVotedown + id + ']';
         return $(answerVoteDownButton);
     };
     
@@ -373,22 +373,13 @@ var Vote = function(){
         return $(removeAnswerLinks);
     };
    
-    var setVoteImage = function(voteType, undo, object){
-        var flag = undo ? "" : "-on";
-        var arrow = (voteType == VoteType.questionUpVote || voteType == VoteType.answerUpVote) ? "up" : "down";
-        object.attr("src", mediaUrl("media/images/vote-arrow-"+ arrow + flag +".png"));
-        
-        // if undo voting, then undo the pair of arrows.
-        if(undo){
-            if(voteType == VoteType.questionUpVote || voteType == VoteType.questionDownVote){
-                $(getQuestionVoteUpButton()).attr("src", mediaUrl("media/images/vote-arrow-up.png"));
-                $(getQuestionVoteDownButton()).attr("src", mediaUrl("media/images/vote-arrow-down.png"));
-            }
-            else{
-                $(getAnswerVoteUpButton(postId)).attr("src", mediaUrl("media/images/vote-arrow-up.png"));
-                $(getAnswerVoteDownButton(postId)).attr("src", mediaUrl("media/images/vote-arrow-down.png"));
-            }
+    var setVoteImage = function(voteType, undo, elem){
+        elem.siblings('.post-vote').removeClass('on');
+        if (undo){
+            elem.removeClass('on');
+            return;
         }
+        elem.addClass('on');
     };
     
     var setVoteNumber = function(object, number){
@@ -566,6 +557,7 @@ var Vote = function(){
         }
         else {
             if (data.status == '1'){
+                //cancel vote
                 setVoteImage(voteType, true, object);
             }
             else {
diff --git a/askbot/skins/common/templates/question/answer_vote_buttons.html b/askbot/skins/common/templates/question/answer_vote_buttons.html
index bef26b75..841fe55a 100644
--- a/askbot/skins/common/templates/question/answer_vote_buttons.html
+++ b/askbot/skins/common/templates/question/answer_vote_buttons.html
@@ -1,22 +1,8 @@
-<img id="answer-img-upvote-{{ answer.id }}" class="answer-img-upvote" 
-    {% if user_answer_votes[answer.id] == 1 %}
-        src="{{'/images/vote-arrow-up-on.png'|media}}" 
-    {% else %}
-        src="{{'/images/vote-arrow-up.png'|media}}" 
-    {% endif %}
-    alt="{% trans %}i like this answer (click again to cancel){% endtrans %}"
-    title="{% trans %}i like this answer (click again to cancel){% endtrans %}"/>
-<div id="answer-vote-number-{{ answer.id }}" class="vote-number" title="{% trans %}current number of votes{% endtrans %}">
-    {{ answer.score }}
-</div>
-<img id="answer-img-downvote-{{ answer.id }}" class="answer-img-downvote" 
-    {% if user_answer_votes[answer.id] == -1 %}
-        src="{{'/images/vote-arrow-down-on.png'|media}}" 
-    {% else %}
-        src="{{'/images/vote-arrow-down.png'|media}}" 
-    {% endif %}
-    alt="{% trans %}i dont like this answer (click again to cancel){% endtrans %}"
-    title="{% trans %}i dont like this answer (click again to cancel){% endtrans %}" />
+{{ macros.post_vote_buttons(
+        post = answer,
+        visitor_vote = user_answer_votes[answer.id]
+    )
+}}
 {% if request.user == question.author %}
 <img id="answer-img-accept-{{ answer.id }}" class="answer-img-accept" 
     {% if answer.accepted %}
diff --git a/askbot/skins/common/templates/question/question_vote_buttons.html b/askbot/skins/common/templates/question/question_vote_buttons.html
index b3db504f..ce6b18ff 100644
--- a/askbot/skins/common/templates/question/question_vote_buttons.html
+++ b/askbot/skins/common/templates/question/question_vote_buttons.html
@@ -1,35 +1,4 @@
-{% if question_vote %}
- <img id="question-img-upvote-{{ question.id }}" class="question-img-upvote" 
-    {% if question_vote.is_upvote() %}
-        src="{{'/images/vote-arrow-up-on.png'|media}}" 
-    {% else %}
-        src="{{'/images/vote-arrow-up.png'|media}}"
-    {% endif %}
-    alt="{% trans %}i like this post (click again to cancel){% endtrans %}"
-    title="{% trans %}i like this post (click again to cancel){% endtrans %}" />
-<div id="question-vote-number-{{ question.id }}" class="vote-number" 
-    title="{% trans %}current number of votes{% endtrans %}">
-    {{ question.score }}
-</div>
-<img id="question-img-downvote-{{ question.id }}" class="question-img-downvote" 
-    {% if question_vote.is_downvote() %}
-        src="{{'/images/vote-arrow-down-on.png'|media}}" 
-    {% else %}
-        src="{{'/images/vote-arrow-down.png'|media}}" 
-    {% endif %}
-    alt="{% trans %}i dont like this post (click again to cancel){% endtrans %}"
-    title="{% trans %}i dont like this post (click again to cancel){% endtrans %}" />
-{% else %}
-<img id="question-img-upvote-{{ question.id }}" class="question-img-upvote" 
-    alt="{% trans %}i like this post (click again to cancel){% endtrans %}"
-    src="{{'/images/vote-arrow-up.png'|media}}" 
-    title="{% trans %}i like this post (click again to cancel){% endtrans %}" />
-<div id="question-vote-number-{{ question.id }}" class="vote-number" 
-    title="{% trans %}current number of votes{% endtrans %}">
-    {{ question.score }}
-</div>
-<img id="question-img-downvote-{{ question.id }}" class="question-img-downvote" 
-    src="{{'/images/vote-arrow-down.png'|media}}"
-    alt="{% trans %}i dont like this post (click again to cancel){% endtrans %}"
-    title="{% trans %}i dont like this post (click again to cancel){% endtrans %}" />
-{% endif %}
+{{ macros.post_vote_buttons(
+    post = question,
+    visitor_vote = user_question_vote)
+}}
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 0b5bc70f..90674331 100644
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -1541,11 +1541,28 @@ span.delete-icon:hover {
         font-family:@yanone;
         line-height:15px;
     }
-    .question-img-upvote:hover {
+
+    .question-img-upvote, .question-img-downvote,
+    .answer-img-upvote, .answer-img-downvote {
+        width: 25px;
+        height: 25px;
+    }
+
+    .question-img-upvote, .answer-img-upvote {
+        background: url(../images/vote-arrow-up.png)
+    }
+
+    .question-img-downvote, .answer-img-downvote {
+        background: url(../images/vote-arrow-down.png)
+    }
+
+    .question-img-upvote:hover, .question-img-upvote.on,
+    .answer-img-upvote:hover, .answer-img-upvote.on {
         background: url(../images/vote-arrow-up-on.png)
     }
 
-    .question-img-downvote:hover {
+    .question-img-downvote:hover, .question-img-downvote.on,
+    .answer-img-downvote:hover, .answer-img-downvote.on {
         background: url(../images/vote-arrow-down-on.png)
     }
 
diff --git a/askbot/skins/default/templates/macros.html b/askbot/skins/default/templates/macros.html
index c90458a1..23111514 100644
--- a/askbot/skins/default/templates/macros.html
+++ b/askbot/skins/default/templates/macros.html
@@ -21,6 +21,32 @@
     </div>
 {%- endmacro -%}
 
+{%- macro post_vote_buttons(post = None, visitor_vote = None) -%}
+<div
+    id="{{post.post_type}}-img-upvote-{{ post.id }}"
+    class="{{post.post_type}}-img-upvote post-vote{% if visitor_vote == 1 %} on{% endif %}" 
+    {% if post.post_type == 'question' %}
+        title="{% trans %}i like this question (click again to cancel){% endtrans %}"
+    {% else %}
+        title="{% trans %}i like this answer (click again to cancel){% endtrans %}"
+    {% endif %}
+/></div>
+<div 
+    id="{{post.post_type}}-vote-number-{{ post.id }}"
+    class="vote-number"
+    title="{% trans %}current number of votes{% endtrans %}"
+>{{ post.score }}</div>
+<div
+    id="{{post.post_type}}-img-downvote-{{ post.id }}"
+    class="{{post.post_type}}-img-downvote post-vote{% if visitor_vote == -1 %} on{% endif %}" 
+    {% if post.post_type == 'question' %}
+        title="{% trans %}i dont like this question (click again to cancel){% endtrans %}" 
+    {% else %}
+        title="{% trans %}i dont like this answer (click again to cancel){% endtrans %}" 
+    {% endif %}
+/></div>
+{%- endmacro -%}
+
 {%- macro post_contributor_avatar_and_credentials(post, user) -%}
     {% if post.is_anonymous %}
         <img alt="{% trans %}anonymous user{% endtrans %}" src="{{ '/images/anon.png'|media }} " class="gravatar" width="32" height="32" />
diff --git a/askbot/views/readers.py b/askbot/views/readers.py
index eabef3c8..8df07874 100644
--- a/askbot/views/readers.py
+++ b/askbot/views/readers.py
@@ -428,13 +428,11 @@ def question(request, id):#refactor - long subroutine. display question body, an
     answers = answers.select_related(depth=1)
 
     user_answer_votes = {}
-    for answer in answers:
-        vote = answer.get_user_vote(request.user)
-        if vote is not None and not user_answer_votes.has_key(answer.id):
-            vote_value = -1
-            if vote.is_upvote():
-                vote_value = 1
-            user_answer_votes[answer.id] = vote_value
+    if request.user.is_authenticated():
+        for answer in answers:
+            vote = answer.get_user_vote(request.user)
+            if vote is not None and not answer.id in user_answer_votes:
+                user_answer_votes[answer.id] = int(vote)
 
     view_dic = {"latest":"-added_at", "oldest":"added_at", "votes":"-score" }
     orderby = view_dic[answer_sort_method]
@@ -515,19 +513,19 @@ def question(request, id):#refactor - long subroutine. display question body, an
     paginator_context = extra_tags.cnprog_paginator(paginator_data)
 
     favorited = question.has_favorite_by_user(request.user)
+    user_question_vote = 0
     if request.user.is_authenticated():
-        question_vote = question.votes.select_related().filter(user=request.user)
-    else:
-        question_vote = None #is this correct?
-    if question_vote is not None and question_vote.count() > 0:
-        question_vote = question_vote[0]
-
+        votes = question.votes.select_related().filter(user=request.user)
+        if votes.count() > 0:
+            user_question_vote = int(votes[0])
+        else:
+            user_question_vote = 0
 
     data = {
         'page_class': 'question-page',
         'active_tab': 'questions',
         'question' : question,
-        'question_vote' : question_vote,
+        'user_question_vote' : user_question_vote,
         'question_comment_count':question.comments.count(),
         'answer' : AnswerForm(question,request.user),
         'answers' : page_objects.object_list,