Setting for image view mode: in post (simple) or in popup

boards/abstracts/settingsmanager.py

@@ -14,6 +14,7 b" SETTING_HIDDEN_TAGS = 'hidden_tags'"
 SETTING_PERMISSIONS = 'permissions'
 SETTING_USERNAME = 'username'
 SETTING_LAST_NOTIFICATION_ID = 'last_notification'
+SETTING_IMAGE_VIEWER = 'image_viewer'
 
 DEFAULT_THEME = 'md'
 
@@ -44,7 +45,7 b' class SettingsManager:'
         else:
             return False
 
-    def get_setting(self, setting):
+    def get_setting(self, setting, default=None):
         pass
 
     def set_setting(self, setting, value):
@@ -127,11 +128,11 b' class SessionSettingsManager(SettingsMan'
         SettingsManager.__init__(self)
         self.session = session
 
-    def get_setting(self, setting):
+    def get_setting(self, setting, default=None):
         if setting in self.session:
             return self.session[setting]
         else:
-            return None
+            return default
 
     def set_setting(self, setting, value):
         self.session[setting] = value

boards/context_processors.py

@@ -1,5 +1,5 b''
 from boards.abstracts.settingsmanager import get_settings_manager, \
-    SETTING_USERNAME, SETTING_LAST_NOTIFICATION_ID
+    SETTING_USERNAME, SETTING_LAST_NOTIFICATION_ID, SETTING_IMAGE_VIEWER
 from boards.models.user import Notification
 
 __author__ = 'neko259'
@@ -18,7 +18,7 b" CONTEXT_USER = 'user'"
 CONTEXT_NEW_NOTIFICATIONS_COUNT = 'new_notifications_count'
 CONTEXT_USERNAME = 'username'
 CONTEXT_TAGS_STR = 'tags_str'
-
+CONTEXT_IMAGE_VIEWER = 'image_viewer'
 
 
 def get_notifications(context, request):
@@ -54,6 +54,9 b' def user_and_ui_processor(request):'
     context[CONTEXT_VERSION] = settings.VERSION
     context[CONTEXT_SITE_NAME] = settings.SITE_NAME
 
+    context[CONTEXT_IMAGE_VIEWER] = settings_manager.get_setting(
+        SETTING_IMAGE_VIEWER, default=settings.DEFAULT_IMAGE_VIEWER)
+
     get_notifications(context, request)
 
     return context

boards/default_settings.py

@@ -12,6 +12,7 b' MAX_POSTS_PER_THREAD = 10'
 MAX_THREAD_COUNT = 5
 THREADS_PER_PAGE = 3
 DEFAULT_THEME = 'md'
+DEFAULT_IMAGE_VIEWER = 'simple'
 LAST_REPLIES_COUNT = 3
 
 # Enable archiving threads instead of deletion when the thread limit is reached

boards/forms.py

@@ -365,6 +365,7 b' class ThreadForm(PostForm):'
 class SettingsForm(NeboardForm):
 
     theme = forms.ChoiceField(choices=settings.THEMES, label=_('Theme'))
+    image_viewer = forms.ChoiceField(choices=settings.IMAGE_VIEWERS, label=_('Image view mode'))
     username = forms.CharField(label=_('User name'), required=False)
     timezone = forms.ChoiceField(choices=get_timezones(), label=_('Time zone'))
 

boards/locale/ru/LC_MESSAGES/django.po

@@ -7,7 +7,7 b' msgid ""'
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-04-17 15:12+0300\n"
+"POT-Creation-Date: 2015-04-21 21:10+0300\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -59,7 +59,7 b' msgstr "\xd0\xa2\xd0\xb5\xd0\xba\xd1\x81\xd1\x82"'
 msgid "Tag"
 msgstr "Метка"
 
-#: forms.py:41 templates/boards/base.html:40 templates/search/search.html:7
+#: forms.py:41 templates/boards/base.html:41 templates/search/search.html:7
 msgid "Search"
 msgstr "Поиск"
 
@@ -129,14 +129,18 b' msgid "Theme"'
 msgstr "Тема"
 
 #: forms.py:368
+msgid "Image view mode"
+msgstr "Режим просмотра изображений"
+
+#: forms.py:369
 msgid "User name"
 msgstr "Имя пользователя"
 
-#: forms.py:369
+#: forms.py:370
 msgid "Time zone"
 msgstr "Часовой пояс"
 
-#: forms.py:375
+#: forms.py:376
 msgid "Inappropriate characters."
 msgstr "Недопустимые символы."
 
@@ -164,41 +168,41 b' msgstr "\xd0\xbb\xd0\xb8\xd1\x86\xd0\xb5\xd0\xbd\xd0\xb7\xd0\xb8\xd0\xb5\xd0\xb9"'
 msgid "Repository"
 msgstr "Репозиторий"
 
-#: templates/boards/base.html:13
+#: templates/boards/base.html:14
 msgid "Feed"
 msgstr "Лента"
 
-#: templates/boards/base.html:30
+#: templates/boards/base.html:31
 msgid "All threads"
 msgstr "Все темы"
 
-#: templates/boards/base.html:36
+#: templates/boards/base.html:37
 msgid "Add tags"
 msgstr "Добавить метки"
 
-#: templates/boards/base.html:38
+#: templates/boards/base.html:39
 msgid "Tag management"
 msgstr "Управление метками"
 
-#: templates/boards/base.html:43 templates/boards/base.html.py:44
+#: templates/boards/base.html:44 templates/boards/base.html.py:45
 #: templates/boards/notifications.html:8
 msgid "Notifications"
 msgstr "Уведомления"
 
-#: templates/boards/base.html:51 templates/boards/settings.html:9
+#: templates/boards/base.html:52 templates/boards/settings.html:9
 msgid "Settings"
 msgstr "Настройки"
 
-#: templates/boards/base.html:64
+#: templates/boards/base.html:65
 msgid "Admin"
 msgstr "Администрирование"
 
-#: templates/boards/base.html:66
+#: templates/boards/base.html:67
 #, python-format
 msgid "Speed: %(ppd)s posts per day"
 msgstr "Скорость: %(ppd)s сообщений в день"
 
-#: templates/boards/base.html:68
+#: templates/boards/base.html:69
 msgid "Up"
 msgstr "Вверх"
 
@@ -232,11 +236,11 b' msgstr "\xd0\x98\xd0\xb7\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x82\xd1\x8c \xd1\x82\xd0\xb5\xd0\xbc\xd1\x83"'
 msgid "Replies"
 msgstr "Ответы"
 
-#: templates/boards/post.html:81 templates/boards/thread.html:31
+#: templates/boards/post.html:81 templates/boards/thread.html:26
 msgid "messages"
 msgstr "сообщений"
 
-#: templates/boards/post.html:82 templates/boards/thread.html:32
+#: templates/boards/post.html:82 templates/boards/thread.html:27
 msgid "images"
 msgstr "изображений"
 
@@ -277,7 +281,7 b' msgstr ""'
 msgid "Text syntax"
 msgstr "Синтаксис текста"
 
-#: templates/boards/posting_general.html:158
+#: templates/boards/posting_general.html:159
 msgid "Pages:"
 msgstr "Страницы: "
 
@@ -359,7 +363,7 b' msgstr "\xd0\x9c\xd0\xb5\xd1\x82\xd0\xba\xd0\xb8 \xd0\xbd\xd0\xb5 \xd0\xbd\xd0\xb0\xd0\xb9\xd0\xb4\xd0\xb5\xd0\xbd\xd1\x8b."'
 msgid "All tags"
 msgstr "Все метки"
 
-#: templates/boards/thread.html:33
+#: templates/boards/thread.html:28
 msgid "Last update: "
 msgstr "Последнее обновление: "
 

boards/models/image.py

@@ -89,17 +89,19 b' class PostImage(models.Model, Viewable):'
 
     def get_view(self):
         return '<div class="{}">' \
-               '<a class="{}" href="{}">' \
-               '<img' \
+               '<a class="{}" href="{full}">' \
+               '<img class="post-image-preview"' \
                ' src="{}"' \
                ' alt="{}"' \
                ' width="{}"' \
                ' height="{}"' \
                ' data-width="{}"' \
                ' data-height="{}" />' \
+               '<img class="post-image-full"' \
+               ' src="{full}" />' \
                '</a>' \
                '</div>'\
-            .format(CSS_CLASS_IMAGE, CSS_CLASS_THUMB, self.image.url,
+            .format(CSS_CLASS_IMAGE, CSS_CLASS_THUMB,
                     self.image.url_200x150,
                     str(self.hash), str(self.pre_width),
-                    str(self.pre_height), str(self.width), str(self.height))
+                    str(self.pre_height), str(self.width), str(self.height), full=self.image.url)

boards/static/css/base.css

@@ -95,3 +95,8 b' textarea, input {'
 #form-close-button {
     display: none;
 }
+
+.post-image-full {
+    display: none;
+    width: 100%;
+}

boards/static/js/image.js

@@ -23,8 +23,100 b''
  for the JavaScript code in this page.
  */
 
+
+var IMAGE_VIEWERS = [
+    ['simple', new SimpleImageViewer()],
+    ['popup', new PopupImageViewer()]
+];
+
+
+function ImageViewer() {}
+ImageViewer.prototype.view = function (post) {};
+
+function SimpleImageViewer() {}
+SimpleImageViewer.prototype.view = function (post) {
+    post.find('img').toggle();
+};
+
+function PopupImageViewer() {}
+PopupImageViewer.prototype.view = function (post) {
+    var margin = 20; //..change
+
+    var el = post;
+    var thumb_id = 'full' + el.find('img').attr('alt');
+
+    var existingPopups = $('#' + thumb_id);
+    if(!existingPopups.length) {
+        var imgElement= el.find('img');
+
+        var img_w = imgElement.attr('data-width');
+        var img_h = imgElement.attr('data-height');
+
+        var win = $(window);
+
+        var win_w = win.width();
+        var win_h = win.height();
+        //new image size
+        if (img_w > win_w) {
+            img_h = img_h * (win_w/img_w) - margin;
+            img_w = win_w - margin;
+        }
+        if (img_h > win_h) {
+            img_w = img_w * (win_h/img_h) - margin;
+            img_h = win_h - margin;
+        }
+
+        var img_pv = new Image();
+        var newImage = $(img_pv);
+        newImage.addClass('img-full')
+            .attr('id', thumb_id)
+            .attr('src', $(el).attr('href'))
+            .appendTo($(el))
+            .css({
+                'width': img_w,
+                'height': img_h,
+                'left': (win_w - img_w) / 2,
+                'top': ((win_h - img_h) / 2)
+            })
+        //scaling preview
+        .mousewheel(function(event, delta) {
+            var cx = event.originalEvent.clientX,
+            cy = event.originalEvent.clientY,
+            i_w = parseFloat(newImage.width()),
+            i_h = parseFloat(newImage.height()),
+            newIW = i_w * (delta > 0 ? 1.25 : 0.8),
+            newIH = i_h * (delta > 0 ? 1.25 : 0.8);
+
+            newImage.width(newIW);
+            newImage.height(newIH);
+            //set position
+            newImage.css({
+                left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
+                top:  parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
+            });
+
+            return false;
+        }
+        )
+            .draggable({
+                addClasses: false,
+                stack: '.img-full'
+            });
+    } else {
+        existingPopups.remove();
+    }
+};
+
 function addImgPreview() {
-    var margin = 20; //..change
+    var viewerName = $('body').attr('data-image-viewer');
+    var viewer = ImageViewer();
+    for (var i = 0; i < IMAGE_VIEWERS.length; i++) {
+        var item = IMAGE_VIEWERS[i];
+        if (item[0] === viewerName) {
+            viewer = item[1];
+            break;
+        }
+    }
 
     //keybind
     $(document).on('keyup.removepic', function(e) {
@@ -34,70 +126,8 b' function addImgPreview() {'
     });
 
     $('body').on('click', '.thumb', function() {
-        var el = $(this);
-        var thumb_id = 'full' + el.find('img').attr('alt');
-
-        var existingPopups = $('#' + thumb_id);
-        if(!existingPopups.length) {
-            var imgElement= el.find('img');
-
-            var img_w = imgElement.attr('data-width');
-            var img_h = imgElement.attr('data-height');
-
-            var win = $(window);
-
-            var win_w = win.width();
-            var win_h = win.height();
-            //new image size
-            if (img_w > win_w) {
-                img_h = img_h * (win_w/img_w) - margin;
-                img_w = win_w - margin;
-            }
-            if (img_h > win_h) {
-                img_w = img_w * (win_h/img_h) - margin;
-                img_h = win_h - margin;
-            }
+        viewer.view($(this));
 
-            var img_pv = new Image();
-            var newImage = $(img_pv);
-            newImage.addClass('img-full')
-                .attr('id', thumb_id)
-                .attr('src', $(el).attr('href'))
-                .appendTo($(el))
-                .css({
-                    'width': img_w,
-                    'height': img_h,
-                    'left': (win_w - img_w) / 2,
-                    'top': ((win_h - img_h) / 2)
-                })
-                //scaling preview
-                .mousewheel(function(event, delta) {
-                    var cx = event.originalEvent.clientX,
-                        cy = event.originalEvent.clientY,
-                        i_w = parseFloat(newImage.width()),
-                        i_h = parseFloat(newImage.height()),
-                        newIW = i_w * (delta > 0 ? 1.25 : 0.8),
-                        newIH = i_h * (delta > 0 ? 1.25 : 0.8);
-
-                    newImage.width(newIW);
-                    newImage.height(newIH);
-                    //set position
-                    newImage.css({
-                            left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
-                            top:  parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
-                        });
-
-                    return false;
-                }
-            )
-            .draggable({
-                addClasses: false,
-                stack: '.img-full'
-            });
-        } else {
-            existingPopups.remove();
-        }
-        //prevent default
         return false;
     });
 }

boards/templates/boards/base.html

@@ -21,7 +21,7 b''
 
     {% block head %}{% endblock %}
 </head>
-<body>
+<body data-image-viewer="{{ image_viewer }}">
     <script src="{% static 'js/jquery-2.0.1.min.js' %}"></script>
     <script src="{% static 'js/3party/jquery-ui.min.js' %}"></script>
     <script src="{% static 'js/jquery.mousewheel.js' %}"></script>

boards/views/settings.py

@@ -3,15 +3,17 b' from django.shortcuts import render, red'
 from django.utils import timezone
 
 from boards.abstracts.settingsmanager import get_settings_manager, \
-    SETTING_USERNAME, SETTING_LAST_NOTIFICATION_ID
+    SETTING_USERNAME, SETTING_LAST_NOTIFICATION_ID, SETTING_IMAGE_VIEWER
 from boards.middlewares import SESSION_TIMEZONE
 from boards.views.base import BaseBoardView, CONTEXT_FORM
 from boards.forms import SettingsForm, PlainErrorList
+from boards import settings
 
 
 FORM_THEME = 'theme'
 FORM_USERNAME = 'username'
 FORM_TIMEZONE = 'timezone'
+FORM_IMAGE_VIEWER = 'image_viewer'
 
 CONTEXT_HIDDEN_TAGS = 'hidden_tags'
 
@@ -29,6 +31,8 b' class SettingsView(BaseBoardView):'
         form = SettingsForm(
             initial={
                 FORM_THEME: selected_theme,
+                FORM_IMAGE_VIEWER: settings_manager.get_setting(
+                    SETTING_IMAGE_VIEWER, default=settings.DEFAULT_IMAGE_VIEWER),
                 FORM_USERNAME: settings_manager.get_setting(SETTING_USERNAME),
                 FORM_TIMEZONE: request.session.get(
                     SESSION_TIMEZONE, timezone.get_current_timezone()),
@@ -51,6 +55,8 b' class SettingsView(BaseBoardView):'
                 username = form.cleaned_data[FORM_USERNAME].lower()
 
                 settings_manager.set_theme(selected_theme)
+                settings_manager.set_setting(SETTING_IMAGE_VIEWER,
+                                             form.cleaned_data[FORM_IMAGE_VIEWER])
 
                 old_username = settings_manager.get_setting(SETTING_USERNAME)
                 if username != old_username:

neboard/settings.py

@@ -202,6 +202,11 b' THEMES = ['
     ('pg', 'Photon Gray'),
 ]
 
+IMAGE_VIEWERS = [
+    ('simple', 'Simple'),
+    ('popup', 'Popup'),
+]
+
 POSTING_DELAY = 20  # seconds
 
 # Websocket settins