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.

2 files changed, 40 insertions, 0 deletions

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 }}
 
 <script src="/static/js/posts.js"></script>
+<script src="/static/js/timer.js"></script>
 {{ end }}
 
 {{ define "content" }}
@@ -39,6 +40,7 @@
   <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>            
   <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
   <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+  <li style="display: inline"><input id="autoreload-checkbox" type="checkbox" onclick="autoTimer()"> Auto refresh <span id="autoreload-countdown" style="visibility: hidden;">0</span></li>
 </ul>
 {{ $replies := (index .Posts 0).Replies }}            
 <span style="float: right;">{{ $replies.TotalItems }} / {{ $replies.TotalImgs }}</span>