framework7 7.0.0-beta.8 → 7.0.2

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

@@ -8,7 +8,11 @@ import Framework7Class from '../../shared/class.js';
 import $jsx from '../../shared/$jsx.js';
 
 class PhotoBrowser extends Framework7Class {
-  constructor(app, params = {}) {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params, [app]);
     const pb = this;
     pb.app = app;
@@ -372,35 +376,65 @@ class PhotoBrowser extends Framework7Class {
           pb.emit('local::doubleClick', e);
         },
 
-        slideChange(...args) {
+        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(...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(...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(...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(...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(...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(...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);

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,a.extend),n=a.now,i=a.nextTick,l=a.deleteProps;class d extends s{constructor(e,o={}){super(o,[e]);const r=this;r.app=e;const a=p({on:{}},e.params.photoBrowser);r.useModulesParams(a),r.params=p(a,o),p(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=n()),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?i((()=>{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,i((()=>{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 $jsx("div",{class:"navbar navbar-photo-browser "+("dark"===e.params.theme?"navbar-photo-browser-dark":"")},$jsx("div",{class:"navbar-bg"}),$jsx("div",{class:"navbar-inner navbar-inner-centered-title sliding"},!s&&$jsx("div",{class:"left"},$jsx("a",{class:`link ${r?"":"icon-only"} back`},$jsx("i",{class:"icon icon-back "+(o?`color-${o}`:"")}),r&&$jsx("span",null,r))),a&&$jsx("div",{class:"title"},$jsx("span",{class:"photo-browser-current"}),$jsx("span",{class:"photo-browser-of"},e.params.navbarOfText),$jsx("span",{class:"photo-browser-total"})),s&&$jsx("div",{class:"right"},$jsx("a",{class:"link popup-close","data-popup":".photo-browser-popup"},$jsx("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"),$jsx("div",{class:"toolbar toolbar-bottom tabbar"},$jsx("div",{class:"toolbar-inner"},$jsx("a",{class:"link photo-browser-prev"},$jsx("i",{class:"icon icon-back "+(o?`color-${o}`:"")})),$jsx("a",{class:"link photo-browser-next"},$jsx("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):$jsx("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):$jsx("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):$jsx("div",{class:"photo-browser-slide photo-browser-slide-lazy swiper-slide","data-swiper-slide-index":o},$jsx("div",{class:"swiper-lazy-preloader"}),$jsx("span",{class:"swiper-zoom-container"},$jsx("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):$jsx("div",{class:"photo-browser-slide swiper-slide","data-swiper-slide-index":o},$jsx("span",{class:"swiper-zoom-container"},$jsx("img",{src:e.url?e.url:e})))}render(){const e=this;return e.params.render?e.params.render.call(e,e.params):$jsx("div",{class:`photo-browser photo-browser-${e.params.theme}`},$jsx("div",{class:"view"},$jsx("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(),$jsx("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):""))),$jsx("div",{class:"photo-browser-swiper-container swiper"},$jsx("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 n;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=p({},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(n),a.params.exposition&&(n=setTimeout((()=>{a.expositionToggle()}),350)),a.emit("local::tap",e),a.emit("local::click",e)},doubleClick(e){clearTimeout(n),a.emit("local::doubleTap",e),a.emit("local::doubleClick",e)},slideChange(...e){a.onSlideChange(this),a.emit("local::slideChange",...e)},transitionStart(...e){a.emit("local::transitionStart",...e)},transitionEnd(...e){a.emit("local::transitionEnd",...e)},slideChangeTransitionStart(...e){a.onSlideChange(this),a.emit("local::slideChangeTransitionStart",...e)},slideChangeTransitionEnd(...e){a.emit("local::slideChangeTransitionEnd",...e)},lazyImageLoad(...e){a.emit("local::lazyImageLoad",...e)},lazyImageReady(...e){const o=e[0];r(o).removeClass("photo-browser-slide-lazy"),a.emit("local::lazyImageReady",...e)}}});a.params.swipeToClose&&"page"!==a.params.type&&p(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&&p(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)}});const l=getWindow();a.swiper=s.swiper?s.swiper.create(a.$swiperContainerEl,i):new l.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",(()=>{i((()=>{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),l(e),e.destroyed=!0,e=null}}var c={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:d,app:this,domProp:"f7PhotoBrowser"})},static:{PhotoBrowser:d}};if(o){if(e.prototype.modules&&e.prototype.modules[c.name])return;e.use(c),e.instance&&(e.instance.useModuleParams(c,e.instance.params),e.instance.useModule(c))}return c}(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,a.extend),n=a.now,i=a.nextTick,l=a.deleteProps;class d extends s{constructor(e,o){void 0===o&&(o={}),super(o,[e]);const r=this;r.app=e;const a=p({on:{}},e.params.photoBrowser);r.useModulesParams(a),r.params=p(a,o),p(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=n()),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?i((()=>{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,i((()=>{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 $jsx("div",{class:"navbar navbar-photo-browser "+("dark"===e.params.theme?"navbar-photo-browser-dark":"")},$jsx("div",{class:"navbar-bg"}),$jsx("div",{class:"navbar-inner navbar-inner-centered-title sliding"},!s&&$jsx("div",{class:"left"},$jsx("a",{class:`link ${r?"":"icon-only"} back`},$jsx("i",{class:"icon icon-back "+(o?`color-${o}`:"")}),r&&$jsx("span",null,r))),a&&$jsx("div",{class:"title"},$jsx("span",{class:"photo-browser-current"}),$jsx("span",{class:"photo-browser-of"},e.params.navbarOfText),$jsx("span",{class:"photo-browser-total"})),s&&$jsx("div",{class:"right"},$jsx("a",{class:"link popup-close","data-popup":".photo-browser-popup"},$jsx("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"),$jsx("div",{class:"toolbar toolbar-bottom tabbar"},$jsx("div",{class:"toolbar-inner"},$jsx("a",{class:"link photo-browser-prev"},$jsx("i",{class:"icon icon-back "+(o?`color-${o}`:"")})),$jsx("a",{class:"link photo-browser-next"},$jsx("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):$jsx("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):$jsx("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):$jsx("div",{class:"photo-browser-slide photo-browser-slide-lazy swiper-slide","data-swiper-slide-index":o},$jsx("div",{class:"swiper-lazy-preloader"}),$jsx("span",{class:"swiper-zoom-container"},$jsx("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):$jsx("div",{class:"photo-browser-slide swiper-slide","data-swiper-slide-index":o},$jsx("span",{class:"swiper-zoom-container"},$jsx("img",{src:e.url?e.url:e})))}render(){const e=this;return e.params.render?e.params.render.call(e,e.params):$jsx("div",{class:`photo-browser photo-browser-${e.params.theme}`},$jsx("div",{class:"view"},$jsx("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(),$jsx("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):""))),$jsx("div",{class:"photo-browser-swiper-container swiper"},$jsx("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 n;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=p({},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(n),a.params.exposition&&(n=setTimeout((()=>{a.expositionToggle()}),350)),a.emit("local::tap",e),a.emit("local::click",e)},doubleClick(e){clearTimeout(n),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&&p(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&&p(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)}});const l=getWindow();a.swiper=s.swiper?s.swiper.create(a.$swiperContainerEl,i):new l.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",(()=>{i((()=>{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),l(e),e.destroyed=!0,e=null}}var c={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:d,app:this,domProp:"f7PhotoBrowser"})},static:{PhotoBrowser:d}};if(o){if(e.prototype.modules&&e.prototype.modules[c.name])return;e.use(c),e.instance&&(e.instance.useModuleParams(c,e.instance.params),e.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/picker/picker-class.js

@@ -9,7 +9,11 @@ import pickerColumn from './picker-column.js';
 import $jsx from '../../shared/$jsx.js';
 
 class Picker extends Framework7Class {
-  constructor(app, params = {}) {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     super(params, [app]);
     const picker = this;
     const device = getDevice();
@@ -167,7 +171,7 @@ class Picker extends Framework7Class {
     for (let i = 0; i < picker.cols.length; i += 1) {
       if (!picker.cols[i].divider) {
         picker.cols[i].calcSize();
-        picker.cols[i].setValue(picker.cols[i].value, 0, false);
+        picker.cols[i].setValue(picker.cols[i].value, false);
       }
     }
   }
@@ -216,7 +220,7 @@ class Picker extends Framework7Class {
     return value.join(' ');
   }
 
-  setValue(values, transition) {
+  setValue(values) {
     const picker = this;
     let valueIndex = 0;
 
@@ -228,7 +232,7 @@ class Picker extends Framework7Class {
 
     for (let i = 0; i < picker.cols.length; i += 1) {
       if (picker.cols[i] && !picker.cols[i].divider) {
-        picker.cols[i].setValue(values[valueIndex], transition);
+        picker.cols[i].setValue(values[valueIndex]);
         valueIndex += 1;
       }
     }
@@ -436,11 +440,11 @@ class Picker extends Framework7Class {
     }); // Set value
 
     if (!initialized) {
-      if (value) picker.setValue(value, 0);else if (params.value) {
-        picker.setValue(params.value, 0);
+      if (value) picker.setValue(value);else if (params.value) {
+        picker.setValue(params.value);
       }
     } else if (value) {
-      picker.setValue(value, 0);
+      picker.setValue(value);
     } // Extra focus
 
 

package/components/picker/picker-column.js

@@ -1,9 +1,7 @@
 import $ from '../../shared/dom7.js';
-import { requestAnimationFrame, getTranslate } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 export default function pickerColumn(colEl, updateItems) {
-  const picker = this;
-  const app = picker.app;
+  const picker = this; // const app = picker.app;
+
   const $colEl = $(colEl);
   const colIndex = $colEl.index();
   const col = picker.cols[colIndex];
@@ -13,17 +11,7 @@ export default function pickerColumn(colEl, updateItems) {
   col.$itemsEl = col.$el.find('.picker-items');
   col.items = col.$itemsEl.find('.picker-item');
   let itemHeight;
-  let itemsHeight;
-  let minTranslate;
-  let maxTranslate;
-  let animationFrameId;
-
-  function updateDuringScroll() {
-    animationFrameId = requestAnimationFrame(() => {
-      col.updateItems(undefined, undefined, 0);
-      updateDuringScroll();
-    });
-  }
+  let colHeight;
 
   col.replaceValues = function replaceColValues(values, displayValues) {
     col.detachEvents();
@@ -32,99 +20,63 @@ export default function pickerColumn(colEl, updateItems) {
     col.$itemsEl.html(picker.renderColumn(col, true));
     col.items = col.$itemsEl.find('.picker-item');
     col.calcSize();
-    col.setValue(col.values[0], 0, true);
+    col.setValue(col.values[0], true);
     col.attachEvents();
   };
 
   col.calcSize = function calcColSize() {
-    if (picker.params.rotateEffect) {
-      col.$el.removeClass('picker-column-absolute');
-      if (!col.width) col.$el.css({
-        width: ''
-      });
-    }
-
-    let colWidth = 0;
-    const colHeight = col.$el[0].offsetHeight;
+    colHeight = col.$el[0].offsetHeight;
     itemHeight = col.items[0].offsetHeight;
-    itemsHeight = itemHeight * col.items.length;
-    minTranslate = colHeight / 2 - itemsHeight + itemHeight / 2;
-    maxTranslate = colHeight / 2 - itemHeight / 2;
-
-    if (col.width) {
-      colWidth = col.width;
-      if (parseInt(colWidth, 10) === colWidth) colWidth += 'px';
-      col.$el.css({
-        width: colWidth
-      });
-    }
+    const hadPadding = col.el.style.getPropertyValue('--f7-picker-scroll-padding');
+    col.el.style.setProperty('--f7-picker-scroll-padding', `${(colHeight - itemHeight) / 2}px`);
 
-    if (picker.params.rotateEffect) {
-      if (!col.width) {
-        col.items.each(itemEl => {
-          const item = $(itemEl).children('span');
-          colWidth = Math.max(colWidth, item[0].offsetWidth);
-        });
-        col.$el.css({
-          width: `${colWidth + 2}px`
-        });
-      }
-
-      col.$el.addClass('picker-column-absolute');
+    if (!hadPadding) {
+      col.$itemsEl[0].scrollTop = 0;
     }
   };
 
-  col.setValue = function setColValue(newValue, transition = '', valueCallbacks) {
+  col.setValue = function setColValue(newValue, valueCallbacks) {
     const newActiveIndex = col.$itemsEl.find(`.picker-item[data-picker-value="${newValue}"]`).index();
 
     if (typeof newActiveIndex === 'undefined' || newActiveIndex === -1) {
       return;
     }
 
-    const newTranslate = -newActiveIndex * itemHeight + maxTranslate; // Update wrapper
-
-    col.$itemsEl.transition(transition);
-    col.$itemsEl.transform(`translate3d(0,${newTranslate}px,0)`); // Watch items
-
-    if (picker.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex) {
-      cancelAnimationFrame(animationFrameId);
-      col.$itemsEl.transitionEnd(() => {
-        cancelAnimationFrame(animationFrameId);
-      });
-      updateDuringScroll();
-    } // Update items
-
+    const newScrollTop = newActiveIndex * itemHeight;
+    col.$itemsEl[0].scrollTop = newScrollTop; // Update items
 
-    col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks);
+    col.updateItems(newActiveIndex, newScrollTop, valueCallbacks);
   };
 
-  col.updateItems = function updateColItems(activeIndex, translate, transition, valueCallbacks) {
-    if (typeof translate === 'undefined') {
+  col.updateItems = function updateColItems(activeIndex, scrollTop, valueCallbacks) {
+    if (typeof scrollTop === 'undefined') {
       // eslint-disable-next-line
-      translate = getTranslate(col.$itemsEl[0], 'y');
+      scrollTop = col.$itemsEl[0].scrollTop;
     }
+    /* eslint-disable no-param-reassign */
 
-    if (typeof activeIndex === 'undefined') // eslint-disable-next-line
-      activeIndex = -Math.round((translate - maxTranslate) / itemHeight); // eslint-disable-next-line
 
-    if (activeIndex < 0) activeIndex = 0; // eslint-disable-next-line
+    if (typeof activeIndex === 'undefined') {
+      activeIndex = Math.round(scrollTop / itemHeight);
+    }
 
+    if (activeIndex < 0) activeIndex = 0;
     if (activeIndex >= col.items.length) activeIndex = col.items.length - 1;
+    /* eslint-enable no-param-reassign */
+
     const previousActiveIndex = col.activeIndex;
     col.activeIndex = activeIndex;
     col.$itemsEl.find('.picker-item-selected').removeClass('picker-item-selected');
-    col.items.transition(transition);
-    const selectedItem = col.items.eq(activeIndex).addClass('picker-item-selected').transform(''); // Set 3D rotate effect
+    const selectedItem = col.items.eq(activeIndex);
+    selectedItem.addClass('picker-item-selected').children().transform(''); // Set 3D rotate effect
 
     if (picker.params.rotateEffect) {
       col.items.each(itemEl => {
         const $itemEl = $(itemEl);
-        const itemOffsetTop = $itemEl.index() * itemHeight;
-        const translateOffset = maxTranslate - translate;
-        const itemOffset = itemOffsetTop - translateOffset;
+        const itemOffset = itemEl.offsetTop - (colHeight - itemHeight) / 2 - scrollTop;
         const percentage = itemOffset / itemHeight;
         const itemsFit = Math.ceil(col.height / itemHeight / 2) + 1;
-        let angle = -18 * percentage;
+        let angle = -24 * percentage;
         if (angle > 180) angle = 180;
         if (angle < -180) angle = -180;
 
@@ -134,7 +86,7 @@ export default function pickerColumn(colEl, updateItems) {
           $itemEl.removeClass('picker-item-far');
         }
 
-        $itemEl.transform(`translate3d(0, ${-translate + maxTranslate}px, ${picker.needsOriginFix ? -110 : 0}px) rotateX(${angle}deg)`);
+        $itemEl.children('span').transform(`translate3d(0, ${-percentage * itemHeight}px, -100px) rotateX(${angle}deg)`);
       });
     }
 
@@ -153,219 +105,31 @@ export default function pickerColumn(colEl, updateItems) {
     }
   };
 
-  let allowItemClick = true;
-  let isTouched;
-  let isMoved;
-  let touchStartY;
-  let touchCurrentY;
-  let touchStartTime;
-  let touchEndTime;
-  let startTranslate;
-  let returnTo;
-  let currentTranslate;
-  let prevTranslate;
-  let velocityTranslate;
-
-  function handleTouchStart(e) {
-    if (isMoved || isTouched) return;
-    e.preventDefault();
-    isTouched = true;
-    touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-    touchCurrentY = touchStartY;
-    touchStartTime = new Date().getTime();
-    allowItemClick = true;
-    startTranslate = getTranslate(col.$itemsEl[0], 'y');
-    currentTranslate = startTranslate;
-  }
-
-  function handleTouchMove(e) {
-    if (!isTouched) return;
-    e.preventDefault();
-    allowItemClick = false;
-    touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
-    if (!isMoved) {
-      // First move
-      cancelAnimationFrame(animationFrameId);
-      isMoved = true;
-      startTranslate = getTranslate(col.$itemsEl[0], 'y');
-      currentTranslate = startTranslate;
-      col.$itemsEl.transition(0);
-    }
-
-    const diff = touchCurrentY - touchStartY;
-    currentTranslate = startTranslate + diff;
-    returnTo = undefined; // Normalize translate
-
-    if (currentTranslate < minTranslate) {
-      currentTranslate = minTranslate - (minTranslate - currentTranslate) ** 0.8;
-      returnTo = 'min';
-    }
-
-    if (currentTranslate > maxTranslate) {
-      currentTranslate = maxTranslate + (currentTranslate - maxTranslate) ** 0.8;
-      returnTo = 'max';
-    } // Transform wrapper
-
-
-    col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-    col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnTouchmove); // Calc velocity
-
-    velocityTranslate = currentTranslate - prevTranslate || currentTranslate;
-    prevTranslate = currentTranslate;
-  }
-
-  function handleTouchEnd() {
-    if (!isTouched || !isMoved) {
-      isTouched = false;
-      isMoved = false;
-      return;
-    }
-
-    isTouched = false;
-    isMoved = false;
-    col.$itemsEl.transition('');
-
-    if (returnTo) {
-      if (returnTo === 'min') {
-        col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-      } else {
-        col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-      }
-    }
-
-    touchEndTime = new Date().getTime();
-    let newTranslate;
-
-    if (touchEndTime - touchStartTime > 300) {
-      newTranslate = currentTranslate;
-    } else {
-      newTranslate = currentTranslate + velocityTranslate * picker.params.momentumRatio;
-    }
-
-    newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-    const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-    if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-    col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-    col.updateItems(activeIndex, newTranslate, '', true); // Watch items
-
-    if (picker.params.updateValuesOnMomentum) {
-      updateDuringScroll();
-      col.$itemsEl.transitionEnd(() => {
-        cancelAnimationFrame(animationFrameId);
-      });
-    } // Allow click
-
-
-    setTimeout(() => {
-      allowItemClick = true;
-    }, 100);
-  }
-
-  let mousewheelTimeout;
-
-  function handleMouseWheel(e) {
-    const {
-      deltaX,
-      deltaY
-    } = e;
-    if (Math.abs(deltaX) > Math.abs(deltaY)) return;
-    clearTimeout(mousewheelTimeout);
-    e.preventDefault();
-    cancelAnimationFrame(animationFrameId);
-    startTranslate = getTranslate(col.$itemsEl[0], 'y');
-    col.$itemsEl.transition(0);
-    currentTranslate = startTranslate - deltaY;
-    returnTo = undefined; // Normalize translate
-
-    if (currentTranslate < minTranslate) {
-      currentTranslate = minTranslate;
-      returnTo = 'min';
-    }
-
-    if (currentTranslate > maxTranslate) {
-      currentTranslate = maxTranslate;
-      returnTo = 'max';
-    } // Transform wrapper
-
-
-    col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-    col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnMousewheel); // On end
-
-    mousewheelTimeout = setTimeout(() => {
-      col.$itemsEl.transition('');
-
-      if (returnTo) {
-        if (returnTo === 'min') {
-          col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-        } else {
-          col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-        }
-      }
-
-      touchEndTime = new Date().getTime();
-      let newTranslate = currentTranslate;
-      newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-      const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-      if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-      col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-      col.updateItems(activeIndex, newTranslate, '', true);
-    }, 200);
+  function handleScroll() {
+    col.updateItems();
   }
 
   function handleClick() {
-    if (!allowItemClick) return;
-    cancelAnimationFrame(animationFrameId);
     const value = $(this).attr('data-picker-value');
     col.setValue(value);
   }
 
-  const activeListener = getSupport().passiveListener ? {
-    passive: false,
-    capture: false
-  } : false;
-
   col.attachEvents = function attachColEvents() {
-    col.$el.on(app.touchEvents.start, handleTouchStart, activeListener);
-    app.on('touchmove:active', handleTouchMove);
-    app.on('touchend:passive', handleTouchEnd);
-
-    if (picker.params.mousewheel) {
-      col.$el.on('wheel', handleMouseWheel);
-    }
-
+    col.$itemsEl.on('scroll', handleScroll);
     col.items.on('click', handleClick);
   };
 
   col.detachEvents = function detachColEvents() {
-    col.$el.off(app.touchEvents.start, handleTouchStart, activeListener);
-    app.off('touchmove:active', handleTouchMove);
-    app.off('touchend:passive', handleTouchEnd);
-
-    if (picker.params.mousewheel) {
-      col.$el.off('wheel', handleMouseWheel);
-    }
-
     col.items.off('click', handleClick);
   };
 
   col.init = function initCol() {
     col.calcSize();
-    col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`).transition(0);
     if (colIndex === 0) col.$el.addClass('picker-column-first');
-    if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last'); // Update items on init
+    if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last');
+    if (picker.params.freeMode) col.$el.addClass('picker-column-free-mode'); // Update items on init
 
-    if (updateItems) col.updateItems(0, maxTranslate, 0);
+    if (updateItems) col.updateItems(0);
     col.attachEvents();
   };
 

package/components/picker/picker-rtl.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{left:100%}.picker-column.picker-column-last:after{right:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{transition:.3s;transition-timing-function:ease-out}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;transition:.3s;color:var(--f7-picker-item-text-color);cursor:pointer}.picker-item span{padding:0 10px}.picker-column-absolute .picker-item{position:absolute}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden;perspective:1200px}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{transform-origin:center center -110px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-timing-function:ease-out}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{left:100%}.picker-column.picker-column-last:after{right:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scrollbar-width:none;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px}.picker-items::-webkit-scrollbar{display:none;opacity:0}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}

package/components/picker/picker.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{right:100%}.picker-column.picker-column-last:after{left:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{transition:.3s;transition-timing-function:ease-out}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;transition:.3s;color:var(--f7-picker-item-text-color);cursor:pointer}.picker-item span{padding:0 10px}.picker-column-absolute .picker-item{position:absolute}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden;perspective:1200px}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{transform-origin:center center -110px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-timing-function:ease-out}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{right:100%}.picker-column.picker-column-last:after{left:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scrollbar-width:none;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px}.picker-items::-webkit-scrollbar{display:none;opacity:0}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}