explorigin/gallery
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

subscribeToRender must manage subscribing and unsubscribing

Browse Source 
...because some elements (appbar) gets removed and re-added without destruction.
This commit is contained in:
Timothy Farrell 2018-01-04 15:18:46 -06:00
parent dd4b2459ac
commit 12b8469200
3 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,11 +179,12 @@ export function AllImagesView(vm, params, key, context) {
popAppBarState(); popAppBarState();
pushAppBarState(); pushAppBarState();
}), }),
subscribeToRender( subscribeToRender(vm, [
vm, selectedIds,
[selectedIds, images, selectMode], images,
[la.subscribe(res => images.splice(0, images.length, ...res))] selectMode,
); () => la.subscribe(res => images.splice(0, images.length, ...res))
]);
}); });
function renderSection({ title, sectionId, images: _images }) { function renderSection({ title, sectionId, images: _images }) {

12
packages/gallery/src/interface/focus.js
View File

@ -21,7 +21,7 @@ import { CLICKABLE, FILL_STYLE } from './styles.js';
export function FocusView(vm, params, key, { appbar, appbarView }) { export function FocusView(vm, params, key, { appbar, appbarView }) {
const id = prop(); const id = prop();
const doc = prop(null, pouchDocHash); const doc = prop({}, pouchDocHash);
const { body } = document; const { body } = document;
const nextLink = prop(); const nextLink = prop();
const prevLink = prop(); const prevLink = prop();
@ -90,9 +90,12 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
// Subscribe to our changables. // Subscribe to our changables.
subscribeToRender( subscribeToRender(
vm, vm,
[doc, imageStyle, nextLink, prevLink],
[ [
doc,
nextLink,
prevLink,
// Look for our image and set it. // Look for our image and set it.
() =>
id.subscribe(async _id => { id.subscribe(async _id => {
if (!_id) { if (!_id) {
return; return;
@ -108,7 +111,8 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
prevLink(prev.length ? router.href('focus', { id: prev[0]._id }) : null); prevLink(prev.length ? router.href('focus', { id: prev[0]._id }) : null);
}); });
}) })
] ],
true
); );
// Watch for focus changes // Watch for focus changes
@ -137,7 +141,7 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
: null, : null,
AttachmentImageView({ AttachmentImageView({
src: _id ? doc().sizes.full : null, src: _id ? doc().sizes.full : null,
style: imageStyle() style: imageStyle
}), }),
nextLink() nextLink()
? nextClickZone({ href: nextLink() }, [ ? nextClickZone({ href: nextLink() }, [

24
packages/gallery/src/utils/domvm.js
View File

@ -4,16 +4,34 @@ import { defineView } from 'domvm/dist/mini/domvm.mini.js';
import { prop, computed, call } from 'frptools'; import { prop, computed, call } from 'frptools';
import { deepAssign } from './conversion.js'; import { deepAssign } from './conversion.js';
import { error } from '../services/console.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 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({ vm.config({
hooks: { 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) { export function patchRefStyle(ref, style, evt, node, vm) {