mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

dom changes for timeline image view

Browse source
This commit is contained in:
Bruno Windels 2020-10-30 22:52:54 +01:00
parent 5a31bc5f2b
commit 5aa2c7dc5c
1 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/platform/web/ui/session/room/timeline/ImageView.js
View file

@ -19,27 +19,20 @@ import {renderMessage} from "./common.js";
export class ImageView extends TemplateView {
render(t, vm) {
// replace with css aspect-ratio once supported
const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
const image = t.img({
className: "picture",
src: vm => vm.thumbnailUrl,
width: vm.thumbnailWidth,
height: vm.thumbnailHeight,
loading: "lazy",
alt: vm => vm.label,
title: vm => vm.label,
});
const linkContainer = t.a({
href: vm.lightboxUrl,
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
}, [
image,
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
]);
return renderMessage(t, vm,
[t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]
t.div([
t.a({href: vm.lightboxUrl, className: "picture"}, [
t.img({
src: vm => vm.thumbnailUrl,
loading: "lazy",
alt: vm => vm.label,
title: vm => vm.label,
style: vm => `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
}),
t.time(vm.date + " " + vm.time)
]),
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
])
);
}
}