Subscribe/unsubscribe thread by ajax

boards/static/js/thread.js

@@ -1,143 +1,160 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var REPLY_TO_MSG = '.reply-to-message';
 var REPLY_TO_MSG_ID = '#reply-to-message-id';
 
 var $html = $("html, body");
 var $quoteButton = $("#quote-button");
 
 function moveCaretToEnd(el) {
     var newPos = el.val().length;
     el[0].setSelectionRange(newPos, newPos);
 }
 
 
 function showFormAfter(blockToInsertAfter) {
     var form = getForm();
     form.insertAfter(blockToInsertAfter);
 
     form.show();
     $(REPLY_TO_MSG_ID).text(blockToInsertAfter.attr('id'));
     $(REPLY_TO_MSG).show();
 }
 
 function addQuickReply(postId) {
     var blockToInsert = null;
     var textAreaJq = getPostTextarea();
     var postLinkRaw = '[post]' + postId + '[/post]'
     var textToAdd = '';
 
     if (postId != null) {
         var post = $('#' + postId);
 
         // If this is not OP, add reflink to the post. If there already is
         // the same reflink, don't add it again.
         var postText = textAreaJq.val();
         if (!post.is(':first-child') && postText.indexOf(postLinkRaw) < 0) {
             // Insert line break if none is present.
             if (postText.length > 0 && !postText.endsWith('\n') && !postText.endsWith('\r')) {
                 textToAdd += '\n';
             }
             textToAdd += postLinkRaw + '\n';
         }
 
         textAreaJq.val(textAreaJq.val()+ textToAdd);
         blockToInsert = post;
     } else {
         blockToInsert = $('.thread');
     }
     showFormAfter(blockToInsert);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 }
 
 function addQuickQuote() {
     var textAreaJq = getPostTextarea();
 
     var postId = $quoteButton.attr('data-post-id');
     if (postId != null) {
         addQuickReply(postId);
     }
 
     var textToAdd = '';
     var selection = window.getSelection().toString();
     if (selection.length == 0) {
         selection = $quoteButton.attr('data-text');
     }
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val() + textToAdd);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 
     $quoteButton.hide();
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
 
 function showQuoteButton() {
     var selection = window.getSelection().getRangeAt(0).getBoundingClientRect();
     if (selection.width > 0) {
         // quoteButton.offset({ top: selection.top - selection.height, left: selection.left });
         $quoteButton.css({top: selection.top + $(window).scrollTop() - 30, left: selection.left});
         $quoteButton.show();
 
         var text = window.getSelection().toString();
         $quoteButton.attr('data-text', text);
 
         var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
         var element = $(document.elementFromPoint(rect.x, rect.y));
         var postId = null;
         if (element.hasClass('post')) {
             postId = element.attr('id');
         } else {
             var postParent = element.parents('.post');
             if (postParent.length > 0) {
                 postId = postParent.attr('id');
             }
         }
         $quoteButton.attr('data-post-id', postId);
     } else {
         $quoteButton.hide();
     }
 }
 
+function attachAjaxToForms() {
+    var forms = $('form.ajax-form');
+    forms.each(function() {
+        var form = $(this);
+        var options = {
+            success: function(response, statusText, xhr, f) {
+                afterForm(form, $.parseJSON(response));
+            },
+            url: form.attr('action') + '?ajax'
+        };
+
+        form.ajaxForm(options);
+    });
+}
+
 $(document).ready(function() {
     $('body').on('mouseup', function() {
         showQuoteButton();
     });
     $("#quote-button").click(function() {
         addQuickQuote();
     })
+
+    attachAjaxToForms();
 });

boards/templates/boards/thread_normal.html

@@ -1,52 +1,73 b''
 {% extends "boards/thread.html" %}
 
 {% load i18n %}
 {% load static from staticfiles %}
 {% load board %}
 {% load tz %}
 
 {% block thread_content %}
     {% get_current_language as LANGUAGE_CODE %}
     {% get_current_timezone as TIME_ZONE %}
 
     <button id="quote-button">{% trans 'Quote' %}</button>
 
     <div class="tag_info">
         <h2>
-            <form action="{% url 'thread' opening_post.id %}" method="post" class="post-button-form">
+            <form action="{% url 'thread' opening_post.id %}" method="post" class="post-button-form ajax-form">
                 {% csrf_token %}
                 {% if is_favorite %}
-                    <button id="thread-fav-button" name="method" value="unsubscribe" class="fav">★</button>
+                    <input type="hidden" name="method" value="unsubscribe" />
+                    <button id="thread-fav-button" class="fav">★</button>
                 {% else %}
-                    <button id="thread-fav-button" name="method" value="subscribe" class="not_fav">★</button>
+                    <input type="hidden" name="method" value="subscribe" />
+                    <button id="thread-fav-button" class="not_fav">★</button>
                 {% endif %}
             </form>
             {{ opening_post.get_title_or_text }}
         </h2>
     </div>
 
+    <script>
+        function afterForm(form, data) {
+            if (data.status == 'success') {
+                var button = form.children('button');
+                var newMethod;
+                if (data.fav == 'true') {
+                    button.addClass('fav');
+                    button.removeClass('not_fav');
+                    newMethod = 'unsubscribe';
+                } else {
+                    button.addClass('not_fav');
+                    button.removeClass('fav');
+                    newMethod = 'subscribe';
+                }
+                form.children('input[name=method]').attr('value', newMethod);
+            }
+        }
+    </script>
+
     {% if bumpable and thread.has_post_limit %}
         <div class="bar-bg">
             <div class="bar-value" style="width:{{ bumplimit_progress }}%" id="bumplimit_progress">
             </div>
             <div class="bar-text">
                 <span id="left_to_limit">{{ posts_left }}</span> {% trans 'posts to bumplimit' %}
             </div>
         </div>
     {% endif %}
 
     <div class="thread">
         {% for post in thread.get_viewable_replies %}
             {% post_view post reply_link=True thread=thread %}
         {% endfor %}
     </div>
 
     {% if not thread.is_archived %}
         {% form_view form=form new_thread=False opening_post_id=opening_post.id %}
 
         <script src="{% static 'js/thread.js' %}"></script>
         <script src="{% static 'js/thread_update.js' %}"></script>
     {% endif %}
 
     <script src="{% static 'js/3party/centrifuge.js' %}"></script>
 {% endblock %}

boards/views/thread/thread.py

@@ -1,120 +1,135 b''
+import json
 from django.core.exceptions import ObjectDoesNotExist
-from django.http import Http404
+from django.http import Http404, HttpResponse
 from django.shortcuts import get_object_or_404, render, redirect
 from django.urls import reverse
 from django.utils.decorators import method_decorator
 from django.views.decorators.csrf import csrf_protect
 from django.views.generic.edit import FormMixin
 
 from boards.abstracts.settingsmanager import get_settings_manager, \
     SETTING_SUBSCRIBE_BY_DEFAULT
 from boards.forms import PostForm, PlainErrorList
 from boards.models import Post
 from boards.views.base import BaseBoardView, CONTEXT_FORM
 from boards.views.mixins import DispatcherMixin, PARAMETER_METHOD
 
 REQ_POST_ID = 'post_id'
 
 CONTEXT_LASTUPDATE = "last_update"
 CONTEXT_THREAD = 'thread'
 CONTEXT_MODE = 'mode'
 CONTEXT_OP = 'opening_post'
 CONTEXT_FAVORITE = 'is_favorite'
 CONTEXT_RSS_URL = 'rss_url'
 
 
 class ThreadView(BaseBoardView, FormMixin, DispatcherMixin):
 
     @method_decorator(csrf_protect)
     def get(self, request, post_id, form: PostForm=None):
         try:
             opening_post = Post.objects.get(id=post_id)
         except ObjectDoesNotExist:
             raise Http404
 
         # If the tag is favorite, update the counter
         settings_manager = get_settings_manager(request)
         favorite = settings_manager.thread_is_fav(opening_post)
         if favorite:
             settings_manager.add_or_read_fav_thread(opening_post)
 
         # If this is not OP, don't show it as it is
         if not opening_post.is_opening():
             return redirect('{}#{}'.format(opening_post.get_thread().get_opening_post()
                             .get_absolute_url(), opening_post.id))
 
         if not form:
             subscribe_by_default = settings_manager.get_setting(
                 SETTING_SUBSCRIBE_BY_DEFAULT, False)
             form = PostForm(error_class=PlainErrorList,
                             initial={'subscribe': subscribe_by_default})
 
         thread_to_show = opening_post.get_thread()
 
         params = dict()
 
         params[CONTEXT_FORM] = form
         params[CONTEXT_LASTUPDATE] = str(thread_to_show.last_edit_time)
         params[CONTEXT_THREAD] = thread_to_show
         params[CONTEXT_MODE] = self.get_mode()
         params[CONTEXT_OP] = opening_post
         params[CONTEXT_FAVORITE] = favorite
         params[CONTEXT_RSS_URL] = self.get_rss_url(post_id)
 
         params.update(self.get_data(thread_to_show))
 
         return render(request, self.get_template(), params)
 
     @method_decorator(csrf_protect)
     def post(self, request, post_id):
         opening_post = get_object_or_404(Post, id=post_id)
 
         # If this is not OP, don't show it as it is
         if not opening_post.is_opening():
             raise Http404
 
         if PARAMETER_METHOD in request.POST:
-            self.dispatch_method(request, opening_post)
+            result = self.dispatch_method(request, opening_post)
 
-            return redirect('thread', post_id)  # FIXME Different for different modes
+            ajax = 'ajax' in request.GET
+            if ajax:
+                return HttpResponse(content=json.dumps(result))
+            else:
+                return redirect('thread', post_id)  # FIXME Different for different modes
 
         if not opening_post.get_thread().is_archived():
             form = PostForm(request.POST, request.FILES,
                             error_class=PlainErrorList,
                             session=request.session)
 
             if form.is_valid():
                 return Post.objects.create_from_form(request, form, opening_post)
             if form.need_to_ban:
                 # Ban user because he is suspected to be a bot
                 self._ban_current_user(request)
 
             return self.get(request, post_id, form)
 
     def get_data(self, thread) -> dict:
         """
         Returns context params for the view.
         """
 
         return dict()
 
     def get_template(self) -> str:
         """
         Gets template to show the thread mode on.
         """
 
         pass
 
     def get_mode(self) -> str:
         pass
 
     def subscribe(self, request, opening_post):
         settings_manager = get_settings_manager(request)
         settings_manager.add_or_read_fav_thread(opening_post)
 
+        return {
+            'status': 'success',
+            'fav': 'true'
+        }
+
     def unsubscribe(self, request, opening_post):
         settings_manager = get_settings_manager(request)
         settings_manager.del_fav_thread(opening_post)
 
+        return {
+            'status': 'success',
+            'fav': 'false'
+        }
+
     def get_rss_url(self, opening_id):
         return reverse('thread', kwargs={'post_id': opening_id}) + 'rss/'