mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages 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

8
index.html
View file

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

11
src/main.js
View file

@ -2,6 +2,8 @@ import HomeServerApi from "./matrix/hs-api.js";
import Session from "./matrix/session.js"; import Session from "./matrix/session.js";
import createIdbStorage from "./matrix/storage/idb/create.js"; import createIdbStorage from "./matrix/storage/idb/create.js";
import Sync from "./matrix/sync.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 HOST = "localhost";
const HOMESERVER = `http://${HOST}:8008`; const HOMESERVER = `http://${HOST}:8008`;
@ -32,8 +34,14 @@ async function login(username, password, homeserver) {
return {sessionId, loginData}; 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 // eslint-disable-next-line no-unused-vars
export default async function main(label, button) { export default async function main(label, button, container) {
try { try {
let sessionId = getSessionId(USER_ID); let sessionId = getSessionId(USER_ID);
let loginData; let loginData;
@ -46,6 +54,7 @@ export default async function main(label, button) {
await session.setLoginData(loginData); await session.setLoginData(loginData);
} }
await session.load(); await session.load();
showRooms(container, session.rooms);
const hsApi = new HomeServerApi(HOMESERVER, session.accessToken); const hsApi = new HomeServerApi(HOMESERVER, session.accessToken);
console.log("session loaded"); console.log("session loaded");
if (!session.syncToken) { 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); this._summary.load(summary);
return this._persister.load(txn); 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() { get name() {
return this._name || "Room without a name"; return this._name || this._roomId;
} }
get lastMessage() { 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 // avoid circular dependency between these classes
// and BaseObservableMap (as they extend it) // and BaseObservableMap (as they extend it)
Object.assign(BaseObservableMap.prototype, { Object.assign(BaseObservableMap.prototype, {
asSortedList(comparator) { sortValues(comparator) {
return new SortedMapList(this, comparator); return new SortedMapList(this, comparator);
}, },

53
src/ui/web/ListView.js
View file

@ -1,16 +1,20 @@
import * as html from "./html.js"; import * as html from "./html.js";
class UIView { class UIView {
mount(initialValue) { mount() {}
unmount() {}
} update(_value) {}
// can only be called between a call to mount and unmount
unmount() { root() {}
}
}
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; this._childInstances = null;
} }
getDOMNode() { root() {
return this._root; return this._root;
} }
update() {}
mount() { mount() {
this._subscription = this._collection.subscribe(this); this._subscription = this._collection.subscribe(this);
this._root = html.ul({className: "ListView"}); this._root = html.ul({className: "ListView"});
@ -48,31 +54,26 @@ export default class ListView {
this._childInstances = null; this._childInstances = null;
} }
onAdd(i, value) { onAdd(idx, value) {
const child = this._childCreator(value); const child = this._childCreator(value);
const childDomNode = child.mount(); this._childInstances.splice(idx, 0, child);
this._childInstances.splice(i, 0, child); insertAt(this._root, idx, child.mount());
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);
}
} }
onRemove(i, _value) { onRemove(idx, _value) {
const [child] = this._childInstances.splice(i, 1); const [child] = this._childInstances.splice(idx, 1);
child.getDOMNode().remove(); child.root().remove();
child.unmount(); child.unmount();
} }
onMove(fromIdx, toIdx, value) { 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); 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) { export function el(elementName, attrs, children) {
const e = document.createElement(elementName); const e = document.createElement(elementName);
if (typeof attrs === "object") { if (typeof attrs === "object" && attrs !== null) {
for (let [name, value] of Object.entries(attrs)) { for (let [name, value] of Object.entries(attrs)) {
setAttribute(e, name, value); setAttribute(e, name, value);
} }
} }
if (Array.isArray(children)) { if (children) {
if (!Array.isArray(children)) {
children = [children];
}
// TODO: use fragment here? // TODO: use fragment here?
for (let c of children) { for (let c of children) {
if (typeof c === "string") { if (typeof c === "string") {