update javascript and css

viewer.css

@@ -99,7 +99,6 @@ pre{
     background-color: var(--pre-bg);
     overflow: scroll;
     padding: 1em;
-    border-radius: 1em;
     margin: 0 0 1em;
 }
 th{
@@ -142,15 +141,19 @@ td a, td span{
     background-color: var(--msg-hover-bg);
 }
 
+#msg-header{
+    max-height: 20em;
+    overflow-y: scroll;;
+}
+
 #singlemessage{
     background: var(--simglemail-bg);
     border-top-left-radius: 1em;
-    border: 3px solid rgba(0,0,0,0.2);
     box-shadow: -0.3em 0 3em rgba(0,0,0,0.3);
     display: block;
     padding: 0;
     overflow: scroll;
-    position: absolute;
+    position: fixed;
     right: 1em;
     top: 3em;
     bottom: 4em;

viewer.js

@@ -33,7 +33,11 @@ var bViewSource = lsGet(lsVar_source, 0);
  * @returns 
  */
 function lsGet(key, defaultvalue) {
-    return localStorage.getItem(key).replace(/^(null|NaN)$/g, defaultvalue);
+    var val = localStorage.getItem(key);
+    if (val == "null" || val == "NaN") {
+        return defaultvalue;
+    }
+    return val;
 }
 
 // ----------------------------------------------------------------------

viewer.min.css

+:root{--darker-bg:#e0e0e8;--main-bg:#f8f8f8;--main-color:#333;--a-color:#44c;--titlebar-bg:#779;--titlebar-border-bottom:4px solid rgba(0,0,0,.2);--titlebar-color:#fff;--msg-active-bg:#fff;--msg-hover-bg:#fcfcfc;--box-bg:var(--darker-bg);--box-strong-color:var(--titlebar-bg);--button-bg:#f8f8f8;--button-bg-active:#e8e8f0;--button-border-active:#669;--button-border-hover:rgba(0,0,80,.3);--button-color:#667;--button-close-bg:#fff;--button-close-color:#633;--footer-bg:#fff;--pre-bg:#e8ecec;--simglemail-bg:#f8f8f8;--simglemail-head-bg:#fff;--table-head-bg:var(--darker-bg);--table-link-color:#447;}body{background-color:var(--main-bg);color:var (--main-color);font-family:Arial,Helvetica,sans-serif;font-size:1.0m;margin:0;}a{color:var(--a-color);}a.button{background:var(--button-bg);border:2px solid rgba(0,0,0,.05);border-radius:.3em;color:var(--button-color);text-decoration:none;padding:.4em;transition:all .1s linear;}a.button:hover{border-color:var(--button-border-hover);box-shadow:none;}a.button.active{background:var(--button-bg-active);border-top:4px solid var(--button-border-active);}a.button.close{background:var(--button-close-bg);color:var(--button-close-color);}footer{background-color:var(--footer-bg);position:fixed;bottom:0;text-align:center;width:100%;padding:1em;opacity:.6;}h1{background:var(--titlebar-bg);margin:0;padding-left:.5em;border-bottom:var(--titlebar-border-bottom);}h1 small{opacity:.5;}h1 a{color:var(--titlebar-color);text-decoration:none;}iframe{border:0;width:100%;height:70em;overflow:scroll;}pre{background-color:var(--pre-bg);overflow:scroll;padding:1em;margin:0 0 1em;}th{background-color:var(--table-head-bg);padding:.5em;}th.date{width:10em;}td{padding:.0;}td a{color:var(--table-link-color);text-decoration:none;}td a,td span{display:block;padding:.5em;}#messages{margin:1em;margin-bottom:8em;}#messages a{display:block;}#messages table{border:0;border-collapse:collapse;min-width:47%;}#messages tr.active{background-color:var(--msg-active-bg);border-radius:1em;}#messages tr:hover{background-color:var(--msg-hover-bg);}#msg-header{max-height:20em;overflow-y:scroll;;}#singlemessage{background:var(--simglemail-bg);border-top-left-radius:1em;box-shadow:-.3em 0 3em rgba(0,0,0,.3);display:block;padding:0;overflow:scroll;position:fixed;right:1em;top:3em;bottom:4em;width:50%;}#singlemessage .header{background:var(--simglemail-head-bg);width:100%;padding:.5em;border-bottom:4px solid rgba(0,0,0,.05);}#singlemessage table{width:80%;}#singlemessage table td.small{width:7em;}#singlemessage .content{padding:.5em;}#search{border:2px solid #ddd;border-radius:.5em;margin-top:1em;margin-left:3em;padding:.5em;font-size:110%;}.box{display:block;float:left;margin:0 1em 1em 0;padding:1em;background-color:var(--box-bg);border-radius:.5em;text-align:center;}.box strong{font-size:160%;color:var(--box-strong-color)}.right{float:right;}.toolbar{padding:1.5em 1em 1em 0;width:97%;}
\ No newline at end of file

viewer.min.js

+const tableId="messagestable",searchId="search",lsVar_prefix="emailcatcher_",lsVar_search="emailcatcher__search",lsVar_header="emailcatcher__showHeader",lsVar_source="emailcatcher__showSource";var bViewHeader=lsGet(lsVar_header,1),bViewSource=lsGet(lsVar_source,0);function lsGet(e,t){var a=localStorage.getItem(e);return"null"==a||"NaN"==a?t:a}function filterTable(){var e=document.getElementById("search").value;localStorage.setItem(lsVar_search,e);var t=document.getElementById(tableId);if(!t)return!1;for(var a=t.rows,r=1;r<a.length;r++)-1==a[r].innerText.toLowerCase().indexOf(e.toLowerCase())?a[r].style.display="none":a[r].style.display="table-row"}function viewHideHeader(){return!!document.getElementById("msg-header")&&(document.getElementById("msg-header").style.display=bViewHeader?"block":"none",document.getElementById("btn-header").className=bViewHeader?"button active":"button",!0)}function toggleViewHeader(){return bViewHeader=Math.abs(bViewHeader-1),localStorage.setItem(lsVar_header,bViewHeader),viewHideHeader(),!0}function viewSource(e){return!!document.getElementById("msg-html")&&(document.getElementById("msg-html").style.display=e?"none":"block",document.getElementById("msg-source").style.display=e?"block":"none",document.getElementById("btn-html").className=e?"button":"button active",document.getElementById("btn-source").className=e?"button active":"button",e!=bViewSource&&(bViewSource=e,localStorage.setItem(lsVar_source,e)),!0)}document.getElementById("search").value=""+lsGet(lsVar_search,""),document.getElementById("search").addEventListener("keyup",filterTable),document.getElementById("search").addEventListener("keypress",filterTable),filterTable();bViewHeader=Math.round(lsGet(lsVar_header,1)),bViewSource=Math.round(lsGet(lsVar_source,0));0!==bViewHeader&&1!==bViewHeader&&(bViewHeader=1),viewHideHeader(),viewSource(bViewSource);
\ No newline at end of file

viewer.php

@@ -15,11 +15,12 @@
  * 2024-10-09  v0.2  add links
  * 2024-10-21  v0.3  add tiles on top; add email search
  * 2024-11-08  v0.4  view html view in preview already
+ * 2024-11-21  v0.5  update javascript and css
  * =======================================================================
  */
 require_once('classes/emailcatcher.class.php');
 
-$_version = "0.4";
+$_version = "0.5";
 
 $sOpen = $_GET['open'] ?? '';
 $sShowHtml = $_GET['html'] ?? '';