Manage how selection changes the appbar

packages/gallery/src/interface/allImages.js

@@ -23,12 +23,15 @@ export function uploadImages(evt, files) {
 	}
 }
 
-export function AllImagesView(vm, params, key, opts) {
+export function AllImagesView(vm, params, key, { appbar }) {
 	const model = prop({}, pouchDocHash);
+	const appbarState = prop({});
 	const images = container([], pouchDocArrayHash);
-	const hoverId = prop(null);
+
 	const selectedIds = container(new Set(), hashSet);
-	const selectMode = computed(sIds => sIds.size > 0, [selectedIds]);
+	const appBarTitle = computed(s => (s.size > 0 ? `${s.size} selected` : 'Photos'), [selectedIds]);
+	const hasSelectedIDs = computed(sIds => sIds.size > 0, [selectedIds]);
+	const selectMode = computed((s, abS) => s && abS.selectMode, [hasSelectedIDs, appbarState]);
 
 	const sections = computed(
 		imageArr => {
@@ -48,16 +51,6 @@ export function AllImagesView(vm, params, key, opts) {
 		[images]
 	);
 
-	ImageType.find(
-		{
-			['sizes.thumbnail']: { $exists: true }
-		},
-		true
-	).then(la => {
-		opts.appbar.renderButtons(renderAppBarButtons);
-		subscribeToRender(vm, [images], [la.subscribe(res => images.splice(0, images.length, ...res))]);
-	});
-
 	function renderAppBarButtons() {
 		return [
 			el('button', [el('label', { for: 'uploadButton' }, 'Upload')]),
@@ -117,7 +110,44 @@ export function AllImagesView(vm, params, key, opts) {
 		}
 	}
 
-	subscribeToRender(vm, [selectedIds, images, hoverId, selectMode]);
+	function pushAppBarState() {
+		appbar.pushState({
+			title: appBarTitle,
+			buttons: renderAppBarButtons,
+			selectMode: hasSelectedIDs()
+		});
+	}
+
+	function popAppBarState() {
+		appbar.popState();
+	}
+
+	ImageType.find(
+		{
+			['sizes.thumbnail']: { $exists: true }
+		},
+		true
+	).then(la => {
+		pushAppBarState();
+		subscribeToRender(
+			vm,
+			[selectedIds, images, selectMode],
+			[
+				la.subscribe(res => images.splice(0, images.length, ...res)),
+				appbar.subscribe(({ newState, oldState }) => {
+					appbarState(newState);
+				}),
+				hasSelectedIDs.subscribe(selected => {
+					console.log('hasSelectedIDs subscription');
+					if (selected && !selectMode()) {
+						pushAppBarState();
+					} else if (!selected && appbarState().selectMode) {
+						popAppBarState();
+					}
+				})
+			]
+		);
+	});
 
 	function renderSection([title, _images]) {
 		return AlbumTemplate({