Add reflink hover preview

css/burichan.css

@@ -208,6 +208,11 @@ hr {
 	font-weight: 800;
 }
 
+.hoverpost {
+	background: #EEF2FF;
+	color: #000000;
+}
+
 .commentpostername {
 	background: inherit;
 	font-size: 12px;

css/futaba.css

@@ -170,6 +170,11 @@ hr {
 	font-weight: 800;
 }
 
+.hoverpost {
+	background: #FFFFEE;
+	color: #800000;
+}
+
 .commentpostername {
 	color: #117743;
 	font-weight: 800;

css/global.css

@@ -73,6 +73,15 @@ hr {
 	margin-left: 20px;
 }
 
+.hoverpost {
+	display: block;
+	clear: both;
+	padding: 5px;
+	border: 1px solid rgba(0, 0, 0, .15);
+	border-right-color: rgba(0, 0, 0, .5);
+	border-bottom-color: rgba(0, 0, 0, .5);
+}
+
 .userdelete {
 	float: right;
 	text-align: center;

imgboard.php

@@ -544,6 +544,21 @@ if (!isset($_GET['delete']) && !isset($_GET['manage']) && (isset($_POST['name'])
 	if ($rawpost) {
 		manageLogAction(__('Created raw post') . ' ' . postLink('>>' . $post['id']));
 	}
+// Check if the request is to preview a post
+} elseif (isset($_GET['preview']) && !isset($_GET['manage'])) {
+	$post = postByID(intval($_GET['preview']));
+	if (empty($post)) {
+		die(__('This post has been deleted'));
+	} else if ($post['moderated'] == 0 && !$isadmin) {
+		die(__('This post requires moderation before it can be displayed'));
+	}
+
+	$html = buildPost($post, isset($_GET['res']));
+	if (isset($_GET['res'])) {
+		$html = fixLinksInRes($html);
+	}
+	echo $html;
+	die();
 // Check if the request is to auto-refresh a thread
 } elseif (isset($_GET['posts']) && !isset($_GET['manage'])) {
 	if (TINYIB_AUTOREFRESH <= 0) {

inc/database/mysql_link.php

@@ -4,7 +4,7 @@ if (!defined('TINYIB_BOARD')) {
 }
 
 if (!function_exists('mysql_connect')) {
-	fancyDie("MySQL library is not installed");
+	fancyDie("MySQL library is not installed. Try the mysqli database mode.");
 }
 
 $link = mysql_connect(TINYIB_DBHOST, TINYIB_DBUSERNAME, TINYIB_DBPASSWORD);

js/tinyib.js

@@ -185,12 +185,12 @@ window.addEventListener('DOMContentLoaded', function (e) {
     }
 });
 
-$(window).focus(function() {
+$(window).focus(function () {
     newRepliesCount = 0;
     blinkTitle = false;
 });
 
-$(window).blur(function() {
+$(window).blur(function () {
     if (newRepliesNotice.length == 0) {
         return;
     }
@@ -199,6 +199,99 @@ $(window).blur(function() {
     newRepliesNotice.hide();
 });
 
+$(document).ready(function () {
+    setPostAttributes(document, false);
+    $('div:not(div div)').each(function () {
+        setPostAttributes(this, true);
+    });
+});
+
+function insertAfter(newElement, targetElement) {
+    targetElement.parentNode.insertBefore(newElement, targetElement.nextSibling);
+}
+
+var mouseX;
+var mouseY;
+$(document).mousemove( function(e) {
+    mouseX = e.pageX;
+    mouseY = e.pageY;
+});
+
+var downloaded_posts = [];
+function setPostAttributes(element, setLastReply) {
+    var base_url = './imgboard.php?';
+    if (window.location.href.includes('/res/')) {
+        base_url = '../imgboard.php?res&';
+    }
+    base_url += 'preview=';
+    $('a', element).each(function () {
+        var m = null;
+        if ($(this).attr('href')) {
+            m = $(this).attr('href').match(/.*\/[0-9]+?#([0-9]+)/i);
+        }
+        if (m == null && $(this).attr('href')) {
+            var m = $(this).attr('href').match(/\#([0-9]+)/i);
+        }
+        if (m == null) {
+            return;
+        }
+
+        if ($(this).html() == 'No.') {
+            $(element).attr('postID', m[1]).addClass('post');
+            if (setLastReply) {
+                lastreply = element;
+            }
+        } else if ($(this).attr('refID') == undefined) {
+            var m2 = $(this).html().match(/^\&gt\;\&gt\;[0-9]+/i);
+            if (m2 == null) {
+                return;
+            }
+
+            $(this).attr('refID', m[1]);
+            $(this).hover(function (e) {
+                var preview = document.getElementById('ref' + $(this).attr('refID'));
+                if (!preview) {
+                    var preview = document.createElement('div');
+                    preview.id = 'ref' + $(this).attr('refID');
+                    preview.style.position = 'absolute';
+                    preview.style.textAlign = 'left';
+
+                    $(preview).attr('refID', $(this).attr('refID'));
+
+                    var refpost = $('.post[postID="' + $(this).attr('refID') + '"]').first();
+
+                    var refid = $(this).attr('refID');
+                    if (downloaded_posts[refid]) {
+                        preview.className = 'hoverpost';
+                        $(preview).html(downloaded_posts[refid]);
+                    } else if (refpost.html() && refpost.html() != undefined) {
+                        preview.className = 'hoverpost';
+                        $(preview).html(refpost.html());
+                    } else {
+                        $(preview).html('<div class="hoverpost" style="padding: 14px;">Loading...</div>');
+                        $(preview).fadeIn(125);
+                        $.ajax({
+                            url: base_url + $(this).attr('refID'),
+                            success: function (response) {
+                                var refid = $(preview).attr('refID');
+                                downloaded_posts[refid] = response;
+                                preview.className = 'hoverpost';
+                                $(preview).html(response);
+                            },
+                            dataType: 'html'
+                        });
+                    }
+
+                    insertAfter(preview, this);
+                }
+                $(preview).css('left', mouseX+14).css('top', mouseY+7);
+            }, function (e) {
+                $('#ref' + $(this).attr('refID')).remove();
+            });
+        }
+    });
+}
+
 /*
  * jQuery scrollintoview() plugin and :scrollable selector filter
  *