ionic-team · sean-perkins · Jul 17, 2023 · Jul 12, 2023 · Jul 13, 2023 · Jul 13, 2023
@@ -137,7 +137,9 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-### Usage
+import Basic from '@site/static/usage/v7/gestures/basic/index.md';
+
+<Basic />
 
 ````mdx-code-block
 <Tabs

@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -28,3 +28,4 @@ defineCustomElements();
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
 (window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
@@ -0,0 +1,10 @@
+```html
+<ion-card [class.active]="isCardActive">
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p #debug>Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+```
@@ -0,0 +1,50 @@
+```ts
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import type { GestureDetail } from '@ionic/angular';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+  @ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
+
+  isCardActive = false;
+
+  constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    const gesture = this.gestureCtrl.create({
+      el: this.el.nativeElement.closest('ion-content'),
+      onStart: () => this.onStart(),
+      onMove: (detail) => this.onMove(detail),
+      onEnd: () => this.onEnd(),
+      gestureName: 'example',
+    });
+
+    gesture.enable();
+  }
+
+  private onStart() {
+    this.isCardActive = true;
+    this.cdRef.detectChanges();
+  }
+
+  private onMove(detail: GestureDetail) {
+    const { type, currentX, deltaX, velocityX } = detail;
+    this.debug.nativeElement.innerHTML = `
+      <div>Type: ${type}</div>
+      <div>Current X: ${currentX}</div>
+      <div>Delta X: ${deltaX}</div>
+      <div>Velocity X: ${velocityX}</div>`;
+  }
+
+  private onEnd() {
+    this.isCardActive = false;
+    this.cdRef.detectChanges();
+  }
+}
+```
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gesture</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createGesture = createGesture;
+
+      const p = document.querySelector('#debug');
+      const target = document.querySelector('ion-content');
+      const card = document.querySelector('ion-card');
+
+      const onMove = (detail) => {
+        const { type, currentX, deltaX, velocityX } = detail;
+        p.innerHTML = `
+          <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+      };
+
+      const onStart = () => {
+        card.classList.add('active');
+      };
+
+      const onEnd = () => {
+        card.classList.remove('active');
+      };
+
+      const gesture = createGesture({
+        el: target,
+        onStart,
+        onMove,
+        onEnd,
+        gestureName: 'example',
+      });
+
+      gesture.enable();
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        position: absolute;
+
+        left: 0;
+        right: 0;
+
+        user-select: none;
+      }
+
+      ion-card.active {
+        box-shadow: var(--ion-color-warning) 0px 4px 16px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-content>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p id="debug">Gesture information will display after interaction.</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/gestures/basic/demo.html"
+/>
@@ -0,0 +1,58 @@
+```html
+<style>
+  ion-card {
+    position: absolute;
+
+    left: 0;
+    right: 0;
+
+    user-select: none;
+  }
+
+  ion-card.active {
+    box-shadow: var(--ion-color-warning) 0px 4px 16px;
+  }
+</style>
+
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>Pan the Screen</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <p id="debug">Gesture information will display after interaction.</p>
+  </ion-card-content>
+</ion-card>
+
+<script>
+  const p = document.querySelector('#debug');
+  const target = document.querySelector('ion-content');
+  const card = document.querySelector('ion-card');
+
+  const onMove = (detail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+    p.innerHTML = `
+          <div>Type: ${type}</div>
+    <div>Current X: ${currentX}</div>
+    <div>Delta X: ${deltaX}</div>
+    <div>Velocity X: ${velocityX}</div>`;
+  };
+
+  const onStart = () => {
+    card.classList.add('active');
+  };
+
+  const onEnd = () => {
+    card.classList.remove('active');
+  };
+
+  const gesture = createGesture({
+    el: target,
+    onStart,
+    onMove,
+    onEnd,
+    gestureName: 'example',
+  });
+
+  gesture.enable();
+</script>
+```
@@ -0,0 +1,14 @@
+```css
+ion-card {
+  position: absolute;
+
+  left: 0;
+  right: 0;
+
+  user-select: none;
+}
+
+ion-card.active {
+  box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
@@ -0,0 +1,62 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react';
+import type { GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const card = useRef<HTMLIonCardElement | null>(null);
+  const debug = useRef<HTMLParagraphElement | null>(null);
+
+  useEffect(() => {
+    if (card.current) {
+      const target = card.current.closest('ion-content');
+
+      if (target) {
+        const gesture = createGesture({
+          el: target,
+          onStart: () => onStart(),
+          onMove: (detail) => onMove(detail),
+          onEnd: () => onEnd(),
+          gestureName: 'example',
+        });
+
+        gesture.enable();
+      }
+    }
+  }, [card]);
+
+  const onStart = () => {
+    card.current?.classList.add('active');
+  };
+
+  const onMove = (detail: GestureDetail) => {
+    const { type, currentX, deltaX, velocityX } = detail;
+
+    if (debug.current) {
+      debug.current.innerHTML = `
+        <div>Type: ${type}</div>
+        <div>Current X: ${currentX}</div>
+        <div>Delta X: ${deltaX}</div>
+        <div>Velocity X: ${velocityX}</div>`;
+    }
+  };
+
+  const onEnd = () => {
+    card.current?.classList.remove('active');
+  };
+
+  return (
+    <IonCard ref={card}>
+      <IonCardHeader>
+        <IonCardSubtitle>Pan the Screen</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <p ref={debug}>Gesture information will display after interaction.</p>
+      </IonCardContent>
+    </IonCard>
+  );
+}
+export default Example;
+```