astro-swiper 2.0.0 → 2.1.1

package/README.md

@@ -91,6 +91,35 @@ Please check the [online doc](https://pascal-brand38.github.io/astro-dev/package
 
 Full code is provided.
 
+You can also look at how others are using ```astro-swiper``` in public github repo:
+* the famous astro template [astroplate](https://github.com/zeon-studio/astroplate) in the
+  [testominial section](https://zeon.studio/preview?project=astroplate)
+  (cf. ***What Users Are Saying About Astroplate***):
+  autoplay, pagination and breakpoints are used
+* the popular astro template [pinwheel-astro](https://github.com/themefisher/pinwheel-astro)
+  is using ```astro-swiper``` in several places:
+  [testimonial section](https://pinwheel-astro.vercel.app/),
+  [signin](https://pinwheel-astro.vercel.app/signin),
+  [password reset](https://pinwheel-astro.vercel.app/password-reset) and
+  [signup](https://pinwheel-astro.vercel.app/signup) pages. Pagination and
+  breakpoints are used.
+* the well-known astro template [hello-astro](https://github.com/hellotham/hello-astro)
+  uses swiper in the [carousel page](https://hellotham.github.io/hello-astro/carousel/)
+  as well as in [blog article](https://hellotham.github.io/hello-astro/blog/2022-08-19-sample-carousel/).
+  It makes use of navigation arrow, pagination and autoplay.
+* [bigspring-light-astro](https://github.com/themefisher/bigspring-light-astro) astro theme is
+  also using ```astro-swiper``` in several places in the
+  [main page](https://tf-bigspring-light-astro.vercel.app/) with customized pagination.
+* [Women Techmakers organized by GDG Madrid](https://github.com/wtmgdgmadrid/wtmgdgmadrid.github.io)
+  is using pagination and autoplay at different places in their
+  [page](http://wtmgdgmadrid.github.io/)
+* [kando-menu](https://github.com/make-42/kando-menu.github.io) is using ```astro-swiper```
+  with pagination, card effect, and coverflow effect as displayed in [kando.menu](https://kando.menu/)
+* [astroimagej](https://github.com/AstroImageJ/astroimagej) is using pagination with progress bar
+* ... and many others such as
+[Cinerama](https://github.com/RaiderMr3003/Cinerama) and
+[pfm-landing-page](https://github.com/RichardAgain/pfm-landing-page)
+using ```astro-swiper``` in the hero section
 
 # Support astro-swiper
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-swiper",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide, including thumbnails",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "bugs": {
     "url": "https://github.com/pascal-brand38/astro-swiper/issues"
   },
-  "homepage": "https://pascal-brand38.github.io/astro-dev/packages/astro-swiper/",
+  "homepage": "https://github.com/pascal-brand38/astro-swiper",
   "exports": "./index.ts",
   "files": [
     "index.ts",

package/src/components/Swiper.astro

@@ -13,19 +13,34 @@ const {
   class: className = null,
   linkToThumbUniqueClass = null,
   addDefaultClass = true,
+  useCustomElement = true,
   ...props
 } = Astro.props;
 ---
 
 <!-- Slider main container -->
-<div class:list={[addDefaultClass ? 'swiper' : '', uniqueClass, className]} {...props} >
-  <astro-swiper
-    data-options={JSON.stringify(options)}
-    data-linktothumbuniqueclass={linkToThumbUniqueClass}
-    data-uniqueclass={uniqueClass}
-  />
-  <slot />
-</div>
+{
+  useCustomElement ? (
+    <astro-swiper
+      data-options={JSON.stringify(options)}
+      data-linktothumbuniqueclass={linkToThumbUniqueClass}
+      data-uniqueclass={uniqueClass}
+      class:list={[addDefaultClass ? 'swiper' : '', uniqueClass, className]}
+      {...props}
+    >
+      <slot />
+    </astro-swiper>
+  ) : (
+    <div class:list={[addDefaultClass ? 'swiper' : '', uniqueClass, className]} {...props} >
+      <astro-swiper
+        data-options={JSON.stringify(options)}
+        data-linktothumbuniqueclass={linkToThumbUniqueClass}
+        data-uniqueclass={uniqueClass}
+      />
+      <slot />
+    </div>
+  )
+}
 
 <script>
   import Swiper from 'swiper/bundle';

package/src/index.ts

@@ -28,6 +28,15 @@ export interface AstroSwiperType extends HTMLAttributes<'div'> {
 
   /** add the default swiper class, true by default */
   addDefaultClass?: boolean;
+
+  /** useCustomElement, if true, the component will be rendered as a custom element, otherwise as a div.
+   * This option is true by default to keep legacy.
+   * It is there to be as close as possible to the original swiper structure, that is a div with class "swiper"
+   * and not a custom element.
+   * It is also to avoid issues with some swiper modules that are looking for the "swiper" class on the parent
+   * element, and not on the custom element.
+   */
+  useCustomElement?: boolean;
 }
 
 /** astro components exported, used to create a swiper */
@@ -57,5 +66,26 @@ export function getSwiperFromUniqueClass(uniqueClass: string): Swiper | undefine
  *          const swiper = getSwiperFromUniqueSelector('#my-unique-id')
  */
 export function getSwiperFromUniqueSelector(uniqueSelector: string): Swiper | undefined {
-  return (document.querySelector(uniqueSelector)?.firstElementChild as AstroSwiper)?.astroSwiper;
+  let swiperEl: AstroSwiper = document.querySelector(uniqueSelector) as AstroSwiper;
+  if (!swiperEl) {
+    console.warn(`astro-swiper: no element found with unique selector "${uniqueSelector}"`);
+    return undefined;
+  }
+  if (swiperEl.astroSwiper) {
+    // this is the custom element that contains the swiper instance, return it
+    return swiperEl.astroSwiper;
+  }
+
+  // this a div, with 1st child being the custom element that contains the swiper instance
+  swiperEl = swiperEl.firstElementChild as AstroSwiper;
+  if (!swiperEl) {
+    console.warn(`astro-swiper: no element found with unique selector "${uniqueSelector}"`);
+    return undefined;
+  }
+  if (swiperEl.astroSwiper) {
+    return swiperEl.astroSwiper;
+  }
+
+  console.warn(`astro-swiper: no element found with unique selector "${uniqueSelector}"`);
+  return undefined;
 }