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

changed presets

Browse source
This commit is contained in:
Fedor Katurov 2019-11-14 17:57:16 +07:00
parent a0c93c480f
commit 77979bd7e9
3 changed files with 107 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,18 @@
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react'; import React, {
import { ImageSwitcher } from '../ImageSwitcher'; FC,
import * as styles from './styles.scss'; useMemo,
import { INode } from '~/redux/types'; useState,
import classNames from 'classnames'; useEffect,
import { getURL } from '~/utils/dom'; useRef,
import { UPLOAD_TYPES } from '~/redux/uploads/constants'; useCallback
import { PRESETS } from '~/constants/urls'; } 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 { interface IProps {
is_loading: boolean; is_loading: boolean;
@ -23,24 +30,29 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
const images = useMemo( 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] [node]
); );
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(
setLoaded, index => () => setLoaded({ ...loaded, [index]: true }),
loaded, [setLoaded, loaded]
]); );
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]);
@ -62,19 +74,21 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
/> />
<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} key={file.id}
> >
<img <img
className={styles.image} className={styles.image}
src={getURL(file, PRESETS['1400'])} src={getURL(file, PRESETS["1600"])}
alt="" alt=""
key={file.id} key={file.id}
onLoad={onImageLoad(index)} onLoad={onImageLoad(index)}

93
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -1,14 +1,21 @@
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react'; import React, {
import { ImageSwitcher } from '../ImageSwitcher'; FC,
import * as styles from './styles.scss'; useMemo,
import { INode } from '~/redux/types'; useState,
import classNames from 'classnames'; useEffect,
import { UPLOAD_TYPES } from '~/redux/uploads/constants'; useRef,
import { NODE_SETTINGS } from '~/redux/node/constants'; useCallback
import { getURL } from '~/utils/dom'; } from "react";
import { PRESETS } from '~/constants/urls'; import { ImageSwitcher } from "../ImageSwitcher";
import { LoaderCircle } from '~/components/input/LoaderCircle'; import * as styles from "./styles.scss";
import { throttle } from 'throttle-debounce'; 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 { interface IProps {
is_loading: boolean; is_loading: boolean;
@ -17,9 +24,14 @@ interface IProps {
updateLayout: () => void; 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 [current, setCurrent] = useState(0);
const [height, setHeight] = useState(320); const [height, setHeight] = useState(320);
const [max_height, setMaxHeight] = useState(960); const [max_height, setMaxHeight] = useState(960);
@ -38,7 +50,10 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
const images = useMemo( 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] [node]
); );
@ -66,10 +81,10 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
[refs, heights, setHeights, images] [refs, heights, setHeights, images]
); );
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [ const onImageLoad = useCallback(
setLoaded, index => () => setLoaded({ ...loaded, [index]: true }),
loaded, [setLoaded, loaded]
]); );
// update outside hooks // update outside hooks
useEffect(() => updateLayout(), [loaded, height, images]); useEffect(() => updateLayout(), [loaded, height, images]);
@ -118,7 +133,13 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
const { width: wrap_width } = wrap.current.getBoundingClientRect(); const { width: wrap_width } = wrap.current.getBoundingClientRect();
setOffset( 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] [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 { width: slide_width } = slide.current.getBoundingClientRect();
const shift = (initial_offset - offset) / wrap_width; // percent / 100 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 = const new_offset =
Math.abs(shift) > 0.25 Math.abs(shift) > 0.25
? Math.min(Math.max(diff, wrap_width - slide_width), 0) // next or prev slide ? 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(() => updateMaxHeight(), [images]);
useEffect(() => { useEffect(() => {
window.addEventListener('resize', updateSizes); window.addEventListener("resize", updateSizes);
window.addEventListener('resize', updateMaxHeight); window.addEventListener("resize", updateMaxHeight);
window.addEventListener('mousemove', onDrag); window.addEventListener("mousemove", onDrag);
window.addEventListener('touchmove', onDrag); window.addEventListener("touchmove", onDrag);
window.addEventListener('mouseup', stopDragging); window.addEventListener("mouseup", stopDragging);
window.addEventListener('touchend', stopDragging); window.addEventListener("touchend", stopDragging);
return () => { return () => {
window.removeEventListener('resize', updateSizes); window.removeEventListener("resize", updateSizes);
window.removeEventListener('resize', updateMaxHeight); window.removeEventListener("resize", updateMaxHeight);
window.removeEventListener('mousemove', onDrag); window.removeEventListener("mousemove", onDrag);
window.removeEventListener('touchmove', onDrag); window.removeEventListener("touchmove", onDrag);
window.removeEventListener('mouseup', stopDragging); window.removeEventListener("mouseup", stopDragging);
window.removeEventListener('touchend', stopDragging); window.removeEventListener("touchend", stopDragging);
}; };
}, [onDrag, stopDragging, updateMaxHeight, updateSizes]); }, [onDrag, stopDragging, updateMaxHeight, updateSizes]);
@ -217,7 +240,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
style={{ style={{
height, height,
transform: `translate(${offset}px, 0)`, transform: `translate(${offset}px, 0)`,
width: `${images.length * 100}%`, width: `${images.length * 100}%`
}} }}
onMouseDown={startDragging} onMouseDown={startDragging}
onTouchStart={startDragging} onTouchStart={startDragging}
@ -227,14 +250,14 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
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} key={file.id}
> >
<img <img
className={styles.image} className={styles.image}
src={getURL(file, PRESETS['1400'])} src={getURL(file, PRESETS["1600"])}
alt="" alt=""
key={file.id} key={file.id}
onLoad={onImageLoad(index)} onLoad={onImageLoad(index)}

34
src/constants/urls.ts
View file

@ -1,29 +1,29 @@
export const URLS = { export const URLS = {
BASE: '/', BASE: "/",
BORIS: '/boris', BORIS: "/boris",
AUTH: { AUTH: {
LOGIN: '/auth/login', LOGIN: "/auth/login"
}, },
EXAMPLES: { EXAMPLES: {
EDITOR: '/examples/edit', EDITOR: "/examples/edit",
IMAGE: '/examples/image', IMAGE: "/examples/image"
}, },
ERRORS: { ERRORS: {
NOT_FOUND: '/lost', NOT_FOUND: "/lost",
BACKEND_DOWN: '/oopsie', BACKEND_DOWN: "/oopsie"
}, },
NODE_URL: (id: number | string) => `/post${id}`, NODE_URL: (id: number | string) => `/post${id}`,
PROFILE: (username: string) => `/~${username}`, PROFILE: (username: string) => `/~${username}`
}; };
export const PRESETS = { export const PRESETS = {
'1400': '1400', "1600": "1600",
'900': '900', "900": "900",
'600': '600', "600": "600",
'300': '300', "300": "300",
'100': '100', "100": "100",
placeholder: 'placeholder', placeholder: "placeholder",
cover: 'cover', cover: "cover",
hero: 'hero', hero: "hero",
avatar: 'avatar', avatar: "avatar"
}; };