diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index a162878..d22f76a 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -12,7 +12,9 @@ import { error } from '../services/console.js'; import { ImageType } from '../data/image.js'; import { pouchDocArrayHash, pouchDocHash, hashSet, extractID } from '../utils/conversion.js'; import { AlbumTemplate } from './components/albumTemplate.js'; +import { Icon } from './components/icon.js'; import { injectStyle, styled } from '../services/style.js'; +import { CLICKABLE } from './styles.js'; export function uploadImages(evt, files) { Array.from(files || evt.currentTarget.files).forEach(ImageType.upload); @@ -51,6 +53,22 @@ export function AllImagesView(vm, params, key, { appbar }) { ); function renderAppBarButtons() { + if (selectMode()) { + return [ + trashButtonContainer( + { + onclick: deleteSelectedImages + }, + [ + Icon({ + name: 'trash', + size: 0.75 + }) + ] + ) + ]; + } + return [ el('button', [el('label', { for: 'uploadButton' }, 'Upload')]), el('input', { @@ -64,11 +82,12 @@ export function AllImagesView(vm, params, key, { appbar }) { }) ]; } - // - // function deleteImage(i) { - // ImageType.delete(i._id); - // } - // + + function deleteSelectedImages() { + selectedIds.forEach(ImageType.delete); + selectedIds.clear(); + } + // function addAlbum() { // const albumName = prompt("Album Name"); // if (albumName && albumName.trim()) { @@ -162,7 +181,7 @@ export function AllImagesView(vm, params, key, { appbar }) { return function() { return el( - '.eventSnarfer', + 'div', { onclick: { '.photoSelect .icon svg path': toggleSelect, @@ -176,3 +195,10 @@ export function AllImagesView(vm, params, key, { appbar }) { ); }; } + +const trashButtonContainer = styled( + { + marginRight: '1em' + }, + CLICKABLE +); diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js index 9274250..9af7aaa 100644 --- a/packages/gallery/src/interface/gallery.js +++ b/packages/gallery/src/interface/gallery.js @@ -1,6 +1,12 @@ import { prop } from 'frptools'; -import { subscribeToRender, defineView as vw, defineElement as el } from '../utils/domvm.js'; +import { + subscribeToRender, + defineView as vw, + createView as cv, + defineElement as el, + injectView as iv +} from '../utils/domvm.js'; import { ImageType } from '../data/image.js'; import { AlbumType } from '../data/album.js'; import { ThumbnailTemplate } from './components/thumbnail.js'; @@ -17,8 +23,7 @@ export function GalleryView(vm) { let laCleanup = null; const context = {}; const hasData = prop(null); - - subscribeToRender(vm, [hasData]); + const appbar = cv(AppBarView, {}, 'appbar', context); routeChanged.subscribe(function onRouteChange(name, params) { if (name == 'photos') { @@ -54,7 +59,7 @@ export function GalleryView(vm) { function renderMain() { return [ - vw(AppBarView, {}, 'appbar', context), + iv(appbar), content( { onscroll: handleContentScroll @@ -64,6 +69,8 @@ export function GalleryView(vm) { ]; } + subscribeToRender(vm, [hasData]); + return function render() { if (hasData() === null) { return Overlay([el('h1', 'Loading...')]);