From d91ab5355cca3f90e13fe2ef8360ffc1653e533d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Sun, 3 May 2020 01:08:53 +0200
Subject: [PATCH] support svg namespace, fix spinner

---
 src/ui/web/common.js               |  5 +++++
 src/ui/web/css/login.css           | 12 ++++++++++++
 src/ui/web/css/main.css            |  1 +
 src/ui/web/general/TemplateView.js | 19 +++++++++++++------
 src/ui/web/general/html.js         | 29 +++++++++++++++++++++--------
 src/ui/web/login/LoginView.js      |  2 +-
 6 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/ui/web/common.js
 create mode 100644 src/ui/web/css/login.css

diff --git a/src/ui/web/common.js b/src/ui/web/common.js
new file mode 100644
index 00000000..4ef5cc6f
--- /dev/null
+++ b/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"})
+    );
+}
\ No newline at end of file
diff --git a/src/ui/web/css/login.css b/src/ui/web/css/login.css
new file mode 100644
index 00000000..3a12f849
--- /dev/null
+++ b/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;
+}
diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css
index b2d3af04..085bd479 100644
--- a/src/ui/web/css/main.css
+++ b/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');
diff --git a/src/ui/web/general/TemplateView.js b/src/ui/web/general/TemplateView.js
index 31043e54..71d0ee8b 100644
--- a/src/ui/web/general/TemplateView.js
+++ b/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) {
-        return this.el(tag, attributes, children);
-    };
+
+for (const [ns, tags] of Object.entries(TAG_NAMES)) {
+    for (const tag of tags) {
+        TemplateBuilder.prototype[tag] = function(attributes, children) {
+            return this.elNS(ns, tag, attributes, children);
+        };
+    }
 }
diff --git a/src/ui/web/general/html.js b/src/ui/web/general/html.js
index 24f34ff4..7cb001c0 100644
--- a/src/ui/web/general/html.js
+++ b/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 = [
-    "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", "circle"];
+export const HTML_NS = "http://www.w3.org/1999/xhtml";
+export const SVG_NS = "http://www.w3.org/2000/svg";
+
+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) {
-        return el(tagName, attributes, children);
+
+for (const [ns, tags] of Object.entries(TAG_NAMES)) {
+    for (const tagName of tags) {
+        tag[tagName] = function(attributes, children) {
+            return elNS(ns, tagName, attributes, children);
+        }
     }
 }
diff --git a/src/ui/web/login/LoginView.js b/src/ui/web/login/LoginView.js
index 7baf707d..cf1fab36 100644
--- a/src/ui/web/login/LoginView.js
+++ b/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)
         ]);