framework7 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/panel/swipe-panel.js

@@ -1,8 +1,8 @@
-import $ from '../../shared/dom7';
-import { extend, now, nextFrame } from '../../shared/utils';
+import $ from '../../shared/dom7.js';
+import { extend, now, nextFrame } from '../../shared/utils.js';
 
 function swipePanel(panel) {
-  var app = panel.app;
+  const app = panel.app;
 
   if (panel.swipeInitialized) {
     return;
@@ -12,33 +12,35 @@ function swipePanel(panel) {
     swipeable: true,
     swipeInitialized: true
   });
-  var params = panel.params;
-  var $el = panel.$el,
-      $backdropEl = panel.$backdropEl,
-      side = panel.side,
-      effect = panel.effect;
-  var otherPanel;
-  var isTouched;
-  var isGestureStarted;
-  var isMoved;
-  var isScrolling;
-  var isInterrupted;
-  var touchesStart = {};
-  var touchStartTime;
-  var touchesDiff;
-  var translate;
-  var backdropOpacity;
-  var panelWidth;
-  var direction;
-  var $viewEl;
-  var touchMoves = 0;
+  const params = panel.params;
+  const {
+    $el,
+    $backdropEl,
+    side,
+    effect
+  } = panel;
+  let otherPanel;
+  let isTouched;
+  let isGestureStarted;
+  let isMoved;
+  let isScrolling;
+  let isInterrupted;
+  const touchesStart = {};
+  let touchStartTime;
+  let touchesDiff;
+  let translate;
+  let backdropOpacity;
+  let panelWidth;
+  let direction;
+  let $viewEl;
+  let touchMoves = 0;
 
   function handleTouchStart(e) {
     if (!panel.swipeable || isGestureStarted) return;
     if (!app.panel.allowOpen || !params.swipe && !params.swipeOnlyClose || isTouched) return;
     if ($('.modal-in:not(.toast):not(.notification), .photo-browser-in').length > 0) return;
     otherPanel = app.panel.get(side === 'left' ? 'right' : 'left') || {};
-    var otherPanelOpened = otherPanel.opened && otherPanel.$el && !otherPanel.$el.hasClass('panel-in-breakpoint');
+    const otherPanelOpened = otherPanel.opened && otherPanel.$el && !otherPanel.$el.hasClass('panel-in-breakpoint');
 
     if (!panel.opened && otherPanelOpened) {
       return;
@@ -87,8 +89,8 @@ function swipePanel(panel) {
       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));
@@ -129,7 +131,7 @@ function swipePanel(panel) {
       }
     }
 
-    var threshold = panel.opened ? 0 : -params.swipeThreshold;
+    let threshold = panel.opened ? 0 : -params.swipeThreshold;
     if (side === 'right') threshold = -threshold;
 
     if (!isMoved) {
@@ -144,7 +146,7 @@ function swipePanel(panel) {
       panelWidth = $el[0].offsetWidth;
 
       if (effect === 'reveal' && $el.hasClass('panel-in-collapsed')) {
-        panelWidth -= parseFloat($viewEl.css("margin-" + side));
+        panelWidth -= parseFloat($viewEl.css(`margin-${side}`));
       }
 
       $el.transition(0);
@@ -183,12 +185,12 @@ function swipePanel(panel) {
       }
     }
 
-    var noFollowProgress = Math.abs(translate / panelWidth);
+    const noFollowProgress = Math.abs(translate / panelWidth);
 
     if (effect === 'reveal') {
       if (!params.swipeNoFollow) {
-        $viewEl.transform("translate3d(" + translate + "px,0,0)").transition(0);
-        $backdropEl.transform("translate3d(" + translate + "px,0,0)").transition(0);
+        $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
+        $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
       }
 
       $el.trigger('panel:swipe', Math.abs(translate / panelWidth));
@@ -202,12 +204,12 @@ function swipePanel(panel) {
         $backdropEl.css({
           opacity: backdropOpacity
         });
-        $el.transform("translate3d(" + translate + "px,0,0)").transition(0);
+        $el.transform(`translate3d(${translate}px,0,0)`).transition(0);
 
         if (effect === 'push') {
-          var viewTranslate = side === 'left' ? translate + panelWidth : translate - panelWidth;
-          $viewEl.transform("translate3d(" + viewTranslate + "px,0,0)").transition(0);
-          $backdropEl.transform("translate3d(" + viewTranslate + "px,0,0)").transition(0);
+          const viewTranslate = side === 'left' ? translate + panelWidth : translate - panelWidth;
+          $viewEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);
+          $backdropEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);
         }
       }
 
@@ -216,7 +218,7 @@ function swipePanel(panel) {
     }
 
     if (params.swipeNoFollow) {
-      var stateChanged = panel.opened && noFollowProgress === 0 || !panel.opened && noFollowProgress === 1;
+      const stateChanged = panel.opened && noFollowProgress === 0 || !panel.opened && noFollowProgress === 1;
 
       if (stateChanged) {
         isInterrupted = true; // eslint-disable-next-line
@@ -233,13 +235,13 @@ function swipePanel(panel) {
       return;
     }
 
-    var isGesture = e.type === 'gesturestart' || isGestureStarted;
+    const isGesture = e.type === 'gesturestart' || isGestureStarted;
     isTouched = false;
     isMoved = false;
-    var timeDiff = new Date().getTime() - touchStartTime;
-    var action;
-    var edge = (translate === 0 || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;
-    var threshold = params.swipeThreshold || 0;
+    const timeDiff = new Date().getTime() - touchStartTime;
+    let action;
+    const edge = (translate === 0 || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;
+    const threshold = params.swipeThreshold || 0;
 
     if (isGesture) {
       action = 'reset';
@@ -289,7 +291,7 @@ function swipePanel(panel) {
       }
     }
 
-    var removePanelInClass = true;
+    let removePanelInClass = true;
 
     if (action === 'reset') {
       if (!panel.opened) {
@@ -298,9 +300,9 @@ function swipePanel(panel) {
           $el.removeClass('panel-in-swipe');
         } else {
           removePanelInClass = false;
-          var target = effect === 'reveal' ? $viewEl : $el;
+          const target = effect === 'reveal' ? $viewEl : $el;
           panel.setStateClasses('before-closing');
-          target.transitionEnd(function () {
+          target.transitionEnd(() => {
             if ($el.hasClass('panel-in')) return;
             $el.removeClass('panel-in-swipe');
             panel.setStateClasses('after-closing');
@@ -310,7 +312,7 @@ function swipePanel(panel) {
     }
 
     if (effect === 'reveal' || effect === 'push') {
-      nextFrame(function () {
+      nextFrame(() => {
         $viewEl.transition('');
         $viewEl.transform('');
       });
@@ -342,7 +344,7 @@ function swipePanel(panel) {
   app.on('touchend:passive', handleTouchEnd);
   app.on('gesturestart', handleGestureStart);
   app.on('gestureend', handleGestureEnd);
-  panel.on('panelDestroy', function () {
+  panel.on('panelDestroy', () => {
     app.off('touchstart:passive', handleTouchStart);
     app.off('touchmove:active', handleTouchMove);
     app.off('touchend:passive', handleTouchEnd);