From 79f5c6cf8f3ff300a9e9aafa07b6edac8fcb9b25 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 12 Jul 2023 14:53:02 -0400 Subject: [PATCH 1/6] docs(gesture): add playground example for basic usage --- docs/utilities/gestures.md | 4 +- static/code/stackblitz/v7/html/index.ts | 3 +- .../basic/angular/example_component_css.md | 14 ++++ .../basic/angular/example_component_html.md | 10 +++ .../basic/angular/example_component_ts.md | 50 +++++++++++ static/usage/v7/gestures/basic/demo.html | 81 ++++++++++++++++++ static/usage/v7/gestures/basic/index.md | 34 ++++++++ static/usage/v7/gestures/basic/javascript.md | 57 +++++++++++++ .../usage/v7/gestures/basic/react/main_css.md | 14 ++++ .../usage/v7/gestures/basic/react/main_tsx.md | 62 ++++++++++++++ static/usage/v7/gestures/basic/vue.md | 82 +++++++++++++++++++ 11 files changed, 409 insertions(+), 2 deletions(-) create mode 100644 static/usage/v7/gestures/basic/angular/example_component_css.md create mode 100644 static/usage/v7/gestures/basic/angular/example_component_html.md create mode 100644 static/usage/v7/gestures/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/gestures/basic/demo.html create mode 100644 static/usage/v7/gestures/basic/index.md create mode 100644 static/usage/v7/gestures/basic/javascript.md create mode 100644 static/usage/v7/gestures/basic/react/main_css.md create mode 100644 static/usage/v7/gestures/basic/react/main_tsx.md create mode 100644 static/usage/v7/gestures/basic/vue.md diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index ab65cfb8f7b..7b011f56493 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -137,7 +137,9 @@ const gesture = createGesture({ ## Basic Gestures -### Usage +import Basic from '@site/static/usage/v7/gestures/basic/index.md'; + + ````mdx-code-block + + Pan the Screen + + +

Gesture information will display after interaction.

+ + +``` diff --git a/static/usage/v7/gestures/basic/angular/example_component_ts.md b/static/usage/v7/gestures/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..33482eca38b --- /dev/null +++ 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; + @ViewChild('debug', { read: ElementRef }) debug: ElementRef; + + 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 = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + + 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 new file mode 100644 index 00000000000..feb0305980d --- /dev/null +++ b/static/usage/v7/gestures/basic/demo.html @@ -0,0 +1,81 @@ + + + + + + Gesture + + + + + + + + + + +
+ + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + +
+ + diff --git a/static/usage/v7/gestures/basic/index.md b/static/usage/v7/gestures/basic/index.md new file mode 100644 index 00000000000..835658738d2 --- /dev/null +++ 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'; + + diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md new file mode 100644 index 00000000000..0e8b19d292e --- /dev/null +++ b/static/usage/v7/gestures/basic/javascript.md @@ -0,0 +1,57 @@ +```html + + + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + + +``` diff --git a/static/usage/v7/gestures/basic/react/main_css.md b/static/usage/v7/gestures/basic/react/main_css.md new file mode 100644 index 00000000000..4532a98eac4 --- /dev/null +++ b/static/usage/v7/gestures/basic/react/main_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/react/main_tsx.md b/static/usage/v7/gestures/basic/react/main_tsx.md new file mode 100644 index 00000000000..2004c3b9066 --- /dev/null +++ b/static/usage/v7/gestures/basic/react/main_tsx.md @@ -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(null); + const debug = useRef(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 = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + }; + + const onEnd = () => { + card.current?.classList.remove('active'); + }; + + return ( + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v7/gestures/basic/vue.md b/static/usage/v7/gestures/basic/vue.md new file mode 100644 index 00000000000..0cf6fc95d1e --- /dev/null +++ b/static/usage/v7/gestures/basic/vue.md @@ -0,0 +1,82 @@ +```html + + + + +``` From b5c34f862d3177735696930b542818c388589803 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 12 Jul 2023 21:42:10 -0400 Subject: [PATCH 2/6] chore: use gestureName --- static/usage/v7/gestures/basic/demo.html | 2 +- static/usage/v7/gestures/basic/javascript.md | 1 + static/usage/v7/gestures/basic/vue.md | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/gestures/basic/demo.html b/static/usage/v7/gestures/basic/demo.html index feb0305980d..250c0235801 100644 --- a/static/usage/v7/gestures/basic/demo.html +++ b/static/usage/v7/gestures/basic/demo.html @@ -38,7 +38,7 @@ onStart, onMove, onEnd, - name: 'example', + gestureName: 'example', }); gesture.enable(); diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md index 0e8b19d292e..f21e2967b24 100644 --- a/static/usage/v7/gestures/basic/javascript.md +++ b/static/usage/v7/gestures/basic/javascript.md @@ -50,6 +50,7 @@ onStart, onMove, onEnd, + gestureName: 'example', }); gesture.enable(); diff --git a/static/usage/v7/gestures/basic/vue.md b/static/usage/v7/gestures/basic/vue.md index 0cf6fc95d1e..2526d8bff15 100644 --- a/static/usage/v7/gestures/basic/vue.md +++ b/static/usage/v7/gestures/basic/vue.md @@ -46,7 +46,7 @@ onStart: () => onStart(), onMove: (detail) => onMove(detail), onEnd: () => onEnd(), - name: 'example', + gestureName: 'example', }); gesture.enable(); From b911d6aec906e16f66708adda1d41bed7bdaeb81 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 13 Jul 2023 10:57:38 -0400 Subject: [PATCH 3/6] chore: remove legacy basic example --- docs/utilities/gestures.md | 131 ------------------------------------- 1 file changed, 131 deletions(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index 7b011f56493..5708b223391 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -141,137 +141,6 @@ import Basic from '@site/static/usage/v7/gestures/basic/index.md'; -````mdx-code-block - - - -```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 = ` -
Type: ${type}
-
Current X: ${currentX}
-
Delta X: ${deltaX}
-
Velocity X: ${velocityX}
- ` -} -``` - - - -```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 = ` -
Type: ${type}
-
Current X: ${currentX}
-
Delta X: ${deltaX}
-
Velocity X: ${velocityX}
- ` -} -``` - - - -```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 = ` -
Type: ${type}
-
Current X: ${currentX}
-
Delta X: ${deltaX}
-
Velocity X: ${velocityX}
- ` -} -``` - - - -```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 = ` -
Type: ${type}
-
Current X: ${currentX}
-
Delta X: ${deltaX}
-
Velocity X: ${velocityX}
- ` -} -``` - - -```` - -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. - - - ## Double Click Gesture ### Usage From caabed7b19a71d00955cc67d5231bef18a5120c7 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 13 Jul 2023 14:12:12 -0400 Subject: [PATCH 4/6] chore: remove extra whitespace --- static/usage/v7/gestures/basic/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/gestures/basic/javascript.md b/static/usage/v7/gestures/basic/javascript.md index f21e2967b24..71153daeec5 100644 --- a/static/usage/v7/gestures/basic/javascript.md +++ b/static/usage/v7/gestures/basic/javascript.md @@ -31,7 +31,7 @@ const onMove = (detail) => { const { type, currentX, deltaX, velocityX } = detail; p.innerHTML = ` -
Type: ${type}
+
Type: ${type}
Current X: ${currentX}
Delta X: ${deltaX}
Velocity X: ${velocityX}
`; From 465e885362277789fc322aacb7cb6b7441e32a03 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 13 Jul 2023 14:14:17 -0400 Subject: [PATCH 5/6] docs: add explanation for example --- docs/utilities/gestures.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index 5708b223391..83a5373bef7 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -139,6 +139,8 @@ const gesture = createGesture({ import Basic from '@site/static/usage/v7/gestures/basic/index.md'; +In this example, our app listens for gestures on the `ion-content` element. When a gesture movement is 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 is detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement is ended, the `onEnd` function is called and the custom class is removed from our `ion-card`. + ## Double Click Gesture From 84765c7d120fcad3b4e10bf98249a3d1846da68c Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 17 Jul 2023 11:21:51 -0400 Subject: [PATCH 6/6] chore: content updates --- docs/utilities/gestures.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index 83a5373bef7..d01714bc7e6 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -139,7 +139,7 @@ const gesture = createGesture({ import Basic from '@site/static/usage/v7/gestures/basic/index.md'; -In this example, our app listens for gestures on the `ion-content` element. When a gesture movement is 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 is detected, the `onMove` function is called and our app prints the current gesture information within the `ion-card`. Finally, when a gesture movement is ended, the `onEnd` function is called and the custom class is removed from our `ion-card`. +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`.