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

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 { class UIView {
mount() {} mount() {}
@ -47,7 +47,7 @@ export default class ListView {
} }
mount() { mount() {
this._root = html.ul({className: "ListView"}); this._root = tag.ul({className: "ListView"});
this._loadList(); this._loadList();
if (this._onItemClick) { if (this._onItemClick) {
this._root.addEventListener("click", this._onClick); this._root.addEventListener("click", this._onClick);

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

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

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

@ -1,7 +1,7 @@
import ListView from "./ListView.js"; import ListView from "./ListView.js";
import RoomTile from "./RoomTile.js"; import RoomTile from "./RoomTile.js";
import RoomView from "./RoomView.js"; import RoomView from "./RoomView.js";
import { div } from "./html.js"; import {tag} from "./html.js";
export default class SessionView { export default class SessionView {
constructor(viewModel) { constructor(viewModel) {
@ -19,7 +19,7 @@ export default class SessionView {
mount() { mount() {
this._viewModel.on("change", this._onViewModelChange); this._viewModel.on("change", this._onViewModelChange);
this._root = div({className: "SessionView"}); this._root = tag.div({className: "SessionView"});
this._roomList = new ListView( this._roomList = new ListView(
{ {
list: this._viewModel.roomList, 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 { export default class TimelineTile {
constructor(tileVM) { constructor(tileVM) {
@ -24,10 +24,10 @@ export default class TimelineTile {
function renderTile(tile) { function renderTile(tile) {
switch (tile.shape) { switch (tile.shape) {
case "message": 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": 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: 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) { export function setAttribute(el, name, value) {
if (name === "className") { if (name === "className") {
name = "class"; name = "class";
@ -23,9 +25,8 @@ export function el(elementName, attrs, children) {
if (!Array.isArray(children)) { if (!Array.isArray(children)) {
children = [children]; children = [children];
} }
// TODO: use fragment here?
for (let c of children) { for (let c of children) {
if (typeof c === "string") { if (!c.nodeType) {
c = text(c); c = text(c);
} }
e.appendChild(c); e.appendChild(c);
@ -43,24 +44,10 @@ export const TAG_NAMES = [
"p", "strong", "em", "span", "img", "section", "main", "article", "aside", "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button"]; "pre", "button"];
export function ol(... params) { return el("ol", ... params); } export const tag = {};
export function ul(... params) { return el("ul", ... params); }
export function li(... params) { return el("li", ... params); } for (const tagName of TAG_NAMES) {
export function div(... params) { return el("div", ... params); } tag[tagName] = function(attributes, children) {
export function h1(... params) { return el("h1", ... params); } return el(tagName, attributes, children);
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); }