# HG changeset patch
# User rt@lightning
# Date 2013-09-22 17:20:04
# Node ID 16e354f9584d867c627abd5c897d76ae3aea1264
# Parent 62e519ebc1f16c03a091bc12e5df38fe1fb1f874
Add image preview
diff --git a/boards/static/css/base.css b/boards/static/css/base.css
--- a/boards/static/css/base.css
+++ b/boards/static/css/base.css
@@ -5,4 +5,12 @@
.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
diff --git a/boards/static/js/image.js b/boards/static/js/image.js
new file mode 100644
--- /dev/null
+++ b/boards/static/js/image.js
@@ -0,0 +1,76 @@
+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
diff --git a/boards/static/js/jquery.mousewheel.js b/boards/static/js/jquery.mousewheel.js
new file mode 100644
--- /dev/null
+++ b/boards/static/js/jquery.mousewheel.js
@@ -0,0 +1,117 @@
+/*! 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);
+ }
+
+}));
diff --git a/boards/static/js/main.js b/boards/static/js/main.js
--- a/boards/static/js/main.js
+++ b/boards/static/js/main.js
@@ -12,6 +12,7 @@
closeEffect: 'none'
});
+ addImgPreview();
addRefLinkMap();
addPopups();
addMarkPanel();
diff --git a/boards/templates/boards/base.html b/boards/templates/boards/base.html
--- a/boards/templates/boards/base.html
+++ b/boards/templates/boards/base.html
@@ -23,6 +23,7 @@
+