From d91ab5355cca3f90e13fe2ef8360ffc1653e533d Mon Sep 17 00:00:00 2001 From: Bruno Windels 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) ]);