Simplify thumbnail into a template
This commit is contained in:
parent
86ccbfbb13
commit
e06617f395
@ -3,7 +3,7 @@ import { defineView, defineElement as el } from '../utils/domvm.js';
|
||||
import { ImageType } from '../data/image.js';
|
||||
import { FileType } from '../data/file.js';
|
||||
import { pouchDocArrayHash, pouchDocHash } from '../utils/conversion.js';
|
||||
import { ThumbnailView } from './thumbnail.js';
|
||||
import { ThumbnailTemplate } from './thumbnail.js';
|
||||
import { prop, computed } from 'frptools';
|
||||
|
||||
export function AlbumView(vm, doc) {
|
||||
@ -70,15 +70,7 @@ export function AlbumView(vm, doc) {
|
||||
onchange: [uploadImages, album]
|
||||
}),
|
||||
...images().map(i => {
|
||||
return defineView(
|
||||
ThumbnailView,
|
||||
{
|
||||
doc: i,
|
||||
showTags: false,
|
||||
remove: removeImageFromAlbum
|
||||
},
|
||||
id()
|
||||
);
|
||||
return ThumbnailTemplate(i, removeImageFromAlbum, i._hash());
|
||||
})
|
||||
]);
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@ import { prop } from 'frptools';
|
||||
import { defineView as vw, defineElement as el } from '../utils/domvm.js';
|
||||
import { ImageType } from '../data/image.js';
|
||||
import { AlbumType } from '../data/album.js';
|
||||
import { ThumbnailView } from './thumbnail.js';
|
||||
import { ThumbnailTemplate } from './thumbnail.js';
|
||||
import { AlbumView } from './album.js';
|
||||
import { Dropzone } from './dropzone.js';
|
||||
import { router, routeChanged } from '../services/router.js';
|
||||
@ -71,14 +71,7 @@ export function GalleryView(vm, model) {
|
||||
el('h1', title),
|
||||
...(title() === 'Images'
|
||||
? data().map(i => {
|
||||
return vw(
|
||||
ThumbnailView,
|
||||
{
|
||||
doc: i,
|
||||
remove: deleteImage
|
||||
},
|
||||
i._hash()
|
||||
);
|
||||
return ThumbnailTemplate(i, deleteImage, i._hash());
|
||||
})
|
||||
: data().map(a => {
|
||||
return vw(AlbumView, a, a._hash());
|
||||
|
||||
@ -1,44 +1,14 @@
|
||||
import { defineView as vw, defineElement as el } from '../utils/domvm.js';
|
||||
import { prop, computed } from 'frptools';
|
||||
import { isObject } from '../utils/comparators.js';
|
||||
|
||||
import { AttachmentImageView } from './attachmentImage.js';
|
||||
|
||||
export function ThumbnailView(vm, model) {
|
||||
const { addTag } = model;
|
||||
|
||||
function onAddTag(image_id) {
|
||||
addTag(prompt('Tag Name'), image_id);
|
||||
}
|
||||
|
||||
return function(vm, model, key, opts) {
|
||||
const { doc, showTags, remove, removeTag } = model;
|
||||
const { _id: id, _rev: rev, tags } = doc;
|
||||
const _showTags = showTags !== undefined ? showTags : true;
|
||||
const filteredTags =
|
||||
_showTags && isObject(doc.tags)
|
||||
? Object.entries(doc.tags).filter(([_, visible]) => visible)
|
||||
: [];
|
||||
|
||||
return el('div', { _key: id }, [
|
||||
el(
|
||||
`figure#${doc._id}.image`,
|
||||
{
|
||||
onclick: { img: [remove, doc] }
|
||||
},
|
||||
[
|
||||
vw(AttachmentImageView, doc, doc._id + doc._rev),
|
||||
filteredTags.length
|
||||
? el(
|
||||
'figcaption',
|
||||
filteredTags.map(([title, _]) =>
|
||||
el('span.tag', { onclick: [removeTag, title, id] }, [title])
|
||||
)
|
||||
)
|
||||
: null
|
||||
]
|
||||
),
|
||||
addTag ? el('button', { onclick: [onAddTag, id] }, '+') : null
|
||||
]);
|
||||
};
|
||||
export function ThumbnailTemplate(doc, remove, key) {
|
||||
return el('div', [
|
||||
el(
|
||||
`figure.image`,
|
||||
{
|
||||
onclick: { img: [remove, doc] }
|
||||
},
|
||||
[vw(AttachmentImageView, doc, key)]
|
||||
)
|
||||
]);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user