matrix-public-archive/shared/views/ArchiveRoomView.js

222 lines
8.3 KiB
JavaScript
Raw Normal View History

'use strict';
const {
TemplateView,
AvatarView,
TimelineView,
RightPanelView,
LightboxView,
} = require('hydrogen-view-sdk');
const {
customViewClassForTile,
} = require('matrix-public-archive-shared/lib/custom-tile-utilities');
const DeveloperOptionsContentView = require('matrix-public-archive-shared/views/DeveloperOptionsContentView');
const ModalView = require('matrix-public-archive-shared/views/ModalView');
class RoomHeaderView extends TemplateView {
render(t, vm) {
return t.div({ className: 'RoomHeader middle-header' }, [
t.a(
{
className: 'button-utility RoomHeader_actionButton',
href: vm.roomDirectoryUrl,
title: vm.i18n`Go back to the room directory`,
},
[
// Home icon from Element
t.svg(
{
xmlns: 'http://www.w3.org/2000/svg',
width: '16',
height: '16',
viewBox: '0 0 24 24',
fill: 'currentColor',
'aria-hidden': 'true',
},
[
t.path({
d: 'M20.2804 7.90031L13.2804 2.06697C12.5387 1.4489 11.4613 1.4489 10.7196 2.06698L3.71963 7.90031C3.26365 8.28029 3 8.84319 3 9.43675V20.5C3 21.6046 3.89543 22.5 5 22.5H7C8.10457 22.5 9 21.6046 9 20.5V16C9 14.8954 9.89543 14 11 14H13C14.1046 14 15 14.8954 15 16V20.5C15 21.6046 15.8954 22.5 17 22.5H19C20.1046 22.5 21 21.6046 21 20.5V9.43675C21 8.84319 20.7364 8.28029 20.2804 7.90031Z',
}),
]
),
]
),
t.view(new AvatarView(vm.roomAvatarViewModel, 32)),
t.div({ className: 'room-description' }, [t.h2((vm) => vm.roomName)]),
t.button(
{
className: 'button-utility RoomHeader_actionButton RoomHeader_changeDatesButton',
title: vm.i18n`Change dates`,
onClick: (/*event*/) => {
vm.openRightPanel();
},
},
[
// Calendar icon (via `calendar2-date` from Bootstrap)
t.svg(
{
xmlns: 'http://www.w3.org/2000/svg',
width: '16',
height: '16',
viewBox: '0 0 16 16',
fill: 'currentColor',
'aria-hidden': 'true',
},
[
t.path({
d: 'M6.445 12.688V7.354h-.633A12.6 12.6 0 0 0 4.5 8.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z',
}),
t.path({
d: 'M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z',
}),
t.path({
d: 'M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4z',
}),
]
),
]
),
]);
}
}
class DisabledComposerView extends TemplateView {
render(t /*, vm*/) {
return t.div({ className: 'DisabledComposerView' }, [
t.h3([
t.map(
(vm) => vm.currentTopPositionEventEntry,
(_currentTopPositionEventEntry, t, vm) => {
const activeDate = new Date(
// If the date from our `archiveRoomViewModel` is available, use that
vm?.currentTopPositionEventEntry?.timestamp ||
// Otherwise, use our initial `dayTimestampTo`
vm.dayTimestampTo
);
const dateString = activeDate.toISOString().split('T')[0];
return t.span(`You're viewing an archive of events from ${dateString}. Use a `);
}
),
t.a(
{
href: (vm) => vm.roomPermalink,
rel: 'noopener',
target: '_blank',
},
['Matrix client']
),
` to start chatting in this room.`,
]),
]);
}
}
class ArchiveRoomView extends TemplateView {
constructor(vm) {
super(vm);
// Keep track of the `IntersectionObserver` so we can disconnect it when necessary
this._interSectionObserverForUpdatedTopPositionEventEntry = null;
}
unmount() {
if (this._interSectionObserverForUpdatedTopPositionEventEntry) {
this._interSectionObserverForUpdatedTopPositionEventEntry.disconnect();
}
}
render(t, vm) {
const rootElement = t.div(
{
className: {
ArchiveRoomView: true,
'right-shown': (vm) => vm.shouldShowRightPanel,
},
},
[
// The red border and yellow background trail around the event that is
// driving the active date as you scroll around.
t.if(
(vm) => vm._developerOptionsContentViewModel?.debugActiveDateIntersectionObserver,
(t /*, vm*/) => {
return t.style({}, (vm) => {
return `
[data-event-id] {
transition: background-color 800ms;
}
[data-event-id="${vm.currentTopPositionEventEntry?.id}"] {
background-color: #ffff8a;
outline: 1px solid #f00;
outline-offset: -1px;
transition: background-color 0ms;
}
`;
});
}
),
t.main({ className: 'ArchiveRoomView_mainArea' }, [
t.view(new RoomHeaderView(vm)),
t.main({ className: 'ArchiveRoomView_mainBody' }, [
t.view(new TimelineView(vm.timelineViewModel, customViewClassForTile)),
t.view(new DisabledComposerView(vm)),
]),
]),
// We can't just conditionally render the right-panel with `t.ifView(...)` based
// on `shouldShowRightPanel` because the right-panel being "hidden" only applies
// to the mobile break points and is always shown on desktop.
t.view(new RightPanelView(vm.rightPanelModel)),
t.mapView(
(vm) => vm.lightboxViewModel,
(lightboxViewModel) => (lightboxViewModel ? new LightboxView(lightboxViewModel) : null)
),
t.view(new ModalView(DeveloperOptionsContentView, vm.developerOptionsModalViewModel)),
]
);
// Avoid an error when server-side rendering (SSR) because it doesn't have all the
// DOM API's available (and doesn't need it for this case)
if (typeof IntersectionObserver === 'function') {
const scrollRoot = rootElement.querySelector('.Timeline_scroller');
this._interSectionObserverForUpdatedTopPositionEventEntry = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const eventId = entry.target.getAttribute('data-event-id');
const eventEntry = vm.eventEntriesByEventId[eventId];
// Ignore events which appear in the future
if (eventEntry.timestamp <= vm.dayTimestampTo) {
vm.setCurrentTopPositionEventEntry(eventEntry);
}
}
});
},
{
root: scrollRoot,
// Select the current active day from the top-edge of the scroll viewport.
//
// This is a trick that pushes the bottom margin up to the top of the
// root so there is just a 0px region at the top to detect
// intersections. This way we always recognize the element at the top.
// As mentioned in:
// - https://stackoverflow.com/a/54874286/796832
// - https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/#aa-creating-a-position-sticky-event
//
// The format is the same as margin: top, left, bottom, right.
rootMargin: '0px 0px -100% 0px',
threshold: 0,
}
);
[...scrollRoot.querySelectorAll(`:scope > ul > [data-event-id]`)].forEach((el) => {
this._interSectionObserverForUpdatedTopPositionEventEntry.observe(el);
});
}
return rootElement;
}
}
module.exports = ArchiveRoomView;