75 lines
1.5 KiB
JavaScript
75 lines
1.5 KiB
JavaScript
import {
|
|
defineView as vw,
|
|
defineElement as el,
|
|
patchRefStyle,
|
|
patchNodeStyle
|
|
} from '../../utils/domvm.js';
|
|
import { injectStyle, styled } from '../../services/style.js';
|
|
import { DEFAULT_TRANSITION } from '../styles.js';
|
|
import { Icon } from './icon.js';
|
|
import { AlbumPhotoTemplate } from './albumPhotoTemplate.js';
|
|
|
|
export function AlbumTemplate(params) {
|
|
const { id, title, photos, selectedIds, mode } = params;
|
|
const albumSelectButtonRef = `albSel${id}`;
|
|
const selectMode = mode === 'select';
|
|
|
|
function photoMap(doc) {
|
|
return vw(
|
|
AlbumPhotoTemplate,
|
|
{
|
|
doc,
|
|
isSelected: selectedIds.has(doc._id),
|
|
selectMode
|
|
},
|
|
doc._hash()
|
|
);
|
|
}
|
|
|
|
return Album(
|
|
{
|
|
onmouseenter: [patchRefStyle, albumSelectButtonRef, 'opacity: 0.7;'],
|
|
onmouseleave: [patchRefStyle, albumSelectButtonRef, 'opacity: 0;']
|
|
},
|
|
[
|
|
albumTitle([
|
|
title,
|
|
albumSelectButton(
|
|
{
|
|
_ref: albumSelectButtonRef,
|
|
onmouseenter: [patchNodeStyle, 'opacity: 1;'],
|
|
onmouseleave: [patchNodeStyle, 'opacity: 0.7;'],
|
|
css: {
|
|
opacity: selectMode ? 0.7 : 0
|
|
},
|
|
class: 'albumSelectButton'
|
|
},
|
|
[Icon({ name: 'check_circle', size: 0.25 })]
|
|
)
|
|
]),
|
|
albumContent(photos.map(photoMap))
|
|
]
|
|
);
|
|
}
|
|
|
|
const Album = styled({
|
|
margin: '10px'
|
|
});
|
|
|
|
const albumTitle = styled({
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
});
|
|
|
|
const albumContent = styled({
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
userSelect: 'none'
|
|
});
|
|
|
|
const albumSelectButton = styled(DEFAULT_TRANSITION, {
|
|
paddingLeft: '0.5em',
|
|
cursor: 'pointer',
|
|
opacity: 0
|
|
});
|