Add image preview

boards/static/js/image.js

@@ -0,0 +1,76 b''
+function addImgPreview() {
+    //keybind
+    $(document).on('keyup.removepic', function(e) {
+        if(e.which === 27) {
+            $('.img-full').remove();
+        }
+    });
+
+    $('.image').children('a').each(function() {
+        $(this).on('click', function() {
+            var el = $(this);
+            var thumb_id = 'full'+el.parent().parent().attr('id');//костыли
+
+            if(!$('#'+thumb_id).length) {
+                var img_w = el.find('img').attr('data-width');
+                var img_h = el.find('img').attr('data-height');
+
+                var win_w = $(window).width();
+                var win_h = $(window).height();
+
+                //new image size
+                if (img_w > win_w) {
+                    img_h = img_h * (win_w/img_w);
+                    img_w = win_w;
+                }
+                if (img_h > win_h) {
+                    img_w = img_w * (win_h/img_h);
+                    img_h = win_h;
+                }
+
+                var img_pv = new Image();
+
+                $(img_pv)
+                    .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($(img_pv).width()),
+                            i_h = parseFloat($(img_pv).height()),
+                            newIW = i_w * (delta > 0 ? 1.25 : 0.8),
+                            newIH = i_h * (delta > 0 ? 1.25 : 0.8);
+
+                        $(img_pv).width(newIW);
+                        $(img_pv).height(newIH);
+
+                        //set position
+                        $(img_pv)
+                            .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()
+            }
+            else {
+                $('#'+thumb_id).remove();
+            }
+
+            //prevent default
+            return false;
+        });
+    });
+}
  No newline at end of file

boards/static/js/jquery.mousewheel.js

@@ -0,0 +1,117 b''
+/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.1.3
+ *
+ * Requires: 1.2.2+
+ */
+
+(function (factory) {
+    if ( typeof define === 'function' && define.amd ) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS style for Browserify
+        module.exports = factory;
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+    var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
+    var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
+    var lowestDelta, lowestDeltaXY;
+
+    if ( $.event.fixHooks ) {
+        for ( var i = toFix.length; i; ) {
+            $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
+        }
+    }
+
+    $.event.special.mousewheel = {
+        setup: function() {
+            if ( this.addEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.addEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = handler;
+            }
+        },
+
+        teardown: function() {
+            if ( this.removeEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.removeEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = null;
+            }
+        }
+    };
+
+    $.fn.extend({
+        mousewheel: function(fn) {
+            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+        },
+
+        unmousewheel: function(fn) {
+            return this.unbind("mousewheel", fn);
+        }
+    });
+
+
+    function handler(event) {
+        var orgEvent = event || window.event,
+            args = [].slice.call(arguments, 1),
+            delta = 0,
+            deltaX = 0,
+            deltaY = 0,
+            absDelta = 0,
+            absDeltaXY = 0,
+            fn;
+        event = $.event.fix(orgEvent);
+        event.type = "mousewheel";
+
+        // Old school scrollwheel delta
+        if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
+        if ( orgEvent.detail )     { delta = orgEvent.detail * -1; }
+
+        // New school wheel delta (wheel event)
+        if ( orgEvent.deltaY ) {
+            deltaY = orgEvent.deltaY * -1;
+            delta  = deltaY;
+        }
+        if ( orgEvent.deltaX ) {
+            deltaX = orgEvent.deltaX;
+            delta  = deltaX * -1;
+        }
+
+        // Webkit
+        if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
+        if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
+
+        // Look for lowest delta to normalize the delta values
+        absDelta = Math.abs(delta);
+        if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
+        absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
+        if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
+
+        // Get a whole value for the deltas
+        fn = delta > 0 ? 'floor' : 'ceil';
+        delta  = Math[fn](delta / lowestDelta);
+        deltaX = Math[fn](deltaX / lowestDeltaXY);
+        deltaY = Math[fn](deltaY / lowestDeltaXY);
+
+        // Add event and delta to the front of the arguments
+        args.unshift(event, delta, deltaX, deltaY);
+
+        return ($.event.dispatch || $.event.handle).apply(this, args);
+    }
+
+}));

boards/static/css/base.css

@@ -1,8 +1,16 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
+}
+
+.img-full {
+    position: fixed;
+    z-index: 9999;
+    background-color: #CCC;
+    border: 1px solid #000;
+    cursor: pointer;
 }
  No newline at end of file

boards/static/js/main.js

@@ -1,18 +1,19 b''
 $( document ).ready(function() {
     $("a[href='#top']").click(function() {
         $("html, body").animate({ scrollTop: 0 }, "slow");
         return false;
     });
 
     $(".fancy").fancybox({
         closeBtn: false,
         closeClick: true,
         padding: 0,
         openEffect: 'none',
         closeEffect: 'none'
     });
 
+    addImgPreview();
     addRefLinkMap();
     addPopups();
     addMarkPanel();
 });

boards/templates/boards/base.html

@@ -1,57 +1,58 b''
 {% load staticfiles %}
 {% load i18n %}
 
 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" type="text/css"
           href="{{ STATIC_URL }}css/jquery.fancybox.css" media="all"/>
     <link rel="stylesheet" type="text/css"
           href="{{ STATIC_URL }}css/base.css" media="all"/>
     <link rel="stylesheet" type="text/css"
           href="{{ STATIC_URL }}css/{{ theme }}/base_page.css?5" media="all"/>
     <link rel="alternate" type="application/rss+xml" href="rss/" title="
     {% trans 'Feed' %}"/>
 
     <link rel="icon" type="image/png"
           href="{{ STATIC_URL }}favicon.png">
 
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta charset="utf-8"/>
     {% block head %}{% endblock %}
 </head>
 <body>
 <script src="{{ STATIC_URL }}js/jquery-2.0.1.min.js"></script>
 <script src="{{ STATIC_URL }}js/jquery-ui-1.10.3.custom.min.js"></script>
+<script src="{{ STATIC_URL }}js/jquery.mousewheel.js"></script>
 <script src="{{ STATIC_URL }}js/jquery.fancybox.pack.js"></script>
 <script src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
 <script src="{{ STATIC_URL }}js/refmaps.js"></script>
 <script src="{{ STATIC_URL }}js/panel.js"></script>
 <script src="{{ STATIC_URL }}js/popup.js"></script>
 <script src="{{ STATIC_URL }}js/main.js"></script>
 
 <div class="navigation_panel">
     <a class="link" href="{% url 'index' %}">{% trans "All threads" %}</a>
     {% for tag in tags %}
         <a class="tag" href="{% url 'tag' tag_name=tag.name %}"
                 >{{ tag.name }}</a>
     {% endfor %}
     <a class="tag" href="{% url 'tags' %}" title="{% trans 'Tag management' %}"
             >[...]</a>
     <a class="link" href="{% url 'settings' %}">{% trans 'Settings' %}</a>
 </div>
 
 {% block content %}{% endblock %}
 
 <div class="navigation_panel">
     {% block metapanel %}{% endblock %}
     [<a href="{% url "login" %}">{% trans 'Login' %}</a>]
     <a class="link" href="#top">{% trans 'Up' %}</a>
 </div>
 
 <div class="footer">
     <!-- Put your banners here -->
 </div>
 
 </body>
 </html>