Added a server-side gallery and mode switcher

boards/templates/boards/thread_gallery.html

@@ -0,0 +1,58 b''
+{% extends "boards/base.html" %}
+
+{% load i18n %}
+{% load cache %}
+{% load static from staticfiles %}
+{% load board %}
+
+{% block head %}
+    <title>Neboard - {{ thread.get_opening_post.get_title }}</title>
+{% endblock %}
+
+{% block content %}
+    {% spaceless %}
+    {% get_current_language as LANGUAGE_CODE %}
+
+    <script src="{% static 'js/thread.js' %}"></script>
+
+    {% cache 600 thread_gallery_view thread.id thread.last_edit_time LANGUAGE_CODE %}
+    <div class="image-mode-tab">
+        <a href="{% url 'thread' thread.get_opening_post.id %}">{% trans 'Normal mode' %}</a>,
+        <a class="current_page" href="{% url 'thread_mode' thread.get_opening_post.id 'gallery' %}">{% trans 'Gallery mode' %}</a>
+    </div>
+
+    <div id="posts-table">
+    {% for post in thread.get_replies %}
+        {% if post.image %}
+            <a
+                    class="thumb"
+                    href="{{ post.image.url }}"><img
+                    src="{{ post.image.url_200x150 }}"
+                    alt="{{ post.id }}"
+                    width="{{ post.image_pre_width }}"
+                    height="{{ post.image_pre_height }}"
+                    data-width="{{ post.image_width }}"
+                    data-height="{{ post.image_height }}"/>
+            </a>
+        {% endif %}
+    {% endfor %}
+    </div>
+    {% endcache %}
+
+    {% endspaceless %}
+{% endblock %}
+
+{% block metapanel %}
+
+    {% get_current_language as LANGUAGE_CODE %}
+
+    <span class="metapanel" data-last-update="{{ last_update }}">
+        {% cache 600 thread_meta thread.last_edit_time moderator LANGUAGE_CODE %}
+            <span id="reply-count">{{ thread.get_reply_count }}</span> {% trans 'replies' %},
+            <span id="image-count">{{ thread.get_images_count }}</span> {% trans 'images' %}.
+            {% trans 'Last update: ' %}{{ thread.last_edit_time }}
+            [<a href="rss/">RSS</a>]
+        {% endcache %}
+    </span>
+
+{% endblock %}

boards/static/js/thread.js

@@ -23,33 +23,6 b''
  for the JavaScript code in this page.
  */
 
-function addGalleryPanel() {
-    var gallery = $('a[class="thumb"]').clone(true),
-        normal = $('.post').clone(true);
-
-    $('.navigation_panel').filter(':first').after(
-        '<div class="image-mode-tab" role="radiogroup" aria-label="Image mode2">' +
-        '<label><input type="radio" class="image-mode-normal" name="image-mode" value="0" checked="checked"/>'+ gettext('Normal') +'</label>' +
-        '<label><input type="radio" class="image-mode-table" name="image-mode" value="1"/>'+ gettext('Gallery') +'</label>' +
-        '</div>'
-    );
-
-    $('input[name="image-mode"]').change(function() {
-        //gallery mode
-        if($(this).val() === '1') {
-            $('.thread').replaceWith(
-                $('<div id="posts-table"></div>').append(gallery)
-            );
-        }
-        //normal mode
-        else {
-            $('#posts-table').replaceWith(
-                $('<div class="thread"></div>').append(normal)
-            );
-        }
-    });
-}
-
 function moveCaretToEnd(el) {
         if (typeof el.selectionStart == "number") {
             el.selectionStart = el.selectionEnd = el.value.length;
@@ -72,10 +45,3 b' function addQuickReply(postId) {'
 
     $("html, body").animate({ scrollTop: $(textAreaId).offset().top }, "slow");
 }
-
-
-
-$(document).ready(function(){
-    addGalleryPanel();
-    initAutoupdate();
-});

boards/static/js/thread_update.js

@@ -185,4 +185,8 b' function showNewPostsTitle() {'
             document.removeEventListener('visibilitychange', null);
         });
     }
-}
  No newline at end of file
+}
+
+$(document).ready(function(){
+    initAutoupdate();
+});

boards/templates/boards/thread.html

@@ -6,7 +6,7 b''
 {% load board %}
 
 {% block head %}
-    <title>Neboard - {{ thread.get_replies.0.get_title }}</title>
+    <title>Neboard - {{ thread.get_opening_post.get_title }}</title>
 {% endblock %}
 
 {% block content %}
@@ -17,6 +17,12 b''
     <script src="{% static 'js/thread.js' %}"></script>
 
     {% cache 600 thread_view thread.id thread.last_edit_time moderator LANGUAGE_CODE %}
+
+        <div class="image-mode-tab">
+            <a class="current_page" href="{% url 'thread' thread.get_opening_post.id %}">{% trans 'Normal mode' %}</a>,
+            <a href="{% url 'thread_mode' thread.get_opening_post.id 'gallery' %}">{% trans 'Gallery mode' %}</a>
+        </div>
+
         {% if bumpable %}
             <div class="bar-bg">
                 <div class="bar-value" style="width:{{ bumplimit_progress }}%" id="bumplimit_progress">

boards/urls.py

@@ -31,6 +31,7 b" urlpatterns = patterns('',"
 
     # /boards/thread/
     url(r'^thread/(?P<post_id>\w+)/$', views.thread, name='thread'),
+    url(r'^thread/(?P<post_id>\w+)/(?P<mode>\w+)/$', views.thread, name='thread_mode'),
     url(r'^settings/$', views.settings, name='settings'),
     url(r'^tags/$', views.all_tags, name='tags'),
     url(r'^captcha/', include('captcha.urls')),

boards/views/__init__.py

@@ -171,7 +171,7 b' def tag(request, tag_name, page=0):'
                   context)
 
 
-def thread(request, post_id):
+def thread(request, post_id, mode='normal'):
     """Get all thread posts"""
 
     if utils.need_include_captcha(request):
@@ -211,7 +211,15 b' def thread(request, post_id):'
     context["last_update"] = _datetime_to_epoch(thread_to_show.last_edit_time)
     context["thread"] = thread_to_show
 
-    return render(request, 'boards/thread.html', context)
+    if 'normal' == mode:
+        document = 'boards/thread.html'
+    elif 'gallery' == mode:
+        document = 'boards/thread_gallery.html'
+    else:
+        pass
+        # TODO raise 404 error
+
+    return render(request, document, context)
 
 
 def login(request):