muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

simplier slider for images

Browse source
This commit is contained in:
Fedor Katurov 2020-04-23 11:28:41 +07:00
parent f4f808d7e5
commit b88aa32e07
6 changed files with 143 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/containers/PageCover/styles.scss
View file

@ -18,6 +18,7 @@
height: 100%; height: 100%;
animation: fadeIn 2s; animation: fadeIn 2s;
will-change: transform, opacity; will-change: transform, opacity;
filter: blur(10px);
&::after { &::after {
content: ' '; content: ' ';
@ -26,7 +27,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3); background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2);
} }
@include tablet { @include tablet {

59
src/components/node/NodeImageBlock/index.tsx
View file

@ -30,25 +30,18 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
); );
const setRef = useCallback(index => el => (refs.current[index] = el), [refs]); const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [ const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
setLoaded, setLoaded,
loaded, loaded,
]); ]);
const onOpenPhotoSwipe = useCallback(
(index: number) => () => modalShowPhotoswipe(images, index),
[modalShowPhotoswipe, images]
);
useEffect(() => updateLayout(), [loaded]); useEffect(() => updateLayout(), [loaded]);
useEffect(() => { useEffect(() => {
if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320); if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
const el = refs.current[current]; const el = refs.current[current];
const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height; const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
setHeight(element_height); setHeight(element_height);
}, [refs, current, loaded]); }, [refs, current, loaded]);
@ -59,35 +52,33 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
return ( return (
<div className={classNames(styles.wrap, { is_loading, is_animated })}> <div className={classNames(styles.wrap, { is_loading, is_animated })}>
<div> <ImageSwitcher
<ImageSwitcher total={images.length}
total={images.length} current={current}
current={current} onChange={setCurrent}
onChange={setCurrent} loaded={loaded}
loaded={loaded} />
/>
<div className={styles.image_container} style={{ height }}> <div className={styles.image_container} style={{ height }}>
{(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />} {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
{images.map((file, index) => ( {images.map((file, index) => (
<div <div
className={classNames(styles.image_wrap, { className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index], is_active: index === current && loaded[index],
})} })}
ref={setRef(index)} ref={setRef(index)}
key={file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id} key={file.id}
> onLoad={onImageLoad(index)}
<img />
className={styles.image} </div>
src={getURL(file, PRESETS['1600'])} ))}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
/>
</div>
))}
</div>
</div> </div>
</div> </div>
); );

9
src/components/node/NodeImageBlock/styles.scss
View file

@ -1,4 +1,6 @@
.wrap { .wrap {
padding-bottom: $gap * 2;
&:global(.is_animated) { &:global(.is_animated) {
.image_container { .image_container {
transition: height 0.5s; transition: height 0.5s;
@ -12,7 +14,6 @@
.image_container { .image_container {
width: 100%; width: 100%;
background: $node_image_bg;
border-radius: $panel_radius 0 0 $panel_radius; border-radius: $panel_radius 0 0 $panel_radius;
display: flex; display: flex;
align-items: center; align-items: center;
@ -22,10 +23,12 @@
user-select: none; user-select: none;
.image { .image {
max-height: 960px; max-height: calc(100vh - 140px);
max-width: 100%; max-width: 100%;
opacity: 1; opacity: 1;
border-radius: $radius $radius 0 0; border-radius: $radius;
@include outer_shadow();
} }
} }

5
src/components/node/NodePanelInner/styles.scss
View file

@ -36,8 +36,9 @@
@include tablet { @include tablet {
border-radius: 0; border-radius: 0;
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
height: 128px;
} }
@include can_backdrop { @include can_backdrop {

182
src/containers/node/NodeLayout/index.tsx
View file

@ -12,7 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
import { NodeRelated } from '~/components/node/NodeRelated'; import { NodeRelated } from '~/components/node/NodeRelated';
import { NodeComments } from '~/components/node/NodeComments'; import { NodeComments } from '~/components/node/NodeComments';
import { NodeTags } from '~/components/node/NodeTags'; import { NodeTags } from '~/components/node/NodeTags';
import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants'; import { NODE_COMPONENTS, NODE_INLINES, NODE_HEADS } from '~/redux/node/constants';
import { selectUser } from '~/redux/auth/selectors'; import { selectUser } from '~/redux/auth/selectors';
import pick from 'ramda/es/pick'; import pick from 'ramda/es/pick';
import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@ -97,8 +97,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
const can_like = useMemo(() => canLikeNode(node, user), [node, user]); const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
const can_star = useMemo(() => canStarNode(node, user), [node, user]); const can_star = useMemo(() => canStarNode(node, user), [node, user]);
const head = node && node.type && NODE_HEADS[node.type];
const block = node && node.type && NODE_COMPONENTS[node.type]; const block = node && node.type && NODE_COMPONENTS[node.type];
const inline_block = node && node.type && NODE_INLINES[node.type]; const inline = node && node.type && NODE_INLINES[node.type];
const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]); const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]);
const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]); const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
@ -112,91 +113,110 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
}, [nodeSetCoverImage, node.cover]); }, [nodeSetCoverImage, node.cover]);
return ( return (
<Card className={styles.node} seamless> <>
{block && {head &&
createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
<NodePanel <Card className={styles.node} seamless>
node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)} {block &&
layout={layout} createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
can_edit={can_edit}
can_like={can_like}
can_star={can_star}
onEdit={onEdit}
onLike={onLike}
onStar={onStar}
onLock={onLock}
is_loading={is_loading}
/>
{node.deleted_at ? ( <NodePanel
<NodeDeletedBadge /> node={pick(
) : ( ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
<Group> node
<Padder> )}
<Group horizontal className={styles.content}> layout={layout}
<Group className={styles.comments}> can_edit={can_edit}
{inline_block && ( can_like={can_like}
<div className={styles.inline_block}> can_star={can_star}
{createElement(inline_block, { onEdit={onEdit}
node, onLike={onLike}
is_loading, onStar={onStar}
updateLayout, onLock={onLock}
layout, is_loading={is_loading}
modalShowPhotoswipe, />
})}
</div>
)}
{is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( {node.deleted_at ? (
<NodeNoComments is_loading={is_loading_comments || is_loading} /> <NodeDeletedBadge />
) : ( ) : (
<NodeComments <Group>
comments={comments} <Padder>
comment_data={comment_data} <Group horizontal className={styles.content}>
comment_count={comment_count} <Group className={styles.comments}>
user={user} {inline && (
onDelete={nodeLockComment} <div className={styles.inline}>
onEdit={nodeEditComment} {createElement(inline, {
onLoadMore={nodeLoadMoreComments} node,
order="DESC" is_loading,
/> updateLayout,
)} layout,
modalShowPhotoswipe,
})}
</div>
)}
{is_user && !is_loading && <NodeCommentForm />} {is_loading || is_loading_comments || (!comments.length && !inline) ? (
<NodeNoComments is_loading={is_loading_comments || is_loading} />
) : (
<NodeComments
comments={comments}
comment_data={comment_data}
comment_count={comment_count}
user={user}
onDelete={nodeLockComment}
onEdit={nodeEditComment}
onLoadMore={nodeLoadMoreComments}
order="DESC"
/>
)}
{is_user && !is_loading && <NodeCommentForm />}
</Group>
<div className={styles.panel}>
<Sticky>
<Group style={{ flex: 1, minWidth: 0 }}>
{!is_loading && (
<NodeTags
is_editable={is_user}
tags={node.tags}
onChange={onTagsChange}
/>
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated
title={album}
items={related.albums[album]}
key={album}
/>
))}
{!is_loading &&
related &&
related.similar &&
related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</Sticky>
</div>
</Group> </Group>
</Padder>
</Group>
)}
<div className={styles.panel}> <Footer />
<Sticky> </Card>
<Group style={{ flex: 1, minWidth: 0 }}> </>
{!is_loading && (
<NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated title={album} items={related.albums[album]} key={album} />
))}
{!is_loading && related && related.similar && related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</Sticky>
</div>
</Group>
</Padder>
</Group>
)}
<Footer />
</Card>
); );
} }
); );

7
src/redux/node/constants.ts
View file

@ -14,6 +14,7 @@ import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadB
import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton'; import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
import { Filler } from '~/components/containers/Filler'; import { Filler } from '~/components/containers/Filler';
import { modalShowPhotoswipe } from '../modal/actions'; import { modalShowPhotoswipe } from '../modal/actions';
import { NodeImageBlock } from '~/components/node/NodeImageBlock';
const prefix = 'NODE.'; const prefix = 'NODE.';
export const NODE_ACTIONS = { export const NODE_ACTIONS = {
@ -87,8 +88,12 @@ type INodeComponents = Record<
}> }>
>; >;
export const NODE_HEADS: INodeComponents = {
[NODE_TYPES.IMAGE]: NodeImageBlock,
};
export const NODE_COMPONENTS: INodeComponents = { export const NODE_COMPONENTS: INodeComponents = {
[NODE_TYPES.IMAGE]: NodeImageSlideBlock, // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
[NODE_TYPES.VIDEO]: NodeVideoBlock, [NODE_TYPES.VIDEO]: NodeVideoBlock,
[NODE_TYPES.AUDIO]: NodeAudioImageBlock, [NODE_TYPES.AUDIO]: NodeAudioImageBlock,
}; };