diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 931cffb..089fd4d 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/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({