explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Manage how selection changes the appbar

Browse Source
This commit is contained in:
Timothy Farrell 2017-12-16 04:01:47 -06:00
parent cfdf84522b
commit f40a93bba8
1 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/gallery/src/interface/allImages.js
View File

@ -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({