stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

minimal working version of user preview

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

1
src/Link.js
View File

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

15
src/RootViewModel.js
View File

@ -20,17 +20,26 @@ import {PreviewViewModel} from "./preview/PreviewViewModel.js";
export class RootViewModel extends ViewModel { export class RootViewModel extends ViewModel {
constructor(request, hash) { constructor(request, hash) {
super(); super({request});
this._request = request;
this.link = Link.parseFragment(hash); this.link = Link.parseFragment(hash);
this.previewViewModel = null; this.previewViewModel = null;
} }
load() { load() {
if (this.link) { 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.emitChange();
this.previewViewModel.load(); this.previewViewModel.load();
} }
} }
get activeSection() {
if (this.previewViewModel) {
return "preview";
}
return "";
}
} }

15
src/ViewModel.js
View File

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

5
src/main.js
View File

@ -1,10 +1,11 @@
import {xhrRequest} from "./utils/xhr.js"; import {xhrRequest} from "./utils/xhr.js";
import {RootViewModel} from "./RootViewModel.js"; import {RootViewModel} from "./RootViewModel.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, location.hash);
vm.load(); vm.load();
window.__rootvm = vm; window.__rootvm = vm;
// const view = new RootView(vm); const view = new RootView(vm);
// container.appendChild(view.mount()); container.appendChild(view.mount());
} }

27
src/preview/PreviewView.js Normal file
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])
]);
}
}

15
src/preview/PreviewViewModel.js
View File

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