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 { ImageType } from '../data/image.js';
|
||||||
import { FileType } from '../data/file.js';
|
import { FileType } from '../data/file.js';
|
||||||
import { pouchDocArrayHash, pouchDocHash } from '../utils/conversion.js';
|
import { pouchDocArrayHash, pouchDocHash } from '../utils/conversion.js';
|
||||||
import { ThumbnailView } from './thumbnail.js';
|
import { ThumbnailTemplate } from './thumbnail.js';
|
||||||
import { prop, computed } from 'frptools';
|
import { prop, computed } from 'frptools';
|
||||||
|
|
||||||
export function AlbumView(vm, doc) {
|
export function AlbumView(vm, doc) {
|
||||||
@ -70,15 +70,7 @@ export function AlbumView(vm, doc) {
|
|||||||
onchange: [uploadImages, album]
|
onchange: [uploadImages, album]
|
||||||
}),
|
}),
|
||||||
...images().map(i => {
|
...images().map(i => {
|
||||||
return defineView(
|
return ThumbnailTemplate(i, removeImageFromAlbum, i._hash());
|
||||||
ThumbnailView,
|
|
||||||
{
|
|
||||||
doc: i,
|
|
||||||
showTags: false,
|
|
||||||
remove: removeImageFromAlbum
|
|
||||||
},
|
|
||||||
id()
|
|
||||||
);
|
|
||||||
})
|
})
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { prop } from 'frptools';
|
|||||||
import { defineView as vw, defineElement as el } from '../utils/domvm.js';
|
import { defineView as vw, defineElement as el } from '../utils/domvm.js';
|
||||||
import { ImageType } from '../data/image.js';
|
import { ImageType } from '../data/image.js';
|
||||||
import { AlbumType } from '../data/album.js';
|
import { AlbumType } from '../data/album.js';
|
||||||
import { ThumbnailView } from './thumbnail.js';
|
import { ThumbnailTemplate } from './thumbnail.js';
|
||||||
import { AlbumView } from './album.js';
|
import { AlbumView } from './album.js';
|
||||||
import { Dropzone } from './dropzone.js';
|
import { Dropzone } from './dropzone.js';
|
||||||
import { router, routeChanged } from '../services/router.js';
|
import { router, routeChanged } from '../services/router.js';
|
||||||
@ -71,14 +71,7 @@ export function GalleryView(vm, model) {
|
|||||||
el('h1', title),
|
el('h1', title),
|
||||||
...(title() === 'Images'
|
...(title() === 'Images'
|
||||||
? data().map(i => {
|
? data().map(i => {
|
||||||
return vw(
|
return ThumbnailTemplate(i, deleteImage, i._hash());
|
||||||
ThumbnailView,
|
|
||||||
{
|
|
||||||
doc: i,
|
|
||||||
remove: deleteImage
|
|
||||||
},
|
|
||||||
i._hash()
|
|
||||||
);
|
|
||||||
})
|
})
|
||||||
: data().map(a => {
|
: data().map(a => {
|
||||||
return vw(AlbumView, a, a._hash());
|
return vw(AlbumView, a, a._hash());
|
||||||
|
|||||||
@ -1,44 +1,14 @@
|
|||||||
import { defineView as vw, defineElement as el } from '../utils/domvm.js';
|
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';
|
import { AttachmentImageView } from './attachmentImage.js';
|
||||||
|
|
||||||
export function ThumbnailView(vm, model) {
|
export function ThumbnailTemplate(doc, remove, key) {
|
||||||
const { addTag } = model;
|
return el('div', [
|
||||||
|
|
||||||
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(
|
el(
|
||||||
`figure#${doc._id}.image`,
|
`figure.image`,
|
||||||
{
|
{
|
||||||
onclick: { img: [remove, doc] }
|
onclick: { img: [remove, doc] }
|
||||||
},
|
},
|
||||||
[
|
[vw(AttachmentImageView, doc, key)]
|
||||||
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
|
|
||||||
]);
|
]);
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user