feat: Add comprehensive documentation suite and reorganize project structure
- Created complete documentation in docs/ directory - Added PROJECT_OVERVIEW.md with feature highlights and getting started guide - Added ARCHITECTURE.md with system design and technical details - Added SECURITY.md with comprehensive security implementation guide - Added DEVELOPMENT.md with development workflows and best practices - Added DEPLOYMENT.md with production deployment instructions - Added API.md with complete REST API documentation - Added CONTRIBUTING.md with contribution guidelines - Added CHANGELOG.md with version history and migration notes - Reorganized all documentation files into docs/ directory for better organization - Updated README.md with proper documentation links and quick navigation - Enhanced project structure with professional documentation standards
This commit is contained in:
SamiAhmed7777
9
f_scripts/shared/swiper/react/context.js
Normal file
9
f_scripts/shared/swiper/react/context.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
export const SwiperSlideContext = /*#__PURE__*/createContext(null);
|
||||
export const useSwiperSlide = () => {
|
||||
return useContext(SwiperSlideContext);
|
||||
};
|
||||
export const SwiperContext = /*#__PURE__*/createContext(null);
|
||||
export const useSwiper = () => {
|
||||
return useContext(SwiperContext);
|
||||
};
|
||||
45
f_scripts/shared/swiper/react/get-children.js
Normal file
45
f_scripts/shared/swiper/react/get-children.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
function isChildSwiperSlide(child) {
|
||||
return child.type && child.type.displayName && child.type.displayName.includes('SwiperSlide');
|
||||
}
|
||||
function processChildren(c) {
|
||||
const slides = [];
|
||||
React.Children.toArray(c).forEach(child => {
|
||||
if (isChildSwiperSlide(child)) {
|
||||
slides.push(child);
|
||||
} else if (child.props && child.props.children) {
|
||||
processChildren(child.props.children).forEach(slide => slides.push(slide));
|
||||
}
|
||||
});
|
||||
return slides;
|
||||
}
|
||||
function getChildren(c) {
|
||||
const slides = [];
|
||||
const slots = {
|
||||
'container-start': [],
|
||||
'container-end': [],
|
||||
'wrapper-start': [],
|
||||
'wrapper-end': []
|
||||
};
|
||||
React.Children.toArray(c).forEach(child => {
|
||||
if (isChildSwiperSlide(child)) {
|
||||
slides.push(child);
|
||||
} else if (child.props && child.props.slot && slots[child.props.slot]) {
|
||||
slots[child.props.slot].push(child);
|
||||
} else if (child.props && child.props.children) {
|
||||
const foundSlides = processChildren(child.props.children);
|
||||
if (foundSlides.length > 0) {
|
||||
foundSlides.forEach(slide => slides.push(slide));
|
||||
} else {
|
||||
slots['container-end'].push(child);
|
||||
}
|
||||
} else {
|
||||
slots['container-end'].push(child);
|
||||
}
|
||||
});
|
||||
return {
|
||||
slides,
|
||||
slots
|
||||
};
|
||||
}
|
||||
export { getChildren };
|
||||
1
f_scripts/shared/swiper/react/index.d.ts
vendored
Normal file
1
f_scripts/shared/swiper/react/index.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from './swiper-react';
|
||||
1
f_scripts/shared/swiper/react/index.js
Normal file
1
f_scripts/shared/swiper/react/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './swiper-react.js';
|
||||
489
f_scripts/shared/swiper/react/swiper-react.d.ts
vendored
Normal file
489
f_scripts/shared/swiper/react/swiper-react.d.ts
vendored
Normal file
@@ -0,0 +1,489 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { SwiperOptions, Swiper as SwiperClass } from '../types';
|
||||
|
||||
interface SwiperProps extends SwiperOptions {
|
||||
/**
|
||||
* Swiper container tag
|
||||
*
|
||||
* @default 'div'
|
||||
*/
|
||||
tag?: string;
|
||||
|
||||
/**
|
||||
* Swiper wrapper tag
|
||||
*
|
||||
* @default 'div'
|
||||
*/
|
||||
wrapperTag?: string;
|
||||
|
||||
/**
|
||||
* Get Swiper instance
|
||||
*/
|
||||
onSwiper?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired in when autoplay started
|
||||
*/
|
||||
onAutoplayStart?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when autoplay stopped
|
||||
*/
|
||||
onAutoplayStop?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on autoplay pause
|
||||
*/
|
||||
onAutoplayPause?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on autoplay resume
|
||||
*/
|
||||
onAutoplayResume?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event triggers continuously while autoplay is enabled. It contains time left (in ms) before transition to next slide and percentage of that time related to autoplay delay
|
||||
*/
|
||||
onAutoplayTimeLeft?: (swiper: SwiperClass, timeLeft: number, percentage: number) => void;
|
||||
/**
|
||||
* Event will be fired when slide changed with autoplay
|
||||
*/
|
||||
onAutoplay?: (swiper: SwiperClass) => void;/**
|
||||
* Event will be fired on window hash change
|
||||
*/
|
||||
onHashChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when swiper updates the hash
|
||||
*/
|
||||
onHashSet?: (swiper: SwiperClass) => void;/**
|
||||
* Event will be fired on mousewheel scroll
|
||||
*/
|
||||
onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
|
||||
* Event will be fired on key press
|
||||
*/
|
||||
onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
|
||||
* Event will be fired on navigation hide
|
||||
*/
|
||||
onNavigationHide?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on navigation show
|
||||
*/
|
||||
onNavigationShow?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on navigation prev button click
|
||||
*/
|
||||
onNavigationPrev?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on navigation next button click
|
||||
*/
|
||||
onNavigationNext?: (swiper: SwiperClass) => void;/**
|
||||
* Event will be fired after pagination rendered
|
||||
*/
|
||||
onPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when pagination updated
|
||||
*/
|
||||
onPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on pagination hide
|
||||
*/
|
||||
onPaginationHide?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on pagination show
|
||||
*/
|
||||
onPaginationShow?: (swiper: SwiperClass) => void;/**
|
||||
* Event will be fired on draggable scrollbar drag start
|
||||
*/
|
||||
onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on draggable scrollbar drag move
|
||||
*/
|
||||
onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on draggable scrollbar drag end
|
||||
*/
|
||||
onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
|
||||
* Event will be fired on zoom change
|
||||
*/
|
||||
onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Fired right after Swiper initialization.
|
||||
* @note Note that with `swiper.on('init')` syntax it will
|
||||
* work only in case you set `init: false` parameter.
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* const swiper = new Swiper('.swiper', {
|
||||
* init: false,
|
||||
* // other parameters
|
||||
* });
|
||||
* swiper.on('init', function() {
|
||||
* // do something
|
||||
* });
|
||||
* // init Swiper
|
||||
* swiper.init();
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* // Otherwise use it as the parameter:
|
||||
* const swiper = new Swiper('.swiper', {
|
||||
* // other parameters
|
||||
* on: {
|
||||
* init: function () {
|
||||
* // do something
|
||||
* },
|
||||
* }
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
onInit?: (swiper: SwiperClass) => any;
|
||||
|
||||
/**
|
||||
* Event will be fired right before Swiper destroyed
|
||||
*/
|
||||
onBeforeDestroy?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when currently active slide is changed
|
||||
*/
|
||||
onSlideChange?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired in the beginning of animation to other slide (next or previous).
|
||||
*/
|
||||
onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired after animation to other slide (next or previous).
|
||||
*/
|
||||
onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Same as "slideChangeTransitionStart" but for "forward" direction only
|
||||
*/
|
||||
onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Same as "slideChangeTransitionEnd" but for "forward" direction only
|
||||
*/
|
||||
onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Same as "slideChangeTransitionStart" but for "backward" direction only
|
||||
*/
|
||||
onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Same as "slideChangeTransitionEnd" but for "backward" direction only
|
||||
*/
|
||||
onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired in the beginning of transition.
|
||||
*/
|
||||
onTransitionStart?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired after transition.
|
||||
*/
|
||||
onTransitionEnd?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user touch Swiper. Receives `touchstart` event as an arguments.
|
||||
*/
|
||||
onTouchStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user touch and move finger over Swiper. Receives `touchmove` event as an arguments.
|
||||
*/
|
||||
onTouchMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `touchmove` event as an arguments.
|
||||
*/
|
||||
onTouchMoveOpposite?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user touch and move finger over Swiper and move it. Receives `touchmove` event as an arguments.
|
||||
*/
|
||||
onSliderMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user release Swiper. Receives `touchend` event as an arguments.
|
||||
*/
|
||||
onTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
|
||||
*/
|
||||
onClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
|
||||
*/
|
||||
onTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when user double tap on Swiper's container. Receives `touchend` event as an arguments
|
||||
*/
|
||||
onDoubleTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
|
||||
*/
|
||||
onProgress?: (swiper: SwiperClass, progress: number) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when Swiper reach its beginning (initial position)
|
||||
*/
|
||||
onReachBeginning?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when Swiper reach last slide
|
||||
*/
|
||||
onReachEnd?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when Swiper goes to beginning or end position
|
||||
*/
|
||||
onToEdge?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when Swiper goes from beginning or end position
|
||||
*/
|
||||
onFromEdge?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
|
||||
*/
|
||||
onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
|
||||
*/
|
||||
onSetTransition?: (swiper: SwiperClass, transition: number) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on window resize right before swiper's onresize manipulation
|
||||
*/
|
||||
onResize?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired if observer is enabled and it detects DOM mutations
|
||||
*/
|
||||
onObserverUpdate?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired right before "loop fix"
|
||||
*/
|
||||
onBeforeLoopFix?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired after "loop fix"
|
||||
*/
|
||||
onLoopFix?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will be fired on breakpoint change
|
||||
*/
|
||||
onBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will fired right before breakpoint change
|
||||
*/
|
||||
_beforeBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will fired after setting CSS classes on swiper container element
|
||||
*/
|
||||
_containerClasses?: (swiper: SwiperClass, classNames: string) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will fired after setting CSS classes on swiper slide element
|
||||
*/
|
||||
_slideClass?: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will fired after setting CSS classes on all swiper slides
|
||||
*/
|
||||
_slideClasses?: (
|
||||
swiper: SwiperClass,
|
||||
slides: { slideEl: HTMLElement; classNames: string; index: number }[],
|
||||
) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will fired as soon as swiper instance available (before init)
|
||||
*/
|
||||
_swiper?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
|
||||
*/
|
||||
_freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
|
||||
|
||||
/**
|
||||
* Event will fired on active index change
|
||||
*/
|
||||
onActiveIndexChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired on snap index change
|
||||
*/
|
||||
onSnapIndexChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired on real index change
|
||||
*/
|
||||
onRealIndexChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired right after initialization
|
||||
*/
|
||||
onAfterInit?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired right before initialization
|
||||
*/
|
||||
onBeforeInit?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired before resize handler
|
||||
*/
|
||||
onBeforeResize?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired before slide change transition start
|
||||
*/
|
||||
onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will fired before transition start
|
||||
*/
|
||||
onBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
|
||||
/**
|
||||
* Event will fired on direction change
|
||||
*/
|
||||
onChangeDirection?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when user double click/tap on Swiper
|
||||
*/
|
||||
onDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
|
||||
/**
|
||||
* Event will be fired on swiper destroy
|
||||
*/
|
||||
onDestroy?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on momentum bounce
|
||||
*/
|
||||
onMomentumBounce?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired on orientation change (e.g. landscape -> portrait)
|
||||
*/
|
||||
onOrientationchange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired in the beginning of animation of resetting slide to current one
|
||||
*/
|
||||
onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired in the end of animation of resetting slide to current one
|
||||
*/
|
||||
onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired with first touch/drag move
|
||||
*/
|
||||
onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
|
||||
/**
|
||||
* Event will be fired when number of slides has changed
|
||||
*/
|
||||
onSlidesLengthChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when slides grid has changed
|
||||
*/
|
||||
onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when snap grid has changed
|
||||
*/
|
||||
onSnapGridLengthChange?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired after swiper.update() call
|
||||
*/
|
||||
onUpdate?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when swiper is locked (when `watchOverflow` enabled)
|
||||
*/
|
||||
onLock?: (swiper: SwiperClass) => void;
|
||||
/**
|
||||
* Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
|
||||
*/
|
||||
onUnlock?: (swiper: SwiperClass) => void;
|
||||
|
||||
}
|
||||
|
||||
interface SlideData {
|
||||
isActive: boolean;
|
||||
isVisible: boolean;
|
||||
isPrev: boolean;
|
||||
isNext: boolean;
|
||||
}
|
||||
|
||||
interface SwiperSlideProps {
|
||||
/**
|
||||
* Slide tag
|
||||
*
|
||||
* @default 'div'
|
||||
*/
|
||||
tag?: string;
|
||||
|
||||
/**
|
||||
* Enables additional wrapper required for zoom mode
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
zoom?: boolean;
|
||||
|
||||
/**
|
||||
* Adds lazy preloader to the slide
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
lazy?: boolean;
|
||||
|
||||
/**
|
||||
* Slide's index in slides array/collection
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
virtualIndex?: number;
|
||||
|
||||
/**
|
||||
* Slide's child element or render function
|
||||
*
|
||||
* @default undefined
|
||||
*/
|
||||
children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
|
||||
}
|
||||
|
||||
interface SwiperProps
|
||||
extends Omit<
|
||||
React.HTMLAttributes<HTMLElement>,
|
||||
| 'onProgress'
|
||||
| 'onClick'
|
||||
| 'onTouchEnd'
|
||||
| 'onTouchMove'
|
||||
| 'onTouchStart'
|
||||
| 'onTransitionEnd'
|
||||
| 'onKeyPress'
|
||||
| 'onDoubleClick'
|
||||
| 'onScroll'
|
||||
| 'onResize'
|
||||
> {}
|
||||
interface SwiperSlideProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {}
|
||||
|
||||
interface SwiperRef extends React.HTMLAttributes<HTMLElement> {
|
||||
swiper: SwiperClass;
|
||||
}
|
||||
|
||||
declare const Swiper: React.FunctionComponent<React.RefAttributes<SwiperRef> & SwiperProps>;
|
||||
declare const SwiperSlide: React.FunctionComponent<SwiperSlideProps>;
|
||||
|
||||
declare const useSwiper: () => SwiperClass;
|
||||
declare const useSwiperSlide: () => SlideData;
|
||||
|
||||
export { Swiper, SwiperSlide, SwiperProps, SwiperSlideProps, SwiperRef, useSwiper, useSwiperSlide };
|
||||
16
f_scripts/shared/swiper/react/swiper-react.js
Normal file
16
f_scripts/shared/swiper/react/swiper-react.js
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Swiper React 9.1.0
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2023 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: February 28, 2023
|
||||
*/
|
||||
|
||||
import { Swiper } from './swiper.js';
|
||||
import { SwiperSlide } from './swiper-slide.js';
|
||||
export { useSwiperSlide, useSwiper } from './context.js';
|
||||
export { Swiper, SwiperSlide };
|
||||
85
f_scripts/shared/swiper/react/swiper-slide.js
Normal file
85
f_scripts/shared/swiper/react/swiper-slide.js
Normal file
@@ -0,0 +1,85 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
import React, { useRef, useState, forwardRef } from 'react';
|
||||
import { uniqueClasses } from '../components-shared/utils.js';
|
||||
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
|
||||
import { SwiperSlideContext } from './context.js';
|
||||
const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
|
||||
let {
|
||||
tag: Tag = 'div',
|
||||
children,
|
||||
className = '',
|
||||
swiper,
|
||||
zoom,
|
||||
lazy,
|
||||
virtualIndex,
|
||||
swiperSlideIndex,
|
||||
...rest
|
||||
} = _temp === void 0 ? {} : _temp;
|
||||
const slideElRef = useRef(null);
|
||||
const [slideClasses, setSlideClasses] = useState('swiper-slide');
|
||||
const [lazyLoaded, setLazyLoaded] = useState(false);
|
||||
function updateClasses(_s, el, classNames) {
|
||||
if (el === slideElRef.current) {
|
||||
setSlideClasses(classNames);
|
||||
}
|
||||
}
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (typeof swiperSlideIndex !== 'undefined') {
|
||||
slideElRef.current.swiperSlideIndex = swiperSlideIndex;
|
||||
}
|
||||
if (externalRef) {
|
||||
externalRef.current = slideElRef.current;
|
||||
}
|
||||
if (!slideElRef.current || !swiper) {
|
||||
return;
|
||||
}
|
||||
if (swiper.destroyed) {
|
||||
if (slideClasses !== 'swiper-slide') {
|
||||
setSlideClasses('swiper-slide');
|
||||
}
|
||||
return;
|
||||
}
|
||||
swiper.on('_slideClass', updateClasses);
|
||||
// eslint-disable-next-line
|
||||
return () => {
|
||||
if (!swiper) return;
|
||||
swiper.off('_slideClass', updateClasses);
|
||||
};
|
||||
});
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (swiper && slideElRef.current && !swiper.destroyed) {
|
||||
setSlideClasses(swiper.getSlideClasses(slideElRef.current));
|
||||
}
|
||||
}, [swiper]);
|
||||
const slideData = {
|
||||
isActive: slideClasses.indexOf('swiper-slide-active') >= 0,
|
||||
isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
|
||||
isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0,
|
||||
isNext: slideClasses.indexOf('swiper-slide-next') >= 0
|
||||
};
|
||||
const renderChildren = () => {
|
||||
return typeof children === 'function' ? children(slideData) : children;
|
||||
};
|
||||
const onLoad = () => {
|
||||
setLazyLoaded(true);
|
||||
};
|
||||
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||||
ref: slideElRef,
|
||||
className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
|
||||
"data-swiper-slide-index": virtualIndex,
|
||||
onLoad: onLoad
|
||||
}, rest), zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
|
||||
value: slideData
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: "swiper-zoom-container",
|
||||
"data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
|
||||
}, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
|
||||
className: "swiper-lazy-preloader"
|
||||
}))), !zoom && /*#__PURE__*/React.createElement(SwiperSlideContext.Provider, {
|
||||
value: slideData
|
||||
}, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React.createElement("div", {
|
||||
className: "swiper-lazy-preloader"
|
||||
})));
|
||||
});
|
||||
SwiperSlide.displayName = 'SwiperSlide';
|
||||
export { SwiperSlide };
|
||||
197
f_scripts/shared/swiper/react/swiper.js
Normal file
197
f_scripts/shared/swiper/react/swiper.js
Normal file
@@ -0,0 +1,197 @@
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
import React, { useRef, useState, useEffect, forwardRef } from 'react';
|
||||
import SwiperCore from 'swiper';
|
||||
import { getParams } from '../components-shared/get-params.js';
|
||||
import { mountSwiper } from '../components-shared/mount-swiper.js';
|
||||
import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend, wrapperClass } from '../components-shared/utils.js';
|
||||
import { getChangedParams } from '../components-shared/get-changed-params.js';
|
||||
import { getChildren } from './get-children.js';
|
||||
import { updateSwiper } from '../components-shared/update-swiper.js';
|
||||
import { renderVirtual } from './virtual.js';
|
||||
import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
|
||||
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
|
||||
import { SwiperContext } from './context.js';
|
||||
const Swiper = /*#__PURE__*/forwardRef(function (_temp, externalElRef) {
|
||||
let {
|
||||
className,
|
||||
tag: Tag = 'div',
|
||||
wrapperTag: WrapperTag = 'div',
|
||||
children,
|
||||
onSwiper,
|
||||
...rest
|
||||
} = _temp === void 0 ? {} : _temp;
|
||||
let eventsAssigned = false;
|
||||
const [containerClasses, setContainerClasses] = useState('swiper');
|
||||
const [virtualData, setVirtualData] = useState(null);
|
||||
const [breakpointChanged, setBreakpointChanged] = useState(false);
|
||||
const initializedRef = useRef(false);
|
||||
const swiperElRef = useRef(null);
|
||||
const swiperRef = useRef(null);
|
||||
const oldPassedParamsRef = useRef(null);
|
||||
const oldSlides = useRef(null);
|
||||
const nextElRef = useRef(null);
|
||||
const prevElRef = useRef(null);
|
||||
const paginationElRef = useRef(null);
|
||||
const scrollbarElRef = useRef(null);
|
||||
const {
|
||||
params: swiperParams,
|
||||
passedParams,
|
||||
rest: restProps,
|
||||
events
|
||||
} = getParams(rest);
|
||||
const {
|
||||
slides,
|
||||
slots
|
||||
} = getChildren(children);
|
||||
const onBeforeBreakpoint = () => {
|
||||
setBreakpointChanged(!breakpointChanged);
|
||||
};
|
||||
Object.assign(swiperParams.on, {
|
||||
_containerClasses(swiper, classes) {
|
||||
setContainerClasses(classes);
|
||||
}
|
||||
});
|
||||
const initSwiper = () => {
|
||||
// init swiper
|
||||
Object.assign(swiperParams.on, events);
|
||||
eventsAssigned = true;
|
||||
const passParams = {
|
||||
...swiperParams
|
||||
};
|
||||
delete passParams.wrapperClass;
|
||||
swiperRef.current = new SwiperCore(passParams);
|
||||
if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
|
||||
swiperRef.current.virtual.slides = slides;
|
||||
const extendWith = {
|
||||
cache: false,
|
||||
slides,
|
||||
renderExternal: setVirtualData,
|
||||
renderExternalUpdate: false
|
||||
};
|
||||
extend(swiperRef.current.params.virtual, extendWith);
|
||||
extend(swiperRef.current.originalParams.virtual, extendWith);
|
||||
}
|
||||
};
|
||||
if (!swiperElRef.current) {
|
||||
initSwiper();
|
||||
}
|
||||
|
||||
// Listen for breakpoints change
|
||||
if (swiperRef.current) {
|
||||
swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
|
||||
}
|
||||
const attachEvents = () => {
|
||||
if (eventsAssigned || !events || !swiperRef.current) return;
|
||||
Object.keys(events).forEach(eventName => {
|
||||
swiperRef.current.on(eventName, events[eventName]);
|
||||
});
|
||||
};
|
||||
const detachEvents = () => {
|
||||
if (!events || !swiperRef.current) return;
|
||||
Object.keys(events).forEach(eventName => {
|
||||
swiperRef.current.off(eventName, events[eventName]);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
|
||||
};
|
||||
});
|
||||
|
||||
// set initialized flag
|
||||
useEffect(() => {
|
||||
if (!initializedRef.current && swiperRef.current) {
|
||||
swiperRef.current.emitSlidesClasses();
|
||||
initializedRef.current = true;
|
||||
}
|
||||
});
|
||||
|
||||
// mount swiper
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (externalElRef) {
|
||||
externalElRef.current = swiperElRef.current;
|
||||
}
|
||||
if (!swiperElRef.current) return;
|
||||
if (swiperRef.current.destroyed) {
|
||||
initSwiper();
|
||||
}
|
||||
mountSwiper({
|
||||
el: swiperElRef.current,
|
||||
nextEl: nextElRef.current,
|
||||
prevEl: prevElRef.current,
|
||||
paginationEl: paginationElRef.current,
|
||||
scrollbarEl: scrollbarElRef.current,
|
||||
swiper: swiperRef.current
|
||||
}, swiperParams);
|
||||
if (onSwiper) onSwiper(swiperRef.current);
|
||||
// eslint-disable-next-line
|
||||
return () => {
|
||||
if (swiperRef.current && !swiperRef.current.destroyed) {
|
||||
swiperRef.current.destroy(true, false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// watch for params change
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
attachEvents();
|
||||
const changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current, c => c.key);
|
||||
oldPassedParamsRef.current = passedParams;
|
||||
oldSlides.current = slides;
|
||||
if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
|
||||
updateSwiper({
|
||||
swiper: swiperRef.current,
|
||||
slides,
|
||||
passedParams,
|
||||
changedParams,
|
||||
nextEl: nextElRef.current,
|
||||
prevEl: prevElRef.current,
|
||||
scrollbarEl: scrollbarElRef.current,
|
||||
paginationEl: paginationElRef.current
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
detachEvents();
|
||||
};
|
||||
});
|
||||
|
||||
// update on virtual update
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
updateOnVirtualData(swiperRef.current);
|
||||
}, [virtualData]);
|
||||
|
||||
// bypass swiper instance to slides
|
||||
function renderSlides() {
|
||||
if (swiperParams.virtual) {
|
||||
return renderVirtual(swiperRef.current, slides, virtualData);
|
||||
}
|
||||
return slides.map((child, index) => {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
swiper: swiperRef.current,
|
||||
swiperSlideIndex: index
|
||||
});
|
||||
});
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(Tag, _extends({
|
||||
ref: swiperElRef,
|
||||
className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
|
||||
}, restProps), /*#__PURE__*/React.createElement(SwiperContext.Provider, {
|
||||
value: swiperRef.current
|
||||
}, slots['container-start'], /*#__PURE__*/React.createElement(WrapperTag, {
|
||||
className: wrapperClass(swiperParams.wrapperClass)
|
||||
}, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
||||
ref: prevElRef,
|
||||
className: "swiper-button-prev"
|
||||
}), /*#__PURE__*/React.createElement("div", {
|
||||
ref: nextElRef,
|
||||
className: "swiper-button-next"
|
||||
})), needsScrollbar(swiperParams) && /*#__PURE__*/React.createElement("div", {
|
||||
ref: scrollbarElRef,
|
||||
className: "swiper-scrollbar"
|
||||
}), needsPagination(swiperParams) && /*#__PURE__*/React.createElement("div", {
|
||||
ref: paginationElRef,
|
||||
className: "swiper-pagination"
|
||||
}), slots['container-end']));
|
||||
});
|
||||
Swiper.displayName = 'Swiper';
|
||||
export { Swiper };
|
||||
@@ -0,0 +1,7 @@
|
||||
import { useEffect, useLayoutEffect } from 'react';
|
||||
function useIsomorphicLayoutEffect(callback, deps) {
|
||||
// eslint-disable-next-line
|
||||
if (typeof window === 'undefined') return useEffect(callback, deps);
|
||||
return useLayoutEffect(callback, deps);
|
||||
}
|
||||
export { useIsomorphicLayoutEffect };
|
||||
38
f_scripts/shared/swiper/react/virtual.js
Normal file
38
f_scripts/shared/swiper/react/virtual.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
function renderVirtual(swiper, slides, virtualData) {
|
||||
if (!virtualData) return null;
|
||||
const getSlideIndex = index => {
|
||||
let slideIndex = index;
|
||||
if (index < 0) {
|
||||
slideIndex = slides.length + index;
|
||||
} else if (slideIndex >= slides.length) {
|
||||
// eslint-disable-next-line
|
||||
slideIndex = slideIndex - slides.length;
|
||||
}
|
||||
return slideIndex;
|
||||
};
|
||||
const style = swiper.isHorizontal() ? {
|
||||
[swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
|
||||
} : {
|
||||
top: `${virtualData.offset}px`
|
||||
};
|
||||
const {
|
||||
from,
|
||||
to
|
||||
} = virtualData;
|
||||
const loopFrom = swiper.params.loop ? -slides.length : 0;
|
||||
const loopTo = swiper.params.loop ? slides.length * 2 : slides.length;
|
||||
const slidesToRender = [];
|
||||
for (let i = loopFrom; i < loopTo; i += 1) {
|
||||
if (i >= from && i <= to) {
|
||||
slidesToRender.push(slides[getSlideIndex(i)]);
|
||||
}
|
||||
}
|
||||
return slidesToRender.map(child => {
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
swiper,
|
||||
style
|
||||
});
|
||||
});
|
||||
}
|
||||
export { renderVirtual };
|
||||
Reference in New Issue
Block a user