From e65e94789e007e2b1581b17963409cca7af79e84 Mon Sep 17 00:00:00 2001 From: Timothy Farrell Date: Sun, 31 Dec 2017 05:22:40 -0600 Subject: [PATCH] Fix appbar brain-damage --- packages/gallery/src/interface/allImages.js | 47 ++++++++----------- .../src/interface/components/appbar.js | 40 ++++++++-------- packages/gallery/src/interface/focus.js | 18 +++---- 3 files changed, 49 insertions(+), 56 deletions(-) diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 6ea8ff0..1f4c11c 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/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((s, abS) => s && abS.selectMode, [hasSelectedIDs, appbarState]); + const selectMode = computed(sIds => sIds.size > 0, [selectedIds]); 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, - selectMode: hasSelectedIDs(), - backButton: 'x' + actions: renderAppBarButtons, + up }); } @@ -148,26 +152,15 @@ export function AllImagesView(vm, params, key, { appbar }) { { live: true } ).then(la => { pushAppBarState(); - subscribeToRender( - vm, - [selectedIds, images, selectMode], - [ - 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(); - } - }) - ] - ); + selectMode.subscribe(mode => { + popAppBarState(); + pushAppBarState(); + }), + subscribeToRender( + vm, + [selectedIds, images, selectMode], + [la.subscribe(res => images.splice(0, images.length, ...res))] + ); }); function renderSection([title, _images]) { diff --git a/packages/gallery/src/interface/components/appbar.js b/packages/gallery/src/interface/components/appbar.js index 664aa2f..12a4105 100644 --- a/packages/gallery/src/interface/components/appbar.js +++ b/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 stateStyle = computed(pick('style', {}), [currentState]); - const backButton = computed( - (state, stack) => - stack.length > 1 ? (state.backButton !== undefined ? state.backButton : 'arrow_left') : null, - [currentState, stateStack] + const renderActions = computed(pick('actions'), [currentState]); + const up = computed(pick('up'), [currentState]); + const upButton = computed(pick('name', 'arrow_left'), [up]); + const upAction = computed( + upState => (upState.onclick ? upState.onclick : [popState, upState.navigateTo]), + [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() { - previousState = currentState(); + function popState(navigateTo) { stateStack.shift(); + if (navigateTo) { + router.goto(navigateTo); + } } opts.appbar = { pushState, popState, - companionScrollTop, - subscribe: stateChange.subscribe + companionScrollTop }; - 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 - ? backButtonContainer( + up() + ? 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' }, diff --git a/packages/gallery/src/interface/focus.js b/packages/gallery/src/interface/focus.js index d6e88f4..9ba055d 100644 --- a/packages/gallery/src/interface/focus.js +++ b/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(); - goBack(); + appbar.popState('home'); } 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),