From 9e6c9d9082d93dec1a67b47aa89c07dbd78efcc7 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Mon, 15 Jan 2024 18:05:38 +0300 Subject: [PATCH] Update Swiper Lib (#363) * Update Swiper Lib --- package-lock.json | 17 +-- package.json | 2 +- .../_shared/SolidSwiper/ArticleCardSwiper.tsx | 3 +- .../_shared/SolidSwiper/EditorSwiper.tsx | 3 +- .../_shared/SolidSwiper/ImageSwiper.tsx | 104 +++++++++--------- .../_shared/SolidSwiper/Swiper.module.scss | 69 ++++-------- .../_shared/SolidSwiper/swiper.d.ts | 6 + 7 files changed, 84 insertions(+), 120 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7f88e173..f25bccad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -115,7 +115,7 @@ "stylelint-config-standard-scss": "11.1.0", "stylelint-order": "6.0.3", "stylelint-scss": "5.3.1", - "swiper": "9.4.1", + "swiper": "11.0.5", "throttle-debounce": "5.0.0", "typescript": "5.2.2", "typograf": "7.1.0", @@ -17436,12 +17436,6 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, - "node_modules/ssr-window": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", - "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==", - "dev": true - }, "node_modules/stack-utils": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz", @@ -17934,9 +17928,9 @@ } }, "node_modules/swiper": { - "version": "9.4.1", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz", - "integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==", + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz", + "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==", "dev": true, "funding": [ { @@ -17948,9 +17942,6 @@ "url": "http://opencollective.com/swiper" } ], - "dependencies": { - "ssr-window": "^4.0.2" - }, "engines": { "node": ">= 4.7.0" } diff --git a/package.json b/package.json index 52328787..1c9101ed 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "stylelint-config-standard-scss": "11.1.0", "stylelint-order": "6.0.3", "stylelint-scss": "5.3.1", - "swiper": "9.4.1", + "swiper": "11.0.5", "throttle-debounce": "5.0.0", "typescript": "5.2.2", "typograf": "7.1.0", diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx index df4d44be..60adf711 100644 --- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx @@ -1,6 +1,7 @@ import { clsx } from 'clsx' import { For, onMount, Show } from 'solid-js' -import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper' +import SwiperCore from 'swiper' +import { Manipulation, Navigation, Pagination } from 'swiper/modules' import { Shout } from '../../../graphql/types.gen' import { ArticleCard } from '../../Feed/ArticleCard' diff --git a/src/components/_shared/SolidSwiper/EditorSwiper.tsx b/src/components/_shared/SolidSwiper/EditorSwiper.tsx index dc9f06e6..6c5c7670 100644 --- a/src/components/_shared/SolidSwiper/EditorSwiper.tsx +++ b/src/components/_shared/SolidSwiper/EditorSwiper.tsx @@ -1,7 +1,8 @@ import { createFileUploader } from '@solid-primitives/upload' import { clsx } from 'clsx' import { createEffect, createSignal, For, Show, on, onMount, lazy } from 'solid-js' -import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper' +import SwiperCore from 'swiper' +import { Manipulation, Navigation, Pagination } from 'swiper/modules' import { useLocalize } from '../../../context/localize' import { useSnackbar } from '../../../context/snackbar' diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx index 5364e47b..2aa782ff 100644 --- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx @@ -1,6 +1,7 @@ import { clsx } from 'clsx' import { createEffect, createSignal, For, Show, on, onMount, onCleanup } from 'solid-js' -import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper' +import SwiperCore from 'swiper' +import { Manipulation, Navigation, Pagination } from 'swiper/modules' import { throttle } from 'throttle-debounce' import { MediaItem } from '../../../pages/types' @@ -27,7 +28,6 @@ export const ImageSwiper = (props: Props) => { const mainSwipeRef: { current: SwiperRef } = { current: null } const thumbSwipeRef: { current: SwiperRef } = { current: null } const swiperMainContainer: { current: HTMLDivElement } = { current: null } - const [slideIndex, setSlideIndex] = createSignal(0) const [isMobileView, setIsMobileView] = createSignal(false) const [selectedImage, setSelectedImage] = createSignal('') @@ -52,18 +52,13 @@ export const ImageSwiper = (props: Props) => { const { register } = await import('swiper/element/bundle') register() SwiperCore.use([Pagination, Navigation, Manipulation]) + mainSwipeRef.current.swiper.on('slideChange', handleSlideChange) }) onMount(() => { const updateDirection = () => { const width = window.innerWidth - const direction = width > MIN_WIDTH ? 'vertical' : 'horizontal' - if (direction === 'horizontal') { - setIsMobileView(true) - } else { - setIsMobileView(false) - } - thumbSwipeRef.current?.swiper?.changeDirection(direction) + setIsMobileView(width < MIN_WIDTH) } updateDirection() @@ -96,13 +91,58 @@ export const ImageSwiper = (props: Props) => {
(swiperMainContainer.current = el)}> 0}> +
+
+ (thumbSwipeRef.current = el)} + slides-per-view={'auto'} + space-between={isMobileView() ? 20 : 10} + auto-scroll-offset={1} + watch-overflow={true} + watch-slides-visibility={true} + direction={'horizontal'} + > + + {(slide, index) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + +
+ + )} + + +
thumbSwipeRef.current.swiper.slidePrev()} + > + +
+
thumbSwipeRef.current.swiper.slideTo(10)} + > + +
+
+
(mainSwipeRef.current = el)} slides-per-view={1} thumbs-swiper={'.thumbSwiper'} observer={true} - onSlideChange={handleSlideChange} + // slide-change={handleSlideChange} space-between={isMobileView() ? 20 : 10} > @@ -137,50 +177,6 @@ export const ImageSwiper = (props: Props) => { {slideIndex() + 1} / {props.images.length}
-
-
- (thumbSwipeRef.current = el)} - slides-per-view={'auto'} - space-between={isMobileView() ? 20 : 10} - auto-scroll-offset={1} - watch-overflow={true} - watch-slides-visibility={true} - > - - {(slide, index) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - -
- - )} - - -
thumbSwipeRef.current.swiper.slidePrev()} - > - -
-
thumbSwipeRef.current.swiper.slideNext()} - > - -
-
-
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss index f4dbccf1..04c1ff99 100644 --- a/src/components/_shared/SolidSwiper/Swiper.module.scss +++ b/src/components/_shared/SolidSwiper/Swiper.module.scss @@ -29,6 +29,7 @@ background: var(--background-color-invert); color: var(--default-color-invert); display: flex; + flex-direction: column; align-items: center; justify-content: center; @@ -40,47 +41,37 @@ .container { margin: auto; position: relative; - padding: 24px 0; display: flex; + flex-direction: column; justify-content: center; gap: 20px; width: 100%; .thumbsHolder { - min-width: 110px; width: auto; } .thumbs { - padding: 52px 0; - width: 110px; overflow: hidden; - height: calc(var(--slide-height) + 40px); box-sizing: border-box; margin: 0; position: relative; .thumbsNav { height: 52px; - padding: 14px 0; - display: flex; - align-items: center; - justify-content: center; - width: 110px; - left: 0; - right: 0; - - .icon { - transform: rotate(90deg); - } + overflow: hidden; &.prev { - top: 0; + top: 50%; + left: 0; + transform: translateY(-50%); } &.next { - top: auto; - bottom: 0; + top: 50%; + right: 0; + left: unset; + transform: translateY(-50%); } } } @@ -88,43 +79,12 @@ &.mobileView { .container { - flex-direction: column-reverse; padding: 0; - - .thumbsHolder { - min-width: unset; - } - .thumbs { - width: 100%; - height: 80px; - padding: 0; - & swiper-slide { // bind to html element width: unset !important; } - - .thumbsNav { - height: 100%; - padding: 0; - width: 40px; - - .icon { - transform: none; - } - - &.prev { - top: 0; - left: 0; - } - - &.next { - top: 0; - right: 0; - left: unset; - } - } } } } @@ -260,6 +220,10 @@ margin-top: 24px; + * { + color: var(--default-color-invert) !important; //Force fix migration errors with inline styles + } + @include media-breakpoint-up(md) { // margin-left: calc((100% + 130px) * 0.15); margin-left: calc(15% + 24px); @@ -398,4 +362,9 @@ display: flex !important; } } + + .swiper-button-prev, + .swiper-rtl .swiper-button-next { + top: 200px !important; + } } diff --git a/src/components/_shared/SolidSwiper/swiper.d.ts b/src/components/_shared/SolidSwiper/swiper.d.ts index d94ccd21..e93993ce 100644 --- a/src/components/_shared/SolidSwiper/swiper.d.ts +++ b/src/components/_shared/SolidSwiper/swiper.d.ts @@ -37,10 +37,16 @@ declare module 'solid-js' { onSlideChange?: () => void onBeforeSlideChangeStart?: () => void class?: string + observer?: boolean + loop?: boolean + speed?: number + slidesPerGroupAuto?: boolean + navigation?: boolean breakpoints?: { [width: number]: SwiperOptions [ratio: string]: SwiperOptions } + direction?: 'horizontal' | 'vertical' autoplay?: AutoplayOptions | boolean } // eslint-disable-next-line @typescript-eslint/no-empty-interface