support svg namespace, fix spinner

This commit is contained in:
Bruno Windels 2020-05-03 01:08:53 +02:00
parent 34549a2ecb
commit d91ab5355c
6 changed files with 53 additions and 15 deletions

5
src/ui/web/common.js Normal file
View file

@ -0,0 +1,5 @@
export function spinner(t, extraClasses = undefined) {
return t.svg({className: Object.assign({"spinner": true}, extraClasses), viewBox:"0 0 100% 100%"},
t.circle({cx:"50%", cy:"50%", r:"45%", pathLength:"100"})
);
}

12
src/ui/web/css/login.css Normal file
View file

@ -0,0 +1,12 @@
.SessionLoadView {
display: flex;
}
.SessionLoadView p {
flex: 1;
margin: 0 0 0 10px;
}
.SessionLoadView .spinner {
--size: 20px;
}

View file

@ -1,4 +1,5 @@
@import url('layout.css'); @import url('layout.css');
@import url('login.css');
@import url('left-panel.css'); @import url('left-panel.css');
@import url('room.css'); @import url('room.css');
@import url('timeline.css'); @import url('timeline.css');

View file

@ -1,4 +1,4 @@
import { setAttribute, text, isChildren, classNames, TAG_NAMES } from "./html.js"; import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS } from "./html.js";
import {errorToDOM} from "./error.js"; import {errorToDOM} from "./error.js";
function objHasFns(obj) { function objHasFns(obj) {
@ -244,12 +244,16 @@ class TemplateBuilder {
} }
el(name, attributes, children) { el(name, attributes, children) {
return this.elNS(HTML_NS, name, attributes, children);
}
elNS(ns, name, attributes, children) {
if (attributes && isChildren(attributes)) { if (attributes && isChildren(attributes)) {
children = attributes; children = attributes;
attributes = null; attributes = null;
} }
const node = document.createElement(name); const node = document.createElementNS(ns, name);
if (attributes) { if (attributes) {
this._setNodeAttributes(node, attributes); this._setNodeAttributes(node, attributes);
@ -300,8 +304,11 @@ class TemplateBuilder {
} }
} }
for (const tag of TAG_NAMES) {
TemplateBuilder.prototype[tag] = function(attributes, children) { for (const [ns, tags] of Object.entries(TAG_NAMES)) {
return this.el(tag, attributes, children); for (const tag of tags) {
}; TemplateBuilder.prototype[tag] = function(attributes, children) {
return this.elNS(ns, tag, attributes, children);
};
}
} }

View file

@ -33,12 +33,16 @@ export function setAttribute(el, name, value) {
} }
export function el(elementName, attributes, children) { export function el(elementName, attributes, children) {
return elNS(HTML_NS, elementName, attributes, children);
}
export function elNS(ns, elementName, attributes, children) {
if (attributes && isChildren(attributes)) { if (attributes && isChildren(attributes)) {
children = attributes; children = attributes;
attributes = null; attributes = null;
} }
const e = document.createElement(elementName); const e = document.createElementNS(ns, elementName);
if (attributes) { if (attributes) {
for (let [name, value] of Object.entries(attributes)) { for (let [name, value] of Object.entries(attributes)) {
@ -67,15 +71,24 @@ export function text(str) {
return document.createTextNode(str); return document.createTextNode(str);
} }
export const TAG_NAMES = [ export const HTML_NS = "http://www.w3.org/1999/xhtml";
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6", export const SVG_NS = "http://www.w3.org/2000/svg";
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button", "time", "input", "textarea", "svg", "circle"]; export const TAG_NAMES = {
[HTML_NS]: [
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
"p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button", "time", "input", "textarea"],
[SVG_NS]: ["svg", "circle"]
};
export const tag = {}; export const tag = {};
for (const tagName of TAG_NAMES) {
tag[tagName] = function(attributes, children) { for (const [ns, tags] of Object.entries(TAG_NAMES)) {
return el(tagName, attributes, children); for (const tagName of tags) {
tag[tagName] = function(attributes, children) {
return elNS(ns, tagName, attributes, children);
}
} }
} }

View file

@ -32,7 +32,7 @@ function spinner(t, extraClasses = undefined) {
class SessionLoadView extends TemplateView { class SessionLoadView extends TemplateView {
render(t) { render(t) {
return t.div([ return t.div({className: "SessionLoadView"}, [
spinner(t, {hidden: vm => !vm.loading}), spinner(t, {hidden: vm => !vm.loading}),
t.p(vm => vm.loadLabel) t.p(vm => vm.loadLabel)
]); ]);