diff --git a/dom.js b/dom.js index 1919d408..7f5dd80c 100644 --- a/dom.js +++ b/dom.js @@ -81,11 +81,16 @@ function $$(selector, base = document) { function $element(opt) { - // tag: string, default 'div' + // tag: string, default 'div', may include namespace like 'ns#tag' // appendChild: element or an array of elements // dataset: object // any DOM property: assigned as is - const element = document.createElement(opt.tag || 'div'); + const [ns, tag] = opt.tag && opt.tag.includes('#') + ? opt.tag.split('#') + : [null, opt.tag]; + const element = ns + ? document.createElementNS(ns == 'SVG' || ns == 'svg' ? 'http://www.w3.org/2000/svg' : ns, tag) + : document.createElement(tag || 'div'); (opt.appendChild instanceof Array ? opt.appendChild : [opt.appendChild]) .forEach(child => child && element.appendChild(child)); delete opt.appendChild; @@ -94,5 +99,12 @@ function $element(opt) { Object.assign(element.dataset, opt.dataset); delete opt.dataset; } - return Object.assign(element, opt); + if (ns) { + for (const attr in opt) { + element.setAttributeNS(null, attr, opt[attr]); + } + } else { + Object.assign(element, opt); + } + return element; } diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js index 640add2e..a7ebbe2a 100644 --- a/msgbox/msgbox.js +++ b/msgbox/msgbox.js @@ -56,9 +56,12 @@ function messageBox({ messageBox.element = $element({id, className, appendChild: [ $element({appendChild: [ $element({id: `${id}-title`, innerHTML: title}), - $element({ - id: `${id}-close-icon`, - innerHTML: '', + $element({id: `${id}-close-icon`, appendChild: + $element({tag: 'SVG#svg', class: 'svg-icon', viewBox: '0 0 20 20', appendChild: + $element({tag: 'SVG#path', d: 'M11.69,10l4.55,4.55-1.69,1.69L10,11.69,' + + '5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z', + }) + }), onclick: messageBox.listeners.closeIcon}), $element({id: `${id}-contents`, [putAs]: contents}), $element({id: `${id}-buttons`, appendChild: