minimal working version of user preview

This commit is contained in:
Bruno Windels 2020-11-30 10:57:39 +01:00
parent ead94695f1
commit 4d15ce40c1
8 changed files with 93 additions and 16 deletions

View File

@ -6,7 +6,7 @@
<body>
<script type="module">
import {main} from "./src/main.js";
main();
main(document.body);
</script>
</body>
</html>

View File

@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {createEnum} from "./utils/enum.js";
const ROOMALIAS_PATTERN = /^#([^:]*):(.+)$/;

29
src/RootView.js Normal file
View File

@ -0,0 +1,29 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {TemplateView} from "./utils/TemplateView.js";
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;
}
}));
}
}

View File

@ -20,17 +20,26 @@ import {PreviewViewModel} from "./preview/PreviewViewModel.js";
export class RootViewModel extends ViewModel {
constructor(request, hash) {
super();
this._request = request;
super({request});
this.link = Link.parseFragment(hash);
this.previewViewModel = null;
}
load() {
if (this.link) {
this.previewViewModel = new PreviewViewModel(this._request, this.link);
this.previewViewModel = new PreviewViewModel(this.childOptions({
link: this.link,
consentedServers: this.link.servers
}));
this.emitChange();
this.previewViewModel.load();
}
}
get activeSection() {
if (this.previewViewModel) {
return "preview";
}
return "";
}
}

View File

@ -31,7 +31,6 @@ class EventEmitter {
on(name, callback) {
let handlers = this._handlersByName[name];
if (!handlers) {
this.onFirstSubscriptionAdded(name);
this._handlersByName[name] = handlers = new Set();
}
handlers.add(callback);
@ -46,14 +45,26 @@ class EventEmitter {
handlers.delete(callback);
if (handlers.length === 0) {
delete this._handlersByName[name];
this.onLastSubscriptionRemoved(name);
}
}
}
}
export class ViewModel extends EventEmitter {
constructor(options) {
super();
this._options = options;
}
emitChange() {
this.emit("change");
}
get request() {
return this._options.request;
}
childOptions(options = {}) {
return Object.assign({request: this.request}, options);
}
}

View File

@ -1,10 +1,11 @@
import {xhrRequest} from "./utils/xhr.js";
import {RootViewModel} from "./RootViewModel.js";
import {RootView} from "./RootView.js";
export async function main(container) {
const vm = new RootViewModel(xhrRequest, location.hash);
vm.load();
window.__rootvm = vm;
// const view = new RootView(vm);
// container.appendChild(view.mount());
const view = new RootView(vm);
container.appendChild(view.mount());
}

View File

@ -0,0 +1,27 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {TemplateView} from "../utils/TemplateView.js";
export class PreviewView extends TemplateView {
render(t, vm) {
return t.div({className: "PreviewView"}, [
t.p(t.img({src: vm => vm.avatarUrl})),
t.p(vm => vm.name),
t.p(["loading: ", vm => vm.loading])
]);
}
}

View File

@ -19,21 +19,22 @@ import {ViewModel} from "../ViewModel.js";
import {resolveServer} from "./HomeServer.js";
export class PreviewViewModel extends ViewModel {
constructor(request, link) {
super();
constructor(options) {
super(options);
const {link, consentedServers} = options;
this._link = link;
this._request = request;
this._consentedServers = consentedServers;
this.loading = false;
this.name = null;
this.avatarURL = null;
this.avatarUrl = null;
}
async load() {
this.loading = true;
this.emitChange();
for (const server of this._link.servers) {
for (const server of this._consentedServers) {
try {
const homeserver = await resolveServer(this._request, server);
const homeserver = await resolveServer(this.request, server);
switch (this._link.kind) {
case LinkKind.User:
await this._loadUserPreview(homeserver, this._link.identifier);
@ -51,7 +52,7 @@ export class PreviewViewModel extends ViewModel {
async _loadUserPreview(homeserver, userId) {
const profile = await homeserver.getUserProfile(userId);
this.name = profile.displayname || userId;
this.avatarURL = profile.avatar_url ?
this.avatarUrl = profile.avatar_url ?
homeserver.mxcUrlThumbnail(profile.avatar_url, 64, 64, "crop") :
null;
}