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;
}
}
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 {
render(t, vm) {
return t.div({className: "RootView"}, t.mapView(vm => vm.activeSection, activeSection => {
switch (activeSection) {
case "preview": return new PreviewView(vm.previewViewModel);
default: return null;
}
}));
return t.div({className: "RootView"}, [
t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
]);
}
}

View File

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

View File

@ -3,9 +3,12 @@ import {RootViewModel} from "./RootViewModel.js";
import {RootView} from "./RootView.js";
export async function main(container) {
const vm = new RootViewModel(xhrRequest, location.hash);
vm.load();
const vm = new RootViewModel(xhrRequest);
vm.updateHash(location.hash);
window.__rootvm = vm;
const view = new RootView(vm);
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"}, [
t.p(t.img({src: vm => vm.avatarUrl})),
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])
]);
}

View File

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