support svg namespace, fix spinner

src/ui/web/common.js

@@ -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"})
+    );
+}

src/ui/web/css/login.css

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

src/ui/web/css/main.css

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

src/ui/web/general/TemplateView.js

@@ -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";
 
 function objHasFns(obj) {
@@ -244,12 +244,16 @@ class TemplateBuilder {
     }
 
     el(name, attributes, children) {
+        return this.elNS(HTML_NS, name, attributes, children);
+    }
+
+    elNS(ns, name, attributes, children) {
         if (attributes && isChildren(attributes)) {
             children = attributes;
             attributes = null;
         }
 
-        const node = document.createElement(name);
+        const node = document.createElementNS(ns, name);
         
         if (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);
+        };
+    }
 }

src/ui/web/general/html.js

@@ -33,12 +33,16 @@ export function setAttribute(el, name, value) {
 }
 
 export function el(elementName, attributes, children) {
+    return elNS(HTML_NS, elementName, attributes, children);
+}
+
+export function elNS(ns, elementName, attributes, children) {
     if (attributes && isChildren(attributes)) {
         children = attributes;
         attributes = null;
     }
 
-    const e = document.createElement(elementName);
+    const e = document.createElementNS(ns, elementName);
 
     if (attributes) {
         for (let [name, value] of Object.entries(attributes)) {
@@ -67,15 +71,24 @@ export function text(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 = {};
 
-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);
+        }
     }
 }

src/ui/web/login/LoginView.js

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