docs(gesture): add playground example for basic usage

docs/utilities/gestures.md

@@ -137,138 +137,11 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-### Usage
-
-````mdx-code-block
-<Tabs
- groupId="framework"
- defaultValue="javascript"
- values={[
- { value: 'javascript', label: 'JavaScript' },
- { value: 'angular', label: 'Angular' },
- { value: 'react', label: 'React' },
- { value: 'vue', label: 'Vue' },
- ]
-}>
-<TabItem value="javascript">
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
- el: document.querySelector('.rectangle'),
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- p.innerHTML = `
- <div>Type: ${type}</div>
- <div>Current X: ${currentX}</div>
- <div>Delta X: ${deltaX}</div>
- <div>Velocity X: ${velocityX}</div>
- `
-}
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-@ViewChild('paragraph') p: ElementRef;
-
-ngOnInit() {
- const gesture = this.gestureCtrl.create({
- el: this.rectangle.nativeElement,
- onMove: (detail) => { this.onMove(detail); }
- })
-
- gesture.enable();
-}
-
-private onMove(detail) {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- this.p.innerHTML = `
- <div>Type: ${type}</div>
- <div>Current X: ${currentX}</div>
- <div>Delta X: ${deltaX}</div>
- <div>Velocity X: ${velocityX}</div>
- `
-}
-```
-</TabItem>
-<TabItem value="react">
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
- el: document.querySelector('.rectangle'),
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- p.innerHTML = `
- <div>Type: ${type}</div>
- <div>Current X: ${currentX}</div>
- <div>Delta X: ${deltaX}</div>
- <div>Velocity X: ${velocityX}</div>
- `
-}
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-let pRef = ref();
-const rectangleRef = ref();
-const gesture = createGesture({
- el: rectangleRef.value,
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- pRef.value.innerHTML = `
- <div>Type: ${type}</div>
- <div>Current X: ${currentX}</div>
- <div>Delta X: ${deltaX}</div>
- <div>Velocity X: ${velocityX}</div>
- `
-}
-```
-</TabItem>
-</Tabs>
-````
+import Basic from '@site/static/usage/v7/gestures/basic/index.md';
 
-In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
+In this example, our app listens for gestures on the `ion-content` element. When a gesture movement has started, the `onStart` function is called and a class is added to our `ion-card` to add a colored box shadow. When a gesture movement was detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement has ended, the `onEnd` function is called and the custom class is removed from our `ion-card`.
 
-<Codepen user="ionic" slug="xxKBYdL" />
+<Basic />
 
 ## Double Click Gesture
 

static/code/stackblitz/v7/html/index.ts

@@ -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;

static/usage/v7/gestures/basic/angular/example_component_css.md

@@ -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;
+}
+```

static/usage/v7/gestures/basic/angular/example_component_html.md

@@ -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>
+```

static/usage/v7/gestures/basic/angular/example_component_ts.md

@@ -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();
+ }
+}
+```

static/usage/v7/gestures/basic/demo.html

@@ -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>

static/usage/v7/gestures/basic/index.md

@@ -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"
+/>