added tabbing to multipart/alternative

3 files changed, 45 insertions, 22 deletions

diff --git a/lib/JWebmail/View/RenderMail.pm b/lib/JWebmail/View/RenderMail.pm
index 387e586..63d3bdb 100644
--- a/lib/JWebmail/View/RenderMail.pm
+++ b/lib/JWebmail/View/RenderMail.pm
@@ -36,29 +36,29 @@ sub render_multipart_alternative {
     my ($self, $_subtype, $content, $path) = @_;
 
     my $parts = $content->{parts};
-    my $R = qq'<div class="jwm-mail-body jwm-mail-body-multipart-alternative"\n>';
-    my $i = 0;
-    my $end;
-
-    for (reverse @$parts) {
-        if (!$end) {
-            my $x = $self->mime_render(to_mime_types($_->{head}), $_->{body}, [@$path, $#$parts-$i]);
-            if ($x) {
-                $R .= $x;
-                $end = 1;
-            }
-        }
-        else {
-            $R .= '<details class="jwm-mail-body-multipart-alternative-extra" >';
-            $R .= '<summary>';
-            $R .= to_mime_type($_->{head});
-            $R .= "</summary>\n";
-            $R .= $self->mime_render(to_mime_types($_->{head}), $_->{body}, [@$path, $#$parts-$i]);
-            $R .= "</details>\n";
-        }
+    my $T = "<div class=tabs><ul>\n";
+    my $C = '<div class=jwm-mail-body-multipart-alternative-bodies>';
+    my $i = 1;
+    my ($init, @rest) = reverse @$parts;
+
+    $T .= '<li class=is-active data=0><a>' . to_mime_type($init->{head}) . '</a></li>';
+
+    $C .= "<div class=jwm-mail-body-multipart-alternative-body>\n";
+    $C .= $self->mime_render(to_mime_types($init->{head}), $init->{body}, [@$path, $#$parts]);
+    $C .= "</div>\n";
+
+    for (@rest) {
+        $T .= "<li  data=$i><a>" . to_mime_type($_->{head}) . "</a></li>\n";
+
+        $C .= qq'<div class="jwm-mail-body-multipart-alternative-body is-hidden">\n';
+        $C .= $self->mime_render(to_mime_types($_->{head}), $_->{body}, [@$path, $#$parts-$i]);
+        $C .= "</div>\n";
+
         ++$i;
     }
-    return $R . "</div>\n";
+    $C .= qq'</div>';
+    $T .= qq'</ul></div>';
+    return qq'<script src=/src/rendermail.js></script><div class="jwm-mail-body jwm-mail-body-multipart-alternative">\n$T\n$C\n</div>\n';
 }
 
 sub render_multipart {
@@ -69,6 +69,7 @@ sub render_multipart {
     my $i = 0;
 
     for (@$parts) {
+        $R .= "<div class=media><div class=media-content>\n";
         if (     !$_->{head}{content_disposition}
             || lc $_->{head}{content_disposition} eq 'none'
             || lc $_->{head}{content_disposition} eq 'inline') {
@@ -86,6 +87,7 @@ sub render_multipart {
             warn "unknown Content-Disposition '$_->{head}{content_disposition}'";
             $R .= "<p>unknown Content-Disposition '$_->{head}{content_disposition}'</p>\n";
         }
+        $R .= "</div></div>\n";
         ++$i;
     }
     return $R . "</div>\n";
diff --git a/package.json b/package.json
index ea2861a..961a8f7 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npm run build-js && npm run build-css && npm run build-sass",
-    "build-js": "esbuild --bundle src/login_cram.js src/displayheaders.js --outdir=public/src/",
+    "build-js": "esbuild --bundle src/login_cram.js src/displayheaders.js src/rendermail.js --outdir=public/src/",
     "build-css": "esbuild --bundle css/my_pure.css --outdir=public/css/",
     "build-sass": "sass --update --load-path=node_modules/ scss/my_bulma.scss public/css/my_bulma.css",
     "build-release": "esbuild --bundle --minify css/*.css src/*.js --outdir=public/ && sass --update --no-source-maps --style=compress --load-path=node_modules/ scss/my_bulma.scss public/css/my_bulma.css",
diff --git a/src/rendermail.js b/src/rendermail.js
new file mode 100644
index 0000000..1331913
--- /dev/null
+++ b/src/rendermail.js
@@ -0,0 +1,21 @@
+function tabSelection(evt) {
+    const self = evt.target;
+
+    for (const ts of self.parentElement.parentElement.children) {
+        ts.classList.remove('is-active');
+    }
+    self.parentNode.classList.add('is-active');
+
+    const bodies = self.parentElement.parentElement.parentElement.parentElement.children[1].children;
+    for (const ts of bodies) {
+        ts.classList.add('is-hidden');
+    }
+    bodies[+self.parentElement.attributes.data.value].classList.remove('is-hidden');
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    const tabSections = document.getElementsByClassName("jwm-mail-body-multipart-alternative");
+    for (const ts of tabSections) {
+        Array.from(ts.children[0].children[0].children).forEach(element => element.children[0].addEventListener('click', tabSelection));
+    }
+})