Implement closed-by-default email list. #54 (#57)

* Implement closed-by-default email list. #54
* reload on empty page
* simple styling

CHANGELOG.md

@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 ## [Unreleased]
 
 ### Changed
+- Show list of mails and show them only on click. 
 - Removed Turbolinks to allow for simpler code in new features. Add new mail alert. 
 - Rewrote to use mostly pure php. Uses Javascript only where it’s necessary. 
 - fixed problem where only one domain is defined

README.md

@@ -44,7 +44,7 @@ Disposable-mailbox can be installed by copying the src directory to a webserver.
 2. download a [release](https://github.com/synox/disposable-mailbox/releases) or clone this repository
 3. copy the files in the `src` directory to your web server (not the whole repo!).
 4. rename `config.sample.php` to `config.php` and apply the imap settings. Move `config.php` to a safe location outside the `public_html`.
-5. edit `index.php` and set the new path to `config.php`.
+5. edit `index.php` and `json-api.php`: set the new path to `config.php`.
 6. open it in your browser, check your php error log for messages. 
 
 

src/frontend.template.php

@@ -38,6 +38,9 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
     <link rel="stylesheet" href="spinner.css">
 
     <script>
+
+        var mailCount = <?php echo count($emails)?>;
+
         function copyToClipboard(text) {
             var inp = document.createElement('input');
             document.body.appendChild(inp);
@@ -47,6 +50,21 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
             inp.remove();
         }
 
+        function toggle_email_visibility(email_id) {
+            var mailPreviewHeader = document.getElementById("email-preview-header-" + email_id);
+            var mailFullHeader = document.getElementById("email-fullheader-" + email_id);
+            var mailBody = document.getElementById("email-content-" + email_id);
+
+            if (mailPreviewHeader.style.display !== 'none') {
+                mailPreviewHeader.style.display = 'none';
+                mailFullHeader.style.display = 'block';
+                mailBody.style.display = 'block';
+            } else {
+                mailPreviewHeader.style.display = 'block';
+                mailFullHeader.style.display = 'none';
+                mailBody.style.display = 'none';
+            }
+        }
 
         setInterval(function () {
             var r = new XMLHttpRequest();
@@ -56,6 +74,11 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
                 if (r.responseText > 0) {
                     console.log("There are", r.responseText, "new mails.");
                     document.getElementById("new-content-avalable").style.display = 'block';
+
+                    // If there are no emails displayed, we can reload the page without looing any state.
+                    if (mailCount === 0) {
+                        location.reload();
+                    }
                 }
             };
             r.send();
@@ -157,7 +180,43 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
                 <div class="email-table">
 
                     <div class="card email">
-                        <div class="card-block header-shadow">
+
+                        <!-- preview header -->
+                        <div class="card-block header-shadow email-preview-header"
+                             id="email-preview-header-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
+                             onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <b class="card-title">
+                                        <?php echo filter_var($email->subject, FILTER_SANITIZE_SPECIAL_CHARS); ?>
+                                    </b>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-sm-8">
+                                    <h6 class="card-subtitle mt-1 text-muted">
+                                        <?php
+                                        echo filter_var($email->fromName, FILTER_SANITIZE_SPECIAL_CHARS);
+                                        echo ' &lt;';
+                                        echo filter_var($email->fromAddress, FILTER_SANITIZE_SPECIAL_CHARS);
+                                        echo '&gt;';
+                                        ?>
+                                    </h6>
+                                </div>
+                                <div class="col-sm-4">
+                                    <h6 class="card-subtitle mt-1 text-muted"
+                                        style="text-align: right">
+                                        <?php echo filter_var($email->date, FILTER_SANITIZE_SPECIAL_CHARS); ?>
+                                    </h6>
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- full header -->
+                        <div class="card-block header-shadow email-fullheader"
+                             id="email-fullheader-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
+                             onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
                             <div class="row">
                                 <div class="col-sm-8">
                                     <h3 class="card-title">
@@ -197,7 +256,10 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
 
                             </div>
                         </div>
-                        <div class="card-block">
+
+                        <!-- email content -->
+                        <div class="card-block email-content"
+                             id="email-content-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>">
                             <h6 class="card-subtitle text-muted">
                                 To: <?php echo filter_var($email->toString, FILTER_SANITIZE_SPECIAL_CHARS); ?></h6>
 
@@ -249,4 +311,4 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
         | <a href="https://github.com/synox/disposable-mailbox">Contribute to the development on Github.</a></p>
 </footer>
 </body>
-</html>
+</html>

src/style.css

@@ -40,6 +40,18 @@ div.min-height {
     text-align: center;
 }
 
+.email-fullheader {
+    display: none;
+}
+
+.email-preview-header {
+    cursor: pointer;
+}
+
+.email-content {
+    display: none;
+}
+
 #new-content-avalable {
     display: none;
 }