Skip to content

Commit 614519f

Browse files
sean-perkinsdillionmegida
sean-perkins
and
dillionmegida
authored
docs(gesture): add playground example for basic usage (#3038)
Co-authored-by: dillionmegida <[email protected]>
1 parent 99b5f8a commit 614519f

File tree

10 files changed

+408
-130
lines changed

10 files changed

+408
-130
lines changed

‎docs/utilities/gestures.md

Lines changed: 3 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -137,138 +137,11 @@ const gesture = createGesture({
137137

138138
## Basic Gestures
139139

140-
### Usage
140+
import Basic from '@site/static/usage/v7/gestures/basic/index.md';
141141

142-
````mdx-code-block
143-
<Tabs
144-
groupId="framework"
145-
defaultValue="javascript"
146-
values={[
147-
{ value: 'javascript', label: 'JavaScript' },
148-
{ value: 'angular', label: 'Angular' },
149-
{ value: 'react', label: 'React' },
150-
{ value: 'vue', label: 'Vue' },
151-
]
152-
}>
153-
<TabItem value="javascript">
154-
155-
```javascript
156-
let p = document.querySelector('p');
157-
const gesture = createGesture({
158-
el: document.querySelector('.rectangle'),
159-
onMove: (detail) => { onMove(detail); }
160-
})
161-
162-
gesture.enable();
163-
164-
const onMove = (detail) => {
165-
const type = detail.type;
166-
const currentX = detail.currentX;
167-
const deltaX = detail.deltaX;
168-
const velocityX = detail.velocityX;
169-
170-
p.innerHTML = `
171-
<div>Type: ${type}</div>
172-
<div>Current X: ${currentX}</div>
173-
<div>Delta X: ${deltaX}</div>
174-
<div>Velocity X: ${velocityX}</div>
175-
`
176-
}
177-
```
178-
</TabItem>
179-
<TabItem value="angular">
180-
181-
```javascript
182-
@ViewChild('paragraph') p: ElementRef;
183-
184-
ngOnInit() {
185-
const gesture = this.gestureCtrl.create({
186-
el: this.rectangle.nativeElement,
187-
onMove: (detail) => { this.onMove(detail); }
188-
})
189-
190-
gesture.enable();
191-
}
192-
193-
private onMove(detail) {
194-
const type = detail.type;
195-
const currentX = detail.currentX;
196-
const deltaX = detail.deltaX;
197-
const velocityX = detail.velocityX;
198-
199-
this.p.innerHTML = `
200-
<div>Type: ${type}</div>
201-
<div>Current X: ${currentX}</div>
202-
<div>Delta X: ${deltaX}</div>
203-
<div>Velocity X: ${velocityX}</div>
204-
`
205-
}
206-
```
207-
</TabItem>
208-
<TabItem value="react">
209-
210-
```javascript
211-
let p = document.querySelector('p');
212-
const gesture = createGesture({
213-
el: document.querySelector('.rectangle'),
214-
onMove: (detail) => { onMove(detail); }
215-
})
216-
217-
gesture.enable();
218-
219-
const onMove = (detail) => {
220-
const type = detail.type;
221-
const currentX = detail.currentX;
222-
const deltaX = detail.deltaX;
223-
const velocityX = detail.velocityX;
224-
225-
p.innerHTML = `
226-
<div>Type: ${type}</div>
227-
<div>Current X: ${currentX}</div>
228-
<div>Delta X: ${deltaX}</div>
229-
<div>Velocity X: ${velocityX}</div>
230-
`
231-
}
232-
```
233-
</TabItem>
234-
<TabItem value="vue">
235-
236-
```javascript
237-
import { createGesture } from '@ionic/vue';
238-
import { ref } from 'vue';
239-
240-
...
241-
242-
let pRef = ref();
243-
const rectangleRef = ref();
244-
const gesture = createGesture({
245-
el: rectangleRef.value,
246-
onMove: (detail) => { onMove(detail); }
247-
})
248-
249-
gesture.enable();
250-
251-
const onMove = (detail) => {
252-
const type = detail.type;
253-
const currentX = detail.currentX;
254-
const deltaX = detail.deltaX;
255-
const velocityX = detail.velocityX;
256-
257-
pRef.value.innerHTML = `
258-
<div>Type: ${type}</div>
259-
<div>Current X: ${currentX}</div>
260-
<div>Delta X: ${deltaX}</div>
261-
<div>Velocity X: ${velocityX}</div>
262-
`
263-
}
264-
```
265-
</TabItem>
266-
</Tabs>
267-
````
268-
269-
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.
142+
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`.
270143

271-
<Codepen user="ionic" slug="xxKBYdL" />
144+
<Basic />
272145

273146
## Double Click Gesture
274147

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```css
2+
ion-card {
3+
position: absolute;
4+
5+
left: 0;
6+
right: 0;
7+
8+
user-select: none;
9+
}
10+
11+
ion-card.active {
12+
box-shadow: var(--ion-color-warning) 0px 4px 16px;
13+
}
14+
```

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```html
2+
<ion-card [class.active]="isCardActive">
3+
<ion-card-header>
4+
<ion-card-subtitle>Pan the Screen</ion-card-subtitle>
5+
</ion-card-header>
6+
<ion-card-content>
7+
<p #debug>Gesture information will display after interaction.</p>
8+
</ion-card-content>
9+
</ion-card>
10+
```

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
```ts
2+
import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
3+
import type { GestureDetail } from '@ionic/angular';
4+
import { GestureController, IonCard } from '@ionic/angular';
5+
6+
@Component({
7+
selector: 'app-example',
8+
templateUrl: 'example.component.html',
9+
styleUrls: ['example.component.css'],
10+
})
11+
export class ExampleComponent {
12+
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild('debug', { read: ElementRef }) debug: ElementRef<HTMLParagraphElement>;
14+
15+
isCardActive = false;
16+
17+
constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {}
18+
19+
ngAfterViewInit() {
20+
const gesture = this.gestureCtrl.create({
21+
el: this.el.nativeElement.closest('ion-content'),
22+
onStart: () => this.onStart(),
23+
onMove: (detail) => this.onMove(detail),
24+
onEnd: () => this.onEnd(),
25+
gestureName: 'example',
26+
});
27+
28+
gesture.enable();
29+
}
30+
31+
private onStart() {
32+
this.isCardActive = true;
33+
this.cdRef.detectChanges();
34+
}
35+
36+
private onMove(detail: GestureDetail) {
37+
const { type, currentX, deltaX, velocityX } = detail;
38+
this.debug.nativeElement.innerHTML = `
39+
<div>Type: ${type}</div>
40+
<div>Current X: ${currentX}</div>
41+
<div>Delta X: ${deltaX}</div>
42+
<div>Velocity X: ${velocityX}</div>`;
43+
}
44+
45+
private onEnd() {
46+
this.isCardActive = false;
47+
this.cdRef.detectChanges();
48+
}
49+
}
50+
```

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gesture</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
<script type="module">
12+
import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
13+
window.createGesture = createGesture;
14+
15+
const p = document.querySelector('#debug');
16+
const target = document.querySelector('ion-content');
17+
const card = document.querySelector('ion-card');
18+
19+
const onMove = (detail) => {
20+
const { type, currentX, deltaX, velocityX } = detail;
21+
p.innerHTML = `
22+
<div>Type: ${type}</div>
23+
<div>Current X: ${currentX}</div>
24+
<div>Delta X: ${deltaX}</div>
25+
<div>Velocity X: ${velocityX}</div>`;
26+
};
27+
28+
const onStart = () => {
29+
card.classList.add('active');
30+
};
31+
32+
const onEnd = () => {
33+
card.classList.remove('active');
34+
};
35+
36+
const gesture = createGesture({
37+
el: target,
38+
onStart,
39+
onMove,
40+
onEnd,
41+
gestureName: 'example',
42+
});
43+
44+
gesture.enable();
45+
</script>
46+
47+
<style>
48+
.container {
49+
flex-direction: column;
50+
}
51+
52+
ion-card {
53+
position: absolute;
54+
55+
left: 0;
56+
right: 0;
57+
58+
user-select: none;
59+
}
60+
61+
ion-card.active {
62+
box-shadow: var(--ion-color-warning) 0px 4px 16px;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<div class="container">
69+
<ion-content>
70+
<ion-card>
71+
<ion-card-header>
72+
<ion-card-subtitle>Pan the Screen</ion-card-subtitle>
73+
</ion-card-header>
74+
<ion-card-content>
75+
<p id="debug">Gesture information will display after interaction.</p>
76+
</ion-card-content>
77+
</ion-card>
78+
</ion-content>
79+
</div>
80+
</body>
81+
</html>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_css from './react/main_css.md';
6+
import react_main_tsx from './react/main_tsx.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_ts from './angular/example_component_ts.md';
12+
import angular_example_component_css from './angular/example_component_css.md';
13+
14+
<Playground
15+
version="7"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.ts': angular_example_component_ts,
29+
'src/app/example.component.css': angular_example_component_css,
30+
},
31+
},
32+
}}
33+
src="usage/v7/gestures/basic/demo.html"
34+
/>

‎static/usage/v7/gestures/basic/javascript.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
```html
2+
<style>
3+
ion-card {
4+
position: absolute;
5+
6+
left: 0;
7+
right: 0;
8+
9+
user-select: none;
10+
}
11+
12+
ion-card.active {
13+
box-shadow: var(--ion-color-warning) 0px 4px 16px;
14+
}
15+
</style>
16+
17+
<ion-card>
18+
<ion-card-header>
19+
<ion-card-subtitle>Pan the Screen</ion-card-subtitle>
20+
</ion-card-header>
21+
<ion-card-content>
22+
<p id="debug">Gesture information will display after interaction.</p>
23+
</ion-card-content>
24+
</ion-card>
25+
26+
<script>
27+
const p = document.querySelector('#debug');
28+
const target = document.querySelector('ion-content');
29+
const card = document.querySelector('ion-card');
30+
31+
const onMove = (detail) => {
32+
const { type, currentX, deltaX, velocityX } = detail;
33+
p.innerHTML = `
34+
<div>Type: ${type}</div>
35+
<div>Current X: ${currentX}</div>
36+
<div>Delta X: ${deltaX}</div>
37+
<div>Velocity X: ${velocityX}</div>`;
38+
};
39+
40+
const onStart = () => {
41+
card.classList.add('active');
42+
};
43+
44+
const onEnd = () => {
45+
card.classList.remove('active');
46+
};
47+
48+
const gesture = createGesture({
49+
el: target,
50+
onStart,
51+
onMove,
52+
onEnd,
53+
gestureName: 'example',
54+
});
55+
56+
gesture.enable();
57+
</script>
58+
```

0 commit comments

Comments
 (0)