From cec16bc536a8b33b4570991239ba30d6439bb17f Mon Sep 17 00:00:00 2001 From: Timothy Farrell Date: Fri, 5 Jan 2018 21:14:52 -0600 Subject: [PATCH] Make SectionPhoto a template so it takes less memory. --- packages/gallery/src/interface/allImages.js | 8 +- .../gallery/src/interface/sectionPhoto.js | 133 +++++++++--------- packages/gallery/src/interface/sectionView.js | 6 +- 3 files changed, 80 insertions(+), 67 deletions(-) diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 2224bed..f74493c 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -32,6 +32,8 @@ export function AllImagesView(vm, params) { const images = container([], pouchDocArrayHash); const containerScrollTop = prop(0); + const hover = prop(null); + const hoverSelectButton = prop(null); const selectedIds = container(new Set(), hashSet); const selectMode = computed(sIds => sIds.size > 0, [selectedIds]); @@ -172,6 +174,8 @@ export function AllImagesView(vm, params) { images, selectMode, appBarStyle, + hover, + hoverSelectButton, () => la.subscribe(res => images.splice(0, images.length, ...res)) ]); }); @@ -183,7 +187,9 @@ export function AllImagesView(vm, params) { title, photos: _images, selectedIds, - selectMode: selectMode() + selectMode: selectMode(), + hover, + hoverSelectButton }, sectionId ); diff --git a/packages/gallery/src/interface/sectionPhoto.js b/packages/gallery/src/interface/sectionPhoto.js index 2def088..766f40a 100644 --- a/packages/gallery/src/interface/sectionPhoto.js +++ b/packages/gallery/src/interface/sectionPhoto.js @@ -13,76 +13,81 @@ import { DEFAULT_TRANSITION, FILL_STYLE, IMAGE_MARGIN, CLICKABLE } from './style import { Icon } from './components/icon.js'; import { AttachmentImageView } from './components/attachmentImage.js'; -export function SectionPhoto(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); +export function SectionPhoto({ + doc, + isSelected, + selectMode, + width, + height, + hover, + hoverSelectButton +}) { + const { _id: id } = doc; + const href = router.href('focus', { id }); + const hovered = hover() === id; + const selectHovered = hoverSelectButton() === id; - subscribeToRender(vm, [hover, hoverSelectButton]); + if (hover()) { + console.log(id, isSelected, selectMode, width, height, hovered, selectHovered); + } - return function render(vm, { isSelected, selectMode, width, height }) { - return photoContainer( - { - href, - class: 'sectionPhoto', - onmouseenter: [hover, true], - onmouseleave: [hover, false], + return photoContainer( + { + href, + class: 'sectionPhoto', + onmouseenter: [hover, id], + onmouseleave: [hover, null], + css: { + cursor: selectMode ? CLICKABLE.cursor : 'zoom-in' + }, + style: { + width, + height + }, + _data: doc + }, + [ + AttachmentImageView({ + src: doc.sizes.thumbnail || doc.sizes.full, css: { - cursor: selectMode ? CLICKABLE.cursor : 'zoom-in' + transform: isSelected ? 'translateZ(-50px)' : null }, style: { width, height + } + }), + photoSelectButton( + { + class: 'photoSelect', + css: { + backgroundColor: isSelected ? 'white' : 'transparent', + opacity: isSelected || selectHovered ? 1 : selectMode || hovered ? 0.7 : 0 + }, + onmouseenter: [hoverSelectButton, id], + onmouseleave: [hoverSelectButton, null] }, - _data: doc - }, - [ - AttachmentImageView({ - src: doc.sizes.thumbnail || doc.sizes.full, - css: { - transform: isSelected ? 'translateZ(-50px)' : null - }, - style: { - width, - height - } - }), - photoSelectButton( - { - _ref: photoSelectButtonRef, - class: 'photoSelect', - css: { - backgroundColor: isSelected ? 'white' : 'transparent', - opacity: isSelected || hoverSelectButton() ? 1 : selectMode || hover() ? 0.7 : 0 - }, - onmouseenter: [hoverSelectButton, true], - onmouseleave: [hoverSelectButton, false] - }, - [ - Icon({ - name: selectMode && !isSelected && !hover() ? 'circle_o' : 'check_circle', - size: 0.75, - fill: isSelected ? '#00C800' : '#fff' - }) - ] - ), - photoOverlay({ - _ref: photoOverlayRef, - class: 'photoOverlay', - css: { - transform: isSelected ? 'translateZ(-50px)' : null, - opacity: selectMode || hover() ? 0.7 : 0 - }, - style: { - width, - height - } - }) - ] - ); - }; + [ + Icon({ + name: selectMode && !isSelected && !hovered ? 'circle_o' : 'check_circle', + size: 0.75, + fill: isSelected ? '#00C800' : '#fff' + }) + ] + ), + photoOverlay({ + class: 'photoOverlay', + css: { + transform: isSelected ? 'translateZ(-50px)' : null, + opacity: selectMode || hovered ? 0.7 : 0 + }, + style: { + width, + height + } + }) + ] + ); } const photoContainer = styled('a', { @@ -105,7 +110,7 @@ const photoSelectButton = styled(DEFAULT_TRANSITION, CLICKABLE, { position: 'absolute', top: '4%', left: '4%', - zIndex: 2, + zIndex: 3, display: 'flex', borderRadius: '50%', padding: '2px', @@ -117,6 +122,6 @@ const photoOverlay = styled(FILL_STYLE, DEFAULT_TRANSITION, { position: 'absolute', // Unnecessary but helps with a rendering bug in Chrome. https://gitlab.com/explorigin/gallery/issues/1 top: '0px', left: '0px', - zIndex: 1, + zIndex: 2, backgroundImage: 'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)' }); diff --git a/packages/gallery/src/interface/sectionView.js b/packages/gallery/src/interface/sectionView.js index 6324f65..0551889 100644 --- a/packages/gallery/src/interface/sectionView.js +++ b/packages/gallery/src/interface/sectionView.js @@ -63,13 +63,15 @@ export function SectionView(vm, params, key) { subscribeToRender(vm, [sections]); return function render(vm, params) { - const { selectedIds, selectMode } = params; + const { selectedIds, selectMode, hover, hoverSelectButton } = params; function photoTemplate({ photo, width, height }) { - return vw(SectionPhoto, { + return SectionPhoto({ doc: photo, isSelected: selectedIds.has(photo._id), selectMode, + hover, + hoverSelectButton, width, height });