chore: begin sheet breakpoints

Author: nolimits4web

kitchen-sink/core/pages/sheet-modal.html

@@ -256,7 +256,8 @@
       sheetSwipeToStep = $f7.sheet.create({
         el: '.demo-sheet-swipe-to-step',
         swipeToClose: true,
-        swipeToStep: true,
+        // swipeToStep: true,
+        breakpoints: [0.25, 0.5, 0.75],
         push: true,
         backdrop: true,
       });
@@ -278,4 +279,4 @@
     return $render;
   };
 
-</script>
+</script>

src/core/components/sheet/sheet-class.js

@@ -148,6 +148,7 @@ class Sheet extends Modal {
       return (app.height - offset * 2) / app.height;
     }
 
+    const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
     let isTouched = false;
     let startTouch;
     let currentTouch;
@@ -157,6 +158,7 @@ class Sheet extends Modal {
     let isMoved = false;
     let isTopSheetModal;
     let swipeStepTranslate;
+    let breakpointsTranslate = [];
     let startTranslate;
     let currentTranslate;
     let sheetElOffsetHeight;
@@ -246,7 +248,11 @@ class Sheet extends Modal {
           maxTranslate = 0;
         } else {
           minTranslate = 0;
-          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+          maxTranslate = sheet.params.swipeToClose
+            ? sheetElOffsetHeight
+            : useBreakpoints
+            ? breakpointsTranslate[0]
+            : swipeStepTranslate;
         }
         isMoved = true;
       }
@@ -418,22 +424,37 @@ class Sheet extends Modal {
 
     sheet.setSwipeStep = function setSwipeStep(byResize = true) {
       const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
-      if (!$swipeStepEl.length) return;
-      if ($el.hasClass('sheet-modal-top')) {
-        swipeStepTranslate = -(
-          $swipeStepEl.offset().top -
-          $el.offset().top +
-          $swipeStepEl[0].offsetHeight
-        );
+      if (!useBreakpoints && !$swipeStepEl.length) return;
+      if (useBreakpoints) {
+        const fullSize = $el[0].offsetHeight;
+        breakpointsTranslate = [];
+        sheet.params.breakpoints.forEach((ratio) => {
+          breakpointsTranslate.push(fullSize - fullSize * ratio);
+        });
+        console.log(breakpointsTranslate);
+        $el[0].style.setProperty('--f7-sheet-breakpoint', `${breakpointsTranslate[0]}px`);
+        if (!byResize) {
+          $el.addClass('modal-in-breakpoint');
+          sheet.emit('local::_swipeStep', true);
+        }
       } else {
-        swipeStepTranslate =
-          $el[0].offsetHeight -
-          ($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
-      }
-      $el[0].style.setProperty('--f7-sheet-swipe-step', `${swipeStepTranslate}px`);
-      if (!byResize) {
-        $el.addClass('modal-in-swipe-step');
-        sheet.emit('local::_swipeStep', true);
+        // eslint-disable-next-line
+        if ($el.hasClass('sheet-modal-top')) {
+          swipeStepTranslate = -(
+            $swipeStepEl.offset().top -
+            $el.offset().top +
+            $swipeStepEl[0].offsetHeight
+          );
+        } else {
+          swipeStepTranslate =
+            $el[0].offsetHeight -
+            ($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
+        }
+        $el[0].style.setProperty('--f7-sheet-swipe-step', `${swipeStepTranslate}px`);
+        if (!byResize) {
+          $el.addClass('modal-in-swipe-step');
+          sheet.emit('local::_swipeStep', true);
+        }
       }
     };
 
@@ -442,7 +463,7 @@ class Sheet extends Modal {
     }
 
     const passive = support.passiveListener ? { passive: true } : false;
-    if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+    if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
@@ -458,7 +479,7 @@ class Sheet extends Modal {
         $(document).on('keydown', onKeyDown);
       }
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
-      if (sheet.params.swipeToStep) {
+      if (sheet.params.swipeToStep || useBreakpoints) {
         sheet.setSwipeStep(false);
         app.on('resize', onResize);
       }
@@ -473,7 +494,7 @@ class Sheet extends Modal {
         sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
         $el.addClass('sheet-modal-push');
         sheet.$htmlEl.addClass('with-modal-sheet-push');
-        if (!sheet.params.swipeToStep) {
+        if (!sheet.params.swipeToStep && !useBreakpoints) {
           sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
         } else {
           $pushViewEl = app.$el.children('.view, .views');
@@ -490,8 +511,8 @@ class Sheet extends Modal {
       }
     });
     sheet.on('close', () => {
-      if (sheet.params.swipeToStep) {
-        $el.removeClass('modal-in-swipe-step');
+      if (sheet.params.swipeToStep || useBreakpoints) {
+        $el.removeClass('modal-in-swipe-step modal-in-breakpoint');
         sheet.emit('local::_swipeStep', false);
         app.off('resize', onResize);
       }

src/core/components/sheet/sheet.d.ts

@@ -49,8 +49,13 @@ export namespace Sheet {
     swipeToClose?: boolean;
     /** When enabled it will be possible to split opened sheet into two states: partially opened and fully opened that can be controlled with swipe (default false) */
     swipeToStep?: boolean;
+    /** Use instead of swipeToStep to enable swipe breakpoints. Must be an array of numbers > 0 and < 1, where 0 is fully closed and 1 is fully opened */
+    breakpoints?: number[];
+    /** Define breakpoint point when backdrop becomes visible  */
+    backdropBreakpoint?: number;
     /** When enabled it will be possible to close sheet with swipe only on specified handler element (default null) */
     swipeHandler?: HTMLElement | CSSSelector;
+
     /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `sheet-modal-push` class to Sheet element. (default false) */
     push?: boolean;
     /** Element to mount modal to. (default app.el) */
@@ -87,7 +92,7 @@ export namespace Sheet {
     stepClose(): void;
     /** Toggle (open or close) sheet swipe step */
     stepToggle(): void;
-    /** Update step position. Required to call after content of sheet modal has been modified manually when it is opened */
+    /** Update (recalculate) breakpoints positions. Required to call after content of sheet modal has been modified manually when it is opened */
     setSwipeStep(): void;
     /** Destroy sheet */
     destroy(): void;

src/core/components/sheet/sheet.js

@@ -16,6 +16,8 @@ export default {
       closeOnEscape: false,
       swipeToClose: false,
       swipeToStep: false,
+      breakpoints: [],
+      backdropBreakpoint: null,
       swipeHandler: null,
       containerEl: null,
     },

src/core/components/sheet/sheet.less

@@ -31,9 +31,10 @@
     display: block;
     transform: translate3d(0, 0, 0);
   }
-  &.modal-in-swipe-step {
+  &.modal-in-swipe-step,
+  &.modal-in-breakpoint {
     display: block;
-    transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
+    transform: translate3d(0, var(--f7-sheet-breakpoint, var(--f7-sheet-swipe-step, 0)), 0);
   }
   &.modal-out {
     transform: translate3d(0, 100%, 0);