diff --git a/src/e621.user.js b/src/e621.user.js
index af6487f..d429d88 100644
--- a/src/e621.user.js
+++ b/src/e621.user.js
@@ -30,19 +30,11 @@
// ... fetch and display if blocked by global blacklist
if (document.querySelector('#image-container:not([data-file-url]):not([data-flags=deleted])')) {
if ((await get_post()).file.ext === 'webm') {
- const el = document.createElement('video');
- el.setAttribute('controls', '');
- el.setAttribute('loop', '');
- el.src = get_file_url(post);
- document.querySelector('#image-container').appendChild(el);
+ document.querySelector('#image-container').appendChild(dom(['video', { controls: '', loop: '', src: get_file_url(post) }]));
} else if (post.file.ext !== 'swf') {
- const el = document.createElement('img');
- el.src = get_sample_url(post);
- document.querySelector('#image-container').appendChild(el);
+ document.querySelector('#image-container').appendChild(dom(['img', { src: get_sample_url(post) }]));
}
- const el = document.createElement('div');
- el.innerHTML = `Download`;
- document.querySelector('#image-extra-controls').insertBefore(el, document.querySelector('#image-resize-cycle'));
+ document.querySelector('#image-extra-controls').insertBefore(dom(['div', {}, ['a', { class: 'button btn-warn', href: get_file_url(post) }, 'Download']]), document.querySelector('#image-resize-cycle'));
}
// ... display children
if (document.querySelector('#has-children-relationship-preview')) {
@@ -116,6 +108,23 @@ async function find_all_posts(tags) {
}
}
+// recursively build a DOM tree
+function dom(data) {
+ if (typeof data === 'string') {
+ return document.createTextNode(data);
+ }
+ const el = document.createElement(data[0]);
+ for (const key in data[1]) {
+ if (data[1][key] != null) {
+ el.setAttribute(key, data[1][key]);
+ }
+ }
+ for (let i = 2; i < data.length; i++) {
+ el.appendChild(dom(data[i]));
+ }
+ return el;
+}
+
// augment results list with given posts
function augment_results(container, posts, link_params) {
let found, next;
@@ -125,21 +134,7 @@ function augment_results(container, posts, link_params) {
next = found;
} else {
const post = posts[i];
- const el = document.createElement('article');
- el.classList.add('post-preview');
- el.classList.add('captioned');
- el.classList.toggle('post-status-has-parent', post.relationships.parent_id);
- el.classList.toggle('post-status-has-children', post.relationships.has_active_children);
- el.classList.toggle('post-status-pending', post.flags.pending);
- el.classList.toggle('post-status-flagged', post.flags.flagged);
- el.classList.toggle('post-rating-safe', post.rating === 's');
- el.classList.toggle('post-rating-questionable', post.rating === 'q');
- el.classList.toggle('post-rating-explicit', post.rating === 'e');
- if (post.tags.general.includes('animated')) {
- el.setAttribute('data-tags', 'animated');
- }
- el.setAttribute('data-file-ext', post.file.ext);
- el.innerHTML = `