explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Make SectionPhoto a template so it takes less memory.

Browse Source
This commit is contained in:
Timothy Farrell 2018-01-05 21:14:52 -06:00
parent a53c984acf
commit db45c55028
3 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
);

133
packages/gallery/src/interface/sectionPhoto.js
View File

@ -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)'
});

6
packages/gallery/src/interface/sectionView.js
View File

@ -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
});