Reworked the widget form, including the JavaScript

- Turned the JavaScript code in to a jQuery plugin, removed most of the initialization code from the individual widget templates to a external JavaScript file, and added a {% phileo_js %} tag to load this plugin. - Each like button gets a unique ID, so multiple like buttons can appear on a single page - Made the widget a plain old form. This way, it works without JavaScript. Additionally, the CSRF stuff is included in the form by default, so the ajax_csrf.js script is obsolete
mx-moth · Nov 28, 2011 · 45b5c41 · 45b5c41
1 parent eb56d27
commit 45b5c41
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 104 deletions.
diff --git a/docs/changelog.rst b/docs/changelog.rst
@@ -3,6 +3,15 @@
 ChangeLog
 =========
 
+0.3
+---
+- Turned the JavaScript code in to a jQuery plugin, removed most of the initialization
+  code from the individual widget templates to a external JavaScript file, and added a
+  {% phileo_js %} tag to load this plugin.
+- Each like button gets a unique ID, so multiple like buttons can appear on a single
+  page
+- The like form works without JavaScript.
+
 0.2
 ---
 

diff --git a/docs/templatetags.rst b/docs/templatetags.rst
@@ -23,6 +23,15 @@ This renders some css style sheets that will style the widget.::
 
 It renders "phileo/_css.html" and can be overridden as desired.
 
+phileo_js
+---------
+
+This renders some script tags that are needed to make the widget work.::
+
+    {% phileo_js %}
+
+It renders "phileo/_js.html" and can be overridden as desired.
+
 
 likes_widget
 ------------
@@ -31,26 +40,11 @@ This renders a fragement of html that will be what the user will click
 on to unlike or like objects. It only has two required parameters, which
 are the user and the object.::
 
-    {% likes_widget user object [like_link_id="likes" like_span_total_class="phileo-count" toggle_class="phileo-liked"] %}
+    {% likes_widget user object [widget_id="unique_id" like_type="likes" toggle_class="phileo-liked"] %}
 
 
 It renders "phileo/_widget.html" and can be overridden as desired.
 
-
-likes_js
---------
-
-This is a simple inclusion template tag that will render a bit
-of javascript for doing the ajax toggling of a user's like for
-a given object. The only two required parameters are the first
-two which are the user doing the liking and the object that is
-the subject of the liking.::
-
-    {% likes_js user object [like_link="#likes" like_span_total="phileo-count" toggle_class="phileo-liked"] %}
-
-It renders "phileo/_script.html" and can be overriden as desired.
-
-
 liked
 -----
 

diff --git a/docs/usage.rst b/docs/usage.rst
@@ -17,14 +17,14 @@ Then in the <head> section of your template load the css::
     {% likes_css %}
 
 
-In the body where you want the liking widget to go, add::
+Load the required JavaScript file, wherever you load your JavaScript libraries::
 
-    {% likes_widget request.user post %}
+    {% phileo_js %}
 
 
-Then at the bottom of your page where include your javascript::
+In the body where you want the liking widget to go, add::
 
-    {% likes_js request.user post %}
+    {% likes_widget request.user post %}
 
 
-That's all you need to do to get the basics working.
+That's all you need to do to get the basics working.
diff --git a/phileo/static/phileo/js/ajax_csrf.js b/phileo/static/phileo/js/ajax_csrf.js
diff --git a/phileo/static/phileo/js/jquery.phileo.js b/phileo/static/phileo/js/jquery.phileo.js
@@ -0,0 +1,39 @@
+jQuery(function($) {
+
+    var PhileoLikes = function(form, options) {
+        this.options = $.extend({}, $.fn.phileo.defaults, options);
+        this.$form = $(form);
+
+        this.$count = $(this.options.count);
+
+        var self = this;
+        this.$form.submit(function(event) {
+            event.preventDefault();
+
+            $.ajax({
+                url: self.$form.attr('action'),
+                type: "POST",
+                data: self.$form.serialize(),
+                statusCode: {
+                    200: function(data, textStatus, jqXHR) {
+                        self.$count.text(data.likes_count);
+                        self.$form[data.liked ? 'addClass' : 'removeClass'](self.options.toggle_class);
+                    }
+                }
+            });
+        });
+    };
+
+    $.fn.phileo = function(options) {
+        $(this).each(function(i, el) {
+            var phileo = new PhileoLikes(el, options);
+            $(el).data('Phileo', {instance: phileo});
+        });
+        return this;
+    };
+
+    $.fn.phileo.defaults = {
+        toggle_class: 'phileo-liked',
+        count: false
+    };
+});
diff --git a/phileo/templates/phileo/_js.html b/phileo/templates/phileo/_js.html
@@ -0,0 +1 @@
+<script src="{{ STATIC_URL }}phileo/js/jquery.phileo.js"></script>
diff --git a/phileo/templates/phileo/_script.html b/phileo/templates/phileo/_script.html
diff --git a/phileo/templates/phileo/_widget.html b/phileo/templates/phileo/_widget.html
@@ -1,4 +1,23 @@
-<div class="phileo">
-    <a class="{{ toggle_class }}" id="{{ like_link }}"></a>
-    <span class="{{ like_span_total }}">{{ likes_count }}</span>
-</div>
+{% block phileo_widget_form %}
+	<form class="phileo {{ is_liked }} {{ like_type }}" action="{{ like_url }}" method="POST" id="{{ widget_id }}">{% csrf_token %}
+		{% block phileo_widget_button %}
+			<input type="submit" class="phileo-toggle" value="Like" />
+		{% endblock phileo_widget_button %}
+		{% block phileo_widget_count %}
+            <span class="phileo-count">
+                <span id="{{ like_count_id }}">{{ like_count }}</span>
+                {{ like_type }}{{ like_count|pluralize }}
+            </span>
+		{% endblock phileo_widget_count %}
+	</form>
+{% endblock phileo_widget_form %}
+{% block phileo_widget_js %}
+	<script type="text/javascript">
+	jQuery(function ($) {
+		$("#{{ widget_id }}").phileo({
+			count: "#{{ like_count_id }}",
+			toggle_class: "{{ toggle_class }}"
+		});
+	});
+	</script>
+{% endblock phileo_widget_js %}
diff --git a/phileo/templatetags/phileo_tags.py b/phileo/templatetags/phileo_tags.py
@@ -7,7 +7,6 @@
 
 from phileo.models import Like
 
-
 register = template.Library()
 
 
@@ -65,52 +64,42 @@ def likes_count(obj):
 def likes_css():
     return {"STATIC_URL": settings.STATIC_URL}
 
+@register.inclusion_tag("phileo/_js.html")
+def phileo_js():
+    return {"STATIC_URL": settings.STATIC_URL}
+
 
 @register.inclusion_tag("phileo/_widget.html")
-def likes_widget(user, obj, like_link_id="likes", like_span_total_class="phileo-count", toggle_class="phileo-liked"):
+def likes_widget(user, obj, widget_id=None, like_type="like", toggle_class="phileo-liked"):
     ct = ContentType.objects.get_for_model(obj)
-    likes_count = Like.objects.filter(
+
+    like_count = Like.objects.filter(
        receiver_content_type = ct,
        receiver_object_id = obj.pk
     ).count()
+
     liked = user.liking.filter(
         receiver_content_type = ct,
         receiver_object_id = obj.pk
     ).exists()
-    return {
-        "like_link": like_link_id,
-        "like_span_total": like_span_total_class,
-        "likes_count": likes_count,
-        "toggle_class": toggle_class if liked else ""
-    }
 
-
-@register.inclusion_tag("phileo/_script.html")
-def likes_js(user, obj, like_link="#likes", like_span_total=".phileo-count", toggle_class="phileo-liked"):
-    ct = ContentType.objects.get_for_model(obj)
-    url = reverse("phileo_like_toggle", kwargs={
-        "content_type_id": ct.id,
+    like_count_id = "%s_count" % widget_id
+
+    like_url = reverse("phileo_like_toggle", kwargs={
+        "content_type_id": ct.pk,
         "object_id": obj.pk
     })
-    liked = Like.objects.filter(
-       sender = user,
-       receiver_content_type = ContentType.objects.get_for_model(obj),
-       receiver_object_id = obj.pk
-    ).exists()
-    if liked:
-        is_liked = toggle_class
-    else:
-        is_liked = ""
+
     return {
-        "STATIC_URL": settings.STATIC_URL,
-        "like_url": url,
-        "like_link": like_link,
-        "like_span_total": like_span_total,
+        "like_url": like_url,
+        "widget_id": widget_id,
+        "like_type": like_type,
+        "like_count": like_count,
+        "like_count_id": like_count_id,
         "toggle_class": toggle_class,
-        "is_liked": is_liked
+        "is_liked": toggle_class if liked else ""
     }
 
-
 class LikedObjectsNode(template.Node):
 
     def __init__(self, objects, user, varname):

diff --git a/phileo/views.py b/phileo/views.py
@@ -37,7 +37,9 @@ def like_toggle(request, content_type_id, object_id):
             "likes_count": Like.objects.filter(
                 receiver_content_type = content_type,
                 receiver_object_id = object_id
-            ).count()
+            ).count(),
+            "liked": created,
+
         }), mimetype="application/json")
 
     return redirect(request.META["HTTP_REFERER"])