Fixed image popup scale

boards/static/js/image.js

@@ -1,160 +1,168 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 
 var IMAGE_VIEWERS = [
     ['simple', new SimpleImageViewer()],
     ['popup', new PopupImageViewer()]
 ];
 
 var FULL_IMG_CLASS = 'post-image-full';
 
 
 function ImageViewer() {}
 ImageViewer.prototype.view = function (post) {};
 
 function SimpleImageViewer() {}
 SimpleImageViewer.prototype.view = function (post) {
     var images = post.find('img');
     images.toggle();
 
     // When we first enlarge an image, a full image needs to be created
     if (images.length == 1) {
         var thumb = images.first();
 
         var width = thumb.attr('data-width');
         var height = thumb.attr('data-height');
 
         if (width == null || height == null) {
             width = '100%';
             height = '100%';
         }
 
         var parent = images.first().parent();
         var link = parent.attr('href');
 
         var fullImg = $('<img />')
             .addClass(FULL_IMG_CLASS)
             .attr('src', link)
             .attr('width', width)
             .attr('height', height);
 
         parent.append(fullImg);
     }
 };
 
 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
+
+        // New image size
+        var w_scale = 1;
+        var h_scale = 1;
         if (img_w > win_w) {
-            img_h = img_h * (win_w/img_w) - margin;
-            img_w = win_w - margin;
+            w_scale = img_w / (win_w - margin);
         }
         if (img_h > win_h) {
-            img_w = img_w * (win_h/img_h) - margin;
-            img_h = win_h - margin;
+            h_scale = img_h / (win_h - margin);
         }
 
+        var scale = Math.max(w_scale, h_scale)
+        img_w = img_w / scale;
+        img_h = img_h / scale;
+
         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);
+            var cx = event.originalEvent.clientX;
+            var cy = event.originalEvent.clientY;
+
+            var i_w = parseFloat(newImage.width());
+            var i_h = parseFloat(newImage.height());
+
+            var newIW = i_w * (delta > 0 ? 1.25 : 0.8);
+            var newIH = i_h * (delta > 0 ? 1.25 : 0.8);
 
             newImage.width(newIW);
             newImage.height(newIH);
-            //set position
+            // Set position
+            var oldPosition = newImage.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)
+                left: parseInt(cx - (newIW/i_w) * (cx - parseInt(oldPosition.left, 10)), 10),
+                top:  parseInt(cy - (newIH/i_h) * (cy - parseInt(oldPosition.top, 10)), 10)
             });
 
             return false;
         }
         )
             .draggable({
                 addClasses: false,
                 stack: '.img-full'
             });
     } else {
         existingPopups.remove();
     }
 };
 
 function addImgPreview() {
     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) {
         if(e.which === 27) {
             $('.img-full').remove();
         }
     });
 
     $('body').on('click', '.thumb', function() {
         viewer.view($(this));
 
         return false;
     });
 }