Image selection deletion works now

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
+);

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...')]);