#38 fixed navigation and keyboard

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",

src/components/containers/FullWidth/index.tsx

@@ -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<IProps> = ({ children, onRefresh }) => {
-  const sample = useRef<HTMLDivElement>(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 (
-    <div className={styles.wrap}>
-      <div className={styles.slider} style={style}>
-        {children}
-      </div>
-
-      <div className={styles.sample} ref={sample} />
-    </div>
-  );
-};
-
-export { FullWidth };

src/components/containers/FullWidth/styles.module.scss

@@ -1,10 +0,0 @@
-.sample {
-  width: 100%;
-  display: block;
-  background: green;
-  height: 0;
-}
-
-.slider {
-  display: block;
-}

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<IProps> = ({ node }) => {
     controlledSwiper.updateSlides();
     controlledSwiper.updateSize();
     controlledSwiper.update();
+    controlledSwiper.updateAutoHeight();
   }, [controlledSwiper]);
 
   const resetSwiper = useCallback(() => {
     if (!controlledSwiper) return;
     controlledSwiper.slideTo(0, 0);
-
+    setTimeout(() => controlledSwiper.slideTo(0, 0), 100);
-    // TODO: replace with working one
+    setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
-    // setTimeout(() => controlledSwiper.slideTo(0, 0), 300);
   }, [controlledSwiper]);
 
   useEffect(() => {
     updateSwiper();
     resetSwiper();
-  }, [images, updateSwiper, resetSwiper]);
 
-  const onOpenPhotoSwipe = useCallback(
+    return () => setControlledSwiper(undefined);
-    () => dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)),
+  }, [images, updateSwiper, resetSwiper, setControlledSwiper]);
-    [dispatch, images, controlledSwiper]
+
-  );
+  const onOpenPhotoSwipe = useCallback(() => {
+    dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0));
+  }, [dispatch, images, controlledSwiper]);
 
   if (!images?.length) {
     return null;
@@ -69,12 +68,10 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
       <Swiper
         initialSlide={0}
         slidesPerView="auto"
-        centeredSlides
         onSwiper={setControlledSwiper}
-        grabCursor
-        autoHeight
         breakpoints={breakpoints}
         pagination={{ type: 'fraction' }}
+        centeredSlides
         observeSlideChildren
         observeParents
         resizeObserver
@@ -85,7 +82,10 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
           enabled: true,
           onlyInViewport: false,
         }}
+        grabCursor
+        autoHeight
         zoom
+        navigation
       >
         {images.map(file => (
           <SwiperSlide className={styles.slide} key={file.id}>

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;
   }
 }
+

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"
+  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz#bebde28f893fa9594dadcaa7d6b8e2aa0299df20"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz"
-  integrity sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA==
+  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"
+  version "6.5.9"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.5.0.tgz#4ca2243b44fccef47ee28199377666607d8c5141"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.5.9.tgz#ed6caa8bd9fd44d314944210551ce297d4fb09c7"
-  integrity sha512-cSx1SpfgrHlgwku++3Ce3cjPBpXgB7P+bGik5S3+F+j6ID0NUeV6qtmedFdr3C8jXR/W+TJPVNIT9fH/cwVAiA==
+  integrity sha512-zO3UCLVEiOXZontAQWBNpWFZGV3WaXwHSgvng0qIGLVMyxYGD6w78S7YkGAu/XBam1SBQNZzxqfFc/LDjNdq/A==
   dependencies:
     dom7 "^3.0.0"
     ssr-window "^3.0.0"