explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Start conversion to DOMVM: thumbnail

Browse Source
This commit is contained in:
Timothy Farrell 2017-09-25 13:54:15 -05:00
parent b2f3615754
commit 67b87b7163
4 changed files with 62 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/gallery/package.json
View File

@ -12,6 +12,7 @@
"dev": "webpack-dev-server" "dev": "webpack-dev-server"
}, },
"dependencies": { "dependencies": {
"domvm": "~3.2.0",
"exif-parser": "~0.1.9", "exif-parser": "~0.1.9",
"pica": "~2.0.8", "pica": "~2.0.8",
"pouchdb-adapter-http": "~6.1.2", "pouchdb-adapter-http": "~6.1.2",

43
packages/gallery/src/app.js
View File

@ -1,8 +1,11 @@
import { createView } from 'domvm';
import * as image from './data/image.js'; import * as image from './data/image.js';
import * as index from './data/indexType.js'; import * as index from './data/indexType.js';
import { getDatabase } from './services/db.js'; import { getDatabase } from './services/db.js';
import * as imageTag from './context/manageImageTags.js'; import * as imageTag from './context/manageImageTags.js';
import generateThumbnails from './contextLoaders/generateThumbnails.js'; import generateThumbnails from './contextLoaders/generateThumbnails.js';
import { ThumbnailView } from './interface/thumbnail.js';
window.__DEV__ = true; window.__DEV__ = true;
window.db = getDatabase(); window.db = getDatabase();
@ -24,43 +27,19 @@ function refresh() {
setTimeout(render, 100); 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) { function renderImage(imageRow, imageContainer, showTags = true) {
for (let aName in imageRow.doc._attachments) { for (let aName in imageRow.doc._attachments) {
if (aName !== 'thumbnail') { if (aName !== 'thumbnail') {
continue; continue;
} }
imageContainer.appendChild( createView(ThumbnailView, {
renderThumbnail( id: imageRow.doc._id,
imageRow.doc._id, name: aName,
aName, doc: imageRow.doc._attachments[aName],
imageRow.doc._attachments[aName], tags: showTags ? imageRow.doc.tags : [],
showTags ? imageRow.doc.tags : [] remove: image.remove,
) removeTag: imageTag.remove
); }).mount(imageContainer);
} }
} }

28
packages/gallery/src/index.html
View File

@ -1,11 +1,17 @@
<body> <!DOCTYPE html>
<input id='fInput' type="file" multiple accept="image/jpeg"/> <html>
<select id='display' value='i'> <head>
<option value='i'>Images</option> <meta name="viewport" content="width=device-width, initial-scale=1">
<option value='a'>Albums</option> <link rel="stylesheet" href="">
</select> </head>
<h1></h1> <body>
<div id='app'></div> <input id='fInput' type="file" multiple accept="image/jpeg"/>
</body> <select id='display' value='i'>
<option value='i'>Images</option>
<script src="/assets/app.bundle.js"></script> <option value='a'>Albums</option>
</select>
<h1></h1>
<div id='app'></div>
<script src="/assets/app.bundle.js"></script>
</body>
</html>

33
packages/gallery/src/interface/thumbnail.js Normal file
View File

@ -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
]);
};
}