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.

3 files changed, 209 insertions, 92 deletions

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 @@
   <form id="reply-post" action="/post" method="post" enctype="multipart/form-data">
     <input id="reply-name" name="name" size="43" type="text" placeholder="Name" maxlength="100">
     <input id="reply-options" name="options" size="43" type="text" placeholder="Options" maxlength="100">
-    <textarea id="reply-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="2000"></textarea>
+    <textarea id="reply-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="2000" oninput="sessionStorage.setItem('element-reply-comment', document.getElementById('reply-comment').value)"></textarea>
     <input id="reply-file" name="file" type="file">
     <input id="reply-submit" type="submit" value="Reply" style="float: right;"><br><br>
     <input type="hidden" id="inReplyTo-box" name="inReplyTo" value="{{ .Board.InReplyTo }}">
@@ -27,7 +27,7 @@
   <div id="report-header" style="text-align: center; display: inline-block; width: 370px; z-index: 0; cursor: move;"></div><div id="report-close" style="display: inline-block; float: right;"><a href="javascript:closeReport()">[X]</a></div>
   <form id="report-post" action="/report" method="post">
     <label for="comment">Reason:</label>
-    <textarea id="report-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="100"></textarea>
+    <textarea id="report-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="100" oninput="sessionStorage.setItem('element-report-comment', document.getElementById('report-comment').value)"></textarea>
     <input id="report-submit" type="submit" value="Report" style="float: right;">
     <input type="hidden" id="report-inReplyTo-box" name="id" value="{{ .Board.InReplyTo }}">
     <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
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, '<a class="reply" title="' + q +  '" href="'+ (actorName) + "/" + shortURL(actorName, opid)  +  '#' + shortURL(actorName, link) + '";">>>' + shortURL(actorName, link)  + isOP + '</a>');
 
-        })            
+        });           
     }
     
     re =  /^(\s+)?>.+/gm;
@@ -146,10 +157,10 @@ function convertContent(actorName, content, opid)
         match.forEach(function(quote, i) {
     
             newContent = newContent.replace(quote, '<span class="quote">' + quote + '</span>');
-        })
+        });
     }
     
-    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;
 }
+