mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

cleanup html utils

Browse source
This commit is contained in:
Bruno Windels 2019-06-14 23:46:18 +02:00
parent 5feca5e0f4
commit 468af4755b
5 changed files with 22 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import * as html from "./html.js";
import {tag} from "./html.js";
class UIView {
mount() {}
@ -47,7 +47,7 @@ export default class ListView {
}
mount() {
this._root = html.ul({className: "ListView"});
this._root = tag.ul({className: "ListView"});
this._loadList();
if (this._onItemClick) {
this._root.addEventListener("click", this._onClick);

8
src/ui/web/RoomView.js
View file

@ -1,6 +1,6 @@
import TimelineTile from "./TimelineTile.js";
import ListView from "./ListView.js";
import * as html from "./html.js";
import {tag} from "./html.js";
import GapView from "./timeline/GapView.js";
export default class RoomView {
@ -14,15 +14,15 @@ export default class RoomView {
mount() {
this._viewModel.on("change", this._onViewModelUpdate);
this._nameLabel = html.h2(null, this._viewModel.name);
this._errorLabel = html.div({className: "RoomView_error"});
this._nameLabel = tag.h2(null, this._viewModel.name);
this._errorLabel = tag.div({className: "RoomView_error"});
this._timelineList = new ListView({}, entry => {
return entry.shape === "gap" ? new GapView(entry) : new TimelineTile(entry);
});
this._timelineList.mount();
this._root = html.div({className: "RoomView"}, [
this._root = tag.div({className: "RoomView"}, [
this._nameLabel,
this._errorLabel,
this._timelineList.root()

4
src/ui/web/SessionView.js
View file

@ -1,7 +1,7 @@
import ListView from "./ListView.js";
import RoomTile from "./RoomTile.js";
import RoomView from "./RoomView.js";
import { div } from "./html.js";
import {tag} from "./html.js";
export default class SessionView {
constructor(viewModel) {
@ -19,7 +19,7 @@ export default class SessionView {
mount() {
this._viewModel.on("change", this._onViewModelChange);
this._root = div({className: "SessionView"});
this._root = tag.div({className: "SessionView"});
this._roomList = new ListView(
{
list: this._viewModel.roomList,

8
src/ui/web/TimelineTile.js
View file

@ -1,4 +1,4 @@
import * as html from "./html.js";
import {tag} from "./html.js";
export default class TimelineTile {
constructor(tileVM) {
@ -24,10 +24,10 @@ export default class TimelineTile {
function renderTile(tile) {
switch (tile.shape) {
case "message":
return html.li(null, [html.strong(null, tile.internalId+" "), tile.label]);
return tag.li(null, [tag.strong(null, tile.internalId+" "), tile.label]);
case "announcement":
return html.li(null, [html.strong(null, tile.internalId+" "), tile.label]);
return tag.li(null, [tag.strong(null, tile.internalId+" "), tile.label]);
default:
return html.li(null, [html.strong(null, tile.internalId+" "), "unknown tile shape: " + tile.shape]);
return tag.li(null, [tag.strong(null, tile.internalId+" "), "unknown tile shape: " + tile.shape]);
}
}

33
src/ui/web/html.js
View file

@ -1,3 +1,5 @@
// DOM helper functions
export function setAttribute(el, name, value) {
if (name === "className") {
name = "class";
@ -23,9 +25,8 @@ export function el(elementName, attrs, children) {
if (!Array.isArray(children)) {
children = [children];
}
// TODO: use fragment here?
for (let c of children) {
if (typeof c === "string") {
if (!c.nodeType) {
c = text(c);
}
e.appendChild(c);
@ -43,24 +44,10 @@ export const TAG_NAMES = [
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button"];
export function ol(... params) { return el("ol", ... params); }
export function ul(... params) { return el("ul", ... params); }
export function li(... params) { return el("li", ... params); }
export function div(... params) { return el("div", ... params); }
export function h1(... params) { return el("h1", ... params); }
export function h2(... params) { return el("h2", ... params); }
export function h3(... params) { return el("h3", ... params); }
export function h4(... params) { return el("h4", ... params); }
export function h5(... params) { return el("h5", ... params); }
export function h6(... params) { return el("h6", ... params); }
export function p(... params) { return el("p", ... params); }
export function strong(... params) { return el("strong", ... params); }
export function em(... params) { return el("em", ... params); }
export function span(... params) { return el("span", ... params); }
export function img(... params) { return el("img", ... params); }
export function section(... params) { return el("section", ... params); }
export function main(... params) { return el("main", ... params); }
export function article(... params) { return el("article", ... params); }
export function aside(... params) { return el("aside", ... params); }
export function pre(... params) { return el("pre", ... params); }
export function button(... params) { return el("button", ... params); }
export const tag = {};
for (const tagName of TAG_NAMES) {
tag[tagName] = function(attributes, children) {
return el(tagName, attributes, children);
}
}