astro-swiper 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-swiper",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide",
   "main": "index.js",
   "repository": {

package/src/components/Swiper.astro

@@ -4,7 +4,7 @@
 
 import 'swiper/css/bundle'
 
-import type { AstroSwiperType } from './index'
+import type { AstroSwiperType } from '../index'
 
 type Props = AstroSwiperType
 
@@ -12,39 +12,73 @@ type Props = AstroSwiperType
 const {
   options={},
   class: className = '',
+  uniqueClass = 'astro-swiper-' + Math.random().toString(36).slice(2, 11),
+  linkToThumbUniqueClass = '',
   ...props
 } = Astro.props;
 
-const swiperId = 'astro-swiper-' + Math.random().toString(36).slice(2, 11)
-
 ---
 
 <!-- Slider main container -->
 <astro-swiper
-  class={`swiper ${swiperId} ${className}`}
+  class={`swiper ${uniqueClass} ${className}`}
   {...props}
   data-options={JSON.stringify(options)}
-  data-id={swiperId}>
+  data-linktothumbuniqueclass={linkToThumbUniqueClass}
+  data-uniqueclass={uniqueClass}
+  >
     <slot/>
 </astro-swiper>
 
 
 <script>
   import Swiper from 'swiper/bundle'
-  import { register } from 'swiper/element/bundle';
-
+  import { useSwiper, useOptions, useDelaySwiper } from '../index'
 
   class AstroSwiper extends HTMLElement {
     constructor() {
       super();
-  register();
-
 
       // Read the message from the data attribute.
-      const options = JSON.parse(this.dataset.options || '')
-      const id = this.dataset.id    // to have more than 1 swiper in a single page
-
-      const swiper = new Swiper(`.${id}`, options)
+      const options = JSON.parse(this.dataset.options || '{}')
+      const uniqueClass = this.dataset.uniqueclass || ''   // to have more than 1 swiper in a single page
+      const linkToThumbUniqueClass = this.dataset.linktothumbuniqueclass || ''
+      // if (thumbOf !== '') {
+      //   options.thumbs = { swiper: useSwiper[thumbOf], ...options.thumbs }
+      //   console.log(options.thumbs)
+      //   console.log('Thumb is set to ')
+      //   console.log(useSwiper[thumbOf])
+      // }
+
+      if (linkToThumbUniqueClass === '') {
+        const swiper = new Swiper(`.${uniqueClass}`, options)
+        useSwiper[uniqueClass] = swiper
+      } else {
+        if (useSwiper[linkToThumbUniqueClass] !== undefined) {
+          options.thumbs = { swiper: useSwiper[linkToThumbUniqueClass], ...options.thumbs }
+          const swiper = new Swiper(`.${uniqueClass}`, options)
+          useSwiper[uniqueClass] = swiper
+        } else {
+          // cannot create the swiper as the thumbnail swiper not created yet
+          // will be done later
+          useDelaySwiper[uniqueClass] = linkToThumbUniqueClass
+        }
+      }
+
+      useOptions[uniqueClass] = options
+
+      // look if any delay swiper can be created
+      Object.keys(useDelaySwiper).forEach(delayedClass => {
+        const delayedThumbClass = useDelaySwiper[delayedClass]
+        if (useSwiper[delayedThumbClass] !== undefined) {
+          const delayedOptions = useOptions[delayedClass]
+          delayedOptions.thumbs = { swiper: useSwiper[delayedThumbClass], ...delayedOptions.thumbs }
+          const swiper = new Swiper(`.${delayedClass}`, delayedOptions)
+          useSwiper[delayedClass] = swiper
+          useOptions[delayedClass] = delayedOptions
+          delete useDelaySwiper[delayedClass]
+        }
+      })
     }
   }
 

package/src/index.ts

@@ -1,12 +1,14 @@
 // Copyright (c) Pascal Brand
 // MIT License
 
-import type { SwiperOptions } from 'swiper/types'
+import type { Swiper, SwiperOptions } from 'swiper/types'
 
 import type { HTMLAttributes } from 'astro/types'
 
 export interface AstroSwiperType extends HTMLAttributes<"div"> {
   options?: SwiperOptions,
+  uniqueClass?: string,
+  linkToThumbUniqueClass?: string,
 }
 
 export { default as Swiper } from './components/Swiper.astro'
@@ -16,3 +18,7 @@ export { default as SwiperPagination } from './components/SwiperPagination.astro
 export { default as SwiperScrollbar } from './components/SwiperScrollbar.astro'
 export { default as SwiperSlide } from './components/SwiperSlide.astro'
 export { default as SwiperWrapper } from './components/SwiperWrapper.astro'
+
+export const useSwiper: { [className: string] : Swiper; } = {};
+export const useOptions: { [className: string] : SwiperOptions; } = {};
+export const useDelaySwiper: { [className: string] : string; } = {};