From 7dfe8cabc962a1d29b90040ea45a622d9f63627c Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 8 Jun 2022 14:03:36 -0500 Subject: [PATCH] Add lightbox support and Hydrogen URL hashes relative to the room (#12) Add image lightbox support and Hydrogen URL hashes relative to the room Related to https://github.com/vector-im/hydrogen-web/issues/677 Requires the changes from https://github.com/vector-im/hydrogen-web/pull/749 (split out from https://github.com/vector-im/hydrogen-web/pull/653) ![](https://user-images.githubusercontent.com/558581/172526457-38c108e8-8c46-4e0c-9979-734348ec67fc.gif) ### Hydrogen routing relative to the room (remove session and room from the URL hash) Before: Page URL: doesn't work ```html
Friction_between_surfaces.jpeg
``` Before (not relative): Page URL: `http://localhost:3050/!HBehERstyQBxyJDLfR:my.synapse.server/date/2022/02/24#/session/123/room/!HBehERstyQBxyJDLfR:my.synapse.server/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk` ```html
Friction_between_surfaces.jpeg
``` After (nice relative links): Page URL: `http://localhost:3050/!HBehERstyQBxyJDLfR:my.synapse.server/date/2022/02/24#/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk` ```html
Friction_between_surfaces.jpeg
``` --- .eslintrc.json | 2 +- shared/ArchiveView.js | 12 ++- shared/hydrogen-vm-render-script.js | 151 +++++++++++++++++----------- shared/lib/archive-history.js | 50 +++++++++ 4 files changed, 152 insertions(+), 63 deletions(-) create mode 100644 shared/lib/archive-history.js diff --git a/.eslintrc.json b/.eslintrc.json index 70f2876..d7dcb5d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,7 @@ "node": true }, "parserOptions": { - "ecmaVersion": 2018, + "ecmaVersion": 2022, "sourceType": "script" }, "plugins": ["node"], diff --git a/shared/ArchiveView.js b/shared/ArchiveView.js index 84adc4b..343cafa 100644 --- a/shared/ArchiveView.js +++ b/shared/ArchiveView.js @@ -1,6 +1,12 @@ 'use strict'; -const { TemplateView, RoomView, RightPanelView, viewClassForTile } = require('hydrogen-view-sdk'); +const { + TemplateView, + RoomView, + RightPanelView, + LightboxView, + viewClassForTile, +} = require('hydrogen-view-sdk'); class ArchiveView extends TemplateView { render(t, vm) { @@ -13,6 +19,10 @@ class ArchiveView extends TemplateView { [ t.view(new RoomView(vm.roomViewModel, viewClassForTile)), t.view(new RightPanelView(vm.rightPanelModel)), + t.mapView( + (vm) => vm.lightboxViewModel, + (lightboxViewModel) => (lightboxViewModel ? new LightboxView(lightboxViewModel) : null) + ), ] ); } diff --git a/shared/hydrogen-vm-render-script.js b/shared/hydrogen-vm-render-script.js index d47b4c5..33e5b83 100644 --- a/shared/hydrogen-vm-render-script.js +++ b/shared/hydrogen-vm-render-script.js @@ -14,15 +14,15 @@ const { encodeKey, encodeEventIdKey, Timeline, - // TimelineView, - // RoomView, RoomViewModel, ViewModel, + setupLightboxNavigation, } = require('hydrogen-view-sdk'); const ArchiveView = require('matrix-public-archive-shared/ArchiveView'); const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView'); const MatrixPublicArchiveURLCreator = require('matrix-public-archive-shared/lib/url-creator'); +const ArchiveHistory = require('matrix-public-archive-shared/lib/archive-history'); const fromTimestamp = window.matrixPublicArchiveContext.fromTimestamp; assert(fromTimestamp); @@ -73,6 +73,45 @@ function makeEventEntryFromEventJson(eventJson, memberEvent) { return eventEntry; } +// For any `` (anchor with a blank href), instead of reloading the +// page just remove the hash. Also cleanup whenever the hash changes for +// whatever reason. +// +// For example, when closing the lightbox by clicking the close "x" icon, it +// would reload the page instead of SPA because `href=""` will cause a page +// navigation if we didn't have this code. Also cleanup whenever the hash is +// emptied out (like when pressing escape in the lightbox). +function supressBlankAnchorsReloadingThePage() { + const eventHandler = { + clearHash() { + // Cause a `hashchange` event to be fired + document.location.hash = ''; + // Cleanup the leftover `#` left on the URL + window.history.replaceState(null, null, window.location.pathname); + }, + handleEvent(e) { + // For any `` (anchor with a blank href), instead of reloading + // the page just remove the hash. + if ( + e.type === 'click' && + e.target.tagName?.toLowerCase() === 'a' && + e.target?.getAttribute('href') === '' + ) { + this.clearHash(); + // Prevent the page navigation (reload) + e.preventDefault(); + } + // Also cleanup whenever the hash is emptied out (like when pressing escape in the lightbox) + else if (e.type === 'hashchange' && document.location.hash === '') { + this.clearHash(); + } + }, + }; + + document.addEventListener('click', eventHandler); + window.addEventListener('hashchange', eventHandler); +} + // eslint-disable-next-line max-statements async function mountHydrogen() { const app = document.querySelector('#app'); @@ -88,54 +127,33 @@ async function mountHydrogen() { const navigation = createNavigation(); platform.setNavigation(navigation); + + const archiveHistory = new ArchiveHistory(roomData.id); const urlRouter = createRouter({ navigation: navigation, - history: platform.history, + // We use our own history because we want the hash to be relative to the + // room and not include the session/room. + // + // Normally, people use `history: platform.history,` + history: archiveHistory, }); + // Make it listen to changes from the history instance. And populate the + // `Navigation` with path segments to work from so `href`'s rendered on the + // page don't say `undefined`. + urlRouter.attach(); // We use the timeline to setup the relations between entries const timeline = new Timeline({ roomId: roomData.id, - //storage: this._storage, fragmentIdComparer: fragmentIdComparer, clock: platform.clock, logger: platform.logger, - //hsApi: this._hsApi }); const mediaRepository = new MediaRepository({ homeserver: config.matrixServerUrl, }); - // const urlRouter = { - // urlUntilSegment: () => { - // return 'todo'; - // }, - // urlForSegments: (segments) => { - // const isLightBox = segments.find((segment) => { - // return segment.type === 'lightbox'; - // console.log('segment', segment); - // }); - - // if (isLightBox) { - // return '#'; - // } - - // return 'todo'; - // }, - // }; - - // const navigation = { - // segment: (type, value) => { - // return new Segment(type, value); - // }, - // }; - - const lightbox = navigation.observe('lightbox'); - lightbox.subscribe((eventId) => { - this._updateLightbox(eventId); - }); - const room = { name: roomData.name, id: roomData.id, @@ -156,9 +174,14 @@ async function mountHydrogen() { const memberEvent = workingStateEventMap[event.user_id]; return makeEventEntryFromEventJson(event, memberEvent); }); - //console.log('eventEntries', eventEntries); console.log('eventEntries', eventEntries.length); + // Map of `event_id` to `EventEntry` + const eventEntriesByEventId = eventEntries.reduce((currentMap, eventEntry) => { + currentMap[eventEntry.id] = eventEntry; + return currentMap; + }, {}); + // We have to use `timeline._setupEntries([])` because it sets // `this._allEntries` in `Timeline` and we don't want to use `timeline.load()` // to request remote things. @@ -198,23 +221,6 @@ async function mountHydrogen() { tiles, }; - // const view = new TimelineView(timelineViewModel); - - // const roomViewModel = { - // kind: 'room', - // timelineViewModel, - // composerViewModel: { - // kind: 'none', - // }, - // i18n: RoomViewModel.prototype.i18n, - - // id: roomData.id, - // name: roomData.name, - // avatarUrl(size) { - // return getAvatarHttpUrl(roomData.avatarUrl, size, platform, mediaRepository); - // }, - // }; - const roomViewModel = new RoomViewModel({ room, ownUserId: 'xxx', @@ -223,6 +229,7 @@ async function mountHydrogen() { navigation, }); + // FIXME: We shouldn't have to dive into the internal fields to make this work roomViewModel._timelineVM = timelineViewModel; roomViewModel._composerVM = { kind: 'none', @@ -277,9 +284,9 @@ async function mountHydrogen() { } const fromDate = new Date(fromTimestamp); - const archiveViewModel = { - roomViewModel, - rightPanelModel: { + class ArchiveViewModel extends ViewModel { + roomViewModel = roomViewModel; + rightPanelModel = { activeViewModel: { type: 'custom', customView: RightPanelContentView, @@ -290,18 +297,40 @@ async function mountHydrogen() { calendarDate: fromDate, }), }, - }, - }; + }; + + constructor(options) { + super(options); + + this.#setupNavigation(); + } + + #setupNavigation() { + setupLightboxNavigation(this, 'lightboxViewModel', (eventId) => { + return { + room, + eventEntry: eventEntriesByEventId[eventId], + }; + }); + } + } + + const archiveViewModel = new ArchiveViewModel({ + navigation: navigation, + urlCreator: urlRouter, + history: archiveHistory, + }); const view = new ArchiveView(archiveViewModel); - //console.log('view.mount()', view.mount()); app.replaceChildren(view.mount()); addSupportClasses(); + + supressBlankAnchorsReloadingThePage(); } -// N.B.: When we run this in a `vm`, it will return the last statement. It's -// important to leave this as the last statement so we can await the promise it -// returns and signal that all of the async tasks completed. +// N.B.: When we run this in a virtual machine (`vm`), it will return the last +// statement. It's important to leave this as the last statement so we can await +// the promise it returns and signal that all of the async tasks completed. mountHydrogen(); diff --git a/shared/lib/archive-history.js b/shared/lib/archive-history.js new file mode 100644 index 0000000..35d0a30 --- /dev/null +++ b/shared/lib/archive-history.js @@ -0,0 +1,50 @@ +'use strict'; + +const { History } = require('hydrogen-view-sdk'); +const assert = require('./assert'); + +// Mock a full hash whenever someone asks via `history.get()` but when +// constructing URL's for use `href` etc, they should relative to the room +// (remove session and room from the hash). +class ArchiveHistory extends History { + constructor(roomId) { + super(); + + assert(roomId); + this._baseHash = `#/session/123/room/${roomId}`; + } + + // Even though the page hash is relative to the room, we still expose the full + // hash for Hydrogen to route things internally as expected. + get() { + const hash = super.get()?.replace(/^#/, '') ?? ''; + return this._baseHash + hash; + } + + replaceUrlSilently(url) { + // We don't need to do this when server-side rendering in Node.js because + // the #hash is not available to servers. This will be called as a + // downstream call of `urlRouter.attach()` which we do when bootstraping + // everything. + if (window.history) { + super.replaceUrlSilently(url); + } + } + + // Make the URLs we use in the UI of the app relative to the room: + // Before: #/session/123/room/!HBehERstyQBxyJDLfR:my.synapse.server/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk + // After: #/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk + pathAsUrl(path) { + const leftoverPath = super.pathAsUrl(path).replace(this._baseHash, ''); + // Only add back the hash when there is hash content beyond the base so we + // don't end up with an extraneous `#` on the end of the URL. This will end + // up creating some `` (anchors with a blank href) but we have + // some code to clean this up, see `supressBlankAnchorsReloadingThePage`. + if (leftoverPath.length) { + return `#${leftoverPath}`; + } + return leftoverPath; + } +} + +module.exports = ArchiveHistory;