explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Image -> DOMVM ImageView

Browse Source
This commit is contained in:
Timothy Farrell 2017-09-25 15:39:16 -05:00
parent 67b87b7163
commit da9e699df4
2 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ 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'; import { ImageView } from './interface/image.js';
window.__DEV__ = true; window.__DEV__ = true;
window.db = getDatabase(); window.db = getDatabase();
@ -15,6 +15,7 @@ image.imported.subscribe(generateThumbnails);
const header = document.querySelector('h1'); const header = document.querySelector('h1');
const container = document.querySelector('#app'); const container = document.querySelector('#app');
const displaySelector = document.querySelector('#display'); const displaySelector = document.querySelector('#display');
image.removed.subscribe(refresh);
// Events // Events
displaySelector.onchange = refresh; displaySelector.onchange = refresh;
@ -27,22 +28,6 @@ function refresh() {
setTimeout(render, 100); setTimeout(render, 100);
} }
function renderImage(imageRow, imageContainer, showTags = true) {
for (let aName in imageRow.doc._attachments) {
if (aName !== 'thumbnail') {
continue;
}
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);
}
}
async function renderAlbum(indexRow) { async function renderAlbum(indexRow) {
const doc = indexRow.doc; const doc = indexRow.doc;
const l = document.createElement('h2'); const l = document.createElement('h2');
@ -53,7 +38,15 @@ async function renderAlbum(indexRow) {
container.appendChild(albumContainer); container.appendChild(albumContainer);
const results = await image.find(doc.members, { attachments: true }); const results = await image.find(doc.members, { attachments: true });
results.rows.filter(i => i.doc).forEach(i => renderImage(i, albumContainer, false)); results.rows.filter(i => i.doc).forEach(i => {
createView(ImageView, {
imageRow: i,
imageContainer: albumContainer,
showTags: false,
remove: image.remove,
removeTag: imageTag.remove
}).mount(albumContainer);
});
} }
async function render() { async function render() {
@ -62,7 +55,15 @@ async function render() {
if (displaySelector.value === 'i') { if (displaySelector.value === 'i') {
header.innerText = 'Images'; header.innerText = 'Images';
const results = await image.find({ attachments: true }); const results = await image.find({ attachments: true });
results.rows.forEach(i => renderImage(i, container)); results.rows.forEach(i => {
createView(ImageView, {
imageRow: i,
imageContainer: container,
showTags: true,
remove: image.remove,
removeTag: imageTag.remove
}).mount(container);
});
} else { } else {
header.innerText = 'Albums'; header.innerText = 'Albums';
const results = await index.find({ attachments: true }); const results = await index.find({ attachments: true });

25
packages/gallery/src/interface/image.js Normal file
View File

@ -0,0 +1,25 @@
import { defineView, defineElement as el } from 'domvm';
import { ThumbnailView } from './thumbnail.js';
export function ImageView(vm, model) {
return function(vm, model, key, opts) {
const { imageRow, imageContainer, showTags, remove, removeTag } = model;
const { thumbnail } = imageRow.doc._attachments;
const _showTags = showTags !== undefined ? showTags : true;
if (thumbnail) {
return el('div', [
defineView(ThumbnailView, {
id: imageRow.doc._id,
name: 'thumbnail',
doc: thumbnail,
tags: _showTags ? imageRow.doc.tags : [],
remove: remove,
removeTag: removeTag
})
]);
}
return el('span');
};
}