framework7 8.0.0-beta.6 → 8.0.0-beta.7

package/framework7-bundle.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
 
 /*====================
@@ -17216,11 +17216,10 @@ swiper-container .swiper-notification {
   --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
   --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
   --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
-  --f7-photobrowser-caption-font-size: 14px;
+  --f7-photobrowser-caption-font-size: 13px;
+  --f7-photobrowser-caption-font-weight: 500;
   --f7-photobrowser-caption-light-text-color: #000;
-  --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
   --f7-photobrowser-caption-dark-text-color: #fff;
-  --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
   --f7-photobrowser-exposed-bg-color: #000;
   --f7-photobrowser-dark-bg-color: #000;
   --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
@@ -17249,7 +17248,6 @@ swiper-container .swiper-notification {
 }
 .photo-browser-standalone.photo-browser-transitioning {
   transition: 400ms;
-  transition-property: transform;
   animation: none !important;
 }
 .photo-browser-popup.modal-out.swipe-close-to-bottom,
@@ -17282,11 +17280,28 @@ swiper-container .swiper-notification {
   bottom: var(--f7-safe-area-bottom);
   z-index: 10;
   opacity: 1;
-  transition: 400ms;
+  transition-duration: 400ms;
 }
 .photo-browser-captions.photo-browser-captions-exposed {
   opacity: 0;
 }
+.toolbar ~ .toolbar.photo-browser-thumbs {
+  bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+}
+.page ~ .photo-browser-page:not(.photo-browser-exposed) .toolbar ~ .toolbar.photo-browser-thumbs,
+.photo-browser-popup:not(.photo-browser-exposed) .toolbar ~ .toolbar.photo-browser-thumbs,
+.photo-browser-standalone:not(.photo-browser-exposed) .toolbar ~ .toolbar.photo-browser-thumbs {
+  height: var(--f7-toolbar-height);
+}
+.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs {
+  transform: translate3d(0, calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom, 0)), 0);
+}
+.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs .swiper {
+  height: calc(100% - var(--f7-safe-area-bottom, 0));
+}
+.navbar + .toolbar.photo-browser-thumbs .swiper {
+  height: calc(100% - var(--f7-safe-area-bottom, 0));
+}
 .toolbar ~ .photo-browser-captions {
   bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
   transform: translate3d(0, 0px, 0);
@@ -17294,9 +17309,45 @@ swiper-container .swiper-notification {
 .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
   transform: translate3d(0, 0px, 0);
 }
+.toolbar ~ .toolbar ~ .photo-browser-captions {
+  bottom: calc(var(--f7-toolbar-height) * 2 + var(--f7-safe-area-bottom));
+}
+.toolbar ~ .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
+  transform: translate3d(0, var(--f7-toolbar-height), 0);
+}
+.photo-browser-thumbs {
+  transition-property: transform, background-color, color;
+}
+.photo-browser-thumbs .swiper {
+  width: 100%;
+  height: 100%;
+}
+.photo-browser-thumbs .swiper-slide {
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.photo-browser-thumbs img {
+  width: auto;
+  height: 75%;
+  display: block;
+  border-radius: 2px;
+  min-width: 4px;
+}
+.photo-browser-thumbs .swiper-slide img {
+  transform: translateX(-4px);
+  transition-duration: 150ms;
+}
+.photo-browser-thumbs .swiper-slide-active img {
+  transform: scale(1.2);
+}
+.photo-browser-thumbs .swiper-slide-active ~ .swiper-slide img {
+  transform: translateX(4px);
+}
 .photo-browser-caption {
   box-sizing: border-box;
-  transition: 300ms;
+  transition-duration: 400ms;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -17305,6 +17356,13 @@ swiper-container .swiper-notification {
   width: 100%;
   text-align: center;
   font-size: var(--f7-photobrowser-caption-font-size);
+  font-weight: var(--f7-photobrowser-caption-font-weight);
+}
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+  .ios-translucent-bars .photo-browser-caption {
+    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+            backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+  }
 }
 .photo-browser-caption:empty {
   display: none;
@@ -17314,11 +17372,10 @@ swiper-container .swiper-notification {
 }
 .photo-browser-captions-light .photo-browser-caption {
   color: var(--f7-photobrowser-caption-light-text-color);
-  background: var(--f7-photobrowser-caption-light-bg-color);
 }
-.photo-browser-captions-dark .photo-browser-caption {
+.photo-browser-captions-dark .photo-browser-caption,
+.dark .photo-browser-caption {
   color: var(--f7-photobrowser-caption-dark-text-color);
-  background: var(--f7-photobrowser-caption-dark-bg-color);
 }
 .photo-browser-swiper-container {
   position: absolute;
@@ -17330,6 +17387,7 @@ swiper-container .swiper-notification {
   background: var(--f7-photobrowser-bg-color);
   transition: 400ms;
   transition-property: background-color;
+  touch-action: pan-x pan-y;
 }
 .photo-browser-prev.swiper-button-disabled,
 .photo-browser-next.swiper-button-disabled {
@@ -17386,15 +17444,25 @@ swiper-container .swiper-notification {
   left: 50%;
   top: 50%;
 }
+.navbar-photo-browser .right .link svg,
+.navbar-photo-browser .right .link i {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
 .photo-browser-page .navbar-bg,
 .navbar-photo-browser .navbar-bg,
-.photo-browser-page .toolbar {
+.photo-browser-page .toolbar,
+.photo-browser-caption {
   background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
 }
+.photo-browser-page {
+  touch-action: manipulation;
+}
 .photo-browser-page .navbar,
 .photo-browser-page .toolbar {
   transform: translate3d(0, 0, 0);
-  transition: 400ms;
+  transition-duration: 400ms;
   color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
 }
 .photo-browser-page .navbar a,
@@ -17402,36 +17470,45 @@ swiper-container .swiper-notification {
   color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
 }
 .photo-browser-exposed .navbar,
-.photo-browser-exposed .toolbar {
+.photo-browser-exposed .toolbar:not(.photo-browser-thumbs) {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }
-.photo-browser-exposed .toolbar ~ .photo-browser-captions {
+.photo-browser-exposed .toolbar:not(.photo-browser-thumbs) ~ .photo-browser-captions,
+.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs ~ .photo-browser-captions {
   transform: translate3d(0, var(--f7-toolbar-height), 0);
 }
 .photo-browser-exposed .photo-browser-swiper-container {
   background: var(--f7-photobrowser-exposed-bg-color);
 }
-.photo-browser-exposed .photo-browser-caption {
+.photo-browser-exposed .photo-browser-thumbs,
+.photo-browser-dark .photo-browser-thumbs,
+.photo-browser-exposed .toolbar,
+.photo-browser-dark .toolbar {
+  background-color: var(--f7-photobrowser-dark-bars-bg-color);
+}
+.photo-browser-exposed .photo-browser-caption,
+.photo-browser-dark .photo-browser-caption {
   color: var(--f7-photobrowser-caption-dark-text-color);
-  background: var(--f7-photobrowser-caption-dark-bg-color);
+  background-color: var(--f7-photobrowser-dark-bars-bg-color);
 }
 .view.with-photo-browser-page-exposed .navbar {
   opacity: 0;
   pointer-events: none;
 }
+.photo-browser-page .toolbar:before,
+.photo-browser-page .toolbar:after {
+  display: none !important;
+}
 .photo-browser-page-dark .navbar-bg,
-.navbar-photo-browser-dark .navbar-bg,
-.photo-browser-page-dark .toolbar {
+.navbar-photo-browser-dark .navbar-bg {
   background: var(--f7-photobrowser-dark-bars-bg-color);
 }
 .photo-browser-page-dark .navbar-bg:before,
 .navbar-photo-browser-dark .navbar-bg:before,
-.photo-browser-page-dark .toolbar:before,
 .photo-browser-page-dark .navbar-bg:after,
-.navbar-photo-browser-dark .navbar-bg:after,
-.photo-browser-page-dark .toolbar:after {
+.navbar-photo-browser-dark .navbar-bg:after {
   display: none !important;
 }
 .navbar-photo-browser-dark,

package/framework7-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
 
 import $ from './shared/dom7.js';

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.6
+ * Framework7 8.0.0-beta.7
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 24, 2023
+ * Released on: March 27, 2023
  */
 
 (function (global, factory) {
@@ -39931,12 +39931,31 @@
           class: "photo-browser-of"
         }, pb.params.navbarOfText), $jsx$1("span", {
           class: "photo-browser-total"
-        })), isPopup && $jsx$1("div", {
+        })), isPopup && (pb.params.popupCloseLinkText || pb.params.popupCloseLinkIcon) && $jsx$1("div", {
           class: "right"
         }, $jsx$1("a", {
           class: "link popup-close",
           "data-popup": ".photo-browser-popup"
-        }, $jsx$1("span", null, pb.params.popupCloseLinkText)))));
+        }, pb.params.popupCloseLinkIcon && pb.app.theme === 'ios' && $jsx$1("i", null, $jsx$1("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "56",
+          height: "56",
+          viewBox: "0 0 56 56"
+        }, $jsx$1("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$1("i", null, $jsx$1("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          height: "24px",
+          viewBox: "0 0 24 24",
+          width: "24px",
+          fill: "currentColor"
+        }, $jsx$1("path", {
+          d: "M0 0h24v24H0V0z",
+          fill: "none"
+        }), $jsx$1("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$1("span", null, pb.params.popupCloseLinkText)))));
       }
       renderToolbar() {
         const pb = this;
@@ -39956,6 +39975,16 @@
           class: `icon icon-forward ${iconsColor ? `color-${iconsColor}` : ''}`
         }))));
       }
+      renderThumbs() {
+        const pb = this;
+        return $jsx$1("div", {
+          class: "toolbar toolbar-bottom photo-browser-thumbs"
+        }, $jsx$1("div", {
+          class: "swiper"
+        }, $jsx$1("div", {
+          class: "swiper-wrapper"
+        }, pb.params.thumbs.map((thumb, index) => pb.renderThumb(thumb, index)))));
+      }
       renderCaption(caption, index) {
         const pb = this;
         if (pb.params.renderCaption) return pb.params.renderCaption.call(pb, caption, index);
@@ -39999,6 +40028,18 @@
           src: photo.url ? photo.url : photo
         })));
       }
+      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$1("div", {
+          class: "photo-browser-thumbs-slide swiper-slide",
+          "data-swiper-slide-index": index
+        }, url && $jsx$1("img", {
+          src: url,
+          loading: "lazy"
+        }));
+      }
       render() {
         const pb = this;
         if (pb.params.render) return pb.params.render.call(pb, pb.params);
@@ -40009,7 +40050,7 @@
         }, $jsx$1("div", {
           class: `page photo-browser-page photo-browser-page-${pb.params.theme} no-toolbar ${!pb.params.navbar ? 'no-navbar' : ''}`,
           "data-name": "photo-browser-page"
-        }, pb.params.navbar && pb.renderNavbar(), pb.params.toolbar && pb.renderToolbar(), $jsx$1("div", {
+        }, pb.params.navbar && pb.renderNavbar(), pb.params.toolbar && pb.renderToolbar(), pb.params.thumbs && pb.params.thumbs.length && pb.renderThumbs(), $jsx$1("div", {
           class: `photo-browser-captions photo-browser-captions-${pb.params.captionsTheme || pb.params.theme}`
         }, pb.params.photos.map((photo, index) => {
           if (photo.caption) return pb.renderCaption(photo.caption, index);
@@ -40062,11 +40103,15 @@
         pb.slides = pb.$el.find('.photo-browser-slide');
         pb.$captionsContainerEl = pb.$el.find('.photo-browser-captions');
         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$2({}, pb.params.swiper, {
-          initialSlide: pb.activeIndex,
+          initialSlide,
           // cssMode:
           //   typeof pb.params.swiper.cssMode === 'undefined' && (app.device.ios || app.device.android)
           //     ? true
@@ -40089,6 +40134,13 @@
             },
             slideChange() {
               const swiper = this;
+              if (hasThumbs && pb.thumbsSwiper && !preventMainSlide) {
+                preventThumbsSlide = true;
+                pb.thumbsSwiper.slideTo(pb.swiper.activeIndex);
+                setTimeout(() => {
+                  preventThumbsSlide = false;
+                });
+              }
               pb.onSlideChange(swiper);
               for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
                 args[_key] = arguments[_key];
@@ -40160,6 +40212,34 @@
         if (pb.activeIndex === 0 || pb.params.virtualSlides) {
           pb.onSlideChange(pb.swiper);
         }
+        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) {
           pb.$el.trigger('photobrowser:open');
         }
@@ -40185,6 +40265,11 @@
           pb.swiper = null;
           delete pb.swiper;
         }
+        if (pb.thumbsSwiper && pb.thumbsSwiper.destroy) {
+          pb.thumbsSwiper.destroy(true, false);
+          pb.thumbsSwiper = null;
+          delete pb.thumbsSwiper;
+        }
         if (pb.$el) {
           pb.$el.trigger('photobrowser:close');
         }
@@ -40398,6 +40483,7 @@
       params: {
         photoBrowser: {
           photos: [],
+          thumbs: [],
           exposition: true,
           expositionHideCaptions: false,
           type: 'standalone',
@@ -40409,7 +40495,8 @@
           popupPush: false,
           swipeToClose: true,
           pageBackLinkText: 'Back',
-          popupCloseLinkText: 'Close',
+          popupCloseLinkText: undefined,
+          popupCloseLinkIcon: true,
           navbarOfText: 'of',
           navbarShowCount: undefined,
           view: undefined,
@@ -40424,6 +40511,7 @@
           renderObject: undefined,
           renderLazyPhoto: undefined,
           renderPhoto: undefined,
+          renderThumb: undefined,
           renderPage: undefined,
           renderPopup: undefined,
           renderStandalone: undefined,