Fix appbar brain-damage

packages/gallery/src/interface/allImages.js

@@ -26,13 +26,11 @@ export function uploadImages(evt, files) {
 
 export function AllImagesView(vm, params, key, { appbar }) {
 	const model = prop({}, pouchDocHash);
-	const appbarState = prop({});
 	const images = container([], pouchDocArrayHash);
 
 	const selectedIds = container(new Set(), hashSet);
 	const appBarTitle = computed(s => (s.size > 0 ? `${s.size} selected` : 'Photos'), [selectedIds]);
-	const hasSelectedIDs = computed(sIds => sIds.size > 0, [selectedIds]);
+	const selectMode = computed(sIds => sIds.size > 0, [selectedIds]);
-	const selectMode = computed((s, abS) => s && abS.selectMode, [hasSelectedIDs, appbarState]);
 
 	const sections = computed(
 		imageArr => {
@@ -76,7 +74,7 @@ export function AllImagesView(vm, params, key, { appbar }) {
 				name: 'uploadButton',
 				type: 'file',
 				multiple: true,
-				accept: '.png,.jpg,.jpeg', // no love for gifs yet
+				accept: '.jpg,.jpeg', // no love for gifs, pngs yet
 				onchange: uploadImages,
 				class: injectStyle({ display: 'none' })
 			})
@@ -129,11 +127,17 @@ export function AllImagesView(vm, params, key, { appbar }) {
 	}
 
 	function pushAppBarState() {
+		const up = selectMode()
+			? {
+					name: 'x',
+					onclick: () => selectedIds.clear()
+			  }
+			: undefined;
+
 		appbar.pushState({
 			title: appBarTitle,
-			buttons: renderAppBarButtons,
+			actions: renderAppBarButtons,
-			selectMode: hasSelectedIDs(),
+			up
-			backButton: 'x'
 		});
 	}
 
@@ -148,25 +152,14 @@ export function AllImagesView(vm, params, key, { appbar }) {
 		{ live: true }
 	).then(la => {
 		pushAppBarState();
+		selectMode.subscribe(mode => {
+			popAppBarState();
+			pushAppBarState();
+		}),
 			subscribeToRender(
 				vm,
 				[selectedIds, images, selectMode],
-			[
+				[la.subscribe(res => images.splice(0, images.length, ...res))]
-				la.subscribe(res => images.splice(0, images.length, ...res)),
-				appbar.subscribe(({ newState, oldState }) => {
-					appbarState(newState);
-					if (!newState.selectMode && hasSelectedIDs()) {
-						selectedIds.clear();
-					}
-				}),
-				hasSelectedIDs.subscribe(selected => {
-					if (selected && !selectMode()) {
-						pushAppBarState();
-					} else if (!selected && appbarState().selectMode) {
-						popAppBarState();
-					}
-				})
-			]
 			);
 	});
 

packages/gallery/src/interface/components/appbar.js

@@ -1,6 +1,7 @@
 import { prop, computed, container, pick } from 'frptools';
 
 import { Icon } from './icon.js';
+import { router } from '../../services/router.js';
 import { defineElement as el, subscribeToRender } from '../../utils/domvm.js';
 import { injectStyle, styled } from '../../services/style.js';
 import { CLICKABLE } from '../styles.js';
@@ -8,20 +9,19 @@ import { CLICKABLE } from '../styles.js';
 let seq = 0;
 
 export function AppBarView(vm, params, key, opts) {
-	let previousState = { _seq: seq };
 	const stateStack = container([], arr => arr.length);
 	const companionScrollTop = prop(0);
 
 	const currentState = computed(stack => stack[0] || {}, [stateStack]);
 	const title = computed(pick('title', ''), [currentState]);
-	const renderButtons = computed(pick('buttons'), [currentState]);
+	const renderActions = computed(pick('actions'), [currentState]);
-	const stateStyle = computed(pick('style', {}), [currentState]);
+	const up = computed(pick('up'), [currentState]);
-	const backButton = computed(
+	const upButton = computed(pick('name', 'arrow_left'), [up]);
-		(state, stack) =>
+	const upAction = computed(
-			stack.length > 1 ? (state.backButton !== undefined ? state.backButton : 'arrow_left') : null,
+		upState => (upState.onclick ? upState.onclick : [popState, upState.navigateTo]),
-		[currentState, stateStack]
+		[up]
 	);
-	const stateChange = computed(c => ({ newState: c, oldState: previousState }), [currentState]);
+	const stateStyle = computed(pick('style', {}), [currentState]);
 
 	const boxShadowStyle = computed(
 		t => (t === 0 ? 'none' : `0px ${Math.min(t / 10, 3)}px 3px rgba(0, 0, 0, .2)`),
@@ -40,36 +40,36 @@ export function AppBarView(vm, params, key, opts) {
 	}
 
 	function pushState(newState) {
-		previousState = currentState();
 		stateStack.unshift(Object.assign({ _seq: seq++ }, newState));
 	}
 
-	function popState() {
+	function popState(navigateTo) {
-		previousState = currentState();
 		stateStack.shift();
+		if (navigateTo) {
+			router.goto(navigateTo);
+		}
 	}
 
 	opts.appbar = {
 		pushState,
 		popState,
-		companionScrollTop,
+		companionScrollTop
-		subscribe: stateChange.subscribe
 	};
 
-	subscribeToRender(vm, [containerStyle, renderButtons, backButton, title]);
+	subscribeToRender(vm, [containerStyle, renderActions, up, title]);
 
 	return (vm, params) => {
-		const _buttons = renderButtons() || (() => {});
+		const _buttons = renderActions() || (() => {});
 
 		return appBarContainer(containerStyle(), [
-			backButton() !== null
+			up()
-				? backButtonContainer(
+				? upButtonContainer(
 						{
-							onclick: popState
+							onclick: upAction()
 						},
 						[
 							Icon({
-								name: backButton(),
+								name: upButton(),
 								size: 0.75
 							})
 						]
@@ -90,7 +90,7 @@ const appBarContainer = styled({
 	width: '100%'
 });
 
-const backButtonContainer = styled(
+const upButtonContainer = styled(
 	{
 		marginRight: '1em'
 	},

packages/gallery/src/interface/focus.js

@@ -48,13 +48,8 @@ export function FocusView(vm, params, key, { appbar }) {
 		[doc, windowSize]
 	);
 
-	async function goBack() {
-		router.goto('home');
-	}
-
 	function navBack() {
-		// appbar.popState();
+		appbar.popState('home');
-		goBack();
 	}
 
 	async function clickTrash() {
@@ -79,7 +74,14 @@ export function FocusView(vm, params, key, { appbar }) {
 	}
 
 	// Set the appbar title.
-	appbar.pushState({ title: '', buttons: renderAppBarButtons, style: { position: 'fixed' } });
+	appbar.pushState({
+		title: '',
+		actions: renderAppBarButtons,
+		style: { position: 'fixed' },
+		up: {
+			navigateTo: 'home'
+		}
+	});
 
 	// Prime our window size
 	extractWindowSize();
@@ -90,8 +92,6 @@ export function FocusView(vm, params, key, { appbar }) {
 		vm,
 		[doc, imageStyle, nextLink, prevLink],
 		[
-			appbar.subscribe(goBack),
-
 			// Keep up with the window resizing
 			() => window.removeEventListener('resize', extractWindowSize),