framework7 - npm Package Compare versions

Comparing version 8.0.0-beta.6 to 8.0.0-beta.7

components/photo-browser/photo-browser-class.js

@@ -188,3 +188,3 @@ /* eslint indent: ["off"] */
       class: "photo-browser-total"
-    })), isPopup && $jsx("div", {
+    })), isPopup && (pb.params.popupCloseLinkText || pb.params.popupCloseLinkIcon) && $jsx("div", {
       class: "right"
@@ -194,3 +194,22 @@ }, $jsx("a", {
       "data-popup": ".photo-browser-popup"
-    }, $jsx("span", null, pb.params.popupCloseLinkText)))));
+    }, pb.params.popupCloseLinkIcon && pb.app.theme === 'ios' && $jsx("i", null, $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56"
+    }, $jsx("path", {
+      fill: "currentColor",
+      d: "M 10.0234 43.0234 C 9.2266 43.8203 9.2031 45.1797 10.0234 45.9766 C 10.8438 46.7734 12.1797 46.7734 13.0000 45.9766 L 28.0000 30.9766 L 43.0000 45.9766 C 43.7969 46.7734 45.1563 46.7969 45.9766 45.9766 C 46.7734 45.1562 46.7734 43.8203 45.9766 43.0234 L 30.9531 28.0000 L 45.9766 13.0000 C 46.7734 12.2031 46.7969 10.8437 45.9766 10.0469 C 45.1328 9.2266 43.7969 9.2266 43.0000 10.0469 L 28.0000 25.0469 L 13.0000 10.0469 C 12.1797 9.2266 10.8203 9.2031 10.0234 10.0469 C 9.2266 10.8672 9.2266 12.2031 10.0234 13.0000 L 25.0234 28.0000 Z"
+    }))), pb.params.popupCloseLinkIcon && pb.app.theme === 'md' && $jsx("i", null, $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24px",
+      viewBox: "0 0 24 24",
+      width: "24px",
+      fill: "currentColor"
+    }, $jsx("path", {
+      d: "M0 0h24v24H0V0z",
+      fill: "none"
+    }), $jsx("path", {
+      d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+    }))), pb.params.popupCloseLinkText && $jsx("span", null, pb.params.popupCloseLinkText)))));
   }
@@ -215,2 +234,12 @@ renderToolbar() {
   }
+  renderThumbs() {
+    const pb = this;
+    return $jsx("div", {
+      class: "toolbar toolbar-bottom photo-browser-thumbs"
+    }, $jsx("div", {
+      class: "swiper"
+    }, $jsx("div", {
+      class: "swiper-wrapper"
+    }, pb.params.thumbs.map((thumb, index) => pb.renderThumb(thumb, index)))));
+  }
   renderCaption(caption, index) {
@@ -259,2 +288,14 @@ const pb = this;
   }
+  renderThumb(thumb, index) {
+    const pb = this;
+    const url = typeof thumb === 'string' ? thumb : thumb.url;
+    if (pb.params.renderThumb) return pb.params.renderThumb.call(pb, thumb, index);
+    return $jsx("div", {
+      class: "photo-browser-thumbs-slide swiper-slide",
+      "data-swiper-slide-index": index
+    }, url && $jsx("img", {
+      src: url,
+      loading: "lazy"
+    }));
+  }
   render() {
@@ -270,3 +311,3 @@ const pb = this;
       "data-name": "photo-browser-page"
-    }, pb.params.navbar && pb.renderNavbar(), pb.params.toolbar && pb.renderToolbar(), $jsx("div", {
+    }, pb.params.navbar && pb.renderNavbar(), pb.params.toolbar && pb.renderToolbar(), pb.params.thumbs && pb.params.thumbs.length && pb.renderThumbs(), $jsx("div", {
       class: `photo-browser-captions photo-browser-captions-${pb.params.captionsTheme || pb.params.theme}`
@@ -324,7 +365,11 @@ }, pb.params.photos.map((photo, index) => {
     pb.captions = pb.$el.find('.photo-browser-caption');
+    const hasThumbs = pb.params.thumbs && pb.params.thumbs.length > 0;
 
     // Init Swiper
     let clickTimeout;
+    let preventThumbsSlide;
+    let preventMainSlide;
+    const initialSlide = pb.activeIndex;
     const swiperParams = extend({}, pb.params.swiper, {
-      initialSlide: pb.activeIndex,
+      initialSlide,
       // cssMode:
@@ -352,2 +397,9 @@ //   typeof pb.params.swiper.cssMode === 'undefined' && (app.device.ios || app.device.android)
           const swiper = this;
+          if (hasThumbs && pb.thumbsSwiper && !preventMainSlide) {
+            preventThumbsSlide = true;
+            pb.thumbsSwiper.slideTo(pb.swiper.activeIndex);
+            setTimeout(() => {
+              preventThumbsSlide = false;
+            });
+          }
           pb.onSlideChange(swiper);
@@ -424,2 +476,30 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     }
+    if (hasThumbs) {
+      const thumbsSwiperParams = {
+        el: pb.$el.find('.photo-browser-thumbs .swiper')[0],
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: 4,
+        watchSlidesProgress: true,
+        initialSlide,
+        on: {
+          touchMove() {
+            preventMainSlide = true;
+          },
+          touchEnd() {
+            preventMainSlide = false;
+          },
+          slideChange(s) {
+            if (preventThumbsSlide) return;
+            pb.swiper.slideTo(s.activeIndex, 0);
+          },
+          click(s) {
+            if (!s.clickedSlide) return;
+            const index = parseInt($(s.clickedSlide).attr('data-swiper-slide-index'), 10);
+            s.slideTo(index, 0);
+          }
+        }
+      };
+      pb.thumbsSwiper = app.swiper ? app.swiper.create(thumbsSwiperParams) : new window.Swiper(thumbsSwiperParams);
+    }
     if (pb.$el) {
@@ -450,2 +530,7 @@ pb.$el.trigger('photobrowser:open');
     }
+    if (pb.thumbsSwiper && pb.thumbsSwiper.destroy) {
+      pb.thumbsSwiper.destroy(true, false);
+      pb.thumbsSwiper = null;
+      delete pb.thumbsSwiper;
+    }
     if (pb.$el) {
@@ -452,0 +537,0 @@ pb.$el.trigger('photobrowser:close');

components/photo-browser/photo-browser.d.ts

@@ -21,2 +21,4 @@ import { Dom7Array } from 'dom7';
     photos?: Photo[] | string[];
+    /** Array with URLs of thumbs. If not specified or empty array will not render thumbs */
+    thumbs?: string[];
     /** Enable disable exposition mode when clicking on Photo Browser. (default true) */
@@ -48,3 +50,5 @@ exposition?: boolean;
     pageBackLinkText?: string;
-    /** Text on close link in Photo Browser's navbar when opened in Popup or as Standalone (default "Close") */
+    /** Close icon (x mark) in Photo Browser's navbar when opened in Popup or as Standalone (default true) */
+    popupCloseLinkIcon?: boolean;
+    /** Text on close link in Photo Browser's navbar when opened in Popup or as Standalone (default undefined) */
     popupCloseLinkText?: string;
@@ -78,2 +82,4 @@ /** Text of "of" in photos counter: "3 of 5" (default "of") */
     renderPhoto?: (photo: Photo | string, index: number) => string;
+    /** Function to render thumb image as a swiper slide, must return slide HTML string */
+    renderThumb?: (thumbUrl: string, index: number) => string;
     /** Function to render photobrowser page, must return full page HTML layout string */
@@ -80,0 +86,0 @@ renderPage?: () => string;

components/photo-browser/photo-browser.js

@@ -8,2 +8,3 @@ import PhotoBrowser from './photo-browser-class.js';
       photos: [],
+      thumbs: [],
       exposition: true,
@@ -20,3 +21,4 @@ expositionHideCaptions: false,
       pageBackLinkText: 'Back',
-      popupCloseLinkText: 'Close',
+      popupCloseLinkText: undefined,
+      popupCloseLinkIcon: true,
       navbarOfText: 'of',
@@ -36,2 +38,3 @@ navbarShowCount: undefined,
       renderPhoto: undefined,
+      renderThumb: undefined,
       renderPage: undefined,
@@ -38,0 +41,0 @@ renderPopup: undefined,

framework7-bundle.esm.js

 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite-bundle.esm.js

 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
@@ -13,0 +13,0 @@

framework7-lite.esm.js

 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
@@ -13,0 +13,0 @@

framework7.esm.js

 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
@@ -10,3 +10,3 @@ * https://framework7.io/
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
@@ -13,0 +13,0 @@

package.json

 {
   "name": "framework7",
-  "version": "8.0.0-beta.6",
+  "version": "8.0.0-beta.7",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
@@ -439,3 +439,3 @@ "type": "module",
   },
-  "releaseDate": "March 24, 2023"
+  "releaseDate": "March 27, 2023"
 }

No alert changes

Improved metrics

Total package byte prevSize

14206974

increased by0.29%

Lines of code

139369

increased by0.25%

No dependency changes