Only use post previews/inline expansion if enabled

frontend/src/gochan.js

@@ -1,11 +1,11 @@
 import { opRegex } from "./vars";
 import "jquery-ui-dist/jquery-ui";
 
-import { handleActions, handleKeydown } from "./boardevents";
+import { handleKeydown } from "./boardevents";
 import { initCookies } from "./cookies";
 import { initStaff, createStaffMenu } from "./manage";
 // import { notify } from './notifications';
-import { currentBoard, prepareThumbnails, preparePostPreviews, deletePost, hidePost, reportPost } from "./postutil";
+import { prepareThumbnails, initPostPreviews, getPageThread, addPostDropdown } from "./postutil";
 import { initSettings } from "./settings";
 import { initTopBar, TopBarButton } from "./topbar";
 import { initQR } from "./qr";
@@ -31,21 +31,6 @@ export function changePage(sel) {
 		window.location = webroot + info.board + "/res/" + info.op + "p" + sel.value + ".html";
 }
 
-export function getPageThread() {
-	let arr = opRegex.exec(window.location.pathname);
-	let info = {
-		board: currentBoard(),
-		boardID: -1,
-		op: -1,
-		page: 0
-	};
-	if(arr == null) return info;
-	if(arr.length > 1) info.op = arr[1];
-	if(arr.length > 3) info.page = arr[3];
-	if(arr.board != "") info.boardID = $("form#postform input[name=boardid]").val() -1;
-	return info;
-}
-
 $(() => {
 	let pageThread = getPageThread();
 	let style = getStorageVal("style", defaultStyle)
@@ -70,52 +55,13 @@ $(() => {
 
 	if(pageThread.board != "") {
 		prepareThumbnails();
-		if(getBooleanStorageVal("useqr", true)) initQR(pageThread);
+		if(getBooleanStorageVal("useqr", true))
+			initQR(pageThread);
+		initPostPreviews();
 	}
 
-	preparePostPreviews(false);
+	$("div.post, div.reply").each((i, elem) => {
-	$("plus").on("click", function() {
+		addPostDropdown($(elem));
-		let block = $(this).parent().next();
-		if(block.css("display") == "none") {
-			block.show();
-			$(this).html("-");
-		} else {
-			block.hide();
-			$(this).html("+");
-		}
-	});
-
-	let $postInfo = $("label.post-info");
-	$postInfo.each((i, elem) => {
-		let $elem = $(elem);
-		let isOP = $elem.parents("div.reply-container").length == 0;
-		let hasUpload = $elem.siblings("div.file-info").length > 0;
-		let postID = $elem.parent().attr("id");
-		let threadPost = isOP?"thread":"post";
-
-		let $ddownMenu = $("<select />", {
-			class: "post-actions",
-			id: postID
-		}).append(
-			"<option disabled selected>Actions</option>",
-		);
-		if(isOP) {
-			$ddownMenu.append(
-				"<option>Watch thread</option>"
-			);
-		}
-		$ddownMenu.append(
-			`<option>Show/hide ${threadPost}</option>`,
-			`<option>Report post</option>`,
-			`<option>Delete ${threadPost}</option>`,
-		).insertAfter($elem)
-		.on("click", event => {
-			if(event.target.nodeName != "OPTION")
-				return;
-			handleActions($ddownMenu.val(), postID);
-		});
-		if(hasUpload)
-			$ddownMenu.append(`<option>Delete file</option>`);
 	});
 	$(document).on("keydown", handleKeydown);
 });

frontend/src/postutil.js

@@ -1,22 +1,31 @@
+import { opRegex } from "./vars";
 import { getCookie } from "./cookies";
 import { alertLightbox, promptLightbox } from "./lightbox";
+import { getBooleanStorageVal } from "./storage";
+import { handleActions } from "./boardevents";
+
+let doClickPreview = false;
+let doHoverPreview = false;
+let $hoverPreview = null;
 
-let movablePostPreviews = null;
-let expandablePostrefs = true;
 let threadRE = /^\d+/;
 let videoTestRE = /\.(mp4)|(webm)$/;
+const postrefRE = /\/([^\s\/]+)\/res\/(\d+)\.html(#(\d+))?/;
 
-function deleteCheckedPosts() {
+export function getPageThread() {
-	if(confirm('Are you sure you want to delete these posts?')) {
+	let arr = opRegex.exec(window.location.pathname);
-		let form = $("form#main-form");
+	let info = {
-		form.append("<input type=\"hidden\" name=\"action\" value=\"delete\" ");
+		board: currentBoard(),
-		form.get(0).submit();
+		boardID: -1,
-		return true;
+		op: -1,
+		page: 0
+	};
+	if(arr == null) return info;
+	if(arr.length > 1) info.op = arr[1];
+	if(arr.length > 3) info.page = arr[3];
+	if(arr.board != "") info.boardID = $("form#postform input[name=boardid]").val() -1;
+	return info;
 }
-	return false;
-}
-// window.deleteCheckedPosts = deleteCheckedPosts;
-
 
 export function getUploadPostID(upload, container) {
 	// if container, upload is div.upload-container
@@ -60,55 +69,93 @@ export function insideOP(elem) {
 	return $(elem).parents("div.op-post").length > 0;
 }
 
-export function preparePostPreviews(isInline) {
+function createPostPreview(e, $post, inline = true) {
-	let mType = "mousemove";
+	let $preview = $post.clone();
-	if(!movablePostPreviews) mType = "mouseover";
+	if(inline) $preview = addPostDropdown($post.clone());
-
+	$preview
-	var hvrStr = "a.postref";
+		.prop({class: "inlinepostprev"})
-	if(isInline) hvrStr = "div.inlinepostprev " + hvrStr;
+		.find("div.inlinepostprev").remove()
-
+		.find("a.postref").on("click", expandPost);
-	let $hover = $(hvrStr)
+	if(inline) {
-	$hover.on("mouseenter", function() {
+		$preview.insertAfter(e.target);
-		console.log("mouseenter");
-		let replaced = $hover[0].innerHTML.replace("&gt;&gt;","");
-		let postID = `div.reply#reply${replaced},div.op-post#op${replaced}`;
-		let $clone = $(postID).clone();
-		$(document.body).append($clone.attr({
-			class: "postprev",
-			id: postID + "preview"
-		}));
-		$clone.find(".inlinepostprev").remove();
-		$(document).on(mType, e => {
-			$('.postprev').css({
-				left:	e.pageX + 8,
-				top:	e.pageY + 8
-			});
-		});
-	}).on("mouseleave", () => {
-		console.log("mouseleave")
-		$(".postprev").remove();
-	});
-
-	if(expandablePostrefs) {
-		let clkStr = "a.postref";
-		if(isInline) clkStr = "div.inlinepostprev " + clkStr;
-		$(clkStr).on("click", function() {
-			let $this = $(this);
-			if($this.next().attr("class") != "inlinepostprev") {
-				$(".postprev").remove();
-				let replaced = this.innerHTML.replace("&gt;&gt;","");
-				let postID = `div.reply#reply${replaced},div.op-post#op${replaced}`;
-				let $clone = $(postID).clone()
-				$clone.find("postprev").remove();
-				$this.after(
-					$clone.attr("class", "inlinepostprev")
-				);
-			} else {
-				$this.next().remove();
 	}
-			return false;
+	initPostPreviews($preview);
+	return $preview;
+}
+
+function previewMoveHandler(e) {
+	if($hoverPreview == null) return;
+	$hoverPreview.css({position: "absolute"}).offset({
+		top: e.pageY + 8,
+		left: e.pageX + 8
 	});
 }
+
+function expandPost(e) {
+	e.preventDefault();
+	if($hoverPreview != null) $hoverPreview.remove();
+	let $next = $(e.target).next();
+	if($next.prop("class") == "inlinepostprev" && e.type == "click") {
+		// inline preview is already opened, close it
+		$next.remove();
+		return;
+	}
+	let url = e.target.href
+	let urlArr = postrefRE.exec(url);
+	if(urlArr == null) return; // not actually a link to a post, abort
+	let postBoard = urlArr[1];
+	let postOP = urlArr[2];
+	let postID = urlArr[4]?urlArr[4]:urlArr[2];
+
+	let pageThread = getPageThread();
+	let $post = null;
+	
+	if(pageThread.board == postBoard && pageThread.op == postOP) {
+		$post = $(`div#op${postID}, div#reply${postID}`).first();
+		if($post.length < 1) return; // post not on this page.
+		$preview = createPostPreview(e, $post, e.type == "click");
+		if(e.type == "mouseenter") {
+			$hoverPreview = $preview.insertAfter(e.target);
+			$(document.body).on("mousemove", previewMoveHandler);
+		}
+	} else if(e.type == "click") {
+		$.get(e.target.href, data => {
+			$post = $(data).find(`div#op${postID}, div#reply${postID}`).first();
+			if($post.length < 1) return; // post not on this page.
+			createPostPreview(e, $post, true);
+		}).catch((t, u, v) => {
+			alertLightbox(v, "Error");
+			return;
+		});
+	}
+}
+
+export function initPostPreviews($post = null) {
+	if(getPageThread().board == "" && $post == null) return;
+	doClickPreview = getBooleanStorageVal("enablepostclick", true);
+	doHoverPreview = getBooleanStorageVal("enableposthover", false);
+	let $refs = null;
+	if($post == null) {
+		$refs = $("a.postref");
+	} else {
+		$refs = $post.find("a.postref");
+	}
+
+	if(doClickPreview) {
+		$refs.on("click", expandPost);
+	} else {
+		$refs.off("click", expandPost);
+	}
+
+	if(doHoverPreview) {
+		$refs.on("mouseenter", expandPost).on("mouseleave", () => {
+			if($hoverPreview != null) $hoverPreview.remove();
+			$hoverPreview = null;
+			$(document.body).off("mousemove", previewMoveHandler);
+		});
+	} else {
+		$refs.off("mouseenter").off("mouseleave").off("mousemove");
+	}
 }
 
 export function prepareThumbnails() {
@@ -140,7 +187,6 @@ export function prepareThumbnails() {
 			.on("click", function(e) {
 				video.remove();
 				thumb.show();
-				console.log(thumb);
 				this.remove();
 				thumb.prop({
 					src: thumbURL,
@@ -179,6 +225,40 @@ export function quote(e) {
 }
 window.quote = quote;
 
+export function addPostDropdown($post) {
+	if($post.find("select.post-actions").length > 0)
+		return $post;
+	let $postInfo = $post.find("label.post-info");
+	let isOP = $postInfo.parents("div.reply-container").length == 0;
+	let hasUpload = $postInfo.siblings("div.file-info").length > 0;
+	let postID = $postInfo.parent().attr("id");
+	let threadPost = isOP?"thread":"post";
+	let $ddownMenu = $("<select />", {
+		class: "post-actions",
+		id: postID
+	}).append(
+		"<option disabled selected>Actions</option>",
+	);
+	if(isOP) {
+		$ddownMenu.append(
+			"<option>Watch thread</option>"
+		);
+	}
+	$ddownMenu.append(
+		`<option>Show/hide ${threadPost}</option>`,
+		`<option>Report post</option>`,
+		`<option>Delete ${threadPost}</option>`,
+	).insertAfter($postInfo)
+	.on("click", event => {
+		if(event.target.nodeName != "OPTION")
+			return;
+		handleActions($ddownMenu.val(), postID);
+	});
+	if(hasUpload)
+		$ddownMenu.append(`<option>Delete file</option>`);
+	return $post;
+}
+
 export function reportPost(id, board) {
 	promptLightbox("", false, ($lb, reason) => {
 		if(reason == "" || reason == null) return;

frontend/src/settings.js

@@ -1,6 +1,8 @@
 import { showLightBox } from "./lightbox";
 import { initTopBar, TopBarButton } from "./topbar";
 import { getStorageVal, setStorageVal } from "./storage";
+import { initPostPreviews } from "./postutil";
+import { initQR } from "./qr";
 
 /**
  * @type {TopBarButton}
@@ -122,9 +124,9 @@ export function initSettings() {
 			`${webroot}css/${this.getElementValue()}`);
 	}));
 	settings.set("pintopbar", new BooleanSetting("pintopbar", "Pin top bar", true, initTopBar));
-	settings.set("enableposthover", new BooleanSetting("enableposthover", "Preview post on hover"));
+	settings.set("enableposthover", new BooleanSetting("enableposthover", "Preview post on hover", false, initPostPreviews));
-	settings.set("enablepostclick", new BooleanSetting("enablepostclick", "Preview post on click", true));
+	settings.set("enablepostclick", new BooleanSetting("enablepostclick", "Preview post on click", true, initPostPreviews));
-	settings.set("useqr", new BooleanSetting("useqr", "Use Quick Reply box", true));
+	settings.set("useqr", new BooleanSetting("useqr", "Use Quick Reply box", true, initQR));
 
 	if($settingsButton == null)
 		$settingsButton = new TopBarButton("Settings", createLightbox);