restore "x" in messageBox(), add namespace#tag to $element()
This commit is contained in:
parent
f9e90f9cd0
commit
736302962c
18
dom.js
18
dom.js
|
@ -81,11 +81,16 @@ function $$(selector, base = document) {
|
||||||
|
|
||||||
|
|
||||||
function $element(opt) {
|
function $element(opt) {
|
||||||
// tag: string, default 'div'
|
// tag: string, default 'div', may include namespace like 'ns#tag'
|
||||||
// appendChild: element or an array of elements
|
// appendChild: element or an array of elements
|
||||||
// dataset: object
|
// dataset: object
|
||||||
// any DOM property: assigned as is
|
// 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])
|
(opt.appendChild instanceof Array ? opt.appendChild : [opt.appendChild])
|
||||||
.forEach(child => child && element.appendChild(child));
|
.forEach(child => child && element.appendChild(child));
|
||||||
delete opt.appendChild;
|
delete opt.appendChild;
|
||||||
|
@ -94,5 +99,12 @@ function $element(opt) {
|
||||||
Object.assign(element.dataset, opt.dataset);
|
Object.assign(element.dataset, opt.dataset);
|
||||||
delete 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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,9 +56,12 @@ function messageBox({
|
||||||
messageBox.element = $element({id, className, appendChild: [
|
messageBox.element = $element({id, className, appendChild: [
|
||||||
$element({appendChild: [
|
$element({appendChild: [
|
||||||
$element({id: `${id}-title`, innerHTML: title}),
|
$element({id: `${id}-title`, innerHTML: title}),
|
||||||
$element({
|
$element({id: `${id}-close-icon`, appendChild:
|
||||||
id: `${id}-close-icon`,
|
$element({tag: 'SVG#svg', class: 'svg-icon', viewBox: '0 0 20 20', appendChild:
|
||||||
innerHTML: '<svg class="svg-icon"><use xlink:href="#svg-icon-close"/></svg>',
|
$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}),
|
onclick: messageBox.listeners.closeIcon}),
|
||||||
$element({id: `${id}-contents`, [putAs]: contents}),
|
$element({id: `${id}-contents`, [putAs]: contents}),
|
||||||
$element({id: `${id}-buttons`, appendChild:
|
$element({id: `${id}-buttons`, appendChild:
|
||||||
|
|
Loading…
Reference in New Issue
Block a user