Do not close images from refpopups when the popup is removed

boards/static/js/image.js

@@ -1,202 +1,201 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_POPUP_MARGIN = 10;
 
 
 var IMAGE_VIEWERS = [
     ['simple', new SimpleImageViewer()],
     ['popup', new PopupImageViewer()]
 ];
 
 var FULL_IMG_CLASS = 'post-image-full';
 
 var ATTR_SCALE = 'scale';
 
 
 // Init image viewer
 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;
     }
 }
 
 
 function getFullImageWidth(previewImage) {
     var full_img_w = previewImage.attr('data-width');
     if (full_img_w == null) {
         full_img_w = previewImage[0].naturalWidth;
     }
 
     return full_img_w;
 }
 
 function getFullImageHeight(previewImage) {
     var full_img_h = previewImage.attr('data-height');
     if (full_img_h == null) {
         full_img_h = previewImage[0].naturalHeight;
     }
 
     return full_img_h;
 }
 
 
 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 = getFullImageWidth(thumb);
         var height = getFullImageHeight(thumb);
 
         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 el = post;
     var thumb_id = 'full' + el.find('img').attr('alt');
 
     var existingPopups = $('#' + thumb_id);
     if (!existingPopups.length) {
         var imgElement = el.find('img');
 
         var full_img_w = getFullImageWidth(imgElement);
         var full_img_h = getFullImageHeight(imgElement);
 
         var win = $(window);
 
         var win_w = win.width();
         var win_h = win.height();
 
         // New image size
         var w_scale = 1;
         var h_scale = 1;
 
         var freeWidth = win_w - 2 * IMAGE_POPUP_MARGIN;
         var freeHeight = win_h - 2 * IMAGE_POPUP_MARGIN;
 
         if (full_img_w > freeWidth) {
             w_scale = full_img_w / freeWidth;
         }
         if (full_img_h > freeHeight) {
             h_scale = full_img_h / freeHeight;
         }
 
         var scale = Math.max(w_scale, h_scale)
         var img_w = full_img_w / scale;
         var img_h = full_img_h / scale;
 
         var postNode = $(el);
 
         var img_pv = new Image();
         var newImage = $(img_pv);
         newImage.addClass('img-full')
             .attr('id', thumb_id)
             .attr('src', postNode.attr('href'))
             .attr(ATTR_SCALE, scale)
             .css({
                 'width': img_w,
                 'height': img_h,
                 'left': (win_w - img_w) / 2,
                 'top': ((win_h - img_h) / 2)
             })
-            .appendTo(postNode)
-        //scaling preview
-        .mousewheel(function(event, delta) {
-            var cx = event.originalEvent.clientX;
-            var cy = event.originalEvent.clientY;
+            //scaling preview
+            .mousewheel(function(event, delta) {
+                var cx = event.originalEvent.clientX;
+                var cy = event.originalEvent.clientY;
 
-            var scale = newImage.attr(ATTR_SCALE) / (delta > 0 ? 1.25 : 0.8);
+                var scale = newImage.attr(ATTR_SCALE) / (delta > 0 ? 1.25 : 0.8);
 
-            var oldWidth = newImage.width();
-            var oldHeight = newImage.height();
+                var oldWidth = newImage.width();
+                var oldHeight = newImage.height();
 
-            var newIW = full_img_w / scale;
-            var newIH = full_img_h / scale;
+                var newIW = full_img_w / scale;
+                var newIH = full_img_h / scale;
 
-            newImage.width(newIW);
-            newImage.height(newIH);
-            newImage.attr(ATTR_SCALE, scale);
+                newImage.width(newIW);
+                newImage.height(newIH);
+                newImage.attr(ATTR_SCALE, scale);
 
-            // Set position
-            var oldPosition = newImage.position();
-            newImage.css({
-                left: parseInt(cx - (newIW/oldWidth) * (cx - parseInt(oldPosition.left, 10)), 10),
-                top:  parseInt(cy - (newIH/oldHeight) * (cy - parseInt(oldPosition.top, 10)), 10)
-            });
+                // Set position
+                var oldPosition = newImage.position();
+                newImage.css({
+                    left: parseInt(cx - (newIW/oldWidth) * (cx - parseInt(oldPosition.left, 10)), 10),
+                    top:  parseInt(cy - (newIH/oldHeight) * (cy - parseInt(oldPosition.top, 10)), 10)
+                });
 
-            return false;
-        }
-        )
+                return false;
+            })
             .draggable({
                 addClasses: false,
                 stack: '.img-full'
-            });
+            })
+            .appendTo($('body'));
     } else {
         existingPopups.remove();
     }
 };
 
 function addImgPreview() {
     //keybind
     $(document).on('keyup.removepic', function(e) {
         if(e.which === 27) {
             $('.img-full').remove();
         }
     });
 
     $('body').on('click', '.thumb', function() {
         viewer.view($(this));
 
         return false;
     });
 }

boards/static/js/refpopup.js

@@ -1,122 +1,132 b''
+var LOADING_MSG = "<div class=\"post\">" + gettext('Loading...') + "</div>";
+
 function $X(path, root) {
     return document.evaluate(path, root || document, null, 6, null);
 }
 function $x(path, root) {
     return document.evaluate(path, root || document, null, 8, null).singleNodeValue;
 }
 
 function $del(el) {
     if(el) el.parentNode.removeChild(el);
 }
 
 function $each(list, fn) {
     if(!list) return;
     var i = list.snapshotLength;
     if(i > 0) while(i--) fn(list.snapshotItem(i), i);
 }
 
 function mkPreview(cln, html) {
     cln.innerHTML = html;
 
     addScriptsToPost($(cln));
 }
 
 function isElementInViewport (el) {
     //special bonus for those using jQuery
     if (typeof jQuery === "function" && el instanceof jQuery) {
         el = el[0];
     }
 
     var rect = el.getBoundingClientRect();
 
     return (
         rect.top >= 0 &&
         rect.left >= 0 &&
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
     );
 }
 
 function addRefLinkPreview(node) {
     $each($X('.//a[starts-with(text(),">>")]', node || document), function(link) {
         link.addEventListener('mouseover', showPostPreview, false);
         link.addEventListener('mouseout', delPostPreview, false);
     });
 }
 
 function showPostPreview(e) {
     var doc = document;
 
     var reflink = $(this);
     var pNum = reflink.text().match(/\d+/);
 
     if (pNum == null || pNum.length == 0) {
         return;
     }
 
     var post = $('#' + pNum);
     if (post.length > 0 && isElementInViewport(post)) {
+        // If post is on the same page and visible, just highlight it
         post.addClass('highlight');
     } else {
         var x = reflink.offset().left;
         var y = reflink.offset().top;
 
         var cln = doc.createElement('div');
         cln.id = 'pstprev_' + pNum;
         cln.className = 'post_preview';
 
-//      var newX = x < doc.body.clientWidth/2 ? 'left:' + x : 'right:' + parseInt(doc.body.clientWidth - x - reflink.width());
-//      var newY = y < doc.body.clientHeight/2 ? 'top:' + y : 'bottom:' + parseInt(doc.body.clientHeight - y - reflink.height());
         cln.style.cssText = 'left:' + x + 'px; top:' + y + 'px';
 
         cln.addEventListener('mouseout', delPostPreview, false);
 
-        cln.innerHTML = "<div class=\"post\">" + gettext('Loading...') + "</div>";
+        cln.innerHTML = LOADING_MSG;
 
-        if(post.length > 0) {
-            var postdata = post.clone().wrap("<div/>").parent().html();
+        if (post.length > 0) {
+            // If post is on the same page but not visible, generate preview from it
+            var postClone = post.clone();
+            postClone.removeAttr('style');
+            var postdata = postClone.wrap("<div/>").parent().html();
 
             mkPreview(cln, postdata);
         } else {
+            // If post is from other page, load it
             $.ajax({
                 url: '/api/post/' + pNum + '/?truncated'
             })
-                .success(function(data) {
-                    var postdata = $(data).wrap("<div/>").parent().html();
-
-                    //make preview
-                    mkPreview(cln, postdata);
+            .success(function(data) {
+                var postdata = $(data).wrap("<div/>").parent().html();
 
-                })
-                .error(function() {
-                    cln.innerHTML = "<div class=\"post\">"
-                        + gettext('Post not found') + "</div>";
-                });
+                //make preview
+                mkPreview(cln, postdata);
+            })
+            .error(function() {
+                cln.innerHTML = "<div class=\"post\">"
+                    + gettext('Post not found') + "</div>";
+            });
         }
 
         $del(doc.getElementById(cln.id));
 
         //add preview
         $(cln).fadeIn(200);
         $('body').append(cln);
     }
 }
 
 function delPostPreview(e) {
     var el = $x('ancestor-or-self::*[starts-with(@id,"pstprev")]', e.relatedTarget);
     if(!el) {
         $each($X('.//div[starts-with(@id,"pstprev")]'), function(clone) {
             $del(clone)
         });
     } else {
-        while(el.nextSibling) $del(el.nextSibling);
+        while (el.nextSibling) {
+            if (el.nextSibling.className.startsWith('pstprev')) {
+                $del(el.nextSibling);
+            } else {
+                break;
+            }
+        }
     }
 
     $('.highlight').removeClass('highlight');
 }
 
 function addPreview() {
     $('.post').find('a').each(function() {
         showPostPreview($(this));
     });
 }