framework7 7.1.5 → 8.0.0-beta.2

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

@@ -4,22 +4,20 @@ import $ from '../../shared/dom7.js';
 import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
-
 import $jsx from '../../shared/$jsx.js';
-
 class PhotoBrowser extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const pb = this;
     pb.app = app;
     const defaults = extend({
       on: {}
-    }, app.params.photoBrowser); // Extend defaults with modules params
+    }, app.params.photoBrowser);
 
+    // Extend defaults with modules params
     pb.useModulesParams(defaults);
     pb.params = extend(defaults, params);
     extend(pb, {
@@ -37,13 +35,14 @@ class PhotoBrowser extends Framework7Class {
         activeSlide: undefined,
         timeStart: undefined
       }
-    }); // Install Modules
+    });
 
-    pb.useModules(); // Init
+    // Install Modules
+    pb.useModules();
 
+    // Init
     pb.init();
   }
-
   get view() {
     const {
       params,
@@ -51,112 +50,93 @@ class PhotoBrowser extends Framework7Class {
     } = this;
     return params.view || app.views.main;
   }
-
   onSlideChange(swiper) {
     const pb = this;
     pb.activeIndex = swiper.activeIndex;
     let current = swiper.activeIndex + 1;
     let total = pb.params.virtualSlides ? pb.params.photos.length : swiper.slides.length;
-
     if (swiper.params.loop) {
       total -= 2;
       current -= swiper.loopedSlides;
       if (current < 1) current = total + current;
       if (current > total) current -= total;
     }
-
-    const $activeSlideEl = pb.params.virtualSlides ? 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);
+    const $activeSlideEl = pb.params.virtualSlides ? $(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);
     let $currentEl = pb.$el.find('.photo-browser-current');
     let $totalEl = pb.$el.find('.photo-browser-total');
     let navbarEl;
-
     if (pb.params.type === 'page' && pb.params.navbar && $currentEl.length === 0 && pb.app.theme === 'ios') {
       navbarEl = pb.app.navbar.getElByPage(pb.$el);
-
       if (navbarEl) {
         $currentEl = $(navbarEl).find('.photo-browser-current');
         $totalEl = $(navbarEl).find('.photo-browser-total');
       }
     }
-
     if ($currentEl.length && $totalEl.length) {
       $currentEl.text(current);
       $totalEl.text(total);
       if (!navbarEl) navbarEl = $currentEl.parents('.navbar')[0];
-
       if (navbarEl) {
         pb.app.navbar.size(navbarEl);
       }
-    } // Update captions
-
+    }
 
+    // Update captions
     if (pb.captions.length > 0) {
       const captionIndex = swiper.params.loop ? $activeSlideEl.attr('data-swiper-slide-index') : pb.activeIndex;
       pb.$captionsContainerEl.find('.photo-browser-caption-active').removeClass('photo-browser-caption-active');
       pb.$captionsContainerEl.find(`[data-caption-index="${captionIndex}"]`).addClass('photo-browser-caption-active');
-    } // Stop Video
-
+    }
 
+    // Stop Video
     const previousSlideVideo = $previousSlideEl.find('video');
-
     if (previousSlideVideo.length > 0) {
       if ('pause' in previousSlideVideo[0]) previousSlideVideo[0].pause();
     }
   }
-
   onTouchStart() {
     const pb = this;
     const swipeToClose = pb.swipeToClose;
     if (!swipeToClose.allow) return;
     swipeToClose.isTouched = true;
   }
-
   onTouchMove(e) {
     const pb = this;
     const swipeToClose = pb.swipeToClose;
     if (!swipeToClose.isTouched) return;
-
     if (!swipeToClose.started) {
       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();
     }
-
     e.preventDefault();
     swipeToClose.current = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
     swipeToClose.diff = swipeToClose.start - swipeToClose.current;
     pb.$el.transition(0).transform(`translate3d(0,${-swipeToClose.diff}px,0)`);
   }
-
   onTouchEnd() {
     const pb = this;
     const swipeToClose = pb.swipeToClose;
     swipeToClose.isTouched = false;
-
     if (!swipeToClose.started) {
       swipeToClose.started = false;
       return;
     }
-
     swipeToClose.started = false;
     swipeToClose.allow = false;
     const diff = Math.abs(swipeToClose.diff);
     const timeDiff = new Date().getTime() - swipeToClose.timeStart;
-
     if (timeDiff < 300 && diff > 20 || timeDiff >= 300 && diff > 100) {
       nextTick(() => {
         if (pb.$el) {
           if (swipeToClose.diff < 0) pb.$el.addClass('swipe-close-to-bottom');else pb.$el.addClass('swipe-close-to-top');
         }
-
         pb.emit('local::swipeToClose', pb);
         pb.$el.transform('').transition('');
         pb.close();
@@ -164,7 +144,6 @@ class PhotoBrowser extends Framework7Class {
       });
       return;
     }
-
     if (diff !== 0) {
       pb.$el.addClass('photo-browser-transitioning').transitionEnd(() => {
         swipeToClose.allow = true;
@@ -173,19 +152,17 @@ class PhotoBrowser extends Framework7Class {
     } else {
       swipeToClose.allow = true;
     }
-
     nextTick(() => {
       pb.$el.transform('').transition('');
     });
-  } // Render Functions
-
+  }
 
+  // Render Functions
   renderNavbar() {
     const pb = this;
     if (pb.params.renderNavbar) return pb.params.renderNavbar.call(pb);
-    let iconsColor = pb.params.iconsColor;
-    if (!pb.params.iconsColor && pb.params.theme === 'dark') iconsColor = 'white';
-    const pageBackLinkText = (pb.app.theme === 'ios' || pb.app.theme === 'aurora') && pb.params.pageBackLinkText ? pb.params.pageBackLinkText : '';
+    const iconsColor = pb.params.iconsColor;
+    const pageBackLinkText = pb.app.theme === 'ios' && pb.params.pageBackLinkText ? pb.params.pageBackLinkText : '';
     const renderNavbarCount = typeof pb.params.navbarShowCount === 'undefined' ? pb.params.photos.length > 1 : pb.params.navbarShowCount;
     const isPopup = pb.params.type !== 'page';
     return $jsx("div", {
@@ -215,12 +192,10 @@ class PhotoBrowser extends Framework7Class {
       "data-popup": ".photo-browser-popup"
     }, $jsx("span", null, pb.params.popupCloseLinkText)))));
   }
-
   renderToolbar() {
     const pb = this;
     if (pb.params.renderToolbar) return pb.params.renderToolbar.call(pb);
-    let iconsColor = pb.params.iconsColor;
-    if (!pb.params.iconsColor && pb.params.theme === 'dark') iconsColor = 'white';
+    const iconsColor = pb.params.iconsColor;
     return $jsx("div", {
       class: "toolbar toolbar-bottom tabbar"
     }, $jsx("div", {
@@ -235,7 +210,6 @@ class PhotoBrowser extends Framework7Class {
       class: `icon icon-forward ${iconsColor ? `color-${iconsColor}` : ''}`
     }))));
   }
-
   renderCaption(caption, index) {
     const pb = this;
     if (pb.params.renderCaption) return pb.params.renderCaption.call(pb, caption, index);
@@ -244,7 +218,6 @@ class PhotoBrowser extends Framework7Class {
       "data-caption-index": index
     }, caption);
   }
-
   renderObject(photo, index) {
     const pb = this;
     if (pb.params.renderObject) return pb.params.renderObject.call(pb, photo, index);
@@ -253,7 +226,6 @@ class PhotoBrowser extends Framework7Class {
       "data-swiper-slide-index": index
     }, photo.html ? photo.html : photo);
   }
-
   renderLazyPhoto(photo, index) {
     const pb = this;
     if (pb.params.renderLazyPhoto) return pb.params.renderLazyPhoto.call(pb, photo, index);
@@ -265,11 +237,10 @@ class PhotoBrowser extends Framework7Class {
     }), $jsx("span", {
       class: "swiper-zoom-container"
     }, $jsx("img", {
-      "data-src": photo.url ? photo.url : photo,
-      class: "swiper-lazy"
+      loading: "lazy",
+      src: photo.url ? photo.url : photo
     })));
   }
-
   renderPhoto(photo, index) {
     const pb = this;
     if (pb.params.renderPhoto) return pb.params.renderPhoto.call(pb, photo, index);
@@ -282,7 +253,6 @@ class PhotoBrowser extends Framework7Class {
       src: photo.url ? photo.url : photo
     })));
   }
-
   render() {
     const pb = this;
     if (pb.params.render) return pb.params.render.call(pb, pb.params);
@@ -306,37 +276,32 @@ class PhotoBrowser extends Framework7Class {
       if (photo.html || (typeof photo === 'string' || photo instanceof String) && photo.indexOf('<') >= 0 && photo.indexOf('>') >= 0) {
         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);
     }))))));
   }
-
   renderStandalone() {
     const pb = this;
     if (pb.params.renderStandalone) return pb.params.renderStandalone.call(pb);
     const standaloneHtml = `<div class="popup photo-browser-popup photo-browser-standalone popup-tablet-fullscreen">${pb.render()}</div>`;
     return standaloneHtml;
   }
-
   renderPage() {
     const pb = this;
     if (pb.params.renderPage) return pb.params.renderPage.call(pb);
     const pageHtml = pb.render();
     return pageHtml;
   }
-
   renderPopup() {
     const pb = this;
     if (pb.params.renderPopup) return pb.params.renderPopup.call(pb);
     const popupHtml = `<div class="popup photo-browser-popup">${pb.render()}</div>`;
     return popupHtml;
-  } // Callbacks
-
+  }
 
+  // Callbacks
   onOpen(type, el) {
     const pb = this;
     const app = pb.app;
@@ -350,185 +315,135 @@ class PhotoBrowser extends Framework7Class {
     pb.$swiperWrapperEl = pb.$el.find('.photo-browser-swiper-wrapper');
     pb.slides = pb.$el.find('.photo-browser-slide');
     pb.$captionsContainerEl = pb.$el.find('.photo-browser-captions');
-    pb.captions = pb.$el.find('.photo-browser-caption'); // Init Swiper
+    pb.captions = pb.$el.find('.photo-browser-caption');
 
+    // Init Swiper
     let clickTimeout;
     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);
-
           if (pb.params.exposition) {
             clickTimeout = setTimeout(() => {
               pb.expositionToggle();
             }, 350);
           }
-
           pb.emit('local::tap', e);
           pb.emit('local::click', e);
         },
-
         doubleClick(e) {
           clearTimeout(clickTimeout);
           pb.emit('local::doubleTap', e);
           pb.emit('local::doubleClick', e);
         },
-
         slideChange() {
           const swiper = this;
           pb.onSlideChange(swiper);
-
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           pb.emit('local::slideChange', ...args);
         },
-
         transitionStart() {
           for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
             args[_key2] = arguments[_key2];
           }
-
           pb.emit('local::transitionStart', ...args);
         },
-
         transitionEnd() {
           for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
             args[_key3] = arguments[_key3];
           }
-
           pb.emit('local::transitionEnd', ...args);
         },
-
         slideChangeTransitionStart() {
           const swiper = this;
           pb.onSlideChange(swiper);
-
           for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
             args[_key4] = arguments[_key4];
           }
-
           pb.emit('local::slideChangeTransitionStart', ...args);
         },
-
         slideChangeTransitionEnd() {
           for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
             args[_key5] = arguments[_key5];
           }
-
           pb.emit('local::slideChangeTransitionEnd', ...args);
-        },
-
-        lazyImageLoad() {
-          for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-            args[_key6] = arguments[_key6];
-          }
-
-          pb.emit('local::lazyImageLoad', ...args);
-        },
-
-        lazyImageReady() {
-          for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-            args[_key7] = arguments[_key7];
-          }
-
-          const slideEl = args[0];
-          $(slideEl).removeClass('photo-browser-slide-lazy');
-          pb.emit('local::lazyImageReady', ...args);
         }
-
       }
     });
-
     if (pb.params.swipeToClose && pb.params.type !== 'page') {
       extend(swiperParams.on, {
         touchStart(swiper, e) {
           pb.onTouchStart(e);
           pb.emit('local::touchStart', e);
         },
-
         touchMoveOpposite(swiper, e) {
           pb.onTouchMove(e);
           pb.emit('local::touchMoveOpposite', e);
         },
-
         touchEnd(swiper, e) {
           pb.onTouchEnd(e);
           pb.emit('local::touchEnd', e);
         }
-
       });
     }
-
     if (pb.params.virtualSlides) {
       extend(swiperParams, {
         virtual: {
           slides: pb.params.photos,
-
           renderSlide(photo, index) {
             if (photo.html || (typeof photo === 'string' || photo instanceof String) && photo.indexOf('<') >= 0 && photo.indexOf('>') >= 0) {
               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);
           }
-
         }
       });
     }
-
     const window = getWindow();
-    pb.swiper = app.swiper ? app.swiper.create(pb.$swiperContainerEl, swiperParams) : new window.Swiper(pb.$swiperContainerEl, swiperParams);
-
-    if (pb.activeIndex === 0) {
+    pb.swiper = app.swiper ? app.swiper.create(pb.$swiperContainerEl[0], swiperParams) : new window.Swiper(pb.$swiperContainerEl[0], swiperParams);
+    if (pb.activeIndex === 0 || pb.params.virtualSlides) {
       pb.onSlideChange(pb.swiper);
     }
-
     if (pb.$el) {
       pb.$el.trigger('photobrowser:open');
     }
-
     pb.emit('local::open photoBrowserOpen', pb);
   }
-
   onOpened() {
     const pb = this;
-
     if (pb.$el && pb.params.type === 'standalone') {
       pb.$el.css('animation', 'none');
     }
-
     if (pb.$el) {
       pb.$el.trigger('photobrowser:opened');
     }
-
     pb.emit('local::opened photoBrowserOpened', pb);
   }
-
   onClose() {
     const pb = this;
-    if (pb.destroyed) return; // Destroy Swiper
+    if (pb.destroyed) return;
 
+    // Destroy Swiper
     if (pb.swiper && pb.swiper.destroy) {
       pb.swiper.destroy(true, false);
       pb.swiper = null;
       delete pb.swiper;
     }
-
     if (pb.$el) {
       pb.$el.trigger('photobrowser:close');
     }
-
     pb.emit('local::close photoBrowserClose', pb);
   }
-
   onClosed() {
     const pb = this;
     if (pb.destroyed) return;
@@ -537,15 +452,13 @@ class PhotoBrowser extends Framework7Class {
     pb.el = null;
     delete pb.$el;
     delete pb.el;
-
     if (pb.$el) {
       pb.$el.trigger('photobrowser:closed');
     }
-
     pb.emit('local::closed photoBrowserClosed', pb);
-  } // Open
-
+  }
 
+  // Open
   openPage() {
     const pb = this;
     if (pb.opened) return pb;
@@ -560,26 +473,21 @@ class PhotoBrowser extends Framework7Class {
             pb.view.$el.addClass(`with-photo-browser-page with-photo-browser-page-${pb.params.theme}`);
             pb.onOpen('page', page.el);
           },
-
           pageAfterIn(e, page) {
             pb.onOpened('page', page.el);
           },
-
           pageBeforeOut(e, page) {
             pb.view.$el.removeClass(`with-photo-browser-page with-photo-browser-page-exposed with-photo-browser-page-${pb.params.theme}`);
             pb.onClose('page', page.el);
           },
-
           pageAfterOut(e, page) {
             pb.onClosed('page', page.el);
           }
-
         }
       }
     });
     return pb;
   }
-
   openStandalone() {
     const pb = this;
     if (pb.opened) return pb;
@@ -591,22 +499,17 @@ class PhotoBrowser extends Framework7Class {
         popupOpen(popup) {
           pb.onOpen('popup', popup.el);
         },
-
         popupOpened(popup) {
           pb.onOpened('popup', popup.el);
         },
-
         popupClose(popup) {
           pb.onClose('popup', popup.el);
         },
-
         popupClosed(popup) {
           pb.onClosed('popup', popup.el);
         }
-
       }
     };
-
     if (pb.params.routableModals && pb.view) {
       pb.view.router.navigate({
         url: pb.url,
@@ -618,10 +521,8 @@ class PhotoBrowser extends Framework7Class {
     } else {
       pb.modal = pb.app.popup.create(popupParams).open();
     }
-
     return pb;
   }
-
   openPopup() {
     const pb = this;
     if (pb.opened) return pb;
@@ -634,22 +535,17 @@ class PhotoBrowser extends Framework7Class {
         popupOpen(popup) {
           pb.onOpen('popup', popup.el);
         },
-
         popupOpened(popup) {
           pb.onOpened('popup', popup.el);
         },
-
         popupClose(popup) {
           pb.onClose('popup', popup.el);
         },
-
         popupClosed(popup) {
           pb.onClosed('popup', popup.el);
         }
-
       }
     };
-
     if (pb.params.routableModals && pb.view) {
       pb.view.router.navigate({
         url: pb.url,
@@ -661,85 +557,66 @@ class PhotoBrowser extends Framework7Class {
     } else {
       pb.modal = pb.app.popup.create(popupParams).open();
     }
-
     return pb;
-  } // Exposition
-
+  }
 
+  // Exposition
   expositionEnable() {
     const pb = this;
-
     if (pb.params.type === 'page') {
       pb.view.$el.addClass('with-photo-browser-page-exposed');
     }
-
     if (pb.$el) pb.$el.addClass('photo-browser-exposed');
     if (pb.params.expositionHideCaptions) pb.$captionsContainerEl.addClass('photo-browser-captions-exposed');
     pb.exposed = true;
     return pb;
   }
-
   expositionDisable() {
     const pb = this;
-
     if (pb.params.type === 'page') {
       pb.view.$el.removeClass('with-photo-browser-page-exposed');
     }
-
     if (pb.$el) pb.$el.removeClass('photo-browser-exposed');
     if (pb.params.expositionHideCaptions) pb.$captionsContainerEl.removeClass('photo-browser-captions-exposed');
     pb.exposed = false;
     return pb;
   }
-
   expositionToggle() {
     const pb = this;
-
     if (pb.params.type === 'page') {
       pb.view.$el.toggleClass('with-photo-browser-page-exposed');
     }
-
     if (pb.$el) pb.$el.toggleClass('photo-browser-exposed');
     if (pb.params.expositionHideCaptions) pb.$captionsContainerEl.toggleClass('photo-browser-captions-exposed');
     pb.exposed = !pb.exposed;
     return pb;
   }
-
   open(index) {
     const pb = this;
     const type = pb.params.type;
-
     if (pb.opened) {
       if (pb.swiper && typeof index !== 'undefined') {
         pb.swiper.slideTo(parseInt(index, 10));
       }
-
       return pb;
     }
-
     if (typeof index !== 'undefined') {
       pb.activeIndex = index;
     }
-
     if (type === 'standalone') {
       pb.openStandalone();
     }
-
     if (type === 'page') {
       pb.openPage();
     }
-
     if (type === 'popup') {
       pb.openPopup();
     }
-
     return pb;
   }
-
   close() {
     const pb = this;
     if (!pb.opened) return pb;
-
     if (pb.params.routableModals && pb.view || pb.openedIn === 'page') {
       pb.view.router.back();
     } else {
@@ -752,28 +629,21 @@ class PhotoBrowser extends Framework7Class {
       });
       pb.modal.close();
     }
-
     return pb;
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   init() {}
-
   destroy() {
     let pb = this;
     pb.emit('local::beforeDestroy photoBrowserBeforeDestroy', pb);
-
     if (pb.$el) {
       pb.$el.trigger('photobrowser:beforedestroy');
       pb.$el[0].f7PhotoBrowser = null;
       delete pb.$el[0].f7PhotoBrowser;
     }
-
     deleteProps(pb);
     pb.destroyed = true;
     pb = null;
   }
-
 }
-
 export default PhotoBrowser;