Routing changes for focusView

packages/gallery/src/interface/allImages.js

@@ -102,12 +102,12 @@ export function AllImagesView(vm, params, key, { appbar }) {
 	function photoClick(evt, node, vm) {
 		if (selectMode()) {
 			toggleSelect(evt, node, vm);
-		} else {
-			// todo implement zoom-view
 		}
 	}
 
 	function toggleSelect(evt, node, vm) {
+		evt.preventDefault();
+
 		const imageNode = nodeParentWithType(node, 'image');
 		const id = imageNode.data._id;
 		if (selectedIds.has(id)) {

packages/gallery/src/interface/components/albumPhotoTemplate.js

@@ -7,19 +7,16 @@ import {
 	patchNodeStyle,
 	subscribeToRender
 } from '../../utils/domvm.js';
+import { router } from '../../services/router.js';
 import { injectStyle, styled } from '../../services/style.js';
 import { DEFAULT_TRANSITION, CSS_FULL_SIZE, IMAGE_MARGIN, CLICKABLE } from '../styles.js';
 import { Icon } from './icon.js';
 import { AttachmentImageView } from './attachmentImage.js';
 
-const _imageHover = false;
-const dim = 'opacity: 0.7;';
-const off = 'opacity: 0;';
-const full = 'opacity: 1;';
-
 export function AlbumPhotoTemplate(vm, { doc }) {
 	const photoSelectButtonRef = `pSB${doc._id}`;
 	const photoOverlayRef = `pBkd${doc._id}`;
+	const href = router.href('focus', { id: doc._id });
 	const hover = prop(false);
 	const hoverSelectButton = prop(false);
 
@@ -28,6 +25,7 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 	return function render(vm, { isSelected, selectMode }) {
 		return photoContainer(
 			{
+				href,
 				class: 'photoContainer',
 				onmouseenter: [hover, true],
 				onmouseleave: [hover, false],
@@ -74,7 +72,7 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 	};
 }
 
-const photoContainer = styled({
+const photoContainer = styled('a', {
 	position: 'relative',
 	perspective: '1000px',
 	backgroundColor: '#eee',

packages/gallery/src/interface/gallery.js

@@ -2,6 +2,7 @@ import { prop } from 'frptools';
 
 import {
 	subscribeToRender,
+	renderSwitch,
 	defineView as vw,
 	createView as cv,
 	defineElement as el,
@@ -19,30 +20,34 @@ import { routeChanged } from '../services/router.js';
 import { injectStyle, styled } from '../services/style.js';
 
 export function GalleryView(vm) {
-	let data = null;
-	let laCleanup = null;
 	const context = {};
-	const hasData = prop(null);
 	const appbar = cv(AppBarView, {}, 'appbar', context);
+	const routeName = prop();
+	const routeParams = prop();
 
 	routeChanged.subscribe(function onRouteChange(name, params) {
-		if (name == 'photos') {
-			ImageType.find({
-				['sizes.thumbnail']: { $exists: true }
-			}).then(results => {
-				hasData(results.length > 0);
-			});
-		} else {
-			throw new Error('Should not happen');
-		}
+		routeName(name);
+		routeParams(params);
 	});
 
 	function handleContentScroll(evt) {
 		context.appbar.companionScrollTop(evt.target.scrollTop);
 	}
 
-	function renderWelcomePane() {
-		return [Overlay([el('h1', 'Hi')])];
+	function renderMain() {
+		return [
+			iv(appbar),
+			content(
+				{ onscroll: handleContentScroll },
+				renderSwitch(
+					{
+						photos: [AllImagesView, {}, 'allImages', context]
+						// focus: renderFocus
+					},
+					routeName()
+				)
+			)
+		];
 	}
 
 	function renderDropPane() {
@@ -57,25 +62,7 @@ export function GalleryView(vm) {
 		];
 	}
 
-	function renderMain() {
-		return [
-			iv(appbar),
-			content(
-				{
-					onscroll: handleContentScroll
-				},
-				hasData() ? [vw(AllImagesView, {}, 'allImages', context)] : [renderWelcomePane()]
-			)
-		];
-	}
-
-	subscribeToRender(vm, [hasData]);
-
 	return function render() {
-		if (hasData() === null) {
-			return Overlay([el('h1', 'Loading...')]);
-		}
-
 		return el('.gallery', { class: fill }, [
 			vw(
 				Dropzone,

packages/gallery/src/services/router.js

@@ -11,6 +11,14 @@ export const router = Router([
 		path: '/',
 		enter: (r, route) => fire('photos', route)
 	},
+	{
+		name: 'focus',
+		path: '/focus/:id',
+		vars: {
+			id: /^[_A-Za-z0-9]+$/
+		},
+		enter: (r, route) => fire('image', route)
+	},
 	{
 		id: '404',
 		path: ':vars',

packages/gallery/src/utils/domvm.js

@@ -1,5 +1,6 @@
 // export * from 'domvm/dist/dev/domvm.dev.js';
 export * from 'domvm/dist/mini/domvm.mini.js';
+import { defineView } from 'domvm/dist/mini/domvm.mini.js';
 import { call } from 'frptools';
 import { deepAssign } from './conversion.js';
 import { error } from '../services/console.js';
@@ -44,3 +45,8 @@ export function nodeParentWithType(node, type) {
 	}
 	return parentNode;
 }
+
+export function renderSwitch(renderMap, switchValue) {
+	const params = renderMap[switchValue];
+	return params ? defineView.apply(null, params) : 'NOT FOUND';
+}