update UI when hash changes

This commit is contained in:
Bruno Windels 2020-11-30 11:24:08 +01:00
parent 4d15ce40c1
commit f4cd2a5112
7 changed files with 42 additions and 19 deletions

View File

@ -150,4 +150,11 @@ export class Link {
return null; return null;
} }
} }
equals(link) {
return link &&
link.identifier === this.identifier &&
this.servers.length === link.servers.length &&
this.servers.every((s, i) => link.servers[i] === s);
}
} }

View File

@ -19,11 +19,8 @@ import {PreviewView} from "./preview/PreviewView.js";
export class RootView extends TemplateView { export class RootView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({className: "RootView"}, t.mapView(vm => vm.activeSection, activeSection => { return t.div({className: "RootView"}, [
switch (activeSection) { t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
case "preview": return new PreviewView(vm.previewViewModel); ]);
default: return null;
}
}));
} }
} }

View File

@ -15,25 +15,35 @@ limitations under the License.
*/ */
import {Link} from "./Link.js"; import {Link} from "./Link.js";
import {ViewModel} from "./ViewModel.js"; import {ViewModel} from "./utils/ViewModel.js";
import {PreviewViewModel} from "./preview/PreviewViewModel.js"; import {PreviewViewModel} from "./preview/PreviewViewModel.js";
export class RootViewModel extends ViewModel { export class RootViewModel extends ViewModel {
constructor(request, hash) { constructor(request) {
super({request}); super({request});
this.link = Link.parseFragment(hash); this.link = null;
this.previewViewModel = null; this.previewViewModel = null;
} }
load() { _updateChildVMs(oldLink) {
if (this.link) { if (this.link) {
if (!oldLink || !oldLink.equals(this.link)) {
this.previewViewModel = new PreviewViewModel(this.childOptions({ this.previewViewModel = new PreviewViewModel(this.childOptions({
link: this.link, link: this.link,
consentedServers: this.link.servers consentedServers: this.link.servers
})); }));
this.emitChange();
this.previewViewModel.load(); this.previewViewModel.load();
} }
} else {
this.previewViewModel = null;
}
this.emitChange();
}
updateHash(hash) {
const oldLink = this.link;
this.link = Link.parseFragment(hash);
this._updateChildVMs(oldLink);
} }
get activeSection() { get activeSection() {

View File

@ -3,9 +3,12 @@ import {RootViewModel} from "./RootViewModel.js";
import {RootView} from "./RootView.js"; import {RootView} from "./RootView.js";
export async function main(container) { export async function main(container) {
const vm = new RootViewModel(xhrRequest, location.hash); const vm = new RootViewModel(xhrRequest);
vm.load(); vm.updateHash(location.hash);
window.__rootvm = vm; window.__rootvm = vm;
const view = new RootView(vm); const view = new RootView(vm);
container.appendChild(view.mount()); container.appendChild(view.mount());
window.addEventListener('hashchange', event => {
vm.updateHash(location.hash);
});
} }

View File

@ -21,6 +21,8 @@ export class PreviewView extends TemplateView {
return t.div({className: "PreviewView"}, [ return t.div({className: "PreviewView"}, [
t.p(t.img({src: vm => vm.avatarUrl})), t.p(t.img({src: vm => vm.avatarUrl})),
t.p(vm => vm.name), t.p(vm => vm.name),
t.p(vm => vm.identifier),
t.p(["Can preview from ", vm => vm._consentedServers.join(", ")]),
t.p(["loading: ", vm => vm.loading]) t.p(["loading: ", vm => vm.loading])
]); ]);
} }

View File

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import {LinkKind} from "../Link.js"; import {LinkKind} from "../Link.js";
import {ViewModel} from "../ViewModel.js"; import {ViewModel} from "../utils/ViewModel.js";
import {resolveServer} from "./HomeServer.js"; import {resolveServer} from "./HomeServer.js";
export class PreviewViewModel extends ViewModel { export class PreviewViewModel extends ViewModel {
@ -56,4 +56,8 @@ export class PreviewViewModel extends ViewModel {
homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") : homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") :
null; null;
} }
get identifier() {
return this._link.identifier;
}
} }