diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 5891ed0..fbd8a84 100644
--- a/packages/gallery/package.json
+++ b/packages/gallery/package.json
@@ -12,6 +12,7 @@
"dev": "webpack-dev-server"
},
"dependencies": {
+ "domvm": "~3.2.0",
"exif-parser": "~0.1.9",
"pica": "~2.0.8",
"pouchdb-adapter-http": "~6.1.2",
diff --git a/packages/gallery/src/app.js b/packages/gallery/src/app.js
index 64c4b08..521e0fe 100644
--- a/packages/gallery/src/app.js
+++ b/packages/gallery/src/app.js
@@ -1,8 +1,11 @@
+import { createView } from 'domvm';
+
import * as image from './data/image.js';
import * as index from './data/indexType.js';
import { getDatabase } from './services/db.js';
import * as imageTag from './context/manageImageTags.js';
import generateThumbnails from './contextLoaders/generateThumbnails.js';
+import { ThumbnailView } from './interface/thumbnail.js';
window.__DEV__ = true;
window.db = getDatabase();
@@ -24,43 +27,19 @@ function refresh() {
setTimeout(render, 100);
}
-function renderThumbnail(id, name, doc, tags) {
- const c = document.createElement('div');
- const e = document.createElement('img');
-
- c.appendChild(e);
- c.id = id;
- c.className = 'image';
- e.title = `${id} ${name}`;
- e.src = `data:${doc.content_type};base64,${doc.data}`;
- e.dataset.id = id;
- e.onclick = evt => image.remove(evt.currentTarget.dataset.id).then(refresh);
-
- Object.entries(tags)
- .filter(([_, visible]) => visible)
- .forEach(([title, _]) => {
- const t = document.createElement('span');
- t.textContent = title;
- t.className = 'tag';
- t.onclick = evt => imageTag.remove(title, id).then(refresh);
- c.appendChild(t);
- });
- return c;
-}
-
function renderImage(imageRow, imageContainer, showTags = true) {
for (let aName in imageRow.doc._attachments) {
if (aName !== 'thumbnail') {
continue;
}
- imageContainer.appendChild(
- renderThumbnail(
- imageRow.doc._id,
- aName,
- imageRow.doc._attachments[aName],
- showTags ? imageRow.doc.tags : []
- )
- );
+ createView(ThumbnailView, {
+ id: imageRow.doc._id,
+ name: aName,
+ doc: imageRow.doc._attachments[aName],
+ tags: showTags ? imageRow.doc.tags : [],
+ remove: image.remove,
+ removeTag: imageTag.remove
+ }).mount(imageContainer);
}
}
diff --git a/packages/gallery/src/index.html b/packages/gallery/src/index.html
index 097dc69..c8f00a1 100644
--- a/packages/gallery/src/index.html
+++ b/packages/gallery/src/index.html
@@ -1,11 +1,17 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/gallery/src/interface/thumbnail.js b/packages/gallery/src/interface/thumbnail.js
new file mode 100644
index 0000000..f33efc5
--- /dev/null
+++ b/packages/gallery/src/interface/thumbnail.js
@@ -0,0 +1,33 @@
+import { defineElement as el } from 'domvm';
+
+export function ThumbnailView(vm, model) {
+ function onclick(evt) {
+ model.remove(evt.currentTarget.dataset.id); // .then(refresh);
+ }
+
+ return function(vm, model, key, opts) {
+ const { id, name, doc, tags } = model;
+ const filteredTags = Object.entries(tags).filter(([_, visible]) => visible);
+
+ return el(`figure#${id}.image`, [
+ el('img', {
+ src: `data:${doc.content_type};base64,${doc.data}`,
+ title: `${id} ${name}`,
+ 'data-id': id,
+ onclick
+ }),
+ filteredTags.length
+ ? el(
+ 'figcaption',
+ filteredTags.map(([title, _]) =>
+ el(
+ 'span.tag',
+ { onclick: evt => model.removeTag(title, id) }, // .then(refresh)
+ [title]
+ )
+ )
+ )
+ : null
+ ]);
+ };
+}