framework7 7.1.5 → 8.0.0-beta.2

package/components/panel/resizable-panel.js

@@ -1,7 +1,6 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextFrame } from '../../shared/utils.js';
 import { getSupport } from '../../shared/get-support.js';
-
 function resizablePanel(panel) {
   const app = panel.app;
   const support = getSupport();
@@ -28,23 +27,18 @@ function resizablePanel(panel) {
   let panelMinWidth;
   let panelMaxWidth;
   let visibleByBreakpoint;
-
   function transformCSSWidth(v) {
     if (!v) return null;
-
     if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) {
       return parseInt(v, 10) / 100 * app.width;
     }
-
     const newV = parseInt(v, 10);
     if (Number.isNaN(newV)) return null;
     return newV;
   }
-
   function isResizable() {
     return panel.resizable && $el.hasClass('panel-resizable');
   }
-
   function handleTouchStart(e) {
     if (!isResizable()) return;
     touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -55,118 +49,95 @@ function resizablePanel(panel) {
     panelMaxWidth = transformCSSWidth($el.css('max-width'));
     visibleByBreakpoint = $el.hasClass('panel-in-breakpoint');
   }
-
   function handleTouchMove(e) {
     if (!isTouched) return;
     const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
-
     if (!isMoved) {
       panelWidth = $el[0].offsetWidth;
       $el.transition(0);
       $el.addClass('panel-resizing');
       $htmlEl.css('cursor', 'col-resize');
-
       if (effect !== 'cover' || visibleByBreakpoint) {
         $viewEl = $(panel.getViewEl());
-
         if (panel.$containerEl && panel.$containerEl.hasClass('page')) {
           $viewEl.add(panel.$containerEl.children('.page-content, .tabs, .fab'));
         }
       }
-
       if (effect !== 'cover' && !visibleByBreakpoint) {
         $backdropEl.transition(0);
         $viewEl.transition(0);
       }
     }
-
     isMoved = true;
     e.preventDefault();
     touchesDiff = pageX - touchesStart.x;
     let newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff;
-
     if (panelMinWidth && !Number.isNaN(panelMinWidth)) {
       newPanelWidth = Math.max(newPanelWidth, panelMinWidth);
     }
-
     if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) {
       newPanelWidth = Math.min(newPanelWidth, panelMaxWidth);
     }
-
     newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width);
     panel.resizableWidth = newPanelWidth;
     $el[0].style.width = `${newPanelWidth}px`;
-
     if (effect !== 'cover' && !visibleByBreakpoint) {
       if ($viewEl) {
         $viewEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
-
       if ($backdropEl) {
         $backdropEl.transform(`translate3d(${side === 'left' ? newPanelWidth : -newPanelWidth}px, 0, 0)`);
       }
     } else if (visibleByBreakpoint && $viewEl) {
       $viewEl.css(`margin-${side}`, `${newPanelWidth}px`);
     }
-
     $el.trigger('panel:resize', newPanelWidth);
     panel.emit('local::resize panelResize', panel, newPanelWidth);
   }
-
   function handleTouchEnd() {
     $('html').css('cursor', '');
-
     if (!isTouched || !isMoved) {
       isTouched = false;
       isMoved = false;
       return;
     }
-
     isTouched = false;
     isMoved = false;
     $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
     $el[0].style.width = '';
-
     if (effect !== 'cover' && !visibleByBreakpoint) {
       $viewEl.transform('');
       $backdropEl.transform('');
     }
-
     $el.removeClass('panel-resizing');
     nextFrame(() => {
       $el.transition('');
-
       if (effect !== 'cover') {
         $backdropEl.transition('');
         if ($viewEl) $viewEl.transition('');
       }
     });
   }
-
   function handleResize() {
     if (!panel.opened || !panel.resizableWidth) return;
     panelMinWidth = transformCSSWidth($el.css('min-width'));
     panelMaxWidth = transformCSSWidth($el.css('max-width'));
-
     if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) {
       panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth);
     }
-
     if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) {
       panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth);
     }
-
     panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width);
     $htmlEl[0].style.setProperty(`--f7-panel-${side}-width`, `${panel.resizableWidth}px`);
   }
-
   if (panel.$el.find('.panel-resize-handler').length === 0) {
     panel.$el.append('<div class="panel-resize-handler"></div>');
   }
-
   panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler');
-  $el.addClass('panel-resizable'); // Add Events
+  $el.addClass('panel-resizable');
 
+  // Add Events
   const passive = support.passiveListener ? {
     passive: true
   } : false;
@@ -185,5 +156,4 @@ function resizablePanel(panel) {
     panel.off('beforeOpen', handleResize);
   });
 }
-
 export default resizablePanel;

package/components/panel/swipe-panel.js

@@ -1,13 +1,10 @@
 import $ from '../../shared/dom7.js';
 import { extend, now, nextFrame } from '../../shared/utils.js';
-
 function swipePanel(panel) {
   const app = panel.app;
-
   if (panel.swipeInitialized) {
     return;
   }
-
   extend(panel, {
     swipeable: true,
     swipeInitialized: true
@@ -34,41 +31,33 @@ function swipePanel(panel) {
   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') || {};
     const otherPanelOpened = otherPanel.opened && otherPanel.$el && !otherPanel.$el.hasClass('panel-in-breakpoint');
-
     if (!panel.opened && otherPanelOpened) {
       return;
     }
-
     if (!params.swipeOnlyClose) {
       if (otherPanelOpened) return;
     }
-
     if (e.target && e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'range') return;
     if ($(e.target).closest('.range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened').length > 0) return;
     touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
     touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-
     if (params.swipeOnlyClose && !panel.opened) {
       return;
     }
-
     if (params.swipeActiveArea && !panel.opened) {
       if (side === 'left') {
         if (touchesStart.x > params.swipeActiveArea) return;
       }
-
       if (side === 'right') {
         if (touchesStart.x < app.width - params.swipeActiveArea) return;
       }
     }
-
     touchMoves = 0;
     $viewEl = $(panel.getViewEl());
     isMoved = false;
@@ -78,62 +67,50 @@ function swipePanel(panel) {
     touchStartTime = now();
     direction = undefined;
   }
-
   function handleTouchMove(e) {
     if (!isTouched || isGestureStarted || isInterrupted) return;
     touchMoves += 1;
     if (touchMoves < 2) return;
-
     if (e.f7PreventSwipePanel || app.preventSwipePanelBySwipeBack || app.preventSwipePanel) {
       isTouched = false;
       return;
     }
-
     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));
     }
-
     if (isScrolling) {
       isTouched = false;
       return;
     }
-
     if (!direction) {
       if (pageX > touchesStart.x) {
         direction = 'to-right';
       } else {
         direction = 'to-left';
       }
-
       if (params.swipeActiveArea > 0 && !panel.opened) {
         if (side === 'left' && touchesStart.x > params.swipeActiveArea) {
           isTouched = false;
           return;
         }
-
         if (side === 'right' && touchesStart.x < app.width - params.swipeActiveArea) {
           isTouched = false;
           return;
         }
       }
-
       if ($el.hasClass('panel-in-breakpoint')) {
         isTouched = false;
         return;
       }
-
       if (side === 'left' && direction === 'to-left' && !$el.hasClass('panel-in') || side === 'right' && direction === 'to-right' && !$el.hasClass('panel-in')) {
         isTouched = false;
         return;
       }
     }
-
     let threshold = panel.opened ? 0 : -params.swipeThreshold;
     if (side === 'right') threshold = -threshold;
-
     if (!isMoved) {
       if (!panel.opened) {
         panel.insertToRoot();
@@ -142,121 +119,99 @@ function swipePanel(panel) {
         $el.trigger('panel:swipeopen');
         panel.emit('local::swipeOpen panelSwipeOpen', panel);
       }
-
       panelWidth = $el[0].offsetWidth;
-
       if (effect === 'reveal' && $el.hasClass('panel-in-collapsed')) {
         panelWidth -= parseFloat($viewEl.css(`margin-${side}`));
       }
-
       $el.transition(0);
     }
-
     isMoved = true;
-
     if (e.cancelable) {
       e.preventDefault();
     }
-
     touchesDiff = pageX - touchesStart.x + threshold;
-
+    const startTranslate = effect === 'floating' ? 8 : 0;
     if (side === 'right') {
-      if (effect === 'cover' || effect === 'push') {
-        translate = touchesDiff + (panel.opened ? 0 : panelWidth);
-        if (translate < 0) translate = 0;
-
+      if (effect === 'cover' || effect === 'push' || effect === 'floating') {
+        translate = touchesDiff + (panel.opened ? startTranslate : panelWidth);
+        if (translate < 0 - startTranslate) translate = -startTranslate;
         if (translate > panelWidth) {
           translate = panelWidth;
         }
       } else {
         translate = touchesDiff - (panel.opened ? panelWidth : 0);
         if (translate > 0) translate = 0;
-
         if (translate < -panelWidth) {
           translate = -panelWidth;
         }
       }
     } else {
-      translate = touchesDiff + (panel.opened ? panelWidth : 0);
+      translate = touchesDiff + (panel.opened ? panelWidth : startTranslate);
       if (translate < 0) translate = 0;
-
-      if (translate > panelWidth) {
-        translate = panelWidth;
+      if (translate > panelWidth + startTranslate) {
+        translate = panelWidth + startTranslate;
       }
     }
-
     const noFollowProgress = Math.abs(translate / panelWidth);
-
     if (effect === 'reveal') {
       if (!params.swipeNoFollow) {
         $viewEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
         if ($backdropEl) $backdropEl.transform(`translate3d(${translate}px,0,0)`).transition(0);
       }
-
       $el.trigger('panel:swipe', Math.abs(translate / panelWidth));
       panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));
     } else {
       if (side === 'left') translate -= panelWidth;
-
       if (!params.swipeNoFollow) {
         backdropOpacity = 1 - Math.abs(translate / panelWidth);
-
         if ($backdropEl) {
           $backdropEl.transition(0);
           $backdropEl.css({
             opacity: backdropOpacity
           });
         }
-
         $el.transform(`translate3d(${translate}px,0,0)`).transition(0);
-
         if (effect === 'push') {
           const viewTranslate = side === 'left' ? translate + panelWidth : translate - panelWidth;
           $viewEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);
-
           if ($backdropEl) {
             $backdropEl.transform(`translate3d(${viewTranslate}px,0,0)`).transition(0);
           }
         }
       }
-
       $el.trigger('panel:swipe', Math.abs(translate / panelWidth));
       panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth));
     }
-
     if (params.swipeNoFollow) {
       const stateChanged = panel.opened && noFollowProgress === 0 || !panel.opened && noFollowProgress === 1;
-
       if (stateChanged) {
-        isInterrupted = true; // eslint-disable-next-line
-
+        isInterrupted = true;
+        // eslint-disable-next-line
         handleTouchEnd(e);
       }
     }
   }
-
   function handleTouchEnd(e) {
     if (!isTouched || !isMoved) {
       isTouched = false;
       isMoved = false;
       return;
     }
-
     const isGesture = e.type === 'gesturestart' || isGestureStarted;
     isTouched = false;
     isMoved = false;
     const timeDiff = new Date().getTime() - touchStartTime;
     let action;
-    const edge = (translate === 0 || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;
+    const startTranslate = effect === 'floating' ? side === 'left' ? 8 : -8 : 0;
+    const edge = (translate === startTranslate || Math.abs(translate) === panelWidth) && !params.swipeNoFollow;
     const threshold = params.swipeThreshold || 0;
-
     if (isGesture) {
       action = 'reset';
     } else if (!panel.opened) {
       if (Math.abs(touchesDiff) < threshold) {
         action = 'reset';
-      } else if (effect === 'cover' || effect === 'push') {
-        if (translate === 0) {
+      } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {
+        if (translate === 0 + startTranslate) {
           action = 'swap'; // open
         } else if (timeDiff < 300 && Math.abs(translate) > 0) {
           action = 'swap'; // open
@@ -272,7 +227,7 @@ function swipePanel(panel) {
       } else {
         action = 'reset';
       }
-    } else if (effect === 'cover' || effect === 'push') {
+    } else if (effect === 'cover' || effect === 'push' || effect === 'floating') {
       if (translate === 0) {
         action = 'reset'; // open
       } else if (timeDiff < 300 && Math.abs(translate) > 0) {
@@ -289,7 +244,6 @@ function swipePanel(panel) {
     } else {
       action = 'reset';
     }
-
     if (action === 'swap') {
       if (panel.opened) {
         panel.close(!edge);
@@ -297,9 +251,7 @@ function swipePanel(panel) {
         panel.open(!edge);
       }
     }
-
     let removePanelInClass = true;
-
     if (action === 'reset') {
       if (!panel.opened) {
         if (edge) {
@@ -317,20 +269,16 @@ function swipePanel(panel) {
         }
       }
     }
-
     if (effect === 'reveal' || effect === 'push') {
       nextFrame(() => {
         $viewEl.transition('');
         $viewEl.transform('');
       });
     }
-
     if (removePanelInClass) {
       $el.removeClass('panel-in-swipe');
     }
-
     $el.transition('').transform('');
-
     if ($backdropEl) {
       $backdropEl.transform('').transition('').css({
         opacity: '',
@@ -338,17 +286,15 @@ function swipePanel(panel) {
       });
     }
   }
-
   function handleGestureStart(e) {
     isGestureStarted = true;
     handleTouchEnd(e);
   }
-
   function handleGestureEnd() {
     isGestureStarted = false;
-  } // Add Events
-
+  }
 
+  // Add Events
   app.on('touchstart:passive', handleTouchStart);
   app.on('touchmove:active', handleTouchMove);
   app.on('touchend:passive', handleTouchEnd);
@@ -362,5 +308,4 @@ function swipePanel(panel) {
     app.off('gestureend', handleGestureEnd);
   });
 }
-
 export default swipePanel;