🆙 Add cms i using 🆙

This commit is contained in:
Remco
2025-11-25 22:42:56 +01:00
parent 94704e0925
commit d44196149e
35591 changed files with 3601123 additions and 0 deletions
+9
View File
@@ -0,0 +1,9 @@
import { createContext, useContext } from 'solid-js';
export const SwiperSlideContext = createContext(null);
export const useSwiperSlide = () => {
return useContext(SwiperSlideContext);
};
export const SwiperContext = createContext(null);
export const useSwiper = () => {
return useContext(SwiperContext);
};
@@ -0,0 +1,55 @@
import { children } from 'solid-js';
function childrenAsArray(c) {
const cachedChildren = children(() => c);
return Array.isArray(cachedChildren()) ? cachedChildren() : [cachedChildren()];
}
function processChildren(c) {
const slides = [];
childrenAsArray(c).forEach(child => {
if (!child) return;
if (child.className && child.className.indexOf('swiper-slide') >= 0) {
slides.push(child);
} else if (child.children) {
processChildren(child.children).forEach(slide => slides.push(slide));
}
});
return slides;
}
function getChildren(c) {
const slides = [];
const slots = {
'container-start': [],
'container-end': [],
'wrapper-start': [],
'wrapper-end': []
};
childrenAsArray(c).forEach(child => {
if (!child) return;
if (child.className && child.className.indexOf('swiper-slide') >= 0) {
slides.push(child);
} else if (child.slot && slots[child.slot]) {
slots[child.slot].push(child);
} else if (child.children) {
const foundSlides = processChildren(child.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
View File
@@ -0,0 +1 @@
export * from './swiper-solid';
+1
View File
@@ -0,0 +1 @@
export * from './swiper-solid.js';
+63
View File
@@ -0,0 +1,63 @@
import { template as _$template } from "solid-js/web";
import { effect as _$effect } from "solid-js/web";
const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
import { calcLoopedSlides } from '../shared/calc-looped-slides.js';
function renderLoop(swiper, slides, swiperParams) {
const modifiedSlides = slides.map((child, index) => {
const node = child.cloneNode(true);
node.swiper = swiper;
node['data-swiper-slide-index'] = index;
return node;
});
function duplicateSlide(child, index, position) {
const node = child.cloneNode(true);
node.key = `${child.key}-duplicate-${index}-${position}`;
node.className = `${child.className || ''} ${swiperParams.slideDuplicateClass}`;
return node;
}
if (swiperParams.loopFillGroupWithBlank) {
const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
if (blankSlidesNum !== swiperParams.slidesPerGroup) {
for (let i = 0; i < blankSlidesNum; i += 1) {
const blankSlide = // eslint-disable-next-line react/react-in-jsx-scope
(() => {
const _el$ = _tmpl$.cloneNode(true);
_$effect(() => _el$.className = `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`);
return _el$;
})();
modifiedSlides.push(blankSlide);
}
}
}
if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
swiperParams.loopedSlides = modifiedSlides.length;
}
const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
const prependSlides = [];
const appendSlides = [];
for (let i = 0; i < loopedSlides; i += 1) {
const index = i - Math.floor(i / modifiedSlides.length) * modifiedSlides.length;
appendSlides.push(duplicateSlide(modifiedSlides[index], i, 'append'));
prependSlides.unshift(duplicateSlide(modifiedSlides[modifiedSlides.length - index - 1], i, 'prepend'));
}
if (swiper) {
swiper.loopedSlides = loopedSlides;
}
return [...prependSlides, ...modifiedSlides, ...appendSlides];
}
export { calcLoopedSlides, renderLoop };
@@ -0,0 +1,117 @@
import { template as _$template } from "solid-js/web";
import { setAttribute as _$setAttribute } from "solid-js/web";
import { effect as _$effect } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
import { mergeProps as _$mergeProps } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { memo as _$memo } from "solid-js/web";
const _tmpl$ = /*#__PURE__*/_$template(`<div class="swiper-zoom-container"></div>`, 2);
import { createEffect, createSignal, onCleanup, splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { SwiperSlideContext } from './context.js';
import { uniqueClasses } from '../components-shared/utils.js';
const SwiperSlide = props => {
const [local, rest] = splitProps(props, ['children', 'class', 'ref', 'swiper', 'tag', 'virtualIndex', 'zoom']);
const [slideClasses, setSlideClasses] = createSignal('swiper-slide');
let ref = null;
function updateClasses(_s, el, classNames) {
if (el === ref) {
setSlideClasses(classNames);
}
}
createEffect(() => {
if (!ref || !local.swiper) {
return;
}
if (local.swiper.destroyed) {
if (slideClasses() !== 'swiper-slide') {
setSlideClasses('swiper-slide');
}
return;
}
local.swiper.on('_slideClass', updateClasses); // eslint-disable-next-line
onCleanup(() => {
if (!local.swiper) return;
local.swiper.off('_slideClass', updateClasses);
});
});
createEffect(() => {
if (local.swiper && ref && !local.swiper.destroyed) {
setSlideClasses(local.swiper.getSlideClasses(ref));
}
});
const slideData = () => ({
isActive: slideClasses().indexOf('swiper-slide-active') >= 0 || slideClasses().indexOf('swiper-slide-duplicate-active') >= 0,
isVisible: slideClasses().indexOf('swiper-slide-visible') >= 0,
isDuplicate: slideClasses().indexOf('swiper-slide-duplicate') >= 0,
isPrev: slideClasses().indexOf('swiper-slide-prev') >= 0 || slideClasses().indexOf('swiper-slide-duplicate-prev') >= 0,
isNext: slideClasses().indexOf('swiper-slide-next') >= 0 || slideClasses().indexOf('swiper-slide-duplicate-next') >= 0
});
const renderChildren = () => {
return typeof local.children === 'function' ? local.children(slideData()) : local.children;
};
/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable react/no-unknown-property */
return _$createComponent(Dynamic, _$mergeProps({
get component() {
return local.tag || 'div';
},
ref: el => {
ref = el;
if (typeof local.ref === 'function') {
local.ref(el);
} else {
local.ref = el;
}
},
get ["class"]() {
return uniqueClasses(`${slideClasses()}${local.class ? ` ${local.class}` : ''}`);
},
get ["data-swiper-slide-index"]() {
return local.virtualIndex;
}
}, rest, {
get children() {
return _$createComponent(SwiperSlideContext.Provider, {
get value() {
return slideData();
},
get children() {
return _$memo(() => !!local.zoom, true)() ? (() => {
const _el$ = _tmpl$.cloneNode(true);
_$insert(_el$, renderChildren);
_$effect(() => _$setAttribute(_el$, "data-swiper-zoom", typeof local.zoom === 'number' ? local.zoom : undefined));
return _el$;
})() : renderChildren();
}
});
}
}));
};
export { SwiperSlide };
@@ -0,0 +1,101 @@
import { createEffect, createSignal, onCleanup, splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { SwiperSlideContext } from './context.js';
import { uniqueClasses } from '../components-shared/utils.js';
const SwiperSlide = (props) => {
const [local, rest] = splitProps(props, [
'children',
'class',
'ref',
'swiper',
'tag',
'virtualIndex',
'zoom',
]);
const [slideClasses, setSlideClasses] = createSignal('swiper-slide');
let ref = null;
function updateClasses(_s, el, classNames) {
if (el === ref) {
setSlideClasses(classNames);
}
}
createEffect(() => {
if (!ref || !local.swiper) {
return;
}
if (local.swiper.destroyed) {
if (slideClasses() !== 'swiper-slide') {
setSlideClasses('swiper-slide');
}
return;
}
local.swiper.on('_slideClass', updateClasses);
// eslint-disable-next-line
onCleanup(() => {
if (!local.swiper) return;
local.swiper.off('_slideClass', updateClasses);
});
});
createEffect(() => {
if (local.swiper && ref && !local.swiper.destroyed) {
setSlideClasses(local.swiper.getSlideClasses(ref));
}
});
const slideData = () => ({
isActive:
slideClasses().indexOf('swiper-slide-active') >= 0 ||
slideClasses().indexOf('swiper-slide-duplicate-active') >= 0,
isVisible: slideClasses().indexOf('swiper-slide-visible') >= 0,
isDuplicate: slideClasses().indexOf('swiper-slide-duplicate') >= 0,
isPrev:
slideClasses().indexOf('swiper-slide-prev') >= 0 ||
slideClasses().indexOf('swiper-slide-duplicate-prev') >= 0,
isNext:
slideClasses().indexOf('swiper-slide-next') >= 0 ||
slideClasses().indexOf('swiper-slide-duplicate-next') >= 0,
});
const renderChildren = () => {
return typeof local.children === 'function' ? local.children(slideData()) : local.children;
};
/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable react/no-unknown-property */
return (
<Dynamic
component={local.tag || 'div'}
ref={(el) => {
ref = el;
if (typeof local.ref === 'function') {
local.ref(el);
} else {
local.ref = el;
}
}}
class={uniqueClasses(`${slideClasses()}${local.class ? ` ${local.class}` : ''}`)}
data-swiper-slide-index={local.virtualIndex}
{...rest}
>
<SwiperSlideContext.Provider value={slideData()}>
{local.zoom ? (
<div
class="swiper-zoom-container"
data-swiper-zoom={typeof local.zoom === 'number' ? local.zoom : undefined}
>
{renderChildren()}
</div>
) : (
renderChildren()
)}
</SwiperSlideContext.Provider>
</Dynamic>
);
};
export { SwiperSlide };
@@ -0,0 +1,485 @@
import { Component, JSX } from 'solid-js';
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 (on mouse/pointer enter), when `pauseOnMouseEnter` enabled
*/
onAutoplayPause?: (swiper: SwiperClass) => void;
/**
* Event will be fired on autoplay resume (on mouse/pointer leave), when `pauseOnMouseEnter` enabled
*/
onAutoplayResume?: (swiper: SwiperClass) => 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 key press
*/
onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
* Event will be fired in the beginning of lazy loading of image
*/
onLazyImageLoad?: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;
/**
* Event will be fired when lazy loading image will be loaded
*/
onLazyImageReady?: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;/**
* Event will be fired on mousewheel scroll
*/
onScroll?: (swiper: SwiperClass, event: WheelEvent) => 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 right after all inner images are loaded. updateOnImagesReady should be also enabled
*/
onImagesReady?: (swiper: SwiperClass) => 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;
isDuplicate: boolean;
isPrev: boolean;
isNext: boolean;
}
interface SwiperSlideProps {
/**
* Slide tag
*
* @default 'div'
*/
tag?: string;
/**
* Enables additional wrapper required for zoom mode
*
* @default false
*/
zoom?: boolean;
/**
* Slide's index in slides array/collection
*
* @default false
*/
virtualIndex?: number;
/**
* Slide's child element or render function
*
* @default undefined
*/
children?: JSX.Element | ((slideData: SlideData) => JSX.Element);
}
interface SwiperProps
extends Omit<
JSX.HTMLAttributes<HTMLElement>,
| 'onProgress'
| 'onClick'
| 'onTouchEnd'
| 'onTouchMove'
| 'onTouchStart'
| 'onTransitionEnd'
| 'onKeyPress'
| 'onDoubleClick'
| 'onScroll'
> {}
interface SwiperSlideProps extends Omit<JSX.HTMLAttributes<HTMLElement>, 'children'> {}
declare const Swiper: Component<SwiperProps>;
declare const SwiperSlide: Component<SwiperSlideProps>;
declare const useSwiper: () => SwiperClass;
declare const useSwiperSlide: () => SlideData;
export { Swiper, SwiperSlide, SwiperProps, SwiperSlideProps, useSwiper, useSwiperSlide };
@@ -0,0 +1,15 @@
/**
* Swiper SolidJS 8.4.7
* 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: January 30, 2023
*/
export { Swiper } from './swiper.jsx';
export { SwiperSlide } from './swiper-slide.jsx';
export { useSwiperSlide, useSwiper } from './context.js';
+290
View File
@@ -0,0 +1,290 @@
import { template as _$template } from "solid-js/web";
import { className as _$className } from "solid-js/web";
import { effect as _$effect } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
import { memo as _$memo } from "solid-js/web";
import { spread as _$spread } from "solid-js/web";
const _tmpl$ = /*#__PURE__*/_$template(`<div class="swiper-wrapper"></div>`, 2),
_tmpl$2 = /*#__PURE__*/_$template(`<div class="swiper-button-prev"></div>`, 2),
_tmpl$3 = /*#__PURE__*/_$template(`<div class="swiper-button-next"></div>`, 2),
_tmpl$4 = /*#__PURE__*/_$template(`<div class="swiper-scrollbar"></div>`, 2),
_tmpl$5 = /*#__PURE__*/_$template(`<div class="swiper-pagination"></div>`, 2),
_tmpl$6 = /*#__PURE__*/_$template(`<div></div>`, 2);
import { createEffect, createMemo, createSignal, onCleanup, onMount, Show, splitProps, children } from 'solid-js';
import SwiperCore from 'swiper';
import { SwiperContext } from './context.js';
import { getChangedParams } from '../components-shared/get-changed-params.js';
import { getChildren } from './get-children.js';
import { getParams } from '../components-shared/get-params.js';
import { calcLoopedSlides, renderLoop } from './loop.js';
import { mountSwiper } from '../components-shared/mount-swiper.js';
import { updateSwiper } from '../components-shared/update-swiper.js';
import { extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses } from '../components-shared/utils.js';
import { renderVirtual } from './virtual.js';
import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
const Swiper = props => {
let eventsAssigned = false;
const [containerClasses, setContainerClasses] = createSignal('swiper');
const [virtualData, setVirtualData] = createSignal(null);
const [, setBreakpointChanged] = createSignal(false); // The variables bellow are mofied by SolidJS and can't be const
let initializedRef = false; // eslint-disable-line prefer-const
let swiperElRef = null; // eslint-disable-line prefer-const
let swiperRef = null; // eslint-disable-line prefer-const
let oldPassedParamsRef = null; // eslint-disable-line prefer-const
let oldSlides = null; // eslint-disable-line prefer-const
let nextElRef = null; // eslint-disable-line prefer-const
let prevElRef = null; // eslint-disable-line prefer-const
let paginationElRef = null; // eslint-disable-line prefer-const
let scrollbarElRef = null; // eslint-disable-line prefer-const
const [local, rest] = splitProps(props, ['children', 'class', 'onSwiper', 'ref', 'tag', 'wrapperTag']);
const params = createMemo(() => getParams(rest));
const slidesSlots = children(() => getChildren(local.children));
const onBeforeBreakpoint = () => {
setBreakpointChanged(state => !state);
};
Object.assign(params().params.on, {
_containerClasses(swiper, classes) {
setContainerClasses(classes);
}
});
const initSwiper = () => {
// init swiper
Object.assign(params().params.on, params().events);
eventsAssigned = true;
swiperRef = new SwiperCore(params().params);
swiperRef.loopCreate = () => {};
swiperRef.loopDestroy = () => {};
if (params().params.loop) {
swiperRef.loopedSlides = calcLoopedSlides(slidesSlots().slides, params().params);
}
if (swiperRef.virtual && swiperRef.params.virtual.enabled) {
swiperRef.virtual.slides = slidesSlots().slides;
const extendWith = {
cache: false,
slides: slidesSlots().slides,
renderExternal: data => {
setVirtualData(data);
},
renderExternalUpdate: true
};
extend(swiperRef.params.virtual, extendWith);
extend(swiperRef.originalParams.virtual, extendWith);
}
};
if (!swiperElRef) {
initSwiper();
} // Listen for breakpoints change
if (swiperRef) {
swiperRef.on('_beforeBreakpoint', onBeforeBreakpoint);
}
const attachEvents = () => {
if (eventsAssigned || !params().events || !swiperRef) return;
Object.keys(params().events).forEach(eventName => {
swiperRef.on(eventName, params().events[eventName]);
});
};
const detachEvents = () => {
if (!params().events || !swiperRef) return;
Object.keys(params().events).forEach(eventName => {
swiperRef.off(eventName, params().events[eventName]);
});
};
onCleanup(() => {
if (swiperRef) swiperRef.off('_beforeBreakpoint', onBeforeBreakpoint);
}); // set initialized flag
createEffect(() => {
if (!initializedRef && swiperRef) {
swiperRef.emitSlidesClasses();
initializedRef = true;
}
}); // mount swiper
onMount(() => {
if (local.ref) {
if (typeof local.ref === 'function') {
local.ref(swiperElRef);
} else {
local.ref = swiperElRef;
}
}
if (!swiperElRef) return;
if (swiperRef.destroyed) {
initSwiper();
}
mountSwiper({
el: swiperElRef,
nextEl: nextElRef,
prevEl: prevElRef,
paginationEl: paginationElRef,
scrollbarEl: scrollbarElRef,
swiper: swiperRef
}, params().params);
if (local.onSwiper) local.onSwiper(swiperRef);
});
onCleanup(() => {
if (swiperRef && !swiperRef.destroyed) {
swiperRef.destroy(true, false);
}
}); // watch for params change
createEffect(() => {
attachEvents();
const {
passedParams
} = params();
const changedParams = getChangedParams(passedParams, oldPassedParamsRef, slidesSlots().slides, oldSlides, c => c.key);
oldPassedParamsRef = passedParams;
oldSlides = slidesSlots().slides;
if (changedParams.length && swiperRef && !swiperRef.destroyed) {
updateSwiper({
swiper: swiperRef,
slides: slidesSlots().slides,
passedParams,
changedParams,
nextEl: nextElRef,
prevEl: prevElRef,
scrollbarEl: scrollbarElRef,
paginationEl: paginationElRef
});
}
onCleanup(detachEvents);
}); // update on virtual update
createEffect(() => {
updateOnVirtualData(swiperRef);
setTimeout(() => {
updateOnVirtualData(swiperRef);
});
}); // bypass swiper instance to slides
function renderSlides() {
if (params().params.virtual) {
return renderVirtual(swiperRef, slidesSlots().slides, virtualData());
}
if (!params().params.loop || swiperRef && swiperRef.destroyed) {
return slidesSlots().slides;
}
return renderLoop(swiperRef, slidesSlots().slides, params().params);
}
/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable react/no-unknown-property */
return (() => {
const _el$ = _tmpl$6.cloneNode(true);
const _ref$ = swiperElRef;
typeof _ref$ === "function" ? _ref$(_el$) : swiperElRef = _el$;
_$spread(_el$, () => params().rest, false, true);
_$insert(_el$, _$createComponent(SwiperContext.Provider, {
value: swiperRef,
get children() {
return [_$memo(() => slidesSlots().slots['container-start']), (() => {
const _el$2 = _tmpl$.cloneNode(true);
_$insert(_el$2, () => slidesSlots().slots['wrapper-start'], null);
_$insert(_el$2, renderSlides, null);
_$insert(_el$2, () => slidesSlots().slots['wrapper-end'], null);
return _el$2;
})(), _$createComponent(Show, {
get when() {
return needsNavigation(params().params);
},
get children() {
return [(() => {
const _el$3 = _tmpl$2.cloneNode(true);
const _ref$2 = prevElRef;
typeof _ref$2 === "function" ? _ref$2(_el$3) : prevElRef = _el$3;
return _el$3;
})(), (() => {
const _el$4 = _tmpl$3.cloneNode(true);
const _ref$3 = nextElRef;
typeof _ref$3 === "function" ? _ref$3(_el$4) : nextElRef = _el$4;
return _el$4;
})()];
}
}), _$createComponent(Show, {
get when() {
return needsScrollbar(params().params);
},
get children() {
const _el$5 = _tmpl$4.cloneNode(true);
const _ref$4 = scrollbarElRef;
typeof _ref$4 === "function" ? _ref$4(_el$5) : scrollbarElRef = _el$5;
return _el$5;
}
}), _$createComponent(Show, {
get when() {
return needsPagination(params().params);
},
get children() {
const _el$6 = _tmpl$5.cloneNode(true);
const _ref$5 = paginationElRef;
typeof _ref$5 === "function" ? _ref$5(_el$6) : paginationElRef = _el$6;
return _el$6;
}
}), _$memo(() => slidesSlots().slots['container-end'])];
}
}));
_$effect(() => _$className(_el$, uniqueClasses(`${containerClasses()}${local.class ? ` ${local.class}` : ''}`)));
return _el$;
})();
};
export { Swiper };
+247
View File
@@ -0,0 +1,247 @@
import {
createEffect,
createMemo,
createSignal,
onCleanup,
onMount,
Show,
splitProps,
children,
} from 'solid-js';
import SwiperCore from 'swiper';
import { SwiperContext } from './context.js';
import { getChangedParams } from '../components-shared/get-changed-params.js';
import { getChildren } from './get-children.js';
import { getParams } from '../components-shared/get-params.js';
import { calcLoopedSlides, renderLoop } from './loop.js';
import { mountSwiper } from '../components-shared/mount-swiper.js';
import { updateSwiper } from '../components-shared/update-swiper.js';
import {
extend,
needsNavigation,
needsPagination,
needsScrollbar,
uniqueClasses,
} from '../components-shared/utils.js';
import { renderVirtual } from './virtual.js';
import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
const Swiper = (props) => {
let eventsAssigned = false;
const [containerClasses, setContainerClasses] = createSignal('swiper');
const [virtualData, setVirtualData] = createSignal(null);
const [, setBreakpointChanged] = createSignal(false);
// The variables bellow are mofied by SolidJS and can't be const
let initializedRef = false; // eslint-disable-line prefer-const
let swiperElRef = null; // eslint-disable-line prefer-const
let swiperRef = null; // eslint-disable-line prefer-const
let oldPassedParamsRef = null; // eslint-disable-line prefer-const
let oldSlides = null; // eslint-disable-line prefer-const
let nextElRef = null; // eslint-disable-line prefer-const
let prevElRef = null; // eslint-disable-line prefer-const
let paginationElRef = null; // eslint-disable-line prefer-const
let scrollbarElRef = null; // eslint-disable-line prefer-const
const [local, rest] = splitProps(props, [
'children',
'class',
'onSwiper',
'ref',
'tag',
'wrapperTag',
]);
const params = createMemo(() => getParams(rest));
const slidesSlots = children(() => getChildren(local.children));
const onBeforeBreakpoint = () => {
setBreakpointChanged((state) => !state);
};
Object.assign(params().params.on, {
_containerClasses(swiper, classes) {
setContainerClasses(classes);
},
});
const initSwiper = () => {
// init swiper
Object.assign(params().params.on, params().events);
eventsAssigned = true;
swiperRef = new SwiperCore(params().params);
swiperRef.loopCreate = () => {};
swiperRef.loopDestroy = () => {};
if (params().params.loop) {
swiperRef.loopedSlides = calcLoopedSlides(slidesSlots().slides, params().params);
}
if (swiperRef.virtual && swiperRef.params.virtual.enabled) {
swiperRef.virtual.slides = slidesSlots().slides;
const extendWith = {
cache: false,
slides: slidesSlots().slides,
renderExternal: (data) => {
setVirtualData(data);
},
renderExternalUpdate: true,
};
extend(swiperRef.params.virtual, extendWith);
extend(swiperRef.originalParams.virtual, extendWith);
}
};
if (!swiperElRef) {
initSwiper();
}
// Listen for breakpoints change
if (swiperRef) {
swiperRef.on('_beforeBreakpoint', onBeforeBreakpoint);
}
const attachEvents = () => {
if (eventsAssigned || !params().events || !swiperRef) return;
Object.keys(params().events).forEach((eventName) => {
swiperRef.on(eventName, params().events[eventName]);
});
};
const detachEvents = () => {
if (!params().events || !swiperRef) return;
Object.keys(params().events).forEach((eventName) => {
swiperRef.off(eventName, params().events[eventName]);
});
};
onCleanup(() => {
if (swiperRef) swiperRef.off('_beforeBreakpoint', onBeforeBreakpoint);
});
// set initialized flag
createEffect(() => {
if (!initializedRef && swiperRef) {
swiperRef.emitSlidesClasses();
initializedRef = true;
}
});
// mount swiper
onMount(() => {
if (local.ref) {
if (typeof local.ref === 'function') {
local.ref(swiperElRef);
} else {
local.ref = swiperElRef;
}
}
if (!swiperElRef) return;
if (swiperRef.destroyed) {
initSwiper();
}
mountSwiper(
{
el: swiperElRef,
nextEl: nextElRef,
prevEl: prevElRef,
paginationEl: paginationElRef,
scrollbarEl: scrollbarElRef,
swiper: swiperRef,
},
params().params,
);
if (local.onSwiper) local.onSwiper(swiperRef);
});
onCleanup(() => {
if (swiperRef && !swiperRef.destroyed) {
swiperRef.destroy(true, false);
}
});
// watch for params change
createEffect(() => {
attachEvents();
const { passedParams } = params();
const changedParams = getChangedParams(
passedParams,
oldPassedParamsRef,
slidesSlots().slides,
oldSlides,
(c) => c.key,
);
oldPassedParamsRef = passedParams;
oldSlides = slidesSlots().slides;
if (changedParams.length && swiperRef && !swiperRef.destroyed) {
updateSwiper({
swiper: swiperRef,
slides: slidesSlots().slides,
passedParams,
changedParams,
nextEl: nextElRef,
prevEl: prevElRef,
scrollbarEl: scrollbarElRef,
paginationEl: paginationElRef,
});
}
onCleanup(detachEvents);
});
// update on virtual update
createEffect(() => {
updateOnVirtualData(swiperRef);
setTimeout(() => {
updateOnVirtualData(swiperRef);
});
});
// bypass swiper instance to slides
function renderSlides() {
if (params().params.virtual) {
return renderVirtual(swiperRef, slidesSlots().slides, virtualData());
}
if (!params().params.loop || (swiperRef && swiperRef.destroyed)) {
return slidesSlots().slides;
}
return renderLoop(swiperRef, slidesSlots().slides, params().params);
}
/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable react/no-unknown-property */
return (
<div
ref={swiperElRef}
class={uniqueClasses(`${containerClasses()}${local.class ? ` ${local.class}` : ''}`)}
{...params().rest}
>
<SwiperContext.Provider value={swiperRef}>
{slidesSlots().slots['container-start']}
<div class="swiper-wrapper">
{slidesSlots().slots['wrapper-start']}
{renderSlides()}
{slidesSlots().slots['wrapper-end']}
</div>
<Show when={needsNavigation(params().params)}>
<div ref={prevElRef} class="swiper-button-prev" />
<div ref={nextElRef} class="swiper-button-next" />
</Show>
<Show when={needsScrollbar(params().params)}>
<div ref={scrollbarElRef} class="swiper-scrollbar" />
</Show>
<Show when={needsPagination(params().params)}>
<div ref={paginationElRef} class="swiper-pagination" />
</Show>
{slidesSlots().slots['container-end']}
</SwiperContext.Provider>
</div>
);
};
export { Swiper };
+14
View File
@@ -0,0 +1,14 @@
function renderVirtual(swiper, slides, virtualData) {
if (!virtualData) return null;
const style = swiper.isHorizontal() ? {
[swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
} : {
top: `${virtualData.offset}px`
};
return slides.filter((child, index) => index >= virtualData.from && index <= virtualData.to).map(child => {
Object.assign(child.style, style);
return child;
});
}
export { renderVirtual };