docs(modal): add console for snap changes

Author: thetaPC

static/usage/v8/modal/sheet/drag-move-event/angular/example_component_ts.md

@@ -12,10 +12,20 @@ import type { ModalDragEventDetail } from '@ionic/angular/standalone';
 export class ExampleComponent {
   @ViewChild('header', { read: ElementRef })
   header!: ElementRef<HTMLIonHeaderElement>;
+  // Assign the current snap breakpoint to the initial breakpoint so
+  // that we can track changes during the drag
+  currentSnap = 0.25;
 
   onDragMove(event: CustomEvent<ModalDragEventDetail>) {
     // `progress` is a value from 1 (top) to 0 (bottom)
-    const { progress } = event.detail;
+    // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+    const { progress, snapBreakpoint } = event.detail;
+
+    if (this.currentSnap !== snapBreakpoint) {
+      this.currentSnap = snapBreakpoint as number;
+
+      console.log('Current snap breakpoint:', snapBreakpoint);
+    }
 
     const headerEl = this.header.nativeElement;
     /**
@@ -31,6 +41,7 @@ export class ExampleComponent {
   onDragEnd(event: CustomEvent<ModalDragEventDetail>) {
     console.log('Drag ended', event.detail);
 
+    // `progress` is a value from 1 (top) to 0 (bottom)
     // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
     const { progress, snapBreakpoint } = event.detail;
     const headerEl = this.header.nativeElement;

static/usage/v8/modal/sheet/drag-move-event/demo.html

@@ -39,11 +39,20 @@
     <script>
       const modal = document.querySelector('ion-modal');
       const header = document.querySelector('ion-header');
+      // Assign the current snap breakpoint to the initial breakpoint so
+      // that we can track changes during the drag
+      let currentSnap = 0.25;
       modal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
 
       modal.addEventListener('ionDragMove', (event) => {
         // `progress` is a value from 1 (top) to 0 (bottom)
-        const { progress } = event.detail;
+        const { progress, snapBreakpoint } = event.detail;
+
+        if (currentSnap !== snapBreakpoint) {
+          currentSnap = snapBreakpoint;
+
+          console.log('Current snap breakpoint:', snapBreakpoint);
+        }
 
         /**
          * Inverse relationship:
@@ -58,6 +67,7 @@
       modal.addEventListener('ionDragEnd', (event) => {
         console.log('Drag ended');
 
+        // `progress` is a value from 1 (top) to 0 (bottom)
         // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
         const { progress, snapBreakpoint } = event.detail;
 

static/usage/v8/modal/sheet/drag-move-event/javascript.md

@@ -19,11 +19,21 @@
 <script>
   const modal = document.querySelector('ion-modal');
   const header = document.querySelector('ion-header');
+  // Assign the current snap breakpoint to the initial breakpoint so
+  // that we can track changes during the drag
+  let currentSnap = 0.25;
   modal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
 
   modal.addEventListener('ionDragMove', (event) => {
     // `progress` is a value from 1 (top) to 0 (bottom)
-    const { progress } = event.detail;
+    // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+    const { progress, snapBreakpoint } = event.detail;
+
+    if (currentSnap !== snapBreakpoint) {
+      currentSnap = snapBreakpoint;
+
+      console.log('Current snap breakpoint:', snapBreakpoint);
+    }
 
     /**
      * Inverse relationship:

static/usage/v8/modal/sheet/drag-move-event/react.md

@@ -5,12 +5,22 @@ import type { ModalDragEventDetail } from '@ionic/react';
 
 function Example() {
   const header = useRef<HTMLIonHeaderElement>(null);
+  // Assign the current snap breakpoint to the initial breakpoint so
+  // that we can track changes during the drag
+  const currentSnap = useRef(0.25);
 
   const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
     // `progress` is a value from 1 (top) to 0 (bottom)
-    const { progress } = event.detail;
+    // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+    const { progress, snapBreakpoint } = event.detail;
     const headerEl = header.current!;
 
+    if (currentSnap.current !== snapBreakpoint) {
+      currentSnap.current = snapBreakpoint as number;
+
+      console.log('Current snap breakpoint:', snapBreakpoint);
+    }
+
     /**
      * Inverse relationship:
      * 1.0 progress = 0 opacity
@@ -24,6 +34,7 @@ function Example() {
   const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
     console.log('Drag ended', event.detail);
 
+    // `progress` is a value from 1 (top) to 0 (bottom)
     // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
     const { progress, snapBreakpoint } = event.detail;
     const headerEl = header.current!;

static/usage/v8/modal/sheet/drag-move-event/vue.md

@@ -31,12 +31,22 @@ import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonLa
 import type { ModalDragEventDetail } from '@ionic/vue';
 
 const header = ref<InstanceType<typeof IonHeader>>();
+// Assign the current snap breakpoint to the initial breakpoint so
+// that we can track changes during the drag
+let currentSnap = 0.25;
 
 const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
   // `progress` is a value from 1 (top) to 0 (bottom)
-  const { progress } = event.detail;
+  // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
+  const { progress, snapBreakpoint } = event.detail;
   const headerEl = header.value!.$el;
 
+  if (currentSnap !== snapBreakpoint) {
+    currentSnap = snapBreakpoint;
+
+    console.log('Current snap breakpoint:', snapBreakpoint);
+  }
+
   /**
    * Inverse relationship:
    * 1.0 progress = 0 opacity
@@ -50,6 +60,7 @@ const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
 const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
   console.log('Drag ended', event.detail);
 
+  // `progress` is a value from 1 (top) to 0 (bottom)
   // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
   const { progress, snapBreakpoint } = event.detail;
   const headerEl = header.value!.$el;