docs(gesture): add playground example for basic usage (#3038)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
ionic-team · Jul 17, 2023 · 614519f · 614519f · vercel · Jul 17, 2023
1 parent 99b5f8a
commit 614519f
Show file tree

Hide file tree

Showing 10 changed files with 408 additions and 130 deletions.
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
@@ -137,138 +137,11 @@ const gesture = createGesture({
 
 ## Basic Gestures
 
-### Usage
+import Basic from '@site/static/usage/v7/gestures/basic/index.md';
 
-````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>
-````
-
-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
 

diff --git a/static/usage/v7/gestures/basic/angular/example_component_css.md b/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;
+}
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_html.md b/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>
+```
diff --git a/static/usage/v7/gestures/basic/angular/example_component_ts.md b/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();
+  }
+}
+```
diff --git a/static/usage/v7/gestures/basic/demo.html b/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>
diff --git a/static/usage/v7/gestures/basic/index.md b/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"
+/>
diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md
@@ -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>
+```