From 42b3ce892149cf6216f444d3aeeacf0a04c39fd9 Mon Sep 17 00:00:00 2001 From: Timothy Farrell Date: Sun, 17 Dec 2017 22:40:48 -0600 Subject: [PATCH] Routing changes for focusView --- packages/gallery/src/interface/allImages.js | 4 +- .../components/albumPhotoTemplate.js | 10 ++-- packages/gallery/src/interface/gallery.js | 51 +++++++------------ packages/gallery/src/services/router.js | 8 +++ packages/gallery/src/utils/domvm.js | 6 +++ 5 files changed, 39 insertions(+), 40 deletions(-) diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 58208ca..875ce3e 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/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)) { diff --git a/packages/gallery/src/interface/components/albumPhotoTemplate.js b/packages/gallery/src/interface/components/albumPhotoTemplate.js index 1daf916..48f8ae6 100644 --- a/packages/gallery/src/interface/components/albumPhotoTemplate.js +++ b/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', diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js index 9af7aaa..514699a 100644 --- a/packages/gallery/src/interface/gallery.js +++ b/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, diff --git a/packages/gallery/src/services/router.js b/packages/gallery/src/services/router.js index 6552d58..4de3994 100644 --- a/packages/gallery/src/services/router.js +++ b/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', diff --git a/packages/gallery/src/utils/domvm.js b/packages/gallery/src/utils/domvm.js index 8932d35..0687e38 100644 --- a/packages/gallery/src/utils/domvm.js +++ b/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'; +}