framework7 7.0.8 → 8.0.0-beta.1

package/components/photo-browser/photo-browser-rtl.css

@@ -1 +1 @@
-:root{--f7-photobrowser-bg-color:#fff;--f7-photobrowser-bars-bg-image:none;--f7-photobrowser-caption-font-size:14px;--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);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;transition-property:transform;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.photo-browser-caption{box-sizing:border-box;transition:.3s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .navbar-bg,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95));background-image:var(--f7-photobrowser-bars-bg-image)}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar{opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar~.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg,.photo-browser-page-dark .toolbar{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before,.photo-browser-page-dark .toolbar:after,.photo-browser-page-dark .toolbar:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}
+:root{--f7-photobrowser-bg-color:#fff;--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-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);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;transition-property:transform;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.photo-browser-caption{box-sizing:border-box;transition:.3s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .navbar-bg,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95))}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar{opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar~.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg,.photo-browser-page-dark .toolbar{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before,.photo-browser-page-dark .toolbar:after,.photo-browser-page-dark .toolbar:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}

package/components/photo-browser/photo-browser-vars.less

@@ -1,11 +1,8 @@
 :root {
   --f7-photobrowser-bg-color: #fff;
-  --f7-photobrowser-bars-bg-image: none;
-  /*
   --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-light-text-color: #000;
   --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);

package/components/photo-browser/photo-browser.css

@@ -1 +1 @@
-:root{--f7-photobrowser-bg-color:#fff;--f7-photobrowser-bars-bg-image:none;--f7-photobrowser-caption-font-size:14px;--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);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;transition-property:transform;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.photo-browser-caption{box-sizing:border-box;transition:.3s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .navbar-bg,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95));background-image:var(--f7-photobrowser-bars-bg-image)}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar{opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar~.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg,.photo-browser-page-dark .toolbar{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before,.photo-browser-page-dark .toolbar:after,.photo-browser-page-dark .toolbar:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}
+:root{--f7-photobrowser-bg-color:#fff;--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-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);--f7-photobrowser-dark-bars-text-color:#fff;--f7-photobrowser-dark-bars-link-color:#fff}.photo-browser{position:absolute;left:0;top:0;width:100%;height:100%;z-index:400}.photo-browser-standalone.modal-in{transition-duration:0s;animation:photo-browser-in .4s}.photo-browser-standalone.modal-out{transition-duration:0s;animation:photo-browser-out .4s!important}.photo-browser-standalone.modal-out.swipe-close-to-bottom,.photo-browser-standalone.modal-out.swipe-close-to-top{animation:none!important}.photo-browser-standalone.photo-browser-transitioning{transition:.4s;transition-property:transform;animation:none!important}.photo-browser-popup.modal-out.swipe-close-to-bottom,.photo-browser-popup.modal-out.swipe-close-to-top{transition-duration:.3s}.photo-browser-popup.modal-out.swipe-close-to-bottom{transform:translate3d(0,100vh,0)}.photo-browser-popup.modal-out.swipe-close-to-top{transform:translate3d(0,-100vh,0)}.photo-browser-page{background:0 0}.photo-browser-page .toolbar{transform:none}.photo-browser-popup{background:0 0}.photo-browser-of{margin:0 5px}.photo-browser-captions{pointer-events:none;position:absolute;left:0;width:100%;bottom:var(--f7-safe-area-bottom);z-index:10;opacity:1;transition:.4s}.photo-browser-captions.photo-browser-captions-exposed{opacity:0}.toolbar~.photo-browser-captions{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));transform:translate3d(0,0px,0)}.toolbar~.photo-browser-captions.photo-browser-captions-exposed{transform:translate3d(0,0px,0)}.photo-browser-caption{box-sizing:border-box;transition:.3s;position:absolute;bottom:0;left:0;opacity:0;padding:4px 5px;width:100%;text-align:center;font-size:var(--f7-photobrowser-caption-font-size)}.photo-browser-caption:empty{display:none}.photo-browser-caption.photo-browser-caption-active{opacity:1}.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.photo-browser-swiper-container{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--f7-photobrowser-bg-color);transition:.4s;transition-property:background-color}.photo-browser-next.swiper-button-disabled,.photo-browser-prev.swiper-button-disabled{opacity:.3;pointer-events:none}.photo-browser-slide{width:100%;height:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box}.photo-browser-slide span.swiper-zoom-container{display:none}.photo-browser-slide img{width:auto;height:auto;max-width:100%;max-height:100%;display:none}.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container{display:flex}.photo-browser-slide.swiper-slide-active img,.photo-browser-slide.swiper-slide-next img,.photo-browser-slide.swiper-slide-prev img{display:inline}.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader{display:block}.photo-browser-slide iframe{width:100%;height:100%}.photo-browser-slide .preloader{display:none;position:absolute;width:42px;height:42px;margin-left:-21px;margin-top:-21px;left:50%;top:50%}.navbar-photo-browser .navbar-bg,.photo-browser-page .navbar-bg,.photo-browser-page .toolbar{background-color:var(--f7-photobrowser-bars-bg-color,rgba(var(--f7-bars-bg-color-rgb),.95))}.photo-browser-page .navbar,.photo-browser-page .toolbar{transform:translate3d(0,0,0);transition:.4s;color:var(--f7-photobrowser-bars-text-color,var(--f7-bars-text-color))}.photo-browser-page .navbar a,.photo-browser-page .toolbar a{color:var(--f7-photobrowser-bars-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.photo-browser-exposed .navbar,.photo-browser-exposed .toolbar{opacity:0;visibility:hidden;pointer-events:none}.photo-browser-exposed .toolbar~.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{color:var(--f7-photobrowser-caption-dark-text-color);background:var(--f7-photobrowser-caption-dark-bg-color)}.view.with-photo-browser-page-exposed .navbar{opacity:0;pointer-events:none}.navbar-photo-browser-dark .navbar-bg,.photo-browser-page-dark .navbar-bg,.photo-browser-page-dark .toolbar{background:var(--f7-photobrowser-dark-bars-bg-color)}.navbar-photo-browser-dark .navbar-bg:after,.navbar-photo-browser-dark .navbar-bg:before,.photo-browser-page-dark .navbar-bg:after,.photo-browser-page-dark .navbar-bg:before,.photo-browser-page-dark .toolbar:after,.photo-browser-page-dark .toolbar:before{display:none!important}.navbar-photo-browser-dark,.photo-browser-dark .navbar,.photo-browser-dark .toolbar,.photo-browser-page-dark .navbar,.photo-browser-page-dark .toolbar{color:var(--f7-photobrowser-dark-bars-text-color)}.navbar-photo-browser-dark a,.photo-browser-dark .navbar a,.photo-browser-dark .toolbar a,.photo-browser-page-dark .navbar a,.photo-browser-page-dark .toolbar a{color:var(--f7-photobrowser-dark-bars-link-color)}.photo-browser-dark .photo-browser-swiper-container,.photo-browser-page-dark .photo-browser-swiper-container{background:var(--f7-photobrowser-dark-bg-color)}@keyframes photo-browser-in{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}@keyframes photo-browser-out{0%{transform:translate3d(0,0,0) scale(1);opacity:1}50%{transform:translate3d(0,0,0) scale(1.05);opacity:1}100%{transform:translate3d(0,0,0) scale(.5);opacity:0}}

package/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 */

package/components/photo-browser/photo-browser.js

@@ -23,6 +23,7 @@ export default {
       url: 'photos/',
       routableModals: false,
       virtualSlides: true,
+      lazy: true,
       renderNavbar: undefined,
       renderToolbar: undefined,
       renderCaption: undefined,
@@ -37,7 +38,6 @@ export default {
         spaceBetween: 20,
         speed: 300,
         loop: false,
-        preloadImages: true,
         keyboard: {
           enabled: true
         },
@@ -49,14 +49,10 @@ export default {
           enabled: true,
           maxRatio: 3,
           minRatio: 1
-        },
-        lazy: {
-          enabled: true
         }
       }
     }
   },
-
   create() {
     const app = this;
     app.photoBrowser = ConstructorMethods({
@@ -66,7 +62,6 @@ export default {
       domProp: 'f7PhotoBrowser'
     });
   },
-
   static: {
     PhotoBrowser
   }

package/components/photo-browser/photo-browser.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var r=e.$,a=e.utils,s=(e.getDevice,e.getSupport,e.Class),t=(e.Modal,e.ConstructorMethods),p=(e.ModalMethods,e.$jsx),n=a.extend,i=a.now,l=a.nextTick,d=a.deleteProps;class c extends s{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const r=this;r.app=e;const a=n({on:{}},e.params.photoBrowser);r.useModulesParams(a),r.params=n(a,o),n(r,{exposed:!1,opened:!1,activeIndex:r.params.swiper.initialSlide,url:r.params.url,swipeToClose:{allow:!0,isTouched:!1,diff:void 0,start:void 0,current:void 0,started:!1,activeSlide:void 0,timeStart:void 0}}),r.useModules(),r.init()}get view(){const{params:e,app:o}=this;return e.view||o.views.main}onSlideChange(e){const o=this;o.activeIndex=e.activeIndex;let a=e.activeIndex+1,s=o.params.virtualSlides?o.params.photos.length:e.slides.length;e.params.loop&&(s-=2,a-=e.loopedSlides,a<1&&(a=s+a),a>s&&(a-=s));const t=o.params.virtualSlides?e.$wrapperEl.find(`.swiper-slide[data-swiper-slide-index="${e.activeIndex}"]`):e.slides.eq(e.activeIndex),p=o.params.virtualSlides?e.$wrapperEl.find(`.swiper-slide[data-swiper-slide-index="${e.previousIndex}"]`):e.slides.eq(e.previousIndex);let n,i=o.$el.find(".photo-browser-current"),l=o.$el.find(".photo-browser-total");if("page"===o.params.type&&o.params.navbar&&0===i.length&&"ios"===o.app.theme&&(n=o.app.navbar.getElByPage(o.$el),n&&(i=r(n).find(".photo-browser-current"),l=r(n).find(".photo-browser-total"))),i.length&&l.length&&(i.text(a),l.text(s),n||(n=i.parents(".navbar")[0]),n&&o.app.navbar.size(n)),o.captions.length>0){const r=e.params.loop?t.attr("data-swiper-slide-index"):o.activeIndex;o.$captionsContainerEl.find(".photo-browser-caption-active").removeClass("photo-browser-caption-active"),o.$captionsContainerEl.find(`[data-caption-index="${r}"]`).addClass("photo-browser-caption-active")}const d=p.find("video");d.length>0&&"pause"in d[0]&&d[0].pause()}onTouchStart(){const e=this.swipeToClose;e.allow&&(e.isTouched=!0)}onTouchMove(e){const o=this,r=o.swipeToClose;r.isTouched&&(r.started||(r.started=!0,r.start="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,o.params.virtualSlides?r.activeSlide=o.swiper.$wrapperEl.children(".swiper-slide-active"):r.activeSlide=o.swiper.slides.eq(o.swiper.activeIndex),r.timeStart=i()),e.preventDefault(),r.current="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,r.diff=r.start-r.current,o.$el.transition(0).transform(`translate3d(0,${-r.diff}px,0)`))}onTouchEnd(){const e=this,o=e.swipeToClose;if(o.isTouched=!1,!o.started)return void(o.started=!1);o.started=!1,o.allow=!1;const r=Math.abs(o.diff),a=(new Date).getTime()-o.timeStart;a<300&&r>20||a>=300&&r>100?l((()=>{e.$el&&(o.diff<0?e.$el.addClass("swipe-close-to-bottom"):e.$el.addClass("swipe-close-to-top")),e.emit("local::swipeToClose",e),e.$el.transform("").transition(""),e.close(),o.allow=!0})):(0!==r?e.$el.addClass("photo-browser-transitioning").transitionEnd((()=>{o.allow=!0,e.$el.removeClass("photo-browser-transitioning")})):o.allow=!0,l((()=>{e.$el.transform("").transition("")})))}renderNavbar(){const e=this;if(e.params.renderNavbar)return e.params.renderNavbar.call(e);let o=e.params.iconsColor;e.params.iconsColor||"dark"!==e.params.theme||(o="white");const r="ios"!==e.app.theme&&"aurora"!==e.app.theme||!e.params.pageBackLinkText?"":e.params.pageBackLinkText,a=void 0===e.params.navbarShowCount?e.params.photos.length>1:e.params.navbarShowCount,s="page"!==e.params.type;return p("div",{class:"navbar navbar-photo-browser "+("dark"===e.params.theme?"navbar-photo-browser-dark":"")},p("div",{class:"navbar-bg"}),p("div",{class:"navbar-inner navbar-inner-centered-title sliding"},!s&&p("div",{class:"left"},p("a",{class:`link ${r?"":"icon-only"} back`},p("i",{class:"icon icon-back "+(o?`color-${o}`:"")}),r&&p("span",null,r))),a&&p("div",{class:"title"},p("span",{class:"photo-browser-current"}),p("span",{class:"photo-browser-of"},e.params.navbarOfText),p("span",{class:"photo-browser-total"})),s&&p("div",{class:"right"},p("a",{class:"link popup-close","data-popup":".photo-browser-popup"},p("span",null,e.params.popupCloseLinkText)))))}renderToolbar(){const e=this;if(e.params.renderToolbar)return e.params.renderToolbar.call(e);let o=e.params.iconsColor;return e.params.iconsColor||"dark"!==e.params.theme||(o="white"),p("div",{class:"toolbar toolbar-bottom tabbar"},p("div",{class:"toolbar-inner"},p("a",{class:"link photo-browser-prev"},p("i",{class:"icon icon-back "+(o?`color-${o}`:"")})),p("a",{class:"link photo-browser-next"},p("i",{class:"icon icon-forward "+(o?`color-${o}`:"")}))))}renderCaption(e,o){const r=this;return r.params.renderCaption?r.params.renderCaption.call(r,e,o):p("div",{class:"photo-browser-caption","data-caption-index":o},e)}renderObject(e,o){const r=this;return r.params.renderObject?r.params.renderObject.call(r,e,o):p("div",{class:"photo-browser-slide photo-browser-object-slide swiper-slide","data-swiper-slide-index":o},e.html?e.html:e)}renderLazyPhoto(e,o){const r=this;return r.params.renderLazyPhoto?r.params.renderLazyPhoto.call(r,e,o):p("div",{class:"photo-browser-slide photo-browser-slide-lazy swiper-slide","data-swiper-slide-index":o},p("div",{class:"swiper-lazy-preloader"}),p("span",{class:"swiper-zoom-container"},p("img",{"data-src":e.url?e.url:e,class:"swiper-lazy"})))}renderPhoto(e,o){const r=this;return r.params.renderPhoto?r.params.renderPhoto.call(r,e,o):p("div",{class:"photo-browser-slide swiper-slide","data-swiper-slide-index":o},p("span",{class:"swiper-zoom-container"},p("img",{src:e.url?e.url:e})))}render(){const e=this;return e.params.render?e.params.render.call(e,e.params):p("div",{class:`photo-browser photo-browser-${e.params.theme}`},p("div",{class:"view"},p("div",{class:`page photo-browser-page photo-browser-page-${e.params.theme} no-toolbar ${e.params.navbar?"":"no-navbar"}`,"data-name":"photo-browser-page"},e.params.navbar&&e.renderNavbar(),e.params.toolbar&&e.renderToolbar(),p("div",{class:`photo-browser-captions photo-browser-captions-${e.params.captionsTheme||e.params.theme}`},e.params.photos.map(((o,r)=>o.caption?e.renderCaption(o.caption,r):""))),p("div",{class:"photo-browser-swiper-container swiper"},p("div",{class:"photo-browser-swiper-wrapper swiper-wrapper"},!e.params.virtualSlides&&e.params.photos.map(((o,r)=>o.html||("string"==typeof o||o instanceof String)&&o.indexOf("<")>=0&&o.indexOf(">")>=0?e.renderObject(o,r):!0===e.params.swiper.lazy||e.params.swiper.lazy&&e.params.swiper.lazy.enabled?e.renderLazyPhoto(o,r):e.renderPhoto(o,r))))))))}renderStandalone(){const e=this;if(e.params.renderStandalone)return e.params.renderStandalone.call(e);return`<div class="popup photo-browser-popup photo-browser-standalone popup-tablet-fullscreen">${e.render()}</div>`}renderPage(){const e=this;if(e.params.renderPage)return e.params.renderPage.call(e);return e.render()}renderPopup(){const e=this;if(e.params.renderPopup)return e.params.renderPopup.call(e);return`<div class="popup photo-browser-popup">${e.render()}</div>`}onOpen(e,o){const a=this,s=a.app,t=r(o);let p;t[0].f7PhotoBrowser=a,a.$el=t,a.el=t[0],a.openedIn=e,a.opened=!0,a.$swiperContainerEl=a.$el.find(".photo-browser-swiper-container"),a.$swiperWrapperEl=a.$el.find(".photo-browser-swiper-wrapper"),a.slides=a.$el.find(".photo-browser-slide"),a.$captionsContainerEl=a.$el.find(".photo-browser-captions"),a.captions=a.$el.find(".photo-browser-caption");const i=n({},a.params.swiper,{initialSlide:a.activeIndex,cssMode:!(void 0!==a.params.swiper.cssMode||!s.device.ios&&!s.device.android)||a.params.swiper.cssMode,on:{click(e){clearTimeout(p),a.params.exposition&&(p=setTimeout((()=>{a.expositionToggle()}),350)),a.emit("local::tap",e),a.emit("local::click",e)},doubleClick(e){clearTimeout(p),a.emit("local::doubleTap",e),a.emit("local::doubleClick",e)},slideChange(){a.onSlideChange(this);for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChange",...o)},transitionStart(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::transitionStart",...o)},transitionEnd(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::transitionEnd",...o)},slideChangeTransitionStart(){a.onSlideChange(this);for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChangeTransitionStart",...o)},slideChangeTransitionEnd(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChangeTransitionEnd",...o)},lazyImageLoad(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::lazyImageLoad",...o)},lazyImageReady(){for(var e=arguments.length,o=new Array(e),s=0;s<e;s++)o[s]=arguments[s];const t=o[0];r(t).removeClass("photo-browser-slide-lazy"),a.emit("local::lazyImageReady",...o)}}});a.params.swipeToClose&&"page"!==a.params.type&&n(i.on,{touchStart(e,o){a.onTouchStart(o),a.emit("local::touchStart",o)},touchMoveOpposite(e,o){a.onTouchMove(o),a.emit("local::touchMoveOpposite",o)},touchEnd(e,o){a.onTouchEnd(o),a.emit("local::touchEnd",o)}}),a.params.virtualSlides&&n(i,{virtual:{slides:a.params.photos,renderSlide:(e,o)=>e.html||("string"==typeof e||e instanceof String)&&e.indexOf("<")>=0&&e.indexOf(">")>=0?a.renderObject(e,o):!0===a.params.swiper.lazy||a.params.swiper.lazy&&a.params.swiper.lazy.enabled?a.renderLazyPhoto(e,o):a.renderPhoto(e,o)}}),a.swiper=s.swiper?s.swiper.create(a.$swiperContainerEl,i):new window.Swiper(a.$swiperContainerEl,i),0===a.activeIndex&&a.onSlideChange(a.swiper),a.$el&&a.$el.trigger("photobrowser:open"),a.emit("local::open photoBrowserOpen",a)}onOpened(){const e=this;e.$el&&"standalone"===e.params.type&&e.$el.css("animation","none"),e.$el&&e.$el.trigger("photobrowser:opened"),e.emit("local::opened photoBrowserOpened",e)}onClose(){const e=this;e.destroyed||(e.swiper&&e.swiper.destroy&&(e.swiper.destroy(!0,!1),e.swiper=null,delete e.swiper),e.$el&&e.$el.trigger("photobrowser:close"),e.emit("local::close photoBrowserClose",e))}onClosed(){const e=this;e.destroyed||(e.opened=!1,e.$el=null,e.el=null,delete e.$el,delete e.el,e.$el&&e.$el.trigger("photobrowser:closed"),e.emit("local::closed photoBrowserClosed",e))}openPage(){const e=this;if(e.opened)return e;const o=e.renderPage();return e.view.router.navigate({url:e.url,route:{content:o,path:e.url,on:{pageBeforeIn(o,r){e.view.$el.addClass(`with-photo-browser-page with-photo-browser-page-${e.params.theme}`),e.onOpen("page",r.el)},pageAfterIn(o,r){e.onOpened("page",r.el)},pageBeforeOut(o,r){e.view.$el.removeClass(`with-photo-browser-page with-photo-browser-page-exposed with-photo-browser-page-${e.params.theme}`),e.onClose("page",r.el)},pageAfterOut(o,r){e.onClosed("page",r.el)}}}}),e}openStandalone(){const e=this;if(e.opened)return e;const o={backdrop:!1,content:e.renderStandalone(),on:{popupOpen(o){e.onOpen("popup",o.el)},popupOpened(o){e.onOpened("popup",o.el)},popupClose(o){e.onClose("popup",o.el)},popupClosed(o){e.onClosed("popup",o.el)}}};return e.params.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,popup:o}}):e.modal=e.app.popup.create(o).open(),e}openPopup(){const e=this;if(e.opened)return e;const o={content:e.renderPopup(),push:e.params.popupPush,on:{popupOpen(o){e.onOpen("popup",o.el)},popupOpened(o){e.onOpened("popup",o.el)},popupClose(o){e.onClose("popup",o.el)},popupClosed(o){e.onClosed("popup",o.el)}}};return e.params.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,popup:o}}):e.modal=e.app.popup.create(o).open(),e}expositionEnable(){const e=this;return"page"===e.params.type&&e.view.$el.addClass("with-photo-browser-page-exposed"),e.$el&&e.$el.addClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.addClass("photo-browser-captions-exposed"),e.exposed=!0,e}expositionDisable(){const e=this;return"page"===e.params.type&&e.view.$el.removeClass("with-photo-browser-page-exposed"),e.$el&&e.$el.removeClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.removeClass("photo-browser-captions-exposed"),e.exposed=!1,e}expositionToggle(){const e=this;return"page"===e.params.type&&e.view.$el.toggleClass("with-photo-browser-page-exposed"),e.$el&&e.$el.toggleClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.toggleClass("photo-browser-captions-exposed"),e.exposed=!e.exposed,e}open(e){const o=this,r=o.params.type;return o.opened?(o.swiper&&void 0!==e&&o.swiper.slideTo(parseInt(e,10)),o):(void 0!==e&&(o.activeIndex=e),"standalone"===r&&o.openStandalone(),"page"===r&&o.openPage(),"popup"===r&&o.openPopup(),o)}close(){const e=this;return e.opened?(e.params.routableModals&&e.view||"page"===e.openedIn?e.view.router.back():(e.modal.once("modalClosed",(()=>{l((()=>{e.destroyed||(e.modal.destroy(),delete e.modal)}))})),e.modal.close()),e):e}init(){}destroy(){let e=this;e.emit("local::beforeDestroy photoBrowserBeforeDestroy",e),e.$el&&(e.$el.trigger("photobrowser:beforedestroy"),e.$el[0].f7PhotoBrowser=null,delete e.$el[0].f7PhotoBrowser),d(e),e.destroyed=!0,e=null}}var h={name:"photoBrowser",params:{photoBrowser:{photos:[],exposition:!0,expositionHideCaptions:!1,type:"standalone",navbar:!0,toolbar:!0,theme:"light",captionsTheme:void 0,iconsColor:void 0,popupPush:!1,swipeToClose:!0,pageBackLinkText:"Back",popupCloseLinkText:"Close",navbarOfText:"of",navbarShowCount:void 0,view:void 0,url:"photos/",routableModals:!1,virtualSlides:!0,renderNavbar:void 0,renderToolbar:void 0,renderCaption:void 0,renderObject:void 0,renderLazyPhoto:void 0,renderPhoto:void 0,renderPage:void 0,renderPopup:void 0,renderStandalone:void 0,swiper:{initialSlide:0,spaceBetween:20,speed:300,loop:!1,preloadImages:!0,keyboard:{enabled:!0},navigation:{nextEl:".photo-browser-next",prevEl:".photo-browser-prev"},zoom:{enabled:!0,maxRatio:3,minRatio:1},lazy:{enabled:!0}}}},create(){this.photoBrowser=t({defaultSelector:".photo-browser-popup, .photo-browser-page",constructor:c,app:this,domProp:"f7PhotoBrowser"})},static:{PhotoBrowser:c}};if(o){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var r=e.$,a=e.utils,s=(e.getDevice,e.getSupport,e.Class),t=(e.Modal,e.ConstructorMethods),p=(e.ModalMethods,e.$jsx),n=a.extend,i=a.now,l=a.nextTick,d=a.deleteProps;class c extends s{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const r=this;r.app=e;const a=n({on:{}},e.params.photoBrowser);r.useModulesParams(a),r.params=n(a,o),n(r,{exposed:!1,opened:!1,activeIndex:r.params.swiper.initialSlide,url:r.params.url,swipeToClose:{allow:!0,isTouched:!1,diff:void 0,start:void 0,current:void 0,started:!1,activeSlide:void 0,timeStart:void 0}}),r.useModules(),r.init()}get view(){const{params:e,app:o}=this;return e.view||o.views.main}onSlideChange(e){const o=this;o.activeIndex=e.activeIndex;let a=e.activeIndex+1,s=o.params.virtualSlides?o.params.photos.length:e.slides.length;e.params.loop&&(s-=2,a-=e.loopedSlides,a<1&&(a=s+a),a>s&&(a-=s));const t=o.params.virtualSlides?r(e.wrapperEl).find(`.swiper-slide[data-swiper-slide-index="${e.activeIndex}"]`):r(e.slides).eq(e.activeIndex),p=o.params.virtualSlides?r(e.wrapperEl).find(`.swiper-slide[data-swiper-slide-index="${e.previousIndex}"]`):r(e.slides).eq(e.previousIndex);let n,i=o.$el.find(".photo-browser-current"),l=o.$el.find(".photo-browser-total");if("page"===o.params.type&&o.params.navbar&&0===i.length&&"ios"===o.app.theme&&(n=o.app.navbar.getElByPage(o.$el),n&&(i=r(n).find(".photo-browser-current"),l=r(n).find(".photo-browser-total"))),i.length&&l.length&&(i.text(a),l.text(s),n||(n=i.parents(".navbar")[0]),n&&o.app.navbar.size(n)),o.captions.length>0){const r=e.params.loop?t.attr("data-swiper-slide-index"):o.activeIndex;o.$captionsContainerEl.find(".photo-browser-caption-active").removeClass("photo-browser-caption-active"),o.$captionsContainerEl.find(`[data-caption-index="${r}"]`).addClass("photo-browser-caption-active")}const d=p.find("video");d.length>0&&"pause"in d[0]&&d[0].pause()}onTouchStart(){const e=this.swipeToClose;e.allow&&(e.isTouched=!0)}onTouchMove(e){const o=this,a=o.swipeToClose;a.isTouched&&(a.started||(a.started=!0,a.start="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,o.params.virtualSlides?a.activeSlide=r(o.swiper.wrapperEl).children(".swiper-slide-active"):a.activeSlide=r(o.swiper.slides).eq(o.swiper.activeIndex),a.timeStart=i()),e.preventDefault(),a.current="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,a.diff=a.start-a.current,o.$el.transition(0).transform(`translate3d(0,${-a.diff}px,0)`))}onTouchEnd(){const e=this,o=e.swipeToClose;if(o.isTouched=!1,!o.started)return void(o.started=!1);o.started=!1,o.allow=!1;const r=Math.abs(o.diff),a=(new Date).getTime()-o.timeStart;a<300&&r>20||a>=300&&r>100?l((()=>{e.$el&&(o.diff<0?e.$el.addClass("swipe-close-to-bottom"):e.$el.addClass("swipe-close-to-top")),e.emit("local::swipeToClose",e),e.$el.transform("").transition(""),e.close(),o.allow=!0})):(0!==r?e.$el.addClass("photo-browser-transitioning").transitionEnd((()=>{o.allow=!0,e.$el.removeClass("photo-browser-transitioning")})):o.allow=!0,l((()=>{e.$el.transform("").transition("")})))}renderNavbar(){const e=this;if(e.params.renderNavbar)return e.params.renderNavbar.call(e);const o=e.params.iconsColor,r="ios"===e.app.theme&&e.params.pageBackLinkText?e.params.pageBackLinkText:"",a=void 0===e.params.navbarShowCount?e.params.photos.length>1:e.params.navbarShowCount,s="page"!==e.params.type;return p("div",{class:"navbar navbar-photo-browser "+("dark"===e.params.theme?"navbar-photo-browser-dark":"")},p("div",{class:"navbar-bg"}),p("div",{class:"navbar-inner navbar-inner-centered-title sliding"},!s&&p("div",{class:"left"},p("a",{class:`link ${r?"":"icon-only"} back`},p("i",{class:"icon icon-back "+(o?`color-${o}`:"")}),r&&p("span",null,r))),a&&p("div",{class:"title"},p("span",{class:"photo-browser-current"}),p("span",{class:"photo-browser-of"},e.params.navbarOfText),p("span",{class:"photo-browser-total"})),s&&p("div",{class:"right"},p("a",{class:"link popup-close","data-popup":".photo-browser-popup"},p("span",null,e.params.popupCloseLinkText)))))}renderToolbar(){const e=this;if(e.params.renderToolbar)return e.params.renderToolbar.call(e);const o=e.params.iconsColor;return p("div",{class:"toolbar toolbar-bottom tabbar"},p("div",{class:"toolbar-inner"},p("a",{class:"link photo-browser-prev"},p("i",{class:"icon icon-back "+(o?`color-${o}`:"")})),p("a",{class:"link photo-browser-next"},p("i",{class:"icon icon-forward "+(o?`color-${o}`:"")}))))}renderCaption(e,o){const r=this;return r.params.renderCaption?r.params.renderCaption.call(r,e,o):p("div",{class:"photo-browser-caption","data-caption-index":o},e)}renderObject(e,o){const r=this;return r.params.renderObject?r.params.renderObject.call(r,e,o):p("div",{class:"photo-browser-slide photo-browser-object-slide swiper-slide","data-swiper-slide-index":o},e.html?e.html:e)}renderLazyPhoto(e,o){const r=this;return r.params.renderLazyPhoto?r.params.renderLazyPhoto.call(r,e,o):p("div",{class:"photo-browser-slide photo-browser-slide-lazy swiper-slide","data-swiper-slide-index":o},p("div",{class:"swiper-lazy-preloader"}),p("span",{class:"swiper-zoom-container"},p("img",{loading:"lazy",src:e.url?e.url:e})))}renderPhoto(e,o){const r=this;return r.params.renderPhoto?r.params.renderPhoto.call(r,e,o):p("div",{class:"photo-browser-slide swiper-slide","data-swiper-slide-index":o},p("span",{class:"swiper-zoom-container"},p("img",{src:e.url?e.url:e})))}render(){const e=this;return e.params.render?e.params.render.call(e,e.params):p("div",{class:`photo-browser photo-browser-${e.params.theme}`},p("div",{class:"view"},p("div",{class:`page photo-browser-page photo-browser-page-${e.params.theme} no-toolbar ${e.params.navbar?"":"no-navbar"}`,"data-name":"photo-browser-page"},e.params.navbar&&e.renderNavbar(),e.params.toolbar&&e.renderToolbar(),p("div",{class:`photo-browser-captions photo-browser-captions-${e.params.captionsTheme||e.params.theme}`},e.params.photos.map(((o,r)=>o.caption?e.renderCaption(o.caption,r):""))),p("div",{class:"photo-browser-swiper-container swiper"},p("div",{class:"photo-browser-swiper-wrapper swiper-wrapper"},!e.params.virtualSlides&&e.params.photos.map(((o,r)=>o.html||("string"==typeof o||o instanceof String)&&o.indexOf("<")>=0&&o.indexOf(">")>=0?e.renderObject(o,r):!0===e.params.lazy?e.renderLazyPhoto(o,r):e.renderPhoto(o,r))))))))}renderStandalone(){const e=this;if(e.params.renderStandalone)return e.params.renderStandalone.call(e);return`<div class="popup photo-browser-popup photo-browser-standalone popup-tablet-fullscreen">${e.render()}</div>`}renderPage(){const e=this;if(e.params.renderPage)return e.params.renderPage.call(e);return e.render()}renderPopup(){const e=this;if(e.params.renderPopup)return e.params.renderPopup.call(e);return`<div class="popup photo-browser-popup">${e.render()}</div>`}onOpen(e,o){const a=this,s=a.app,t=r(o);let p;t[0].f7PhotoBrowser=a,a.$el=t,a.el=t[0],a.openedIn=e,a.opened=!0,a.$swiperContainerEl=a.$el.find(".photo-browser-swiper-container"),a.$swiperWrapperEl=a.$el.find(".photo-browser-swiper-wrapper"),a.slides=a.$el.find(".photo-browser-slide"),a.$captionsContainerEl=a.$el.find(".photo-browser-captions"),a.captions=a.$el.find(".photo-browser-caption");const i=n({},a.params.swiper,{initialSlide:a.activeIndex,on:{click(e){clearTimeout(p),a.params.exposition&&(p=setTimeout((()=>{a.expositionToggle()}),350)),a.emit("local::tap",e),a.emit("local::click",e)},doubleClick(e){clearTimeout(p),a.emit("local::doubleTap",e),a.emit("local::doubleClick",e)},slideChange(){a.onSlideChange(this);for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChange",...o)},transitionStart(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::transitionStart",...o)},transitionEnd(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::transitionEnd",...o)},slideChangeTransitionStart(){a.onSlideChange(this);for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChangeTransitionStart",...o)},slideChangeTransitionEnd(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];a.emit("local::slideChangeTransitionEnd",...o)}}});a.params.swipeToClose&&"page"!==a.params.type&&n(i.on,{touchStart(e,o){a.onTouchStart(o),a.emit("local::touchStart",o)},touchMoveOpposite(e,o){a.onTouchMove(o),a.emit("local::touchMoveOpposite",o)},touchEnd(e,o){a.onTouchEnd(o),a.emit("local::touchEnd",o)}}),a.params.virtualSlides&&n(i,{virtual:{slides:a.params.photos,renderSlide:(e,o)=>e.html||("string"==typeof e||e instanceof String)&&e.indexOf("<")>=0&&e.indexOf(">")>=0?a.renderObject(e,o):!0===a.params.lazy?a.renderLazyPhoto(e,o):a.renderPhoto(e,o)}}),a.swiper=s.swiper?s.swiper.create(a.$swiperContainerEl[0],i):new window.Swiper(a.$swiperContainerEl[0],i),(0===a.activeIndex||a.params.virtualSlides)&&a.onSlideChange(a.swiper),a.$el&&a.$el.trigger("photobrowser:open"),a.emit("local::open photoBrowserOpen",a)}onOpened(){const e=this;e.$el&&"standalone"===e.params.type&&e.$el.css("animation","none"),e.$el&&e.$el.trigger("photobrowser:opened"),e.emit("local::opened photoBrowserOpened",e)}onClose(){const e=this;e.destroyed||(e.swiper&&e.swiper.destroy&&(e.swiper.destroy(!0,!1),e.swiper=null,delete e.swiper),e.$el&&e.$el.trigger("photobrowser:close"),e.emit("local::close photoBrowserClose",e))}onClosed(){const e=this;e.destroyed||(e.opened=!1,e.$el=null,e.el=null,delete e.$el,delete e.el,e.$el&&e.$el.trigger("photobrowser:closed"),e.emit("local::closed photoBrowserClosed",e))}openPage(){const e=this;if(e.opened)return e;const o=e.renderPage();return e.view.router.navigate({url:e.url,route:{content:o,path:e.url,on:{pageBeforeIn(o,r){e.view.$el.addClass(`with-photo-browser-page with-photo-browser-page-${e.params.theme}`),e.onOpen("page",r.el)},pageAfterIn(o,r){e.onOpened("page",r.el)},pageBeforeOut(o,r){e.view.$el.removeClass(`with-photo-browser-page with-photo-browser-page-exposed with-photo-browser-page-${e.params.theme}`),e.onClose("page",r.el)},pageAfterOut(o,r){e.onClosed("page",r.el)}}}}),e}openStandalone(){const e=this;if(e.opened)return e;const o={backdrop:!1,content:e.renderStandalone(),on:{popupOpen(o){e.onOpen("popup",o.el)},popupOpened(o){e.onOpened("popup",o.el)},popupClose(o){e.onClose("popup",o.el)},popupClosed(o){e.onClosed("popup",o.el)}}};return e.params.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,popup:o}}):e.modal=e.app.popup.create(o).open(),e}openPopup(){const e=this;if(e.opened)return e;const o={content:e.renderPopup(),push:e.params.popupPush,on:{popupOpen(o){e.onOpen("popup",o.el)},popupOpened(o){e.onOpened("popup",o.el)},popupClose(o){e.onClose("popup",o.el)},popupClosed(o){e.onClosed("popup",o.el)}}};return e.params.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,popup:o}}):e.modal=e.app.popup.create(o).open(),e}expositionEnable(){const e=this;return"page"===e.params.type&&e.view.$el.addClass("with-photo-browser-page-exposed"),e.$el&&e.$el.addClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.addClass("photo-browser-captions-exposed"),e.exposed=!0,e}expositionDisable(){const e=this;return"page"===e.params.type&&e.view.$el.removeClass("with-photo-browser-page-exposed"),e.$el&&e.$el.removeClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.removeClass("photo-browser-captions-exposed"),e.exposed=!1,e}expositionToggle(){const e=this;return"page"===e.params.type&&e.view.$el.toggleClass("with-photo-browser-page-exposed"),e.$el&&e.$el.toggleClass("photo-browser-exposed"),e.params.expositionHideCaptions&&e.$captionsContainerEl.toggleClass("photo-browser-captions-exposed"),e.exposed=!e.exposed,e}open(e){const o=this,r=o.params.type;return o.opened?(o.swiper&&void 0!==e&&o.swiper.slideTo(parseInt(e,10)),o):(void 0!==e&&(o.activeIndex=e),"standalone"===r&&o.openStandalone(),"page"===r&&o.openPage(),"popup"===r&&o.openPopup(),o)}close(){const e=this;return e.opened?(e.params.routableModals&&e.view||"page"===e.openedIn?e.view.router.back():(e.modal.once("modalClosed",(()=>{l((()=>{e.destroyed||(e.modal.destroy(),delete e.modal)}))})),e.modal.close()),e):e}init(){}destroy(){let e=this;e.emit("local::beforeDestroy photoBrowserBeforeDestroy",e),e.$el&&(e.$el.trigger("photobrowser:beforedestroy"),e.$el[0].f7PhotoBrowser=null,delete e.$el[0].f7PhotoBrowser),d(e),e.destroyed=!0,e=null}}var h={name:"photoBrowser",params:{photoBrowser:{photos:[],exposition:!0,expositionHideCaptions:!1,type:"standalone",navbar:!0,toolbar:!0,theme:"light",captionsTheme:void 0,iconsColor:void 0,popupPush:!1,swipeToClose:!0,pageBackLinkText:"Back",popupCloseLinkText:"Close",navbarOfText:"of",navbarShowCount:void 0,view:void 0,url:"photos/",routableModals:!1,virtualSlides:!0,lazy:!0,renderNavbar:void 0,renderToolbar:void 0,renderCaption:void 0,renderObject:void 0,renderLazyPhoto:void 0,renderPhoto:void 0,renderPage:void 0,renderPopup:void 0,renderStandalone:void 0,swiper:{initialSlide:0,spaceBetween:20,speed:300,loop:!1,keyboard:{enabled:!0},navigation:{nextEl:".photo-browser-next",prevEl:".photo-browser-prev"},zoom:{enabled:!0,maxRatio:3,minRatio:1}}}},create(){this.photoBrowser=t({defaultSelector:".photo-browser-popup, .photo-browser-page",constructor:c,app:this,domProp:"f7PhotoBrowser"})},static:{PhotoBrowser:c}};if(o){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/photo-browser/photo-browser.less

@@ -177,7 +177,6 @@
 .navbar-photo-browser .navbar-bg,
 .photo-browser-page .toolbar {
   background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
-  background-image: var(--f7-photobrowser-bars-bg-image);
 }
 .photo-browser-page {
   .navbar,
@@ -278,6 +277,3 @@
 .if-md-theme({
   @import './photo-browser-md.less';
 });
-.if-aurora-theme({
-  @import './photo-browser-aurora.less';
-});