Skip to content

Commit

Permalink
updated navbar to auto collapse on smaller devices
Browse files Browse the repository at this point in the history
  • Loading branch information
geek-at committed Nov 22, 2023
1 parent dc424b7 commit bb76133
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 266 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
@@ -1,5 +1,8 @@
# Changelog

## V1.1.6
- Reworked the navbar header to look better on smaller screens

## V1.1.5
- Added support for plaintext file attachments
- Updated the way attachments are stored. Now it's md5 + filename
Expand Down
52 changes: 50 additions & 2 deletions web/css/opentrashmail.css
Expand Up @@ -18,8 +18,8 @@ tr.htmx-swapping td {
border-radius: 5px;
}

.htmx-indicator{
display:none;
.htmx-indicator {
display: none;
}

.text-center {
Expand All @@ -32,4 +32,52 @@ tr.htmx-swapping td {
:root {
--form-element-spacing-vertical: 0.15rem;
--form-element-spacing-horizontal: 1rem;
}

/** dynamic nav bar **/

.topnav {
overflow: hidden;
}

.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 775px) {
.topnav a:not(:first-child) {
display: none;
}

.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 775px) {
.topnav.responsive {
position: relative;
}

.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
262 changes: 8 additions & 254 deletions web/js/opentrashmail.js
@@ -1,254 +1,8 @@

var domains = [];
var lastid = 0;
var activeemail = '';
var timer;
$( document ).ready(function() {

$.ajaxSetup({ cache: false });

var email = window.location.hash.substr(1);
if(validateEmail(email))
loadAccount(email)

$.get("api.php?a=getdoms",function(data){
if(data.length>0)
domains = data;
else $("#btn-gen-random").hide();
},"json")

$.get("api.php?a=show-list",function(data){
if (data)
$("#btn-list-addresses").show();
},"json")
});

function loadMail(email,id)
{
$.get("api.php?a=load&email="+email+"&id="+id,function(data){
//
if(data.status=="ok")
{
renderEmail(email,id,data.data)
}
},"json")
}

function renderEmail(email,id,data)
{
clearInterval(timer);
var btns = ''
for(att in data.parsed.attachments)
{
var filename=data.parsed.attachments[att].substr(14)
btns+='<a class="btn btn-primary" target="_blank" href="api.php?a=attachment&email='+email+'&id='+id+'&filename='+filename+'" role="button">'+filename+'</a>'
}
$("#main").html('<h2 class="text-center">'+email+'</h2>\
<button onClick="loadAccount(\''+activeemail+'\')" class="btn btn-primary my-2 my-sm-0"><i class="fas fa-backward"></i> Back</button><br/>\
'+(data.parsed.body?'<pre>'+data.parsed.body+'</pre>':'')+' \
'+(data.parsed.htmlbody?'<div class="card card-body bg-light"><h4>HTML view</h4>'+data.parsed.htmlbody+'</pre></div><br/>':'')+' \
'+(btns!==''?'<h4>Attachments</h4>'+btns:'')+'\
<div class="card card-body bg-light">\
<h4>Raw Email</h4><pre><code>'+data.raw+'</code></pre>\
</div>\
')
}

function listAddresses(e)
{
clearInterval(timer);
e = e || window.event;
e.preventDefault();

$.get("api.php?a=list-addresses", function(data) {
if (data.status == "ok") {
accounts = data.addresses;
$("#main").html(`<h2 class="text-center">Accounts</h2>
<button onClick="loadAccount('${activeemail}')" class="btn btn-primary my-2 my-sm-0"><i class="fas fa-backward"></i> Back</button><br/>
<ul>` +
accounts.map(a => `<li><a href="#" onClick="loadAccount('${a}')">${a}</a></li>`).join('') +
`</ul>`)
} else
alert("Unable to fetch list of accounts")
},"json")
}

function loadAccount(email)
{
clearInterval(timer);
if(validateEmail(email))
{
activeemail = email;

lastid = 0;
changeHash(email)
$("#main").html('<h2 class="text-center">'+email+'</h2>\
<h5 class="text-center">RSS feed: <a href="'+location.protocol + '//' + location.hostname+'/rss/'+email+'/rss.xml">'+location.protocol + '//' + location.hostname+'/rss/'+email+'/rss.xml</a></h5> \
<button onClick="loadAccount(\''+email+'\')" class="btn btn-success my-2 my-sm-0"><i class="fas fa-sync-alt"></i> Refresh</button>\
<table class="table table-hover">\
<thead>\
<tr id="tableheader">\
<th scope="col">#</th>\
<th scope="col">Date</th>\
<th scope="col">From</th>\
<th scope="col">Subject</th>\
<th scope="col">Action</th>\
</tr>\
</thead>\
<tbody id="emailtable">\
</tbody>\
</table>\
')

timer = setInterval(updateEmailTable, 5000); //check for new mail every 5 seconds
updateEmailTable(); //and check now
}
else
{
changeHash("")
}
}

function updateEmailTable()
{
var email = activeemail;
var index = 1;
console.log("Checking mail for "+email)

$.get("api.php?a=list&email="+email+"&lastid="+lastid,function(data){
if(data.status=="ok")
{
var admin=false;
if(data.type=="admin")
{
clearInterval(timer);
admin = true;
// Do not add the To header if one with the "to" class already exists
if ( $('#tableheader').children(':eq(2)').hasClass("to") === false )
{
$('#tableheader').children(':eq(1)').after('<th scope="col" class="to">To</th>');
}
}

//$("#emailtable tr").remove(); // Empty all <tr> from the table so we don't stack
if(Object.keys(data.emails).length>0)
for(em in data.emails)
{
if($("#nomailyet").length != 0)
$("#nomailyet").remove();
if(admin===true)
{
//dateofemail=em.split("-")[0];
email = em.substring(em.indexOf('-') + 1);
}
else dateofemail = em;
if(em>lastid) lastid = em;

//var date = new Date(parseInt(dateofemail))
//var datestring = date.getDate()+"."+date.getMonth()+"."+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes();
var datestring = moment.unix(parseInt(dateofemail/1000)).format(data.dateformat); // Use moment.js formatting
var ed = data.emails[em]
email = ed.email;
$("#emailtable").append('\
<tr class="anemail" email="'+email+'" messageid="'+dateofemail+'">\
<th scope="row">'+(index++)+'</th>\
<td >'+datestring+'</td>\
'+(admin===true?'<td>'+email+'</td>':'')+'\
<td>'+ed.from.toHtmlEntities()+'</td>\
<td>'+ed.subject.toHtmlEntities()+'</td>\
<td><button class="btn btn-success openmailbtn">Open Email</button> <button class="btn btn-danger deletemailbtn">Delete</button></td>\
</tr>');
}
else if(lastid==0 && $("#nomailyet").length == 0){
$("#emailtable").append('\
<tr id="nomailyet">\
<td colspan="5" class="text-center" ><h4>No emails received on this address (yet..)</h4></td>\
</tr>');
}
}
},"json")
}

function accessAccount()
{
var email = $("#email").val()
if(email)
loadAccount(email)
else alert("Enter an email you want to access")
}

function generateAccount()
{
if(domains===null)
alert("No domains configured in settings.ini")
else
{
var dom = domains[Math.floor(Math.random()*domains.length)];
if(dom.includes("*"))
dom = dom.replace("*",adjectivePlease());
console.log(dom);
var email = makeName()+'@'+dom;
loadAccount(email)
}
}

function changeHash(val)
{
if(history.pushState) {
history.pushState(null, null, '#'+val);
}
else {
location.hash = '#'+val;
}
}

function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}

/**
* Convert a string to HTML entities
*/
String.prototype.toHtmlEntities = function() {
return this.replace(/./gm, function(s) {
return "&#" + s.charCodeAt(0) + ";";
});
};

/**
* Create string from HTML entities
*/
String.fromHtmlEntities = function(string) {
return (string+"").replace(/&#\d+;/gm,function(s) {
return String.fromCharCode(s.match(/\d+/gm)[0]);
})
};

$(document).on("click",".deletemailbtn",function(e) {
var btn = $(this);
var email = $(this).parent().parent().attr("email");
var messageid = $(this).parent().parent().attr("messageid");


if(confirm("Do you really want to delete this email?"))
{
$.get( "api.php?a=del&email="+email+"&mid="+messageid, function( data ) {
console.log(data);
if(data.status=="ok")
btn.parent().parent().fadeOut();
else alert("Error deleting email: "+data.reason)
},'json');
}

e.preventDefault();
});

$(document).on("click",".openmailbtn",function(e) {
var email = $(this).parent().parent().attr("email");
var messageid = $(this).parent().parent().attr("messageid");

loadMail(email,messageid);

e.preventDefault();
});
function navbarmanager() {
var x = document.getElementById("OTMTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
20 changes: 10 additions & 10 deletions web/templates/index.html.php
Expand Up @@ -12,16 +12,15 @@
</head>

<body>
<div class="container-fluid">
<nav>
<ul>
<li><a href="/"><img src="/imgs/logo_300_light.png" width="50px" /> Open Trashmail</a></li>
<li><input id="email" hx-post="/api/address" hx-target="#main" name="email" type="email" hx-trigger="input changed delay:500ms" placeholder="email address" aria-label="email address"></li>
<li><button hx-get="/api/random" hx-target="#main"><i class="fas fa-random"></i> Generate random</button></li>
<?php if($settings['SHOW_ACCOUNT_LIST']): ?><li><button hx-get="/api/listaccounts" hx-target="#main" hx-push-url="/listaccounts"><i class="fas fa-list"></i> List accounts</button></li><?php endif; ?>
<?php if($settings['SHOW_LOGS']==true): ?><li><button hx-get="/api/logs" hx-target="#main" hx-push-url="/logs"><i class="fas fa-list"></i> Show logs</button></li><?php endif; ?>
</ul>
</nav>
<div class="topnav" id="OTMTopnav">
<a href="/"><img src="/imgs/logo_300_light.png" width="50px" /> Open Trashmail</a>
<a><input id="email" hx-post="/api/address" hx-target="#main" name="email" type="email" style="margin-bottom:0px" hx-trigger="input changed delay:500ms" placeholder="email address" aria-label="email address"></a>
<a href="/random" hx-get="/api/random" hx-target="#main"><i class="fas fa-random"></i> Generate random</a>
<?php if($settings['SHOW_ACCOUNT_LIST']): ?><a href="/listaccounts" hx-get="/api/listaccounts" hx-target="#main" hx-push-url="/listaccounts"><i class="fas fa-list"></i> List accounts</a><?php endif; ?>
<?php if($settings['SHOW_LOGS']==true): ?><a href="/logs" hx-get="/api/logs" hx-target="#main" hx-push-url="/logs"><i class="fas fa-list"></i> Show logs</a><?php endif; ?>
<a href="javascript:void(0);" class="icon" onclick="navbarmanager()">
<i class="fa fa-bars"></i>
</a>
</div>

<button class="htmx-indicator" aria-busy="true">Loading…</button>
Expand All @@ -30,6 +29,7 @@

</main>

<script src="/js/opentrashmail.js"></script>
<script src="/js/htmx.min.js"></script>
<script src="/js/moment-with-locales.min.js"></script>
</body>
Expand Down

0 comments on commit bb76133

Please sign in to comment.