diff options
| -rw-r--r-- | lib/JWebmail/View/RenderMail.pm | 44 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/rendermail.js | 21 |
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)); + } +}) |