feat(photo-browser): update to latest Swiper

framework7io · Dec 16, 2022 · b8dbe29 · b8dbe29
1 parent 03fa5d9
commit b8dbe29
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "path-to-regexp": "^6.2.0",
     "skeleton-elements": "^4.0.1",
     "ssr-window": "^4.0.2",
-    "swiper": "^9.0.0-beta.20"
+    "swiper": "^9.0.0-beta.21"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",

diff --git a/src/core/components/photo-browser/photo-browser-class.js b/src/core/components/photo-browser/photo-browser-class.js
@@ -68,11 +68,11 @@ class PhotoBrowser extends Framework7Class {
     }
 
     const $activeSlideEl = pb.params.virtualSlides
-      ? swiper.$wrapperEl.find(`.swiper-slide[data-swiper-slide-index="${swiper.activeIndex}"]`)
-      : swiper.slides.eq(swiper.activeIndex);
+      ? $(swiper.wrapperEl).find(`.swiper-slide[data-swiper-slide-index="${swiper.activeIndex}"]`)
+      : $(swiper.slides).eq(swiper.activeIndex);
     const $previousSlideEl = pb.params.virtualSlides
-      ? swiper.$wrapperEl.find(`.swiper-slide[data-swiper-slide-index="${swiper.previousIndex}"]`)
-      : swiper.slides.eq(swiper.previousIndex);
+      ? $(swiper.wrapperEl).find(`.swiper-slide[data-swiper-slide-index="${swiper.previousIndex}"]`)
+      : $(swiper.slides).eq(swiper.previousIndex);
 
     let $currentEl = pb.$el.find('.photo-browser-current');
     let $totalEl = pb.$el.find('.photo-browser-total');
@@ -134,9 +134,9 @@ class PhotoBrowser extends Framework7Class {
       swipeToClose.started = true;
       swipeToClose.start = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       if (pb.params.virtualSlides) {
-        swipeToClose.activeSlide = pb.swiper.$wrapperEl.children('.swiper-slide-active');
+        swipeToClose.activeSlide = $(pb.swiper.wrapperEl).children('.swiper-slide-active');
       } else {
-        swipeToClose.activeSlide = pb.swiper.slides.eq(pb.swiper.activeIndex);
+        swipeToClose.activeSlide = $(pb.swiper.slides).eq(pb.swiper.activeIndex);
       }
       swipeToClose.timeStart = now();
     }
@@ -288,7 +288,7 @@ class PhotoBrowser extends Framework7Class {
       >
         <div class="swiper-lazy-preloader"></div>
         <span class="swiper-zoom-container">
-          <img data-src={photo.url ? photo.url : photo} class="swiper-lazy" />
+          <img loading="lazy" src={photo.url ? photo.url : photo} />
         </span>
       </div>
     );
@@ -342,10 +342,7 @@ class PhotoBrowser extends Framework7Class {
                     ) {
                       return pb.renderObject(photo, index);
                     }
-                    if (
-                      pb.params.swiper.lazy === true ||
-                      (pb.params.swiper.lazy && pb.params.swiper.lazy.enabled)
-                    ) {
+                    if (pb.params.lazy === true) {
                       return pb.renderLazyPhoto(photo, index);
                     }
                     return pb.renderPhoto(photo, index);
@@ -405,10 +402,10 @@ class PhotoBrowser extends Framework7Class {
 
     const swiperParams = extend({}, pb.params.swiper, {
       initialSlide: pb.activeIndex,
-      cssMode:
-        typeof pb.params.swiper.cssMode === 'undefined' && (app.device.ios || app.device.android)
-          ? true
-          : pb.params.swiper.cssMode,
+      // cssMode:
+      //   typeof pb.params.swiper.cssMode === 'undefined' && (app.device.ios || app.device.android)
+      //     ? true
+      //     : pb.params.swiper.cssMode,
       on: {
         click(e) {
           clearTimeout(clickTimeout);
@@ -444,14 +441,6 @@ class PhotoBrowser extends Framework7Class {
         slideChangeTransitionEnd(...args) {
           pb.emit('local::slideChangeTransitionEnd', ...args);
         },
-        lazyImageLoad(...args) {
-          pb.emit('local::lazyImageLoad', ...args);
-        },
-        lazyImageReady(...args) {
-          const slideEl = args[0];
-          $(slideEl).removeClass('photo-browser-slide-lazy');
-          pb.emit('local::lazyImageReady', ...args);
-        },
       },
     });
     if (pb.params.swipeToClose && pb.params.type !== 'page') {
@@ -483,10 +472,7 @@ class PhotoBrowser extends Framework7Class {
             ) {
               return pb.renderObject(photo, index);
             }
-            if (
-              pb.params.swiper.lazy === true ||
-              (pb.params.swiper.lazy && pb.params.swiper.lazy.enabled)
-            ) {
+            if (pb.params.lazy === true) {
               return pb.renderLazyPhoto(photo, index);
             }
             return pb.renderPhoto(photo, index);
@@ -496,10 +482,10 @@ class PhotoBrowser extends Framework7Class {
     }
     const window = getWindow();
     pb.swiper = app.swiper
-      ? app.swiper.create(pb.$swiperContainerEl, swiperParams)
-      : new window.Swiper(pb.$swiperContainerEl, swiperParams);
+      ? app.swiper.create(pb.$swiperContainerEl[0], swiperParams)
+      : new window.Swiper(pb.$swiperContainerEl[0], swiperParams);
 
-    if (pb.activeIndex === 0) {
+    if (pb.activeIndex === 0 || pb.params.virtualSlides) {
       pb.onSlideChange(pb.swiper);
     }
     if (pb.$el) {

diff --git a/src/core/components/photo-browser/photo-browser.d.ts b/src/core/components/photo-browser/photo-browser.d.ts
@@ -56,6 +56,8 @@ export namespace PhotoBrowser {
     swiper?: object;
     /** When enabled then Swiper will use Virtual Slides (default true) */
     virtualSlides?: boolean;
+    /** Enables lazy loading images (default true) */
+    lazy?: boolean;
 
     /** Function to render navbar, must return navbar HTML string */
     renderNavbar?: () => string;
@@ -132,10 +134,6 @@ export namespace PhotoBrowser {
     slideChangeTransitionStart: (photoBrowser: PhotoBrowser) => void;
     /** Event will be fired after animation to other slide (next or previous) */
     slideChangeTransitionEnd: (photoBrowser: PhotoBrowser) => void;
-    /** Event will be fired in the beginning of lazy loading of image */
-    lazyImageLoad: (photoBrowser: PhotoBrowser) => void;
-    /** Event will be fired when lazy loading image will be loaded */
-    lazyImageReady: (photoBrowser: PhotoBrowser) => void;
     /** Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments */
     touchStart: (photoBrowser: PhotoBrowser) => 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 */

diff --git a/src/core/components/photo-browser/photo-browser.js b/src/core/components/photo-browser/photo-browser.js
@@ -24,6 +24,7 @@ export default {
       url: 'photos/',
       routableModals: false,
       virtualSlides: true,
+      lazy: true,
 
       renderNavbar: undefined,
       renderToolbar: undefined,
@@ -40,7 +41,6 @@ export default {
         spaceBetween: 20,
         speed: 300,
         loop: false,
-        preloadImages: true,
         keyboard: {
           enabled: true,
         },
@@ -53,9 +53,6 @@ export default {
           maxRatio: 3,
           minRatio: 1,
         },
-        lazy: {
-          enabled: true,
-        },
       },
     },
   },