Highlight post instead of showing popup if the post is visible on page.

Optimized and refactored reflink popups (still much work to do there)

boards/static/css/md/base_page.css

@@ -504,4 +504,8 b' ul {'
     padding: .2ex;
     background: #152154;
     color: #fff;
-}
  No newline at end of file
+}
+
+.highlight {
+    background-color: #050052;
+}

boards/static/css/pg/base_page.css

@@ -362,3 +362,7 b' input[type="submit"]:hover {'
     border-color: #222;
     font-size: 0.9em;
 }
+
+.highlight {
+    background-color: #F9E8A5;
+}

boards/static/css/sw/base_page.css

@@ -385,4 +385,8 b' li {'
     color: #FFF;
     display: inline-block;
     text-decoration: none;
-}
  No newline at end of file
+}
+
+.highlight {
+    background-color: #D4F0F9;
+}

boards/static/js/refpopup.js

@@ -15,6 +15,30 b' function $each(list, fn) {'
     if(i > 0) while(i--) fn(list.snapshotItem(i), i);
 }
 
+function mkPreview(cln, html) {
+    cln.innerHTML = html;
+
+    highlightCode($(cln));
+    addRefLinkPreview(cln);
+    translate_time($(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);
@@ -31,67 +55,63 b' function showPostPreview(e) {'
         return;
     }
 
-    //position
-    //var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) - doc.documentElement.clientLeft + 1;
-    //var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop) - doc.documentElement.clientTop;
-
-    var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) + 2;
-    var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop);
-
-    var cln = doc.createElement('div');
-    cln.id = 'pstprev_' + pNum;
-    cln.className = 'post_preview';
-
-    cln.style.cssText = 'top:' + y + 'px;' + (x < doc.body.clientWidth/2 ? 'left:' + x + 'px' : 'right:' + parseInt(doc.body.clientWidth - x + 1) + 'px');
+    var post = $('#' + pNum);
+    if (post.length > 0 && isElementInViewport(post)) {
+        post.addClass('highlight');
+    } else {
+        var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) + 2;
+        var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop);
 
-    cln.addEventListener('mouseout', delPostPreview, false);
-
+        var cln = doc.createElement('div');
+        cln.id = 'pstprev_' + pNum;
+        cln.className = 'post_preview';
 
-    var mkPreview = function(cln, html) {
-        cln.innerHTML = html;
+        cln.style.cssText = 'top:' + y + 'px;' + (x < doc.body.clientWidth/2 ? 'left:' + x + 'px' : 'right:' + parseInt(doc.body.clientWidth - x + 1) + 'px');
 
-        highlightCode($(cln));
-        addRefLinkPreview(cln);
-        translate_time($(cln));
-    };
+        cln.addEventListener('mouseout', delPostPreview, false);
 
+        cln.innerHTML = "<div class=\"post\">" + gettext('Loading...') + "</div>";
 
-    cln.innerHTML = "<div class=\"post\">" + gettext('Loading...') + "</div>";
+        if(post.length > 0) {
+            var postdata = post.clone().wrap("<div/>").parent().html();
 
-    if($('div[id='+pNum+']').length > 0) {
-        var postdata = $('div[id='+pNum+']').clone().wrap("<div/>").parent().html();
+            mkPreview(cln, postdata);
+        } else {
+            $.ajax({
+                url: '/api/post/' + pNum + '/?truncated'
+            })
+                .success(function(data) {
+                    var postdata = $(data).wrap("<div/>").parent().html();
 
-        mkPreview(cln, postdata);
-    } else {
-        $.ajax({
-            url: '/api/post/' + pNum + '/?truncated'
-        })
-            .success(function(data) {
-                var postdata = $(data).wrap("<div/>").parent().html();
+                    //make preview
+                    mkPreview(cln, postdata);
 
-                //make preview
-                mkPreview(cln, postdata);
+                })
+                .error(function() {
+                    cln.innerHTML = "<div class=\"post\">"
+                        + gettext('Post not found') + "</div>";
+                });
+        }
 
-            })
-            .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);
     }
-
-    $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);
+    if(!el) {
+        $each($X('.//div[starts-with(@id,"pstprev")]'), function(clone) {
+            $del(clone)
+        });
+    } else {
+        while(el.nextSibling) $del(el.nextSibling);
+    }
+
+    $('.highlight').removeClass('highlight');
 }
 
 function addPreview() {