simplier slider for images

2025-04-25 04:46:40 +07:00 · 2020-04-23 11:28:41 +07:00 · 2020-04-23 11:28:41 +07:00 · b88aa32e07
commit b88aa32e07
parent f4f808d7e5
6 changed files with 143 additions and 122 deletions
--- a/src/components/containers/PageCover/styles.scss
+++ b/src/components/containers/PageCover/styles.scss
@ -18,6 +18,7 @@
  height: 100%;
  animation: fadeIn 2s;
  will-change: transform, opacity;
+  filter: blur(10px);

  &::after {
    content: ' ';
@ -26,7 +27,7 @@
    left: 0;
    width: 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 {
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@ -30,25 +30,18 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
  );

  const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
+
  const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
    setLoaded,
    loaded,
  ]);

-  const onOpenPhotoSwipe = useCallback(
-    (index: number) => () => modalShowPhotoswipe(images, index),
-    [modalShowPhotoswipe, images]
-  );
-
  useEffect(() => updateLayout(), [loaded]);

  useEffect(() => {
    if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
-
    const el = refs.current[current];
-
    const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
-
    setHeight(element_height);
  }, [refs, current, loaded]);

@ -59,35 +52,33 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP

  return (
    <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <div>
-        <ImageSwitcher
-          total={images.length}
-          current={current}
-          onChange={setCurrent}
-          loaded={loaded}
-        />
+      <ImageSwitcher
+        total={images.length}
+        current={current}
+        onChange={setCurrent}
+        loaded={loaded}
+      />

-        <div className={styles.image_container} style={{ height }}>
-          {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
+      <div className={styles.image_container} style={{ height }}>
+        {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}

-          {images.map((file, index) => (
-            <div
-              className={classNames(styles.image_wrap, {
-                is_active: index === current && loaded[index],
-              })}
-              ref={setRef(index)}
+        {images.map((file, index) => (
+          <div
+            className={classNames(styles.image_wrap, {
+              is_active: index === current && loaded[index],
+            })}
+            ref={setRef(index)}
+            key={file.id}
+          >
+            <img
+              className={styles.image}
+              src={getURL(file, PRESETS['1600'])}
+              alt=""
              key={file.id}
-            >
-              <img
-                className={styles.image}
-                src={getURL(file, PRESETS['1600'])}
-                alt=""
-                key={file.id}
-                onLoad={onImageLoad(index)}
-              />
-            </div>
-          ))}
-        </div>
+              onLoad={onImageLoad(index)}
+            />
+          </div>
+        ))}
      </div>
    </div>
  );
--- a/src/components/node/NodeImageBlock/styles.scss
+++ b/src/components/node/NodeImageBlock/styles.scss
@ -1,4 +1,6 @@
 .wrap {
+  padding-bottom: $gap * 2;
+
  &:global(.is_animated) {
    .image_container {
      transition: height 0.5s;
@ -12,7 +14,6 @@

 .image_container {
  width: 100%;
-  background: $node_image_bg;
  border-radius: $panel_radius 0 0 $panel_radius;
  display: flex;
  align-items: center;
@ -22,10 +23,12 @@
  user-select: none;

  .image {
-    max-height: 960px;
+    max-height: calc(100vh - 140px);
    max-width: 100%;
    opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+
+    @include outer_shadow();
  }
 }

--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@ -36,8 +36,9 @@

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

  @include can_backdrop {
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@ -12,7 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 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 pick from 'ramda/es/pick';
 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_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 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 onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
@ -112,91 +113,110 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
    }, [nodeSetCoverImage, node.cover]);

    return (
-      <Card className={styles.node} seamless>
-        {block &&
-          createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
+      <>
+        {head &&
+          createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}

-        <NodePanel
-          node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
-          layout={layout}
-          can_edit={can_edit}
-          can_like={can_like}
-          can_star={can_star}
-          onEdit={onEdit}
-          onLike={onLike}
-          onStar={onStar}
-          onLock={onLock}
-          is_loading={is_loading}
-        />
+        <Card className={styles.node} seamless>
+          {block &&
+            createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}

-        {node.deleted_at ? (
-          <NodeDeletedBadge />
-        ) : (
-          <Group>
-            <Padder>
-              <Group horizontal className={styles.content}>
-                <Group className={styles.comments}>
-                  {inline_block && (
-                    <div className={styles.inline_block}>
-                      {createElement(inline_block, {
-                        node,
-                        is_loading,
-                        updateLayout,
-                        layout,
-                        modalShowPhotoswipe,
-                      })}
-                    </div>
-                  )}
+          <NodePanel
+            node={pick(
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              node
+            )}
+            layout={layout}
+            can_edit={can_edit}
+            can_like={can_like}
+            can_star={can_star}
+            onEdit={onEdit}
+            onLike={onLike}
+            onStar={onStar}
+            onLock={onLock}
+            is_loading={is_loading}
+          />

-                  {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
-                    <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"
-                    />
-                  )}
+          {node.deleted_at ? (
+            <NodeDeletedBadge />
+          ) : (
+            <Group>
+              <Padder>
+                <Group horizontal className={styles.content}>
+                  <Group className={styles.comments}>
+                    {inline && (
+                      <div className={styles.inline}>
+                        {createElement(inline, {
+                          node,
+                          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>
+              </Padder>
+            </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>
-            </Padder>
-          </Group>
-        )}
-
-        <Footer />
-      </Card>
+          <Footer />
+        </Card>
+      </>
    );
  }
 );
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@ -14,6 +14,7 @@ import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadB
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
 import { Filler } from '~/components/containers/Filler';
 import { modalShowPhotoswipe } from '../modal/actions';
+import { NodeImageBlock } from '~/components/node/NodeImageBlock';

 const prefix = 'NODE.';
 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 = {
-  [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
  [NODE_TYPES.VIDEO]: NodeVideoBlock,
  [NODE_TYPES.AUDIO]: NodeAudioImageBlock,
 };