explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Simplify thumbnail into a template

Browse Source
This commit is contained in:
Timothy Farrell 2017-11-24 23:08:33 -06:00
parent a86974f08a
commit 6f233cb764
3 changed files with 14 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/gallery/src/interface/album.js
View File

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

11
packages/gallery/src/interface/gallery.js
View File

@ -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());

50
packages/gallery/src/interface/thumbnail.js
View File

@ -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', [
el(
function onAddTag(image_id) { `figure.image`,
addTag(prompt('Tag Name'), image_id); {
} onclick: { img: [remove, doc] }
},
return function(vm, model, key, opts) { [vw(AttachmentImageView, doc, key)]
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
]);
};
} }