Method initSheetGesture

core/src/components/modal/modal.tsx:765–819

()

  }

  private initSheetGesture() {
    const { wrapperEl, initialBreakpoint, backdropBreakpoint } = this;

    if (!wrapperEl || initialBreakpoint === undefined) {
      return;
    }

    const animationBuilder = this.enterAnimation || config.get('modalEnter', iosEnterAnimation);
    const ani: Animation = (this.animation = animationBuilder(this.el, {
      presentingEl: this.presentingElement,
      currentBreakpoint: initialBreakpoint,
      backdropBreakpoint,
      expandToScroll: this.expandToScroll,
    }));

    ani.progressStart(true, 1);

    const { gesture, moveSheetToBreakpoint } = createSheetGesture(
      this.el,
      this.backdropEl!,
      wrapperEl,
      initialBreakpoint,
      backdropBreakpoint,
      ani,
      this.sortedBreakpoints,
      this.expandToScroll,
      () => this.currentBreakpoint ?? 0,
      () => this.sheetOnDismiss(),
      (breakpoint: number) => {
        if (this.currentBreakpoint !== breakpoint) {
          this.currentBreakpoint = breakpoint;
          this.ionBreakpointDidChange.emit({ breakpoint });
        }
      },
      () => this.onDragStart(),
      (detail: ModalDragEventDetail) => this.onDragMove(detail),
      (detail: ModalDragEventDetail) => this.onDragEnd(detail)
    );

    this.gesture = gesture;
    this.moveSheetToBreakpoint = moveSheetToBreakpoint;

    this.gesture.enable(true);

    /**
     * When backdrop interaction is allowed, nested router outlets from child routes
     * may block pointer events to parent content. Apply passthrough styles only when
     * the modal was the sole content of a child route page.
     * See https://github.com/ionic-team/ionic-framework/issues/30700
     */
    const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
    if (backdropNotBlocking) {
      this.setupChildRoutePassthrough();
    }
  }

  /**
   * For sheet modals that allow background interaction, sets up pointer-events