framework7 6.3.4 → 7.0.0-beta.3

package/{esm/modules → modules}/router/router.js

@@ -2,7 +2,7 @@ import Router from './router-class';
 export default {
   name: 'router',
   static: {
-    Router: Router
+    Router
   },
   instance: {
     cache: {
@@ -11,8 +11,9 @@ export default {
       components: []
     }
   },
-  create: function create() {
-    var instance = this;
+
+  create() {
+    const instance = this;
 
     if (instance.app) {
       // View Router
@@ -24,4 +25,5 @@ export default {
       instance.router = new Router(instance);
     }
   }
+
 };

package/{esm/modules → modules}/router/swipe-back.js

@@ -5,53 +5,55 @@ import { getDevice } from '../../shared/get-device';
 import { now } from '../../shared/utils';
 
 function SwipeBack(r) {
-  var router = r;
-  var $el = router.$el,
-      $navbarsEl = router.$navbarsEl,
-      app = router.app,
-      params = router.params;
-  var support = getSupport();
-  var device = getDevice();
-  var isTouched = false;
-  var isMoved = false;
-  var touchesStart = {};
-  var isScrolling;
-  var $currentPageEl = [];
-  var $previousPageEl = [];
-  var viewContainerWidth;
-  var touchesDiff;
-  var allowViewTouchMove = true;
-  var touchStartTime;
-  var $currentNavbarEl = [];
-  var $previousNavbarEl = [];
-  var dynamicNavbar;
-  var $pageShadowEl;
-  var $pageOpacityEl;
-  var animatableNavEls;
-  var paramsSwipeBackAnimateShadow = params[app.theme + "SwipeBackAnimateShadow"];
-  var paramsSwipeBackAnimateOpacity = params[app.theme + "SwipeBackAnimateOpacity"];
-  var paramsSwipeBackActiveArea = params[app.theme + "SwipeBackActiveArea"];
-  var paramsSwipeBackThreshold = params[app.theme + "SwipeBackThreshold"];
-  var transformOrigin = app.rtl ? 'right center' : 'left center';
-  var 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';
+  const router = r;
+  const {
+    $el,
+    $navbarsEl,
+    app,
+    params
+  } = router;
+  const support = getSupport();
+  const device = getDevice();
+  let isTouched = false;
+  let isMoved = false;
+  const touchesStart = {};
+  let isScrolling;
+  let $currentPageEl = [];
+  let $previousPageEl = [];
+  let viewContainerWidth;
+  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() {
-    var els = [];
-    var inverter = app.rtl ? -1 : 1;
-    var currentNavIsTransparent = $currentNavbarEl.hasClass('navbar-transparent') && !$currentNavbarEl.hasClass('navbar-large') && !$currentNavbarEl.hasClass('navbar-transparent-visible');
-    var currentNavIsLarge = $currentNavbarEl.hasClass('navbar-large');
-    var currentNavIsCollapsed = $currentNavbarEl.hasClass('navbar-large-collapsed');
-    var currentNavIsLargeTransparent = $currentNavbarEl.hasClass('navbar-large-transparent') || $currentNavbarEl.hasClass('navbar-large') && $currentNavbarEl.hasClass('navbar-transparent');
-    var previousNavIsTransparent = $previousNavbarEl.hasClass('navbar-transparent') && !$previousNavbarEl.hasClass('navbar-large') && !$previousNavbarEl.hasClass('navbar-transparent-visible');
-    var previousNavIsLarge = $previousNavbarEl.hasClass('navbar-large');
-    var previousNavIsCollapsed = $previousNavbarEl.hasClass('navbar-large-collapsed');
-    var previousNavIsLargeTransparent = $previousNavbarEl.hasClass('navbar-large-transparent') || $previousNavbarEl.hasClass('navbar-large') && $previousNavbarEl.hasClass('navbar-transparent');
-    var fromLarge = currentNavIsLarge && !currentNavIsCollapsed;
-    var toLarge = previousNavIsLarge && !previousNavIsCollapsed;
-    var $currentNavElements = $currentNavbarEl.find('.left, .title, .right, .subnavbar, .fading, .title-large, .navbar-bg');
-    var $previousNavElements = $previousNavbarEl.find('.left, .title, .right, .subnavbar, .fading, .title-large, .navbar-bg');
-    var activeNavBackIconText;
-    var previousNavBackIconText;
+    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) {
@@ -67,22 +69,22 @@ function SwipeBack(r) {
       }
 
       if (activeNavBackIconText.length) {
-        $previousNavElements.each(function (el) {
+        $previousNavElements.each(el => {
           if (!$(el).hasClass('title')) return;
           el.f7NavbarLeftOffset += activeNavBackIconText.prev('.icon')[0].offsetWidth;
         });
       }
     }
 
-    $currentNavElements.each(function (navEl) {
-      var $navEl = $(navEl);
-      var isSubnavbar = $navEl.hasClass('subnavbar');
-      var isLeft = $navEl.hasClass('left');
-      var isTitle = $navEl.hasClass('title');
-      var isBg = $navEl.hasClass('navbar-bg');
+    $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;
-      var el = {
+      const el = {
         el: navEl
       };
 
@@ -92,12 +94,10 @@ function SwipeBack(r) {
         if ($navEl.hasClass('title-large')) {
           if (els.indexOf(el) < 0) els.push(el);
           el.overflow = 'visible';
-          $navEl.find('.title-large-text').each(function (subNavEl) {
+          $navEl.find('.title-large-text').each(subNavEl => {
             els.push({
               el: subNavEl,
-              transform: function transform(progress) {
-                return "translateX(" + progress * 100 * inverter + "%)";
-              }
+              transform: progress => `translateX(${progress * 100 * inverter}%)`
             });
           });
           return;
@@ -115,17 +115,13 @@ function SwipeBack(r) {
         if (isLeft) {
           if (els.indexOf(el) < 0) els.push(el);
 
-          el.opacity = function (progress) {
-            return 1 - Math.pow(progress, 0.33);
-          };
+          el.opacity = progress => 1 - progress ** 0.33;
 
-          $navEl.find('.back span').each(function (subNavEl) {
+          $navEl.find('.back span').each(subNavEl => {
             els.push({
               el: subNavEl,
               'transform-origin': transformOrigin,
-              transform: function transform(progress) {
-                return "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) + ")";
-              }
+              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;
@@ -141,80 +137,68 @@ function SwipeBack(r) {
               el.className = 'ios-swipeback-navbar-bg-large';
             }
 
-            el.transform = function (progress) {
-              return "translateX(" + 100 * progress * inverter + "%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))";
-            };
+            el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))`;
           } else {
-            el.transform = function (progress) {
-              return "translateX(" + 100 * progress * inverter + "%)";
-            };
+            el.transform = progress => `translateX(${100 * progress * inverter}%)`;
           }
         }
 
         if (!fromLarge && toLarge) {
           el.className = 'ios-swipeback-navbar-bg-large';
 
-          el.transform = function (progress) {
-            return "translateX(" + 100 * progress * inverter + "%) translateY(calc(-1 * " + (1 - progress) + " * var(--f7-navbar-large-title-height)))";
-          };
+          el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-1 * ${1 - progress} * var(--f7-navbar-large-title-height)))`;
         }
 
         if (fromLarge && toLarge) {
-          el.transform = function (progress) {
-            return "translateX(" + 100 * progress * inverter + "%)";
-          };
+          el.transform = progress => `translateX(${100 * progress * inverter}%)`;
         }
 
         if (fromLarge && !toLarge) {
-          el.transform = function (progress) {
-            return "translateX(" + 100 * progress * inverter + "%) translateY(calc(-" + progress + " * var(--f7-navbar-large-title-height)))";
-          };
+          el.transform = progress => `translateX(${100 * progress * inverter}%) translateY(calc(-${progress} * var(--f7-navbar-large-title-height)))`;
         }
 
         return;
       }
 
       if ($navEl.hasClass('title-large')) return;
-      var isSliding = $navEl.hasClass('sliding') || $navEl.parents('.navbar-inner.sliding').length;
+      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 = function (progress) {
-          return 1 - Math.pow(progress, 0.33);
-        };
+        el.opacity = progress => 1 - progress ** 0.33;
       }
 
       if (isSliding) {
-        var transformTarget = el;
+        let transformTarget = el;
 
         if (isLeft && activeNavBackIconText.length && params.iosAnimateNavbarBackIcon) {
-          var textEl = {
+          const textEl = {
             el: activeNavBackIconText[0]
           };
           transformTarget = textEl;
           els.push(textEl);
         }
 
-        transformTarget.transform = function (progress) {
-          var activeNavTranslate = progress * transformTarget.el.f7NavbarRightOffset;
+        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, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)`;
           }
 
-          return "translate3d(" + activeNavTranslate + "px,0,0)";
+          return `translate3d(${activeNavTranslate}px,0,0)`;
         };
       }
     });
-    $previousNavElements.each(function (navEl) {
-      var $navEl = $(navEl);
-      var isSubnavbar = $navEl.hasClass('subnavbar');
-      var isLeft = $navEl.hasClass('left');
-      var isTitle = $navEl.hasClass('title');
-      var isBg = $navEl.hasClass('navbar-bg');
+    $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;
-      var el = {
+      const el = {
         el: navEl
       };
 
@@ -225,16 +209,12 @@ function SwipeBack(r) {
         if ($navEl.hasClass('title-large')) {
           el.opacity = 1;
           el.overflow = 'visible';
-          $navEl.find('.title-large-text').each(function (subNavEl) {
+          $navEl.find('.title-large-text').each(subNavEl => {
             els.push({
               el: subNavEl,
               'transform-origin': transformOriginTitleLarge,
-              opacity: function opacity(progress) {
-                return Math.pow(progress, 3);
-              },
-              transform: function transform(progress) {
-                return "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) + ")";
-              }
+              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;
@@ -250,87 +230,74 @@ function SwipeBack(r) {
               el.className = 'ios-swipeback-navbar-bg-large';
             }
 
-            el.transform = function (progress) {
-              return "translateX(" + (-100 + 100 * progress) * inverter + "%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))";
-            };
+            el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%) translateY(calc(-1 * var(--f7-navbar-large-title-height)))`;
           } else {
-            el.transform = function (progress) {
-              return "translateX(" + (-100 + 100 * progress) * inverter + "%)";
-            };
+            el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%)`;
           }
         }
 
         if (!fromLarge && toLarge) {
-          el.transform = function (progress) {
-            return "translateX(" + (-100 + 100 * progress) * inverter + "%) translateY(calc(-1 * " + (1 - progress) + " * var(--f7-navbar-large-title-height)))";
-          };
+          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 = function (progress) {
-            return "translateX(" + (-100 + 100 * progress) * inverter + "%) translateY(calc(-" + progress + " * var(--f7-navbar-large-title-height)))";
-          };
+          el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%) translateY(calc(-${progress} * var(--f7-navbar-large-title-height)))`;
         }
 
         if (fromLarge && toLarge) {
-          el.transform = function (progress) {
-            return "translateX(" + (-100 + 100 * progress) * inverter + "%)";
-          };
+          el.transform = progress => `translateX(${(-100 + 100 * progress) * inverter}%)`;
         }
 
         return;
       }
 
       if ($navEl.hasClass('title-large')) return;
-      var isSliding = $navEl.hasClass('sliding') || $previousNavbarEl.children('.navbar-inner.sliding').length;
+      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 = function (progress) {
-          return Math.pow(progress, 3);
-        };
+        el.opacity = progress => progress ** 3;
       }
 
       if (isSliding) {
-        var transformTarget = el;
+        let transformTarget = el;
 
         if (isLeft && previousNavBackIconText.length && params.iosAnimateNavbarBackIcon) {
-          var textEl = {
+          const textEl = {
             el: previousNavBackIconText[0]
           };
           transformTarget = textEl;
           els.push(textEl);
         }
 
-        transformTarget.transform = function (progress) {
-          var previousNavTranslate = transformTarget.el.f7NavbarLeftOffset * (1 - progress);
+        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, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)`;
           }
 
-          return "translate3d(" + previousNavTranslate + "px,0,0)";
+          return `translate3d(${previousNavTranslate}px,0,0)`;
         };
       }
     });
     return els;
   }
 
-  function setAnimatableNavElements(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        progress = _ref.progress,
-        reset = _ref.reset,
-        transition = _ref.transition,
-        reflow = _ref.reflow;
-
-    var styles = ['overflow', 'transform', 'transform-origin', 'opacity'];
+  function setAnimatableNavElements({
+    progress,
+    reset,
+    transition,
+    reflow
+  } = {}) {
+    const styles = ['overflow', 'transform', 'transform-origin', 'opacity'];
 
     if (transition === true || transition === false) {
-      for (var i = 0; i < animatableNavEls.length; i += 1) {
-        var el = animatableNavEls[i];
+      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');
@@ -344,30 +311,29 @@ function SwipeBack(r) {
       animatableNavEls[0].el._clientLeft = animatableNavEls[0].el.clientLeft;
     }
 
-    for (var _i = 0; _i < animatableNavEls.length; _i += 1) {
-      var _el = animatableNavEls[_i];
-
-      if (_el && _el.el) {
-        if (_el.className && !_el.classNameSet && !reset) {
-          _el.el.classList.add(_el.className);
+    for (let i = 0; i < animatableNavEls.length; i += 1) {
+      const el = animatableNavEls[i];
 
-          _el.classNameSet = true;
+      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);
+        if (el.className && reset) {
+          el.el.classList.remove(el.className);
         }
 
-        for (var j = 0; j < styles.length; j += 1) {
-          var styleProp = styles[j];
+        for (let j = 0; j < styles.length; j += 1) {
+          const styleProp = styles[j];
 
-          if (_el[styleProp]) {
+          if (el[styleProp]) {
             if (reset) {
-              _el.el.style[styleProp] = '';
-            } else if (typeof _el[styleProp] === 'function') {
-              _el.el.style[styleProp] = _el[styleProp](progress);
+              el.el.style[styleProp] = '';
+            } else if (typeof el[styleProp] === 'function') {
+              el.el.style[styleProp] = el[styleProp](progress);
             } else {
-              _el.el.style[styleProp] = _el[styleProp];
+              el.el.style[styleProp] = el[styleProp];
             }
           }
         }
@@ -376,7 +342,7 @@ function SwipeBack(r) {
   }
 
   function handleTouchStart(e) {
-    var swipeBackEnabled = params[app.theme + "SwipeBack"];
+    const swipeBackEnabled = params[`${app.theme}SwipeBack`];
     if (!allowViewTouchMove || !swipeBackEnabled || isTouched || app.swipeout && app.swipeout.el || !router.allowPageChange) return;
     if ($(e.target).closest('.range-slider, .calendar-months').length > 0) return;
     if ($(e.target).closest('.page-master, .page-master-detail').length > 0 && params.masterDetailBreakpoint > 0 && app.width >= params.masterDetailBreakpoint) return;
@@ -391,8 +357,8 @@ function SwipeBack(r) {
 
   function handleTouchMove(e) {
     if (!isTouched) return;
-    var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-    var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+    const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+    const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
 
     if (typeof isScrolling === 'undefined') {
       isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)) || pageX < touchesStart.x && !app.rtl || pageX > touchesStart.x && app.rtl;
@@ -405,9 +371,9 @@ function SwipeBack(r) {
 
     if (!isMoved) {
       // Calc values during first move fired
-      var cancel = false;
-      var target = $(e.target);
-      var swipeout = target.closest('.swipeout');
+      let cancel = false;
+      const target = $(e.target);
+      const swipeout = target.closest('.swipeout');
 
       if (swipeout.length > 0) {
         if (!app.rtl && swipeout.find('.swipeout-actions-left').length > 0) cancel = true;
@@ -422,7 +388,7 @@ function SwipeBack(r) {
         $previousPageEl = $previousPageEl.eq($previousPageEl.length - 1);
       }
 
-      var notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea;
+      let notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea;
       viewContainerWidth = $el.width();
 
       if (app.rtl) {
@@ -479,14 +445,14 @@ function SwipeBack(r) {
     app.preventSwipePanelBySwipeBack = true;
     e.preventDefault(); // RTL inverter
 
-    var inverter = app.rtl ? -1 : 1; // Touches diff
+    const inverter = app.rtl ? -1 : 1; // Touches diff
 
     touchesDiff = (pageX - touchesStart.x - paramsSwipeBackThreshold) * inverter;
     if (touchesDiff < 0) touchesDiff = 0;
-    var percentage = Math.min(Math.max(touchesDiff / viewContainerWidth, 0), 1); // Swipe Back Callback
+    const percentage = Math.min(Math.max(touchesDiff / viewContainerWidth, 0), 1); // Swipe Back Callback
 
-    var callbackData = {
-      percentage: percentage,
+    const callbackData = {
+      percentage,
       progress: percentage,
       currentPageEl: $currentPageEl[0],
       previousPageEl: $previousPageEl[0],
@@ -496,8 +462,8 @@ function SwipeBack(r) {
     $el.trigger('swipeback:move', callbackData);
     router.emit('swipebackMove', callbackData); // Transform pages
 
-    var currentPageTranslate = touchesDiff * inverter;
-    var previousPageTranslate = (touchesDiff / 5 - viewContainerWidth / 5) * inverter;
+    let currentPageTranslate = touchesDiff * inverter;
+    let previousPageTranslate = (touchesDiff / 5 - viewContainerWidth / 5) * inverter;
 
     if (!app.rtl) {
       currentPageTranslate = Math.min(currentPageTranslate, viewContainerWidth);
@@ -514,11 +480,11 @@ function SwipeBack(r) {
 
     router.swipeBackActive = true;
     $([$currentPageEl[0], $previousPageEl[0]]).addClass('page-swipeback-active');
-    $currentPageEl.transform("translate3d(" + currentPageTranslate + "px,0,0)");
+    $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
@@ -541,7 +507,7 @@ function SwipeBack(r) {
     isTouched = false;
     isMoved = false;
     router.swipeBackActive = false;
-    var $pages = $([$currentPageEl[0], $previousPageEl[0]]);
+    const $pages = $([$currentPageEl[0], $previousPageEl[0]]);
     $pages.removeClass('page-swipeback-active');
 
     if (touchesDiff === 0) {
@@ -558,11 +524,11 @@ function SwipeBack(r) {
       return;
     }
 
-    var timeDiff = now() - touchStartTime;
-    var pageChanged = false; // Swipe back to previous page
+    const timeDiff = now() - touchStartTime;
+    let pageChanged = false; // Swipe back to previous page
 
     if (timeDiff < 300 && touchesDiff > 10 || timeDiff >= 300 && touchesDiff > viewContainerWidth / 2) {
-      $currentPageEl.removeClass('page-current').addClass("page-next" + (app.theme !== 'ios' ? ' page-next-on-right' : ''));
+      $currentPageEl.removeClass('page-current').addClass(`page-next${app.theme !== 'ios' ? ' page-next-on-right' : ''}`);
       $previousPageEl.removeClass('page-previous').addClass('page-current').removeAttr('aria-hidden');
       if ($pageShadowEl) $pageShadowEl[0].style.opacity = '';
       if ($pageOpacityEl) $pageOpacityEl[0].style.opacity = '';
@@ -597,7 +563,7 @@ function SwipeBack(r) {
     allowViewTouchMove = false;
     router.allowPageChange = false; // Swipe Back Callback
 
-    var callbackData = {
+    const callbackData = {
       currentPageEl: $currentPageEl[0],
       previousPageEl: $previousPageEl[0],
       currentNavbarEl: $currentNavbarEl[0],
@@ -624,7 +590,7 @@ function SwipeBack(r) {
       router.emit('swipebackBeforeReset', callbackData);
     }
 
-    $currentPageEl.transitionEnd(function () {
+    $currentPageEl.transitionEnd(() => {
       $pages.removeClass('page-transitioning page-transitioning-swipeback');
 
       if (dynamicNavbar) {
@@ -697,7 +663,7 @@ function SwipeBack(r) {
   }
 
   function attachEvents() {
-    var passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
       passive: true,
       capture: false
     } : false;
@@ -707,7 +673,7 @@ function SwipeBack(r) {
   }
 
   function detachEvents() {
-    var passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
+    const passiveListener = app.touchEvents.start === 'touchstart' && support.passiveListener ? {
       passive: true,
       capture: false
     } : false;