Skip to content

Commit 4a72cba

Browse files
committed
refactor createElement
1 parent a5848f9 commit 4a72cba

File tree

3 files changed

+25
-9
lines changed

3 files changed

+25
-9
lines changed

web_src/js/features/dropzone.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {clippie} from 'clippie';
44
import {showTemporaryTooltip} from '../modules/tippy.js';
55
import {GET, POST} from '../modules/fetch.js';
66
import {showErrorToast} from '../modules/toast.js';
7-
import {createElementFromHTML, createElementFromObject} from '../utils/dom.js';
7+
import {createElementFromHTML, createElement} from '../utils/dom.js';
88

99
const {csrfToken, i18n} = window.config;
1010

@@ -69,7 +69,7 @@ export async function initDropzone(dropzoneEl) {
6969
dzInst.on('success', (file, data) => {
7070
file.uuid = data.uuid;
7171
fileUuidDict[file.uuid] = {submitted: false};
72-
const input = createElementFromObject('input', {name: 'files', type: 'hidden', id: `dropzone-file-${data.uuid}`, value: data.uuid});
72+
const input = createElement('input', {name: 'files', type: 'hidden', id: `dropzone-file-${data.uuid}`, value: data.uuid});
7373
dropzoneEl.querySelector('.files').append(input);
7474
addCopyLink(file);
7575
});
@@ -107,7 +107,7 @@ export async function initDropzone(dropzoneEl) {
107107
dzInst.emit('complete', attachment);
108108
addCopyLink(attachment);
109109
fileUuidDict[attachment.uuid] = {submitted: true};
110-
const input = createElementFromObject('input', {name: 'files', type: 'hidden', id: `dropzone-file-${attachment.uuid}`, value: attachment.uuid});
110+
const input = createElement('input', {name: 'files', type: 'hidden', id: `dropzone-file-${attachment.uuid}`, value: attachment.uuid});
111111
dropzoneEl.querySelector('.files').append(input);
112112
}
113113
if (!dropzoneEl.querySelector('.dz-preview')) {

web_src/js/utils/dom.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -305,11 +305,16 @@ export function createElementFromHTML(htmlString) {
305305
return div.firstChild;
306306
}
307307

308-
export function createElementFromObject(tag, obj) {
309-
const el = document.createElement(tag);
310-
for (const [key, value] of Object.entries(obj)) {
311-
// TODO: we could also support `data-` prefix to set data attributes in the future
312-
el[key] = value;
308+
export function createElement(tagName, attrs) {
309+
const el = document.createElement(tagName);
310+
for (const [key, value] of Object.entries(attrs)) {
311+
if (value === undefined || value === null) continue;
312+
if (value === true) {
313+
el.toggleAttribute(key, value);
314+
} else {
315+
el.setAttribute(key, String(value));
316+
}
317+
// TODO: in the future we could make it also support "textContent" and "innerHTML" properties if needed
313318
}
314319
return el;
315320
}

web_src/js/utils/dom.test.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
1-
import {createElementFromHTML} from './dom.js';
1+
import {createElement, createElementFromHTML} from './dom.js';
22

33
test('createElementFromHTML', () => {
44
expect(createElementFromHTML('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>');
55
});
6+
7+
test('createElement', () => {
8+
const el = createElement('button', {
9+
id: 'the-id',
10+
class: 'cls-1 cls-2',
11+
'data-foo': 'the-data',
12+
disabled: true,
13+
required: null,
14+
});
15+
expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled=""></button>');
16+
});

0 commit comments

Comments
 (0)