mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 21:06:42 +07:00
changed presets
This commit is contained in:
Fedor Katurov
parent
a0c93c480f
commit
77979bd7e9
3 changed files with 107 additions and 70 deletions
|
|
@ -1,11 +1,18 @@
|
|||
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ImageSwitcher } from '../ImageSwitcher';
|
||||
import * as styles from './styles.scss';
|
||||
import { INode } from '~/redux/types';
|
||||
import classNames from 'classnames';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import React, {
|
||||
FC,
|
||||
useMemo,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useCallback
|
||||
} from "react";
|
||||
import { ImageSwitcher } from "../ImageSwitcher";
|
||||
import * as styles from "./styles.scss";
|
||||
import { INode } from "~/redux/types";
|
||||
import classNames from "classnames";
|
||||
import { getURL } from "~/utils/dom";
|
||||
import { UPLOAD_TYPES } from "~/redux/uploads/constants";
|
||||
import { PRESETS } from "~/constants/urls";
|
||||
|
||||
interface IProps {
|
||||
is_loading: boolean;
|
||||
|
|
@ -23,24 +30,29 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
|
|||
|
||||
const images = useMemo(
|
||||
() =>
|
||||
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
|
||||
(node &&
|
||||
node.files &&
|
||||
node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) ||
|
||||
[],
|
||||
[node]
|
||||
);
|
||||
|
||||
const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
|
||||
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
|
||||
setLoaded,
|
||||
loaded,
|
||||
]);
|
||||
const onImageLoad = useCallback(
|
||||
index => () => setLoaded({ ...loaded, [index]: true }),
|
||||
[setLoaded, loaded]
|
||||
);
|
||||
|
||||
useEffect(() => updateLayout(), [loaded]);
|
||||
|
||||
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 element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
|
||||
const element_height =
|
||||
el.getBoundingClientRect && el.getBoundingClientRect().height;
|
||||
|
||||
setHeight(element_height);
|
||||
}, [refs, current, loaded]);
|
||||
|
|
@ -62,19 +74,21 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
|
|||
/>
|
||||
|
||||
<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) => (
|
||||
<div
|
||||
className={classNames(styles.image_wrap, {
|
||||
is_active: index === current && loaded[index],
|
||||
is_active: index === current && loaded[index]
|
||||
})}
|
||||
ref={setRef(index)}
|
||||
key={file.id}
|
||||
>
|
||||
<img
|
||||
className={styles.image}
|
||||
src={getURL(file, PRESETS['1400'])}
|
||||
src={getURL(file, PRESETS["1600"])}
|
||||
alt=""
|
||||
key={file.id}
|
||||
onLoad={onImageLoad(index)}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ImageSwitcher } from '../ImageSwitcher';
|
||||
import * as styles from './styles.scss';
|
||||
import { INode } from '~/redux/types';
|
||||
import classNames from 'classnames';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { NODE_SETTINGS } from '~/redux/node/constants';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import React, {
|
||||
FC,
|
||||
useMemo,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useCallback
|
||||
} from "react";
|
||||
import { ImageSwitcher } from "../ImageSwitcher";
|
||||
import * as styles from "./styles.scss";
|
||||
import { INode } from "~/redux/types";
|
||||
import classNames from "classnames";
|
||||
import { UPLOAD_TYPES } from "~/redux/uploads/constants";
|
||||
import { NODE_SETTINGS } from "~/redux/node/constants";
|
||||
import { getURL } from "~/utils/dom";
|
||||
import { PRESETS } from "~/constants/urls";
|
||||
import { LoaderCircle } from "~/components/input/LoaderCircle";
|
||||
import { throttle } from "throttle-debounce";
|
||||
|
||||
interface IProps {
|
||||
is_loading: boolean;
|
||||
|
|
@ -17,9 +24,14 @@ interface IProps {
|
|||
updateLayout: () => void;
|
||||
}
|
||||
|
||||
const getX = event => (event.touches ? event.touches[0].clientX : event.clientX);
|
||||
const getX = event =>
|
||||
event.touches ? event.touches[0].clientX : event.clientX;
|
||||
|
||||
const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
|
||||
const NodeImageSlideBlock: FC<IProps> = ({
|
||||
node,
|
||||
is_loading,
|
||||
updateLayout
|
||||
}) => {
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [height, setHeight] = useState(320);
|
||||
const [max_height, setMaxHeight] = useState(960);
|
||||
|
|
@ -38,7 +50,10 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
|
||||
const images = useMemo(
|
||||
() =>
|
||||
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
|
||||
(node &&
|
||||
node.files &&
|
||||
node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) ||
|
||||
[],
|
||||
[node]
|
||||
);
|
||||
|
||||
|
|
@ -66,10 +81,10 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
[refs, heights, setHeights, images]
|
||||
);
|
||||
|
||||
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
|
||||
setLoaded,
|
||||
loaded,
|
||||
]);
|
||||
const onImageLoad = useCallback(
|
||||
index => () => setLoaded({ ...loaded, [index]: true }),
|
||||
[setLoaded, loaded]
|
||||
);
|
||||
|
||||
// update outside hooks
|
||||
useEffect(() => updateLayout(), [loaded, height, images]);
|
||||
|
|
@ -118,7 +133,13 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
const { width: wrap_width } = wrap.current.getBoundingClientRect();
|
||||
|
||||
setOffset(
|
||||
Math.min(Math.max(initial_offset + getX(event) - initial_x, wrap_width - slide_width), 0)
|
||||
Math.min(
|
||||
Math.max(
|
||||
initial_offset + getX(event) - initial_x,
|
||||
wrap_width - slide_width
|
||||
),
|
||||
0
|
||||
)
|
||||
);
|
||||
},
|
||||
[is_dragging, initial_x, setOffset, initial_offset]
|
||||
|
|
@ -131,7 +152,9 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
const { width: slide_width } = slide.current.getBoundingClientRect();
|
||||
|
||||
const shift = (initial_offset - offset) / wrap_width; // percent / 100
|
||||
const diff = initial_offset - (shift > 0 ? Math.ceil(shift) : Math.floor(shift)) * wrap_width;
|
||||
const diff =
|
||||
initial_offset -
|
||||
(shift > 0 ? Math.ceil(shift) : Math.floor(shift)) * wrap_width;
|
||||
const new_offset =
|
||||
Math.abs(shift) > 0.25
|
||||
? Math.min(Math.max(diff, wrap_width - slide_width), 0) // next or prev slide
|
||||
|
|
@ -166,24 +189,24 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
useEffect(() => updateMaxHeight(), [images]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', updateSizes);
|
||||
window.addEventListener('resize', updateMaxHeight);
|
||||
window.addEventListener("resize", updateSizes);
|
||||
window.addEventListener("resize", updateMaxHeight);
|
||||
|
||||
window.addEventListener('mousemove', onDrag);
|
||||
window.addEventListener('touchmove', onDrag);
|
||||
window.addEventListener("mousemove", onDrag);
|
||||
window.addEventListener("touchmove", onDrag);
|
||||
|
||||
window.addEventListener('mouseup', stopDragging);
|
||||
window.addEventListener('touchend', stopDragging);
|
||||
window.addEventListener("mouseup", stopDragging);
|
||||
window.addEventListener("touchend", stopDragging);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateSizes);
|
||||
window.removeEventListener('resize', updateMaxHeight);
|
||||
window.removeEventListener("resize", updateSizes);
|
||||
window.removeEventListener("resize", updateMaxHeight);
|
||||
|
||||
window.removeEventListener('mousemove', onDrag);
|
||||
window.removeEventListener('touchmove', onDrag);
|
||||
window.removeEventListener("mousemove", onDrag);
|
||||
window.removeEventListener("touchmove", onDrag);
|
||||
|
||||
window.removeEventListener('mouseup', stopDragging);
|
||||
window.removeEventListener('touchend', stopDragging);
|
||||
window.removeEventListener("mouseup", stopDragging);
|
||||
window.removeEventListener("touchend", stopDragging);
|
||||
};
|
||||
}, [onDrag, stopDragging, updateMaxHeight, updateSizes]);
|
||||
|
||||
|
|
@ -217,7 +240,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
style={{
|
||||
height,
|
||||
transform: `translate(${offset}px, 0)`,
|
||||
width: `${images.length * 100}%`,
|
||||
width: `${images.length * 100}%`
|
||||
}}
|
||||
onMouseDown={startDragging}
|
||||
onTouchStart={startDragging}
|
||||
|
|
@ -227,14 +250,14 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
|
|||
images.map((file, index) => (
|
||||
<div
|
||||
className={classNames(styles.image_wrap, {
|
||||
is_active: index === current && loaded[index],
|
||||
is_active: index === current && loaded[index]
|
||||
})}
|
||||
ref={setRef(index)}
|
||||
key={file.id}
|
||||
>
|
||||
<img
|
||||
className={styles.image}
|
||||
src={getURL(file, PRESETS['1400'])}
|
||||
src={getURL(file, PRESETS["1600"])}
|
||||
alt=""
|
||||
key={file.id}
|
||||
onLoad={onImageLoad(index)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue