mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 03:25:12 +01:00
Code Issues Projects Releases Wiki Activity

rooms on the screen!!

Browse Source
This commit is contained in:
Bruno Windels 2019-02-26 22:45:58 +01:00
parent 90a7989eda
commit 841f280d3c
8 changed files with 78 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -6,13 +6,15 @@
<body>
<p id="syncstatus"></p>
<div><button id="stopsync">stop syncing</button></div>
<div id="container"></div>
<script type="module">
import main from "./src/main.js";
const label = document.getElementById("syncstatus");
const button = document.getElementById("stopsync");
const container = document.getElementById("container");
//import("./src/main.js").then(main => {
main(label, button);
main(label, button, container);
//});
</script>
</body>

11
src/main.js
View File

@ -2,6 +2,8 @@ import HomeServerApi from "./matrix/hs-api.js";
import Session from "./matrix/session.js";
import createIdbStorage from "./matrix/storage/idb/create.js";
import Sync from "./matrix/sync.js";
import ListView from "./ui/web/ListView.js";
import RoomTile from "./ui/web/RoomTile.js";
const HOST = "localhost";
const HOMESERVER = `http://${HOST}:8008`;
@ -32,8 +34,14 @@ async function login(username, password, homeserver) {
return {sessionId, loginData};
}
function showRooms(container, rooms) {
const sortedRooms = rooms.sortValues((a, b) => a.name.localeCompare(b.name));
const listView = new ListView(sortedRooms, (room) => new RoomTile(room));
container.appendChild(listView.mount());
}
// eslint-disable-next-line no-unused-vars
export default async function main(label, button) {
export default async function main(label, button, container) {
try {
let sessionId = getSessionId(USER_ID);
let loginData;
@ -46,6 +54,7 @@ export default async function main(label, button) {
await session.setLoginData(loginData);
}
await session.load();
showRooms(container, session.rooms);
const hsApi = new HomeServerApi(HOMESERVER, session.accessToken);
console.log("session loaded");
if (!session.syncToken) {

4
src/matrix/room/room.js
View File

@ -25,4 +25,8 @@ export default class Room extends EventEmitter {
this._summary.load(summary);
return this._persister.load(txn);
}
get name() {
return this._summary.name;
}
}

2
src/matrix/room/summary.js
View File

@ -17,7 +17,7 @@ export default class RoomSummary {
}
get name() {
return this._name || "Room without a name";
return this._name || this._roomId;
}
get lastMessage() {

2
src/observable/index.js
View File

@ -8,7 +8,7 @@ export { default as ObservableMap } from "./map/ObservableMap.js";
// avoid circular dependency between these classes
// and BaseObservableMap (as they extend it)
Object.assign(BaseObservableMap.prototype, {
asSortedList(comparator) {
sortValues(comparator) {
return new SortedMapList(this, comparator);
},

51
src/ui/web/ListView.js
View File

@ -1,16 +1,20 @@
import * as html from "./html.js";
class UIView {
mount(initialValue) {
mount() {}
unmount() {}
update(_value) {}
// can only be called between a call to mount and unmount
root() {}
}
unmount() {
}
update() {
function insertAt(parentNode, idx, childNode) {
const isLast = idx === parentNode.childElementCount - 1;
if (isLast) {
parentNode.appendChild(childNode);
} else {
const nextDomNode = parentNode.children[idx + 1];
parentNode.insertBefore(childNode, nextDomNode);
}
}
@ -23,10 +27,12 @@ export default class ListView {
this._childInstances = null;
}
getDOMNode() {
root() {
return this._root;
}
update() {}
mount() {
this._subscription = this._collection.subscribe(this);
this._root = html.ul({className: "ListView"});
@ -48,31 +54,26 @@ export default class ListView {
this._childInstances = null;
}
onAdd(i, value) {
onAdd(idx, value) {
const child = this._childCreator(value);
const childDomNode = child.mount();
this._childInstances.splice(i, 0, child);
const isLast = i === this._collection.length - 1;
if (isLast) {
this._root.appendChild(childDomNode);
} else {
const nextDomNode = this._childInstances[i + 1].getDOMNode();
this._root.insertBefore(childDomNode, nextDomNode);
this._childInstances.splice(idx, 0, child);
insertAt(this._root, idx, child.mount());
}
}
onRemove(i, _value) {
const [child] = this._childInstances.splice(i, 1);
child.getDOMNode().remove();
onRemove(idx, _value) {
const [child] = this._childInstances.splice(idx, 1);
child.root().remove();
child.unmount();
}
onMove(fromIdx, toIdx, value) {
const [child] = this._childInstances.splice(fromIdx, 1);
this._childInstances.splice(toIdx, 0, child);
child.root().remove();
insertAt(this._root, toIdx, child.root());
}
onChange(i, value) {
onUpdate(i, value) {
this._childInstances[i].update(value);
}
}

25
src/ui/web/RoomTile.js Normal file
View File

@ -0,0 +1,25 @@
import { li } from "./html.js";
export default class RoomTile {
constructor(room) {
this._room = room;
this._root = null;
}
mount() {
this._root = li(null, this._room.name);
return this._root;
}
unmount() {
}
update() {
// no data-binding yet
this._root.innerText = this._room.name;
}
root() {
return this._root;
}
}

7
src/ui/web/html.js
View File

@ -4,12 +4,15 @@ export function setAttribute(el, name, value) {
export function el(elementName, attrs, children) {
const e = document.createElement(elementName);
if (typeof attrs === "object") {
if (typeof attrs === "object" && attrs !== null) {
for (let [name, value] of Object.entries(attrs)) {
setAttribute(e, name, value);
}
}
if (Array.isArray(children)) {
if (children) {
if (!Array.isArray(children)) {
children = [children];
}
// TODO: use fragment here?
for (let c of children) {
if (typeof c === "string") {