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 @@ +