@@ -272,177 +272,11 @@ In this example, our app listens for gestures on the `.rectangle` element. When
272
272
273
273
## Double Click Gesture
274
274
275
- ### Usage
276
-
277
- ```` mdx-code-block
278
- <Tabs
279
- groupId="framework"
280
- defaultValue="javascript"
281
- values={[
282
- { value: 'javascript', label: 'JavaScript' },
283
- { value: 'angular', label: 'Angular' },
284
- { value: 'react', label: 'React' },
285
- { value: 'vue', label: 'Vue' },
286
- ]
287
- }>
288
- <TabItem value="javascript">
289
-
290
- ```javascript
291
- const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
292
- const DOUBLE_CLICK_THRESHOLD = 500;
293
- const rectangle = document.querySelector('.rectangle');
294
- const gesture = createGesture({
295
- el: rectangle,
296
- threshold: 0,
297
- onStart: () => { onStart(); }
298
- });
299
-
300
- gesture.enable();
301
-
302
- let lastOnStart = 0;
303
- let currentColor = 'rgba(0, 0, 255, 0.5)';
304
-
305
- const onStart = () => {
306
- const now = Date.now();
307
-
308
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
309
- rectangle.style.setProperty('background', getRandomBackground());
310
- lastOnStart = 0;
311
- } else {
312
- lastOnStart = now;
313
- }
314
- }
315
-
316
- const getRandomBackground = () => {
317
- const options = backgrounds.filter(bg => bg !== currentColor);
318
- currentColor = options[Math.floor(Math.random() * options.length)];
319
-
320
- return currentColor;
321
- }
322
- ```
323
- </TabItem>
324
- <TabItem value="angular">
325
-
326
- ```tsx
327
- @ViewChild('rectangle') rectangle: ElementRef;
328
-
329
- private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
330
- private currentColor: string = 'rgba(0, 0, 255, 0.5)';
331
- private lastOnStart: number = 0;
332
- private DOUBLE_CLICK_THRESHOLD: number = 500;
333
-
334
- ngOnInit() {
335
- const gesture = this.gestureCtrl.create({
336
- el: this.rectangle.nativeElement,
337
- threshold: 0,
338
- onStart: () => { this.onStart(); }
339
- });
340
-
341
- gesture.enable();
342
- }
343
-
344
- private onStart() {
345
- const now = Date.now();
346
-
347
- if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
348
- this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
349
- this.lastOnStart = 0;
350
- } else {
351
- this.lastOnStart = now;
352
- }
353
- }
354
-
355
- private getRandomBackground() {
356
- const options = this.backgrounds.filter(bg => bg !== this.currentColor);
357
- this.currentColor = options[Math.floor(Math.random() * options.length)];
358
-
359
- return this.currentColor;
360
- }
361
- ```
362
- </TabItem>
363
- <TabItem value="react">
364
-
365
- ```javascript
366
- const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
367
- const DOUBLE_CLICK_THRESHOLD = 500;
368
- const rectangle = document.querySelector('.rectangle');
369
- const gesture = createGesture({
370
- el: rectangle,
371
- threshold: 0,
372
- onStart: () => { onStart(); }
373
- });
374
-
375
- gesture.enable();
376
-
377
- let lastOnStart = 0;
378
- let currentColor = 'rgba(0, 0, 255, 0.5)';
379
-
380
- const onStart = () => {
381
- const now = Date.now();
382
-
383
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
384
- rectangle.style.setProperty('background', getRandomBackground());
385
- lastOnStart = 0;
386
- } else {
387
- lastOnStart = now;
388
- }
389
- }
390
-
391
- const getRandomBackground = () => {
392
- const options = backgrounds.filter(bg => bg !== currentColor);
393
- currentColor = options[Math.floor(Math.random() * options.length)];
394
-
395
- return currentColor;
396
- }
397
- ```
398
- </TabItem>
399
- <TabItem value="vue">
400
-
401
- ```javascript
402
- import { createGesture } from '@ionic/vue';
403
- import { ref } from 'vue';
404
-
405
- ...
406
-
407
- const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
408
- const DOUBLE_CLICK_THRESHOLD = 500;
409
- const rectangleRef = ref();
410
- const gesture = createGesture({
411
- el: rectangleRef.value,
412
- threshold: 0,
413
- onStart: () => { onStart(); }
414
- });
415
-
416
- gesture.enable();
417
-
418
- let lastOnStart = 0;
419
- let currentColor = 'rgba(0, 0, 255, 0.5)';
420
-
421
- const onStart = () => {
422
- const now = Date.now();
423
-
424
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
425
- rectangleRef.value.style.setProperty('background', getRandomBackground());
426
- lastOnStart = 0;
427
- } else {
428
- lastOnStart = now;
429
- }
430
- }
431
-
432
- const getRandomBackground = () => {
433
- const options = backgrounds.filter(bg => bg !== currentColor);
434
- currentColor = options[Math.floor(Math.random() * options.length)];
435
-
436
- return currentColor;
437
- }
438
- ```
439
- </TabItem>
440
- </Tabs>
441
- ````
275
+ import DoubleClick from '@site/static /usage/v7/gestures/double-click/index.md';
442
276
443
- In the example above , we want to be able to detect double clicks on an element. By setting our ` threshold ` to ` 0 ` , we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
277
+ In the example below , we want to be able to detect double clicks on an element. By setting our ` threshold ` to ` 0 ` , we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
444
278
445
- <Codepen user = " ionic " slug = " oNvVEwE " />
279
+ <DoubleClick />
446
280
447
281
## Gesture Animations
448
282
0 commit comments