diff --git a/package.json b/package.json index f8e269e3..2cfbef4e 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "formik": "^2.2.6", "insane": "^2.6.2", "marked": "^2.0.0", - "node-sass": "4.14.1", + "node-sass": "^4.14.1", "photoswipe": "^4.1.3", "raleway-cyrillic": "^4.0.2", "ramda": "^0.26.1", @@ -35,7 +35,6 @@ "redux": "^4.0.1", "redux-persist": "^5.10.0", "redux-saga": "^1.1.1", - "resize-sensor": "^0.0.6", "sticky-sidebar": "^3.3.1", "swiper": "^6.5.0", "throttle-debounce": "^2.1.0", @@ -75,7 +74,6 @@ "@types/node": "^11.13.22", "@types/ramda": "^0.26.33", "@types/react-redux": "^7.1.11", - "@types/swiper": "^5.4.2", "@types/yup": "^0.29.11", "craco-alias": "^2.1.1", "craco-fast-refresh": "^1.0.2", diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx deleted file mode 100644 index b0e4dd0b..00000000 --- a/src/components/containers/FullWidth/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import styles from './styles.module.scss'; -import ResizeSensor from 'resize-sensor'; - -interface IProps { - onRefresh?: (width: number) => void; -} - -const FullWidth: FC = ({ children, onRefresh }) => { - const sample = useRef(null); - const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth); - - const style = useMemo(() => { - if (!sample.current) return { display: 'none' }; - - const { width } = sample.current.getBoundingClientRect(); - const { clientWidth } = document.documentElement; - - if (onRefresh) onRefresh(clientWidth); - - return { - width: clientWidth, - transform: `translate(-${(clientWidth - width) / 2}px, 0)`, - }; - }, [sample.current, clientWidth, onRefresh]); - - const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []); - - useEffect(() => { - if (!sample.current) return; - - window.addEventListener('resize', onResize); - new ResizeSensor(document.body, onResize); - - return () => { - window.removeEventListener('resize', onResize); - ResizeSensor.detach(document.body, onResize); - }; - }, []); - - return ( -
-
- {children} -
- -
-
- ); -}; - -export { FullWidth }; diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss deleted file mode 100644 index f318d3c4..00000000 --- a/src/components/containers/FullWidth/styles.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -.sample { - width: 100%; - display: block; - background: green; - height: 0; -} - -.slider { - display: block; -} diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index 57a54732..29278f6b 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -1,15 +1,14 @@ import React, { FC, useCallback, useEffect, useState } from 'react'; import { INodeComponentProps } from '~/redux/node/constants'; -import SwiperCore, { A11y, Pagination, Navigation, SwiperOptions, Keyboard } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper.scss'; import 'swiper/components/pagination/pagination.scss'; -import 'swiper/components/scrollbar/scrollbar.scss'; -import 'swiper/components/zoom/zoom.scss'; import 'swiper/components/navigation/navigation.scss'; - import styles from './styles.module.scss'; + +import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper'; + import { useNodeImages } from '~/utils/hooks/node/useNodeImages'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; @@ -17,14 +16,13 @@ import SwiperClass from 'swiper/types/swiper-class'; import { modalShowPhotoswipe } from '~/redux/modal/actions'; import { useDispatch } from 'react-redux'; -SwiperCore.use([Navigation, Pagination, A11y]); +SwiperCore.use([Navigation, Pagination, Keyboard]); interface IProps extends INodeComponentProps {} const breakpoints: SwiperOptions['breakpoints'] = { 599: { spaceBetween: 20, - navigation: true, }, }; @@ -40,25 +38,26 @@ const NodeImageSwiperBlock: FC = ({ node }) => { controlledSwiper.updateSlides(); controlledSwiper.updateSize(); controlledSwiper.update(); + controlledSwiper.updateAutoHeight(); }, [controlledSwiper]); const resetSwiper = useCallback(() => { if (!controlledSwiper) return; controlledSwiper.slideTo(0, 0); - - // TODO: replace with working one - // setTimeout(() => controlledSwiper.slideTo(0, 0), 300); + setTimeout(() => controlledSwiper.slideTo(0, 0), 100); + setTimeout(() => controlledSwiper.slideTo(0, 0), 300); }, [controlledSwiper]); useEffect(() => { updateSwiper(); resetSwiper(); - }, [images, updateSwiper, resetSwiper]); - const onOpenPhotoSwipe = useCallback( - () => dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)), - [dispatch, images, controlledSwiper] - ); + return () => setControlledSwiper(undefined); + }, [images, updateSwiper, resetSwiper, setControlledSwiper]); + + const onOpenPhotoSwipe = useCallback(() => { + dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)); + }, [dispatch, images, controlledSwiper]); if (!images?.length) { return null; @@ -69,12 +68,10 @@ const NodeImageSwiperBlock: FC = ({ node }) => { = ({ node }) => { enabled: true, onlyInViewport: false, }} + grabCursor + autoHeight zoom + navigation > {images.map(file => ( diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index d1b98e28..d601ebc5 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -20,15 +20,39 @@ :global(.swiper-container) { width: 100%; + position: relative; } :global(.swiper-button-next), :global(.swiper-button-prev) { color: white; font-size: 10px; + width: 28px; + height: 96px; + background: transparentize($content_bg, 0); + + &:global(.swiper-button-prev) { + left: 0; + justify-content: flex-start; + padding-left: 10px; + border-radius: 0 $radius $radius 0; + } + + &:global(.swiper-button-next) { + border-radius: $radius 0 0 $radius; + right: 0; + justify-content: flex-end; + padding-right: 10px; + } + + &:global(.swiper-button-disabled) { + opacity: 0; + } &::after { - font-size: 32px; + font-size: 24px; + pointer-events: none; + font-weight: 900; } } @@ -84,3 +108,4 @@ border-radius: 0; } } + diff --git a/yarn.lock b/yarn.lock index 5460d0c7..0eb33883 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1798,11 +1798,6 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/swiper@^5.4.2": - version "5.4.2" - resolved "https://registry.yarnpkg.com/@types/swiper/-/swiper-5.4.2.tgz#ff206cf5aea787f580b5dd9b466b4bcb8e0442f3" - integrity sha512-/7MaVDZ8ltMCZb6yfg1HWBRjwFjy9ytKpuPSZfNTrxpkQCaGQZdpceDSqKaSfGmJcVF0NcBFRsGTStyytV7grw== - "@types/testing-library__jest-dom@^5.9.1": version "5.9.5" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0" @@ -3032,9 +3027,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157: - version "1.0.30001159" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz#bebde28f893fa9594dadcaa7d6b8e2aa0299df20" - integrity sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA== + version "1.0.30001228" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz" + integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A== capture-exit@^2.0.0: version "2.0.0" @@ -5283,7 +5278,19 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= -glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1: +glob@^7.0.0, glob@~7.1.1: + version "7.1.7" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" + integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + +glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -7125,11 +7132,16 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10: +"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== +lodash@^4.0.0, lodash@~4.17.10: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loglevel@^1.6.8: version "1.7.0" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0" @@ -7677,7 +7689,7 @@ node-releases@^1.1.52, node-releases@^1.1.66: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12" integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg== -node-sass@4.14.1: +node-sass@^4.14.1: version "4.14.1" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5" integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g== @@ -10862,9 +10874,9 @@ svgo@^1.0.0, svgo@^1.2.2: util.promisify "~1.0.0" swiper@^6.5.0: - version "6.5.0" - resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.5.0.tgz#4ca2243b44fccef47ee28199377666607d8c5141" - integrity sha512-cSx1SpfgrHlgwku++3Ce3cjPBpXgB7P+bGik5S3+F+j6ID0NUeV6qtmedFdr3C8jXR/W+TJPVNIT9fH/cwVAiA== + version "6.5.9" + resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.5.9.tgz#ed6caa8bd9fd44d314944210551ce297d4fb09c7" + integrity sha512-zO3UCLVEiOXZontAQWBNpWFZGV3WaXwHSgvng0qIGLVMyxYGD6w78S7YkGAu/XBam1SBQNZzxqfFc/LDjNdq/A== dependencies: dom7 "^3.0.0" ssr-window "^3.0.0"