framework7 7.1.5 → 8.0.0-beta.2

package/modules/touch/touch.js

@@ -4,7 +4,6 @@ import $ from '../../shared/dom7.js';
 import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import { extend } from '../../shared/utils.js';
-
 function initTouch() {
   const app = this;
   const device = getDevice();
@@ -13,12 +12,10 @@ function initTouch() {
   const document = getDocument();
   const params = app.params.touch;
   const useRipple = params[`${app.theme}TouchRipple`];
-
   if (device.ios && device.webView) {
     // Strange hack required for iOS 8 webview to work on inputs
     window.addEventListener('touchstart', () => {});
   }
-
   let touchStartX;
   let touchStartY;
   let targetElement;
@@ -31,109 +28,84 @@ function initTouch() {
   let rippleWave;
   let rippleTarget;
   let rippleTimeout;
-
   function findActivableElement(el) {
     const target = $(el);
     const parents = target.parents(params.activeStateElements);
-
     if (target.closest('.no-active-state').length) {
       return null;
     }
-
     let activable;
-
     if (target.is(params.activeStateElements)) {
       activable = target;
     }
-
     if (parents.length > 0) {
       activable = activable ? activable.add(parents) : parents;
     }
-
     if (activable && activable.length > 1) {
       const newActivable = [];
       let preventPropagation;
-
       for (let i = 0; i < activable.length; i += 1) {
         if (!preventPropagation) {
           newActivable.push(activable[i]);
-
           if (activable.eq(i).hasClass('prevent-active-state-propagation') || activable.eq(i).hasClass('no-active-state-propagation')) {
             preventPropagation = true;
           }
         }
       }
-
       activable = $(newActivable);
     }
-
     return activable || target;
   }
-
   function isInsideScrollableView(el) {
     const pageContent = el.parents('.page-content');
     return pageContent.length > 0;
   }
-
   function addActive() {
     if (!activableElement) return;
     activableElement.addClass('active-state');
   }
-
   function removeActive() {
     if (!activableElement) return;
     activableElement.removeClass('active-state');
     activableElement = null;
-  } // Ripple handlers
-
+  }
 
+  // Ripple handlers
   function findRippleElement(el) {
     const rippleElements = params.touchRippleElements;
     const $el = $(el);
-
     if ($el.is(rippleElements)) {
       if ($el.hasClass('no-ripple')) {
         return false;
       }
-
       return $el;
     }
-
     if ($el.parents(rippleElements).length > 0) {
       const rippleParent = $el.parents(rippleElements).eq(0);
-
       if (rippleParent.hasClass('no-ripple')) {
         return false;
       }
-
       return rippleParent;
     }
-
     return false;
   }
-
   function createRipple($el, x, y) {
     if (!$el) return;
     rippleWave = app.touchRipple.create(app, $el, x, y);
   }
-
   function removeRipple() {
     if (!rippleWave) return;
     rippleWave.remove();
     rippleWave = undefined;
     rippleTarget = undefined;
   }
-
   function rippleTouchStart(el) {
     rippleTarget = findRippleElement(el);
-
     if (!rippleTarget || rippleTarget.length === 0) {
       rippleTarget = undefined;
       return;
     }
-
     const inScrollable = isInsideScrollableView(rippleTarget);
-
     if (!inScrollable) {
       removeRipple();
       createRipple(rippleTarget, touchStartX, touchStartY);
@@ -145,12 +117,10 @@ function initTouch() {
       }, 80);
     }
   }
-
   function rippleTouchMove() {
     clearTimeout(rippleTimeout);
     removeRipple();
   }
-
   function rippleTouchEnd() {
     if (!rippleWave && rippleTarget && !isMoved) {
       clearTimeout(rippleTimeout);
@@ -159,85 +129,72 @@ function initTouch() {
     } else {
       removeRipple();
     }
-  } // Mouse Handlers
-
+  }
 
+  // Mouse Handlers
   function handleMouseDown(e) {
     const $activableEl = findActivableElement(e.target);
-
     if ($activableEl) {
       $activableEl.addClass('active-state');
-
       if ('which' in e && e.which === 3) {
         setTimeout(() => {
           $('.active-state').removeClass('active-state');
         }, 0);
       }
     }
-
     if (useRipple) {
       touchStartX = e.pageX;
       touchStartY = e.pageY;
       rippleTouchStart(e.target, e.pageX, e.pageY);
     }
   }
-
   function handleMouseMove() {
     if (!params.activeStateOnMouseMove) {
       $('.active-state').removeClass('active-state');
     }
-
     if (useRipple) {
       rippleTouchMove();
     }
   }
-
   function handleMouseUp() {
     $('.active-state').removeClass('active-state');
-
     if (useRipple) {
       rippleTouchEnd();
     }
   }
-
   function handleTouchCancel() {
-    targetElement = null; // Remove Active State
+    targetElement = null;
 
+    // Remove Active State
     clearTimeout(activeTimeout);
     clearTimeout(tapHoldTimeout);
-
     if (params.activeState) {
       removeActive();
-    } // Remove Ripple
-
+    }
 
+    // Remove Ripple
     if (useRipple) {
       rippleTouchEnd();
     }
   }
-
   let isScrolling;
   let isSegmentedStrong = false;
   let segmentedStrongEl = null;
   const touchMoveActivableIos = '.dialog-button, .actions-button';
   let isTouchMoveActivable = false;
   let touchmoveActivableEl = null;
-
   function handleTouchStart(e) {
     isMoved = false;
     tapHoldFired = false;
     preventClick = false;
     isScrolling = undefined;
-
     if (e.targetTouches.length > 1) {
       if (activableElement) removeActive();
       return true;
     }
-
     if (e.touches.length > 1 && activableElement) {
       removeActive();
     }
-
     if (params.tapHold) {
       if (tapHoldTimeout) clearTimeout(tapHoldTimeout);
       tapHoldTimeout = setTimeout(() => {
@@ -249,83 +206,66 @@ function initTouch() {
         app.emit('taphold', e);
       }, params.tapHoldDelay);
     }
-
     targetElement = e.target;
     touchStartX = e.targetTouches[0].pageX;
     touchStartY = e.targetTouches[0].pageY;
     isSegmentedStrong = e.target.closest('.segmented-strong .button-active, .segmented-strong .tab-link-active');
     isTouchMoveActivable = app.theme === 'ios' && e.target.closest(touchMoveActivableIos);
-
     if (isSegmentedStrong) {
       segmentedStrongEl = isSegmentedStrong.closest('.segmented-strong');
     }
-
     if (params.activeState) {
       activableElement = findActivableElement(targetElement);
-
       if (activableElement && !isInsideScrollableView(activableElement)) {
         addActive();
       } else if (activableElement) {
         activeTimeout = setTimeout(addActive, 80);
       }
     }
-
     if (useRipple) {
       rippleTouchStart(targetElement, touchStartX, touchStartY);
     }
-
     return true;
   }
-
   function handleTouchMove(e) {
     let touch;
     let distance;
     let shouldRemoveActive = true;
-
     if (e.type === 'touchmove') {
       touch = e.targetTouches[0];
       distance = params.touchClicksDistanceThreshold;
     }
-
     const touchCurrentX = e.targetTouches[0].pageX;
     const touchCurrentY = e.targetTouches[0].pageY;
-
     if (typeof isScrolling === 'undefined') {
       isScrolling = !!(isScrolling || Math.abs(touchCurrentY - touchStartY) > Math.abs(touchCurrentX - touchStartX));
     }
-
     if (isTouchMoveActivable || !isScrolling && isSegmentedStrong && segmentedStrongEl) {
       if (e.cancelable) e.preventDefault();
     }
-
     if (!isScrolling && isSegmentedStrong && segmentedStrongEl) {
       const elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
       const buttonEl = elementFromPoint.closest('.segmented-strong .button:not(.button-active):not(.tab-link-active)');
-
       if (buttonEl && segmentedStrongEl.contains(buttonEl)) {
         $(buttonEl).trigger('click', 'f7Segmented');
         targetElement = buttonEl;
       }
     }
-
     if (distance && touch) {
       const pageX = touch.pageX;
       const pageY = touch.pageY;
-
       if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) {
         isMoved = true;
       }
     } else {
       isMoved = true;
     }
-
     if (isMoved) {
-      preventClick = true; // Keep active state on touchMove (for dialog and actions buttons)
-
+      preventClick = true;
+      // Keep active state on touchMove (for dialog and actions buttons)
       if (isTouchMoveActivable) {
         const elementFromPoint = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
         touchmoveActivableEl = elementFromPoint.closest(touchMoveActivableIos);
-
         if (touchmoveActivableEl && activableElement && activableElement[0] === touchmoveActivableEl) {
           shouldRemoveActive = false;
         } else if (touchmoveActivableEl) {
@@ -335,22 +275,18 @@ function initTouch() {
           });
         }
       }
-
       if (params.tapHold) {
         clearTimeout(tapHoldTimeout);
       }
-
       if (params.activeState && shouldRemoveActive) {
         clearTimeout(activeTimeout);
         removeActive();
       }
-
       if (useRipple) {
         rippleTouchMove();
       }
     }
   }
-
   function handleTouchEnd(e) {
     isScrolling = undefined;
     isSegmentedStrong = false;
@@ -358,47 +294,37 @@ function initTouch() {
     isTouchMoveActivable = false;
     clearTimeout(activeTimeout);
     clearTimeout(tapHoldTimeout);
-
     if (touchmoveActivableEl) {
       $(touchmoveActivableEl).trigger('click', 'f7TouchMoveActivable');
       touchmoveActivableEl = null;
     }
-
     if (document.activeElement === e.target) {
       if (params.activeState) removeActive();
-
       if (useRipple) {
         rippleTouchEnd();
       }
-
       return true;
     }
-
     if (params.activeState) {
       addActive();
       setTimeout(removeActive, 0);
     }
-
     if (useRipple) {
       rippleTouchEnd();
     }
-
     if (params.tapHoldPreventClicks && tapHoldFired || preventClick) {
       if (e.cancelable) e.preventDefault();
       preventClick = true;
       return false;
     }
-
     return true;
   }
-
   function handleClick(e) {
     const isOverswipe = e && e.detail && e.detail === 'f7Overswipe';
-    const isSegmented = e && e.detail && e.detail === 'f7Segmented'; // eslint-disable-next-line
-
+    const isSegmented = e && e.detail && e.detail === 'f7Segmented';
+    // eslint-disable-next-line
     const isTouchMoveActivable = e && e.detail && e.detail === 'f7TouchMoveActivable';
     let localPreventClick = preventClick;
-
     if (targetElement && e.target !== targetElement) {
       if (isOverswipe || isSegmented || isTouchMoveActivable) {
         localPreventClick = false;
@@ -408,63 +334,50 @@ function initTouch() {
     } else if (isTouchMoveActivable) {
       localPreventClick = false;
     }
-
     if (params.tapHold && params.tapHoldPreventClicks && tapHoldFired) {
       localPreventClick = true;
     }
-
     if (localPreventClick) {
       e.stopImmediatePropagation();
       e.stopPropagation();
       e.preventDefault();
     }
-
     if (params.tapHold) {
       tapHoldTimeout = setTimeout(() => {
         tapHoldFired = false;
       }, device.ios || device.androidChrome ? 100 : 400);
     }
-
     preventClick = false;
     targetElement = null;
     return !localPreventClick;
   }
-
   function emitAppTouchEvent(name, e) {
     app.emit({
       events: name,
       data: [e]
     });
   }
-
   function appClick(e) {
     emitAppTouchEvent('click', e);
   }
-
   function appTouchStartActive(e) {
     emitAppTouchEvent('touchstart touchstart:active', e);
   }
-
   function appTouchMoveActive(e) {
     emitAppTouchEvent('touchmove touchmove:active', e);
   }
-
   function appTouchEndActive(e) {
     emitAppTouchEvent('touchend touchend:active', e);
   }
-
   function appTouchStartPassive(e) {
     emitAppTouchEvent('touchstart:passive', e);
   }
-
   function appTouchMovePassive(e) {
     emitAppTouchEvent('touchmove:passive', e);
   }
-
   function appTouchEndPassive(e) {
     emitAppTouchEvent('touchend:passive', e);
   }
-
   const passiveListener = support.passiveListener ? {
     passive: true
   } : false;
@@ -480,7 +393,6 @@ function initTouch() {
     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);
@@ -502,7 +414,6 @@ function initTouch() {
       appTouchEndPassive(e);
     }, false);
   }
-
   if (support.touch) {
     app.on('click', handleClick);
     app.on('touchstart', handleTouchStart);
@@ -519,19 +430,16 @@ function initTouch() {
       passive: true
     });
   }
-
   document.addEventListener('contextmenu', e => {
     if (params.disableContextMenu && (device.ios || device.android || device.cordova || window.Capacitor && window.Capacitor.isNative)) {
       e.preventDefault();
     }
-
     if (useRipple) {
       if (activableElement) removeActive();
       rippleTouchEnd();
     }
   });
 }
-
 export default {
   name: 'touch',
   params: {
@@ -550,12 +458,10 @@ export default {
       activeStateOnMouseMove: false,
       mdTouchRipple: true,
       iosTouchRipple: false,
-      auroraTouchRipple: false,
-      touchRippleElements: '.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, .menu-item-content, .list.accordion-list .accordion-item-toggle',
+      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, .menu-item-content, .list.accordion-list .accordion-item-toggle',
       touchRippleInsetElements: '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back'
     }
   },
-
   create() {
     const app = this;
     const support = getSupport();
@@ -567,7 +473,6 @@ export default {
       }
     });
   },
-
   on: {
     init: initTouch
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "7.1.5",
+  "version": "8.0.0-beta.2",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "type": "module",
   "exports": {
@@ -18,10 +18,6 @@
     "./css/bundle/rtl": "./framework7-bundle-rtl.css",
     "./types": "./framework7-types.d.ts",
     "./shared/*": "./shared/*",
-    "./components/appbar": "./components/appbar/appbar.js",
-    "./components/appbar/less": "./components/appbar/appbar.less",
-    "./components/appbar/css": "./components/appbar/appbar.css",
-    "./components/appbar/css/rtl": "./components/appbar/appbar-rtl.css",
     "./components/dialog": "./components/dialog/dialog.js",
     "./components/dialog/less": "./components/dialog/dialog.less",
     "./components/dialog/css": "./components/dialog/dialog.css",
@@ -230,10 +226,6 @@
     "./components/area-chart/less": "./components/area-chart/area-chart.less",
     "./components/area-chart/css": "./components/area-chart/area-chart.css",
     "./components/area-chart/css/rtl": "./components/area-chart/area-chart-rtl.css",
-    "./components/elevation": "./components/elevation/elevation.js",
-    "./components/elevation/less": "./components/elevation/elevation.less",
-    "./components/elevation/css": "./components/elevation/elevation.css",
-    "./components/elevation/css/rtl": "./components/elevation/elevation-rtl.css",
     "./components/typography": "./components/typography/typography.js",
     "./components/typography/less": "./components/typography/typography.less",
     "./components/typography/css": "./components/typography/typography.css",
@@ -249,9 +241,6 @@
       ".": [
         "./framework7.d.ts"
       ],
-      "components/appbar": [
-        "./components/appbar/appbar.d.ts"
-      ],
       "components/dialog": [
         "./components/dialog/dialog.d.ts"
       ],
@@ -459,9 +448,9 @@
   "dependencies": {
     "dom7": "^4.0.6",
     "htm": "^3.1.1",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^6.2.0",
     "skeleton-elements": "^4.0.1",
     "ssr-window": "^4.0.2",
-    "swiper": "^8.4.5"
+    "swiper": "^9.0.3"
   }
 }

package/shared/$jsx.js

@@ -1,27 +1,21 @@
 /* eslint-disable prefer-rest-params */
 const $jsx = function (tag, props) {
   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] === '_') {
       if (attrs[attr]) return attr.replace('_', '');
       return '';
     }
-
     return `${attr}="${attrs[attr]}"`;
   }).filter(attr => !!attr).join(' ');
-
   if (['path', 'img', 'circle', 'polygon', 'line', 'input'].indexOf(tag) >= 0) {
     return `<${tag} ${attrsString} />`.trim();
   }
-
   const childrenContent = children.filter(c => !!c).map(c => Array.isArray(c) ? c.join('') : c).join('');
   return `<${tag} ${attrsString}>${childrenContent}</${tag}>`.trim();
 };
-
 export default $jsx;