framework7 8.3.3 → 9.0.0-beta.1

package/modules/router/swipe-back.js

@@ -1,17 +1,14 @@
 import $ from '../../shared/dom7.js';
 import History from '../../shared/history.js';
-import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import { now } from '../../shared/utils.js';
 function SwipeBack(r) {
   const router = r;
   const {
     $el,
-    $navbarsEl,
     app,
     params
   } = router;
-  const support = getSupport();
   const device = getDevice();
   let isTouched = false;
   let isMoved = false;
@@ -23,271 +20,12 @@ function SwipeBack(r) {
   let touchesDiff;
   let allowViewTouchMove = true;
   let touchStartTime;
-  let $currentNavbarEl = [];
-  let $previousNavbarEl = [];
-  let dynamicNavbar;
   let $pageShadowEl;
   let $pageOpacityEl;
-  let animatableNavEls;
   const paramsSwipeBackAnimateShadow = params[`${app.theme}SwipeBackAnimateShadow`];
   const paramsSwipeBackAnimateOpacity = params[`${app.theme}SwipeBackAnimateOpacity`];
   const paramsSwipeBackActiveArea = params[`${app.theme}SwipeBackActiveArea`];
   const paramsSwipeBackThreshold = params[`${app.theme}SwipeBackThreshold`];
-  const transformOrigin = app.rtl ? 'right center' : 'left center';
-  const transformOriginTitleLarge = app.rtl ? 'calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center' : 'calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center';
-  function animatableNavElements() {
-    const els = [];
-    const inverter = app.rtl ? -1 : 1;
-    const currentNavIsTransparent = $currentNavbarEl.hasClass('navbar-transparent') && !$currentNavbarEl.hasClass('navbar-large') && !$currentNavbarEl.hasClass('navbar-transparent-visible');
-    const currentNavIsLarge = $currentNavbarEl.hasClass('navbar-large');
-    const currentNavIsCollapsed = $currentNavbarEl.hasClass('navbar-large-collapsed');
-    const currentNavIsLargeTransparent = $currentNavbarEl.hasClass('navbar-large-transparent') || $currentNavbarEl.hasClass('navbar-large') && $currentNavbarEl.hasClass('navbar-transparent');
-    const previousNavIsTransparent = $previousNavbarEl.hasClass('navbar-transparent') && !$previousNavbarEl.hasClass('navbar-large') && !$previousNavbarEl.hasClass('navbar-transparent-visible');
-    const previousNavIsLarge = $previousNavbarEl.hasClass('navbar-large');
-    const previousNavIsCollapsed = $previousNavbarEl.hasClass('navbar-large-collapsed');
-    const previousNavIsLargeTransparent = $previousNavbarEl.hasClass('navbar-large-transparent') || $previousNavbarEl.hasClass('navbar-large') && $previousNavbarEl.hasClass('navbar-transparent');
-    const fromLarge = currentNavIsLarge && !currentNavIsCollapsed;
-    const toLarge = previousNavIsLarge && !previousNavIsCollapsed;
-    const $currentNavElements = $currentNavbarEl.find('.left, .title, .right, .subnavbar, .fading, .title-large, .navbar-bg');
-    const $previousNavElements = $previousNavbarEl.find('.left, .title, .right, .subnavbar, .fading, .title-large, .navbar-bg');
-    let activeNavBackIconText;
-    let previousNavBackIconText;
-    if (params.iosAnimateNavbarBackIcon) {
-      if ($currentNavbarEl.hasClass('sliding') || $currentNavbarEl.find('.navbar-inner.sliding').length) {
-        activeNavBackIconText = $currentNavbarEl.find('.left').find('.back .icon + span').eq(0);
-      } else {
-        activeNavBackIconText = $currentNavbarEl.find('.left.sliding').find('.back .icon + span').eq(0);
-      }
-      if ($previousNavbarEl.hasClass('sliding') || $previousNavbarEl.find('.navbar-inner.sliding').length) {
-        previousNavBackIconText = $previousNavbarEl.find('.left').find('.back .icon + span').eq(0);
-      } else {
-        previousNavBackIconText = $previousNavbarEl.find('.left.sliding').find('.back .icon + span').eq(0);
-      }
-      if (activeNavBackIconText.length) {
-        $previousNavElements.each(el => {
-          if (!$(el).hasClass('title')) return;
-          el.f7NavbarLeftOffset += activeNavBackIconText.prev('.icon')[0].offsetWidth;
-        });
-      }
-    }
-    $currentNavElements.each(navEl => {
-      const $navEl = $(navEl);
-      const isSubnavbar = $navEl.hasClass('subnavbar');
-      const isLeft = $navEl.hasClass('left');
-      const isTitle = $navEl.hasClass('title');
-      const isBg = $navEl.hasClass('navbar-bg');
-      if ((isTitle || isBg) && currentNavIsTransparent) return;
-      if (!fromLarge && $navEl.hasClass('.title-large')) return;
-      const el = {
-        el: navEl
-      };
-      if (fromLarge) {
-        if (isTitle) return;
-        if ($navEl.hasClass('title-large')) {
-          if (els.indexOf(el) < 0) els.push(el);
-          el.overflow = 'visible';
-          $navEl.find('.title-large-text').each(subNavEl => {
-            els.push({
-              el: subNavEl,
-              transform: progress => `translateX(${progress * 100 * inverter}%)`
-            });
-          });
-          return;
-        }
-      }
-      if (toLarge) {
-        if (!fromLarge) {
-          if ($navEl.hasClass('title-large')) {
-            if (els.indexOf(el) < 0) els.push(el);
-            el.opacity = 0;
-          }
-        }
-        if (isLeft) {
-          if (els.indexOf(el) < 0) els.push(el);
-          el.opacity = progress => 1 - progress ** 0.33;
-          $navEl.find('.back span').each(subNavEl => {
-            els.push({
-              el: subNavEl,
-              'transform-origin': transformOrigin,
-              transform: progress => `translateX(calc(${progress} * (var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset)))) translateY(calc(${progress} * (var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2))) scale(${1 + 1 * progress})`
-            });
-          });
-          return;
-        }
-      }
-      if (isBg) {
-        if (els.indexOf(el) < 0) els.push(el);
-        if (!fromLarge && !toLarge) {
-          if (currentNavIsCollapsed) {
-            if (currentNavIsLargeTransparent) {
-              el.className = 'ios-swipeback-navbar-bg-large';
-            }
-            el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))`;
-          } else {
-            el.transform = progress => `translateX(${100 * progress * inverter}%)`;
-          }
-        }
-        if (!fromLarge && toLarge) {
-          el.className = 'ios-swipeback-navbar-bg-large';
-          el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-1 * ${1 - progress} * var(--f7-navbar-large-title-height)))`;
-        }
-        if (fromLarge && toLarge) {
-          el.transform = progress => `translateX(${100 * progress * inverter}%)`;
-        }
-        if (fromLarge && !toLarge) {
-          el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-${progress} * var(--f7-navbar-large-title-height)))`;
-        }
-        return;
-      }
-      if ($navEl.hasClass('title-large')) return;
-      const isSliding = $navEl.hasClass('sliding') || $navEl.parents('.navbar-inner.sliding').length;
-      if (els.indexOf(el) < 0) els.push(el);
-      if (!isSubnavbar || isSubnavbar && !isSliding) {
-        el.opacity = progress => 1 - progress ** 0.33;
-      }
-      if (isSliding) {
-        let transformTarget = el;
-        if (isLeft && activeNavBackIconText.length && params.iosAnimateNavbarBackIcon) {
-          const textEl = {
-            el: activeNavBackIconText[0]
-          };
-          transformTarget = textEl;
-          els.push(textEl);
-        }
-        transformTarget.transform = progress => {
-          let activeNavTranslate = progress * transformTarget.el.f7NavbarRightOffset;
-          if (device.pixelRatio === 1) activeNavTranslate = Math.round(activeNavTranslate);
-          if (isSubnavbar && currentNavIsLarge) {
-            return `translate3d(${activeNavTranslate}px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)`;
-          }
-          return `translate3d(${activeNavTranslate}px,0,0)`;
-        };
-      }
-    });
-    $previousNavElements.each(navEl => {
-      const $navEl = $(navEl);
-      const isSubnavbar = $navEl.hasClass('subnavbar');
-      const isLeft = $navEl.hasClass('left');
-      const isTitle = $navEl.hasClass('title');
-      const isBg = $navEl.hasClass('navbar-bg');
-      if ((isTitle || isBg) && previousNavIsTransparent) return;
-      const el = {
-        el: navEl
-      };
-      if (toLarge) {
-        if (isTitle) return;
-        if (els.indexOf(el) < 0) els.push(el);
-        if ($navEl.hasClass('title-large')) {
-          el.opacity = 1;
-          el.overflow = 'visible';
-          $navEl.find('.title-large-text').each(subNavEl => {
-            els.push({
-              el: subNavEl,
-              'transform-origin': transformOriginTitleLarge,
-              opacity: progress => progress ** 3,
-              transform: progress => `translateX(calc(${1 - progress} * (var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset)))) translateY(calc(${progress - 1} * var(--f7-navbar-large-title-height) + ${1 - progress} * var(--f7-navbar-large-title-padding-vertical))) scale(${0.5 + progress * 0.5})`
-            });
-          });
-          return;
-        }
-      }
-      if (isBg) {
-        if (els.indexOf(el) < 0) els.push(el);
-        if (!fromLarge && !toLarge) {
-          if (previousNavIsCollapsed) {
-            if (previousNavIsLargeTransparent) {
-              el.className = 'ios-swipeback-navbar-bg-large';
-            }
-            el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))`;
-          } else {
-            el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%)`;
-          }
-        }
-        if (!fromLarge && toLarge) {
-          el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%) translateY(calc(-1 * ${1 - progress} * var(--f7-navbar-large-title-height)))`;
-        }
-        if (fromLarge && !toLarge) {
-          el.className = 'ios-swipeback-navbar-bg-large';
-          el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%) translateY(calc(-${progress} * var(--f7-navbar-large-title-height)))`;
-        }
-        if (fromLarge && toLarge) {
-          el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%)`;
-        }
-        return;
-      }
-      if ($navEl.hasClass('title-large')) return;
-      const isSliding = $navEl.hasClass('sliding') || $previousNavbarEl.children('.navbar-inner.sliding').length;
-      if (els.indexOf(el) < 0) els.push(el);
-      if (!isSubnavbar || isSubnavbar && !isSliding) {
-        el.opacity = progress => progress ** 3;
-      }
-      if (isSliding) {
-        let transformTarget = el;
-        if (isLeft && previousNavBackIconText.length && params.iosAnimateNavbarBackIcon) {
-          const textEl = {
-            el: previousNavBackIconText[0]
-          };
-          transformTarget = textEl;
-          els.push(textEl);
-        }
-        transformTarget.transform = progress => {
-          let previousNavTranslate = transformTarget.el.f7NavbarLeftOffset * (1 - progress);
-          if (device.pixelRatio === 1) previousNavTranslate = Math.round(previousNavTranslate);
-          if (isSubnavbar && previousNavIsLarge) {
-            return `translate3d(${previousNavTranslate}px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)`;
-          }
-          return `translate3d(${previousNavTranslate}px,0,0)`;
-        };
-      }
-    });
-    return els;
-  }
-  function setAnimatableNavElements(_temp) {
-    let {
-      progress,
-      reset,
-      transition,
-      reflow
-    } = _temp === void 0 ? {} : _temp;
-    const styles = ['overflow', 'transform', 'transform-origin', 'opacity'];
-    if (transition === true || transition === false) {
-      for (let i = 0; i < animatableNavEls.length; i += 1) {
-        const el = animatableNavEls[i];
-        if (el && el.el) {
-          if (transition === true) el.el.classList.add('navbar-page-transitioning');
-          if (transition === false) el.el.classList.remove('navbar-page-transitioning');
-        }
-      }
-    }
-    if (reflow && animatableNavEls.length && animatableNavEls[0] && animatableNavEls[0].el) {
-      // eslint-disable-next-line
-      animatableNavEls[0].el._clientLeft = animatableNavEls[0].el.clientLeft;
-    }
-    for (let i = 0; i < animatableNavEls.length; i += 1) {
-      const el = animatableNavEls[i];
-      if (el && el.el) {
-        if (el.className && !el.classNameSet && !reset) {
-          el.el.classList.add(el.className);
-          el.classNameSet = true;
-        }
-        if (el.className && reset) {
-          el.el.classList.remove(el.className);
-        }
-        for (let j = 0; j < styles.length; j += 1) {
-          const styleProp = styles[j];
-          if (el[styleProp]) {
-            if (reset) {
-              el.el.style[styleProp] = '';
-            } else if (typeof el[styleProp] === 'function') {
-              el.el.style[styleProp] = el[styleProp](progress);
-            } else {
-              el.el.style[styleProp] = el[styleProp];
-            }
-          }
-        }
-      }
-    }
-  }
   function handleTouchStart(e) {
     if (!e.isTrusted) return;
     const swipeBackEnabled = params[`${app.theme}SwipeBack`];
@@ -300,7 +38,6 @@ function SwipeBack(r) {
     touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
     touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
     touchStartTime = now();
-    dynamicNavbar = router.dynamicNavbar;
   }
   function handleTouchMove(e) {
     if (!e.isTrusted) return;
@@ -356,14 +93,6 @@ function SwipeBack(r) {
           $previousPageEl.append($pageOpacityEl);
         }
       }
-      if (dynamicNavbar) {
-        $currentNavbarEl = $navbarsEl.find('.navbar-current');
-        $previousNavbarEl = $navbarsEl.find('.navbar-previous');
-        if ($previousNavbarEl.length > 1) {
-          $previousNavbarEl = $previousNavbarEl.eq($previousNavbarEl.length - 1);
-        }
-        animatableNavEls = animatableNavElements($previousNavbarEl, $currentNavbarEl);
-      }
 
       // Close/Hide Any Picker
       if ($('.sheet.modal-in').length > 0 && app.sheet) {
@@ -388,9 +117,7 @@ function SwipeBack(r) {
       percentage,
       progress: percentage,
       currentPageEl: $currentPageEl[0],
-      previousPageEl: $previousPageEl[0],
-      currentNavbarEl: $currentNavbarEl[0],
-      previousNavbarEl: $previousNavbarEl[0]
+      previousPageEl: $previousPageEl[0]
     };
     $el.trigger('swipeback:move', callbackData);
     router.emit('swipebackMove', callbackData);
@@ -413,16 +140,8 @@ function SwipeBack(r) {
     $([$currentPageEl[0], $previousPageEl[0]]).addClass('page-swipeback-active');
     $currentPageEl.transform(`translate3d(${currentPageTranslate}px,0,0)`);
     if (paramsSwipeBackAnimateShadow) $pageShadowEl[0].style.opacity = 1 - 1 * percentage;
-    if (app.theme === 'ios') {
-      $previousPageEl.transform(`translate3d(${previousPageTranslate}px,0,0)`);
-    }
+    $previousPageEl.transform(`translate3d(${previousPageTranslate}px,0,0)`);
     if (paramsSwipeBackAnimateOpacity) $pageOpacityEl[0].style.opacity = 1 - 1 * percentage;
-
-    // Dynamic Navbars Animation
-    if (!dynamicNavbar) return;
-    setAnimatableNavElements({
-      progress: percentage
-    });
   }
   function handleTouchEnd(e) {
     if (!e.isTrusted) return;
@@ -441,11 +160,6 @@ function SwipeBack(r) {
       $pages.transform('');
       if ($pageShadowEl && $pageShadowEl.length > 0) $pageShadowEl.remove();
       if ($pageOpacityEl && $pageOpacityEl.length > 0) $pageOpacityEl.remove();
-      if (dynamicNavbar) {
-        setAnimatableNavElements({
-          reset: true
-        });
-      }
       return;
     }
     const timeDiff = now() - touchStartTime;
@@ -456,10 +170,6 @@ function SwipeBack(r) {
       $previousPageEl.removeClass('page-previous').addClass('page-current').removeAttr('aria-hidden');
       if ($pageShadowEl) $pageShadowEl[0].style.opacity = '';
       if ($pageOpacityEl) $pageOpacityEl[0].style.opacity = '';
-      if (dynamicNavbar) {
-        router.setNavbarPosition($currentNavbarEl, 'next');
-        router.setNavbarPosition($previousNavbarEl, 'current', false);
-      }
       pageChanged = true;
     }
     // Reset custom styles
@@ -470,22 +180,13 @@ function SwipeBack(r) {
       $currentPageEl[0]._clientLeft = $currentPageEl[0].clientLeft;
     }
     $pages.transform('');
-    if (dynamicNavbar) {
-      setAnimatableNavElements({
-        progress: pageChanged ? 1 : 0,
-        transition: true,
-        reflow: !!device.ios
-      });
-    }
     allowViewTouchMove = false;
     router.allowPageChange = false;
 
     // Swipe Back Callback
     const callbackData = {
       currentPageEl: $currentPageEl[0],
-      previousPageEl: $previousPageEl[0],
-      currentNavbarEl: $currentNavbarEl[0],
-      previousNavbarEl: $previousNavbarEl[0]
+      previousPageEl: $previousPageEl[0]
     };
     if (pageChanged) {
       // Update Route
@@ -493,11 +194,11 @@ function SwipeBack(r) {
       router.currentPage = $previousPageEl[0];
 
       // Page before animation callback
-      router.pageCallback('beforeOut', $currentPageEl, $currentNavbarEl, 'current', 'next', {
+      router.pageCallback('beforeOut', $currentPageEl, 'current', 'next', {
         route: $currentPageEl[0].f7Page.route,
         swipeBack: true
       });
-      router.pageCallback('beforeIn', $previousPageEl, $previousNavbarEl, 'previous', 'current', {
+      router.pageCallback('beforeIn', $previousPageEl, 'previous', 'current', {
         route: $previousPageEl[0].f7Page.route,
         swipeBack: true
       }, $currentPageEl[0]);
@@ -509,12 +210,6 @@ function SwipeBack(r) {
     }
     $currentPageEl.transitionEnd(() => {
       $pages.removeClass('page-transitioning page-transitioning-swipeback');
-      if (dynamicNavbar) {
-        setAnimatableNavElements({
-          reset: true,
-          transition: false
-        });
-      }
       allowViewTouchMove = true;
       router.allowPageChange = true;
       if (pageChanged) {
@@ -531,24 +226,21 @@ function SwipeBack(r) {
         }
 
         // Page after animation callback
-        router.pageCallback('afterOut', $currentPageEl, $currentNavbarEl, 'current', 'next', {
+        router.pageCallback('afterOut', $currentPageEl, 'current', 'next', {
           route: $currentPageEl[0].f7Page.route,
           swipeBack: true
         });
-        router.pageCallback('afterIn', $previousPageEl, $previousNavbarEl, 'previous', 'current', {
+        router.pageCallback('afterIn', $previousPageEl, 'previous', 'current', {
           route: $previousPageEl[0].f7Page.route,
           swipeBack: true
         });
 
         // Remove Old Page
 
-        router.pageCallback('beforeRemove', $currentPageEl, $currentNavbarEl, 'next', {
+        router.pageCallback('beforeRemove', $currentPageEl, 'next', {
           swipeBack: true
         });
         router.removePage($currentPageEl);
-        if (dynamicNavbar) {
-          router.removeNavbar($currentNavbarEl);
-        }
         $el.trigger('swipeback:afterchange', callbackData);
         router.emit('swipebackAfterChange', callbackData);
         router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
@@ -566,7 +258,7 @@ function SwipeBack(r) {
     });
   }
   function attachEvents() {
-    const passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' ? {
       passive: true,
       capture: false
     } : false;
@@ -575,7 +267,7 @@ function SwipeBack(r) {
     app.on('touchend:passive', handleTouchEnd);
   }
   function detachEvents() {
-    const passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' ? {
       passive: true,
       capture: false
     } : false;

package/modules/router/tab.js

@@ -2,10 +2,7 @@ import $ from '../../shared/dom7.js';
 import { extend } from '../../shared/utils.js';
 import History from '../../shared/history.js';
 import asyncComponent from './async-component.js';
-function tabLoad(tabRoute, loadOptions) {
-  if (loadOptions === void 0) {
-    loadOptions = {};
-  }
+function tabLoad(tabRoute, loadOptions = {}) {
   const router = this;
   const options = extend({
     animate: router.params.animate,

package/modules/store/create-store.js

@@ -1,9 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { extend } from '../../shared/utils.js';
-function createStore(storeParams) {
-  if (storeParams === void 0) {
-    storeParams = {};
-  }
+function createStore(storeParams = {}) {
   const store = {
     __store: true
   };
@@ -65,10 +62,7 @@ function createStore(storeParams) {
   store.__removeCallback = callback => {
     removeGetterCallback(callback);
   };
-  const getterValue = function (getterKey, addCallback) {
-    if (addCallback === void 0) {
-      addCallback = true;
-    }
+  const getterValue = (getterKey, addCallback = true) => {
     if (getterKey === 'constructor') return undefined;
     propsQueue = [];
     const value = getGetterValue(getterKey);

package/modules/touch/touch.d.ts

@@ -27,13 +27,15 @@ export namespace Touch {
           /** CSS selector of elements where enabled activeState will add appropriate active class. (default a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .link, .item-link) */
           activeStateElements?: string;
           /** Enables MD-theme specific touch ripple effect. (default true) */
-          mdTouchRipple?: boolean;
-          /** Enables iOS-theme specific touch ripple effect. (default false) */
-          iosTouchRipple?: boolean;
+          touchRipple?: boolean;
           /** CSS selector of elements to apply touch ripple effect on click. (default .ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus) */
           touchRippleElements?: string;
           /** CSS selector of elements to with inset touch ripple effect. (default .ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back) */
           touchRippleInsetElements?: string;
+          /** Enables iOS touch highlight effect. (default true) */
+          touchHighlight?: boolean;
+          /** CSS selector of elements to apply touch highlight effect on click. (default .toolbar-pane, .navbar-left, .navbar-right, .popover, .actions-group, .searchbar input, .searchbar-disable-button, .subnavbar, .searchbar-input-wrap .autocomplete-dropdown, .messagebar-area, .notification, .toast) */
+          touchHighlightElements?: string;
         }
       | undefined;
   }

package/modules/touch/touch.js

@@ -11,7 +11,7 @@ function initTouch() {
   const window = getWindow();
   const document = getDocument();
   const params = app.params.touch;
-  const useRipple = params[`${app.theme}TouchRipple`];
+  const useRipple = params.touchRipple && app.theme === 'md';
   if (device.ios && device.webView) {
     // Strange hack required for iOS 8 webview to work on inputs
     window.addEventListener('touchstart', () => {});
@@ -381,42 +381,27 @@ function initTouch() {
   function appTouchEndPassive(e) {
     emitAppTouchEvent('touchend:passive', e);
   }
-  const passiveListener = support.passiveListener ? {
+  const passiveListener = {
     passive: true
-  } : false;
-  const passiveListenerCapture = support.passiveListener ? {
+  };
+  const passiveListenerCapture = {
     passive: true,
     capture: true
-  } : true;
-  const activeListener = support.passiveListener ? {
+  };
+  const activeListener = {
     passive: false
-  } : false;
-  const activeListenerCapture = support.passiveListener ? {
+  };
+  const activeListenerCapture = {
     passive: false,
     capture: true
-  } : true;
+  };
   document.addEventListener('click', appClick, true);
-  if (support.passiveListener) {
-    document.addEventListener(app.touchEvents.start, appTouchStartActive, activeListenerCapture);
-    document.addEventListener(app.touchEvents.move, appTouchMoveActive, activeListener);
-    document.addEventListener(app.touchEvents.end, appTouchEndActive, activeListener);
-    document.addEventListener(app.touchEvents.start, appTouchStartPassive, passiveListenerCapture);
-    document.addEventListener(app.touchEvents.move, appTouchMovePassive, passiveListener);
-    document.addEventListener(app.touchEvents.end, appTouchEndPassive, passiveListener);
-  } else {
-    document.addEventListener(app.touchEvents.start, e => {
-      appTouchStartActive(e);
-      appTouchStartPassive(e);
-    }, true);
-    document.addEventListener(app.touchEvents.move, e => {
-      appTouchMoveActive(e);
-      appTouchMovePassive(e);
-    }, false);
-    document.addEventListener(app.touchEvents.end, e => {
-      appTouchEndActive(e);
-      appTouchEndPassive(e);
-    }, false);
-  }
+  document.addEventListener(app.touchEvents.start, appTouchStartActive, activeListenerCapture);
+  document.addEventListener(app.touchEvents.move, appTouchMoveActive, activeListener);
+  document.addEventListener(app.touchEvents.end, appTouchEndActive, activeListener);
+  document.addEventListener(app.touchEvents.start, appTouchStartPassive, passiveListenerCapture);
+  document.addEventListener(app.touchEvents.move, appTouchMovePassive, passiveListener);
+  document.addEventListener(app.touchEvents.end, appTouchEndPassive, passiveListener);
   if (support.touch) {
     app.on('click', handleClick);
     app.on('touchstart', handleTouchStart);
@@ -459,10 +444,11 @@ export default {
       activeState: true,
       activeStateElements: 'a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .link, .item-link, .accordion-item-toggle',
       activeStateOnMouseMove: false,
-      mdTouchRipple: true,
-      iosTouchRipple: false,
+      touchRipple: true,
       touchRippleElements: '.ripple, .link, .item-link, .list label.item-content, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .list.accordion-list .accordion-item-toggle',
-      touchRippleInsetElements: '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back'
+      touchRippleInsetElements: '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back',
+      touchHighlight: true,
+      touchHighlightElements: '.toolbar-pane, .navbar .left, .navbar .right, .popover-inner, .actions-group:not(.actions-grid .actions-group), .searchbar-input-wrap, .searchbar-disable-button, .subnavbar, .searchbar-input-wrap .autocomplete-dropdown, .messagebar-area, .notification, .toast, .fab > a'
     }
   },
   create() {
@@ -470,9 +456,9 @@ export default {
     const support = getSupport();
     extend(app, {
       touchEvents: {
-        start: support.touch ? 'touchstart' : support.pointerEvents ? 'pointerdown' : 'mousedown',
-        move: support.touch ? 'touchmove' : support.pointerEvents ? 'pointermove' : 'mousemove',
-        end: support.touch ? 'touchend' : support.pointerEvents ? 'pointerup' : 'mouseup'
+        start: support.touch ? 'touchstart' : 'pointerdown',
+        move: support.touch ? 'touchmove' : 'pointermove',
+        end: support.touch ? 'touchend' : 'pointerup'
       }
     });
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "8.3.3",
+  "version": "9.0.0-beta.1",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "type": "module",
   "exports": {
@@ -451,8 +451,8 @@
     "htm": "^3.1.1",
     "path-to-regexp": "^6.2.0",
     "skeleton-elements": "^4.0.1",
-    "ssr-window": "^4.0.2",
-    "swiper": "^10.2.0"
+    "ssr-window": "^5.0.1",
+    "swiper": "^12.0.3"
   },
-  "releaseDate": "March 25, 2024"
+  "releaseDate": "November 10, 2025"
 }

package/shared/$jsx.js

@@ -1,9 +1,6 @@
 /* eslint-disable prefer-rest-params */
-const $jsx = function (tag, props) {
+const $jsx = (tag, props, ...args) => {
   const attrs = props || {};
-  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    args[_key - 2] = arguments[_key];
-  }
   const children = args || [];
   const attrsString = Object.keys(attrs).map(attr => {
     if (attr[0] === '_') {