Back button

Author: faisalnjs

frontend/pages/foot.ejs

@@ -2,6 +2,7 @@
         <% if (typeof tenant !== 'undefined') { %>
         <p class="fixed">© <%= new Date().getFullYear() %> CommTrackr</p>
         <p class="fixed2">Changes saved</p>
+        <p class="fixed3">← Back</p>
         <% } else { %>
         <p class="fixed">Internal error</p>
         <% } %>

frontend/public/scripts.js

@@ -26,6 +26,12 @@ function anim_out() {
 
 window.onload = function () {
     anim_in();
+    if (document.referrer && (document.referrer !== window.location.href)) {
+        document.querySelector('.fixed3').classList.add('visible');
+        document.querySelector('.fixed3').addEventListener('click', function () {
+            window.history.back();
+        });
+    };
     document.querySelectorAll('.inputField').forEach(field => {
         field.querySelectorAll('input:not([type="radio"]), textarea').forEach(input => {
             if (localStorage.getItem(field.id)) {
@@ -70,6 +76,14 @@ window.onload = function () {
     });
 };
 
+window.addEventListener('pageshow', (event) => {
+    if (event.persisted) anim_in();
+});
+
+window.addEventListener('pagehide', (event) => {
+    if (event.persisted) anim_out();
+});
+
 // anim_out();
 // setTimeout(() => {
 //     anim_in();

frontend/public/styles.css

@@ -223,6 +223,32 @@ main {
 		transition: 0.25s;
 	}
 
+	> .fixed3 {
+		position: absolute;
+		top: 25px;
+		left: 30px;
+		cursor: pointer;
+		opacity: 0;
+		transition: 0.25s;
+	}
+
+	> .fixed3:not(.visible) {
+		user-select: none;
+		pointer-events: none;
+	}
+
+	> .fixed3.visible {
+		opacity: 0.75;
+		transition: 0.25s;
+	}
+
+	> .fixed3.visible:hover {
+		opacity: 0.5;
+		left: 25px;
+		padding-right: 5px;
+		transition: 0.25s;
+	}
+
 	> .progress {
 		position: absolute;
 		top: 0;