diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index a3d0406..b78252d 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -179,11 +179,12 @@ export function AllImagesView(vm, params, key, context) { popAppBarState(); pushAppBarState(); }), - subscribeToRender( - vm, - [selectedIds, images, selectMode], - [la.subscribe(res => images.splice(0, images.length, ...res))] - ); + subscribeToRender(vm, [ + selectedIds, + images, + selectMode, + () => la.subscribe(res => images.splice(0, images.length, ...res)) + ]); }); function renderSection({ title, sectionId, images: _images }) { diff --git a/packages/gallery/src/interface/focus.js b/packages/gallery/src/interface/focus.js index 10e1b78..a9e4e1b 100644 --- a/packages/gallery/src/interface/focus.js +++ b/packages/gallery/src/interface/focus.js @@ -21,7 +21,7 @@ import { CLICKABLE, FILL_STYLE } from './styles.js'; export function FocusView(vm, params, key, { appbar, appbarView }) { const id = prop(); - const doc = prop(null, pouchDocHash); + const doc = prop({}, pouchDocHash); const { body } = document; const nextLink = prop(); const prevLink = prop(); @@ -90,25 +90,29 @@ export function FocusView(vm, params, key, { appbar, appbarView }) { // Subscribe to our changables. subscribeToRender( vm, - [doc, imageStyle, nextLink, prevLink], [ + doc, + nextLink, + prevLink, // Look for our image and set it. - id.subscribe(async _id => { - if (!_id) { - return; - } - const image = await ImageType.find(_id); - doc(image); + () => + id.subscribe(async _id => { + if (!_id) { + return; + } + const image = await ImageType.find(_id); + doc(image); - Promise.all([ - ImageType.find({ _id: { $lt: _id } }, { limit: 2, sort: [{ _id: 'desc' }] }), - ImageType.find({ _id: { $gt: _id } }, { limit: 2 }) - ]).then(([prev, next]) => { - nextLink(next.length ? router.href('focus', { id: next[0]._id }) : null); - prevLink(prev.length ? router.href('focus', { id: prev[0]._id }) : null); - }); - }) - ] + Promise.all([ + ImageType.find({ _id: { $lt: _id } }, { limit: 2, sort: [{ _id: 'desc' }] }), + ImageType.find({ _id: { $gt: _id } }, { limit: 2 }) + ]).then(([prev, next]) => { + nextLink(next.length ? router.href('focus', { id: next[0]._id }) : null); + prevLink(prev.length ? router.href('focus', { id: prev[0]._id }) : null); + }); + }) + ], + true ); // Watch for focus changes @@ -137,7 +141,7 @@ export function FocusView(vm, params, key, { appbar, appbarView }) { : null, AttachmentImageView({ src: _id ? doc().sizes.full : null, - style: imageStyle() + style: imageStyle }), nextLink() ? nextClickZone({ href: nextLink() }, [ diff --git a/packages/gallery/src/utils/domvm.js b/packages/gallery/src/utils/domvm.js index cd484cb..66ec376 100644 --- a/packages/gallery/src/utils/domvm.js +++ b/packages/gallery/src/utils/domvm.js @@ -4,16 +4,34 @@ import { defineView } from 'domvm/dist/mini/domvm.mini.js'; import { prop, computed, call } from 'frptools'; import { deepAssign } from './conversion.js'; import { error } from '../services/console.js'; +import { streamConfig } from './event.js'; -export function subscribeToRender(vm, subscribables, subscriptions) { +export function subscribeToRender(vm, subscribables, autoSub = false) { const redraw = () => vm.redraw(); - const subList = subscribables.map(s => s.subscribe(redraw)); + const subAll = () => + (subList = subscribables.map(s => (streamConfig.is(s) ? streamConfig.sub(s, redraw) : s()))); + let subList = []; vm.config({ hooks: { - willUnmount: () => subList.concat(subscriptions).forEach(call) + willMount: () => { + if (!subList.length) { + subAll(); + } + }, + willUnmount: () => { + if (subList.length) { + subList.forEach(call); + subList = []; + } + } } }); + + // If the there is a node, we missed our opportunity to catch willMount. Sometimes we just want to force it. + if (vm.node || autoSub) { + subAll(); + } } export function patchRefStyle(ref, style, evt, node, vm) {