From dd6189378cbc4c8ad22b95951b103880dd39060d Mon Sep 17 00:00:00 2001 From: sageman_ Date: Sat, 3 Jul 2021 14:30:14 +0200 Subject: Implement auto-reload functionality A constant 5 second reload interval instead of increasing the reload intervals by 5 seconds every time so that the user does not miss any time sensitive posts. This also works with the invalid captcha patch. --- static/js/timer.js | 38 ++++++++++++++++++++++++++++++++++++++ static/npost.html | 2 ++ 2 files changed, 40 insertions(+) create mode 100644 static/js/timer.js (limited to 'static') diff --git a/static/js/timer.js b/static/js/timer.js new file mode 100644 index 0000000..8f6516c --- /dev/null +++ b/static/js/timer.js @@ -0,0 +1,38 @@ +var timerCount; +var timerToggle = false; +var timer; +const contentLoadHandler = function(event){ + timerToggle = !!document.getElementById("autoreload-checkbox").checked; + if(timerToggle){ + timerCount = 5; + document.getElementById("autoreload-countdown").innerHTML = "5"; + document.getElementById("autoreload-countdown").style.visibility = "visible"; + timer = setInterval(timerFunction, 1000); + document.removeEventListener("DOMContentLoaded", contentLoadHandler, false); + } +}; + +document.addEventListener("DOMContentLoaded", contentLoadHandler, false); + +function timerFunction(){ + timerCount--; + document.getElementById("autoreload-countdown").innerHTML = timerCount; + if(timerCount <= 0){ + document.getElementById("autoreload-countdown").innerHTML = "Refreshing..."; + clearInterval(timer); + location.reload(); + } +} + +function autoTimer(){ + timerToggle = !timerToggle; + if(timerToggle === true){ + timerCount = 5; + document.getElementById("autoreload-countdown").innerHTML = "5"; + document.getElementById("autoreload-countdown").style.visibility = "visible"; + timer = setInterval(timerFunction, 1000); + }else{ + clearInterval(timer); + document.getElementById("autoreload-countdown").style.visibility = "hidden"; + } +} \ No newline at end of file diff --git a/static/npost.html b/static/npost.html index 740018b..3df4090 100644 --- a/static/npost.html +++ b/static/npost.html @@ -17,6 +17,7 @@ {{ end }} + {{ end }} {{ define "content" }} @@ -39,6 +40,7 @@
  • [Catalog]
  • [Top]
  • [Refresh]
    • +
  • Auto refresh
    • {{ $replies := (index .Posts 0).Replies }} {{ $replies.TotalItems }} / {{ $replies.TotalImgs }} -- cgit v1.2.3 From 8e3e745c2a8e9f1db6d15a67829b2aa320731c3f Mon Sep 17 00:00:00 2001 From: sageman_ Date: Sat, 3 Jul 2021 16:48:50 +0200 Subject: Preserve reply and report window states Especially important since auto-reload gets rid of what you wrote without this patch except for those who use the classic reply form. However, this introduces a lot of bloat to the code and a lot of data kept on the client-side. Perhaps we could implement a no JavaScript version? Also semicolons because apparently JavaScript is *this* forgiving. --- static/bottom.html | 4 +- static/js/footerscript.js | 24 ++-- static/js/posts.js | 273 +++++++++++++++++++++++++++++++++------------- 3 files changed, 209 insertions(+), 92 deletions(-) (limited to 'static') diff --git a/static/bottom.html b/static/bottom.html index db9606d..994ad89 100644 --- a/static/bottom.html +++ b/static/bottom.html @@ -4,7 +4,7 @@
    - +

    @@ -27,7 +27,7 @@
    - + diff --git a/static/js/footerscript.js b/static/js/footerscript.js index a63f422..69e56e7 100644 --- a/static/js/footerscript.js +++ b/static/js/footerscript.js @@ -3,34 +3,34 @@ var imgArray = [].slice.call(imgs); imgArray.forEach(function(img, i){ img.addEventListener("click", function(e){ - var id = img.getAttribute("id") - var media = document.getElementById("media-" + id) - var sensitive = document.getElementById("sensitive-" + id) + var id = img.getAttribute("id"); + var media = document.getElementById("media-" + id); + var sensitive = document.getElementById("sensitive-" + id); if(img.getAttribute("enlarge") == "0") { - var attachment = img.getAttribute("attachment") + var attachment = img.getAttribute("attachment"); img.setAttribute("enlarge", "1"); img.setAttribute("style", "float: left; margin-right: 10px; cursor: pointer;"); - img.src = attachment + img.src = attachment; } else { - var preview = img.getAttribute("preview") + var preview = img.getAttribute("preview"); img.setAttribute("enlarge", "0"); if(img.getAttribute("main") == 1) { img.setAttribute("style", "float: left; margin-right: 10px; max-width: 250px; max-height: 250px; cursor: pointer;"); - img.src = preview + img.src = preview; } else { img.setAttribute("style", "float: left; margin-right: 10px; max-width: 125px; max-height: 125px; cursor: pointer;"); - img.src = preview + img.src = preview; } } }); -}) +}); function viewLink(board, actor) { @@ -38,7 +38,7 @@ function viewLink(board, actor) { var postsArray = [].slice.call(posts); postsArray.forEach(function(p, i){ - var id = p.getAttribute("post") - p.href = "/" + board + "/" + shortURL(actor, id) - }) + var id = p.getAttribute("post"); + p.href = "/" + board + "/" + shortURL(actor, id); + }); } diff --git a/static/js/posts.js b/static/js/posts.js index 79fb7c4..d91fadd 100644 --- a/static/js/posts.js +++ b/static/js/posts.js @@ -1,33 +1,44 @@ +function startNewPost(){ + var el = document.getElementById("newpostbtn"); + el.style="display:none;"; + el.setAttribute("state", "1"); + document.getElementById("newpost").style = "display: block;"; +} + +function stopNewPost(){ + var el = document.getElementById("newpostbtn"); + el.style="display:block;"; + el.setAttribute("state", "0"); + document.getElementById("newpost").style = "display: hidden;"; +} + function newpost() { - var el = document.getElementById("newpostbtn") - var state = el.getAttribute("state") - if(state = "0") + var state = document.getElementById("newpostbtn").getAttribute("state"); + if(state === "0") { - el.style="display:none;" - el.setAttribute("state", "1") - document.getElementById("newpost").style = "display: block;"; + startNewPost(); + sessionStorage.setItem("newpostState", true); } else { - el.style="display:block;" - el.setAttribute("state", "0") - document.getElementById("newpost").style = "display: hidden;"; + stopNewPost(); + sessionStorage.setItem("newpostState", false); } } function getMIMEType(type) { - re = /\/.+/g - return type.replace(re, "") + re = /\/.+/g; + return type.replace(re, ""); } function shortURL(actorName, url) { re = /.+\//g; - temp = re.exec(url) + temp = re.exec(url); - var output + var output; if(stripTransferProtocol(temp[0]) == stripTransferProtocol(actorName) + "/") { @@ -55,18 +66,18 @@ function shortURL(actorName, url) u = re.exec(short); - str = short.replace(/\/+/g, " ") + str = short.replace(/\/+/g, " "); - str = str.replace(u, " ").trim() + str = str.replace(u, " ").trim(); re = /(\w|[!@#$%^&*<>])+$/; - v = re.exec(str) + v = re.exec(str); output = "f" + v[0] + "-" + u } - return output + return output; } function shortImg(url) @@ -92,22 +103,22 @@ function convertSize(size) var convert = size / 1024.0; if(convert > 1024) { - convert = convert / 1024.0 - convert = convert.toFixed(2) + " MB" + convert = convert / 1024.0; + convert = convert.toFixed(2) + " MB"; } else { - convert = convert.toFixed(2) + " KB" + convert = convert.toFixed(2) + " KB"; } - return convert + return convert; } function getBoardId(url) { - var re = /\/([^/\n]+)(.+)?/gm + var re = /\/([^/\n]+)(.+)?/gm; var matches = re.exec(url); - return matches[1] + return matches[1]; } function convertContent(actorName, content, opid) @@ -118,24 +129,24 @@ function convertContent(actorName, content, opid) if(match) { match.forEach(function(quote, i){ - var link = quote.replace('>>', '') - var isOP = "" + var link = quote.replace('>>', ''); + var isOP = ""; if(link == opid) { isOP = " (OP)"; } - var q = link + var q = link; if(document.getElementById(link + "-content") != null) { q = document.getElementById(link + "-content").innerText; - q = q.replaceAll('>', '/\>') - q = q.replaceAll('"', '') - q = q.replaceAll("'", "") + q = q.replaceAll('>', '/\>'); + q = q.replaceAll('"', ''); + q = q.replaceAll("'", ""); } newContent = newContent.replace(quote, '>>' + shortURL(actorName, link) + isOP + ''); - }) + }); } re = /^(\s+)?>.+/gm; @@ -146,10 +157,10 @@ function convertContent(actorName, content, opid) match.forEach(function(quote, i) { newContent = newContent.replace(quote, '' + quote + ''); - }) + }); } - return newContent.replaceAll('/\>', '>') + return newContent.replaceAll('/\>', '>'); } function convertContentNoLink(actorName, content, opid) @@ -160,36 +171,40 @@ function convertContentNoLink(actorName, content, opid) if(match) { match.forEach(function(quote, i){ - var link = quote.replace('>>', '') - var isOP = "" + var link = quote.replace('>>', ''); + var isOP = ""; if(link == opid) { isOP = " (OP)"; } - var q = link + var q = link; if(document.getElementById(link + "-content") != null) { q = document.getElementById(link + "-content").innerText; } newContent = newContent.replace(quote, '>>' + shortURL(actorName, link) + isOP); - }) + }); } - newContent = newContent.replaceAll("'", "") - return newContent.replaceAll('"', '') + newContent = newContent.replaceAll("'", ""); + return newContent.replaceAll('"', ''); } function closeReply() { document.getElementById("reply-box").style.display = "none"; - document.getElementById("reply-comment").value = ""; + document.getElementById("reply-comment").value = ""; + + sessionStorage.setItem("element-closed-reply", true); } function closeReport() { document.getElementById("report-box").style.display = "none"; document.getElementById("report-comment").value = ""; + + sessionStorage.setItem("element-closed-report", true); } @@ -211,10 +226,11 @@ function next(actorName, totalPage, page) function quote(actorName, opid, id) { + sessionStorage.setItem("element-closed-reply", false); var box = document.getElementById("reply-box"); var header = document.getElementById("reply-header"); var comment = document.getElementById("reply-comment"); - var inReplyTo = document.getElementById("inReplyTo-box"); + var inReplyTo = document.getElementById("inReplyTo-box"); var w = window.innerWidth / 2 - 200; if(id == "reply") { @@ -223,8 +239,11 @@ function quote(actorName, opid, id) var h = document.getElementById(id + "-content").offsetTop - 348; } - - box.setAttribute("style", "display: block; position: absolute; width: 400px; height: 600px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;"); + const boxStyle = "display: block; position: absolute; width: 400px; height: 600px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;"; + box.setAttribute("style", boxStyle); + sessionStorage.setItem("element-reply-style", boxStyle); + sessionStorage.setItem("reply-top", h); + sessionStorage.setItem("reply-left", w); if (inReplyTo.value != opid) @@ -232,9 +251,12 @@ function quote(actorName, opid, id) header.innerText = "Replying to Thread No. " + shortURL(actorName, opid); inReplyTo.value = opid; + sessionStorage.setItem("element-reply-actor", actorName); + sessionStorage.setItem("element-reply-id", inReplyTo.value); if(id != "reply") comment.value += ">>" + id + "\n"; + sessionStorage.setItem("element-reply-comment", comment.value); dragElement(header); @@ -242,66 +264,161 @@ function quote(actorName, opid, id) function report(actorName, id) { + sessionStorage.setItem("element-closed-report", false); var box = document.getElementById("report-box"); var header = document.getElementById("report-header"); var comment = document.getElementById("report-comment"); - var inReplyTo = document.getElementById("report-inReplyTo-box"); + var inReplyTo = document.getElementById("report-inReplyTo-box"); var w = window.innerWidth / 2 - 200; var h = document.getElementById(id + "-content").offsetTop - 348; - box.setAttribute("style", "display: block; position: absolute; width: 400px; height: 480px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;"); + const boxStyle = "display: block; position: absolute; width: 400px; height: 480px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px;"; + box.setAttribute("style", boxStyle); + sessionStorage.setItem("element-report-style", boxStyle); + sessionStorage.setItem("report-top", h); + sessionStorage.setItem("report-left", w); header.innerText = "Report Post No. " + shortURL(actorName, id); inReplyTo.value = id; + sessionStorage.setItem("element-report-actor", actorName); + sessionStorage.setItem("element-report-id", id); dragElement(header); } +var pos1, pos2, pos3, pos4; +var elmnt; + +function closeDragElement(e) { + // stop moving when mouse button is released: + document.onmouseup = null; + document.onmousemove = null; + sessionStorage.setItem("eventhandler", false); +} + +function elementDrag(e) { + e = e || window.event; + e.preventDefault(); + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + sessionStorage.setItem("pos1", pos1); + sessionStorage.setItem("pos2", pos2); + sessionStorage.setItem("pos3", pos3); + sessionStorage.setItem("pos4", pos4); + + // set the element's new position: + elmnt.parentElement.style.top = (elmnt.parentElement.offsetTop - pos2) + "px"; + elmnt.parentElement.style.left = (elmnt.parentElement.offsetLeft - pos1) + "px"; + if(elmnt.id.startsWith("report")){ + sessionStorage.setItem("report-top", elmnt.parentElement.style.top); + sessionStorage.setItem("report-left", elmnt.parentElement.style.left); + }else if(elmnt.id.startsWith("reply")){ + sessionStorage.setItem("reply-top", elmnt.parentElement.style.top); + sessionStorage.setItem("reply-left", elmnt.parentElement.style.left); + } +} + +function dragMouseDown(e) { + e = e || window.event; + e.preventDefault(); + + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + sessionStorage.setItem("pos3", pos3); + sessionStorage.setItem("pos4", pos4); + + elmnt = e.currentTarget; + + // call a function whenever the cursor moves: + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + sessionStorage.setItem("eventhandler", true); + +} + function dragElement(elmnt) { - var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; - elmnt.onmousedown = dragMouseDown; +} - function dragMouseDown(e) { - e = e || window.event; - e.preventDefault(); - // get the mouse cursor position at startup: - pos3 = e.clientX; - pos4 = e.clientY; - document.onmouseup = closeDragElement; - // call a function whenever the cursor moves: - document.onmousemove = elementDrag; - } +const stateLoadHandler = function(event){ + pos1 = parseInt(sessionStorage.getItem("pos1")); + pos2 = parseInt(sessionStorage.getItem("pos2")); + pos3 = parseInt(sessionStorage.getItem("pos3")); + pos4 = parseInt(sessionStorage.getItem("pos4")); - function elementDrag(e) { - e = e || window.event; - e.preventDefault(); - // calculate the new cursor position: - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; - // set the element's new position: - elmnt.parentElement.style.top = (elmnt.parentElement.offsetTop - pos2) + "px"; - elmnt.parentElement.style.left = (elmnt.parentElement.offsetLeft - pos1) + "px"; - } + if(sessionStorage.getItem("element-closed-report") === "false"){ + var box = document.getElementById("report-box"); + var header = document.getElementById("report-header"); + var comment = document.getElementById("report-comment"); + var inReplyTo = document.getElementById("report-inReplyTo-box"); - function closeDragElement() { - // stop moving when mouse button is released: - document.onmouseup = null; - document.onmousemove = null; + header.onmousedown = dragMouseDown; + inReplyTo.value = parseInt(sessionStorage.getItem("element-report-id")); + header.innerText = "Report Post No. " + shortURL(sessionStorage.getItem("element-report-actor"), sessionStorage.getItem("element-report-id")); + comment.value = sessionStorage.getItem("element-report-comment"); + + box.setAttribute("style", sessionStorage.getItem("element-report-style")); + + box.style.top = sessionStorage.getItem("report-top"); + box.style.left = sessionStorage.getItem("report-left"); + + if(sessionStorage.getItem("eventhandler") === "true"){ + elmnt = header; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + }else{ + document.onmouseup = null; + document.onmousemove = null; + } } -} + if(sessionStorage.getItem("element-closed-reply") === "false"){ + var box = document.getElementById("reply-box"); + var header = document.getElementById("reply-header"); + var comment = document.getElementById("reply-comment"); + var inReplyTo = document.getElementById("inReplyTo-box"); + + header.onmousedown = dragMouseDown; + inReplyTo.value = parseInt(sessionStorage.getItem("element-reply-id")); + header.innerText = "Replying to Thread No. " + shortURL(sessionStorage.getItem("element-reply-actor"), sessionStorage.getItem("element-reply-id")); + comment.value = sessionStorage.getItem("element-reply-comment"); + + pos1 = parseInt(sessionStorage.getItem("pos1")); + pos2 = parseInt(sessionStorage.getItem("pos2")); + pos3 = parseInt(sessionStorage.getItem("pos3")); + pos4 = parseInt(sessionStorage.getItem("pos4")); + + box.setAttribute("style", sessionStorage.getItem("element-reply-style")); + + box.style.top = sessionStorage.getItem("reply-top"); + box.style.left = sessionStorage.getItem("reply-left"); + + if(sessionStorage.getItem("eventhandler") === "true"){ + elmnt = header; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + }else{ + document.onmouseup = null; + document.onmousemove = null; + } + } +}; + +document.addEventListener("DOMContentLoaded", stateLoadHandler, false); function stripTransferProtocol(value){ - var re = /(https:\/\/|http:\/\/)?(www.)?/ - return value.replace(re, "") + var re = /(https:\/\/|http:\/\/)?(www.)?/; + return value.replace(re, ""); } function isOnion(value){ - var re = /\.onion/ + var re = /\.onion/; if(value.match(re) != null) - return true - return false + return true; + return false; } + -- cgit v1.2.3