From f9036d6d5a5e146bd056ef5493f10706d5ba094f Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 13 Jul 2023 10:49:27 -0400 Subject: [PATCH 1/6] Generate playground --- .../angular/example_component_css.md | 5 +++ .../angular/example_component_html.md | 3 ++ .../angular/example_component_ts.md | 11 ++++++ .../usage/v7/gestures/double-click/demo.html | 28 +++++++++++++++ .../usage/v7/gestures/double-click/index.md | 34 +++++++++++++++++++ .../v7/gestures/double-click/javascript.md | 9 +++++ .../gestures/double-click/react/main_css.md | 5 +++ .../gestures/double-click/react/main_tsx.md | 14 ++++++++ static/usage/v7/gestures/double-click/vue.md | 22 ++++++++++++ 9 files changed, 131 insertions(+) create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_css.md create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_html.md create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_ts.md create mode 100644 static/usage/v7/gestures/double-click/demo.html create mode 100644 static/usage/v7/gestures/double-click/index.md create mode 100644 static/usage/v7/gestures/double-click/javascript.md create mode 100644 static/usage/v7/gestures/double-click/react/main_css.md create mode 100644 static/usage/v7/gestures/double-click/react/main_tsx.md create mode 100644 static/usage/v7/gestures/double-click/vue.md diff --git a/static/usage/v7/gestures/double-click/angular/example_component_css.md b/static/usage/v7/gestures/double-click/angular/example_component_css.md new file mode 100644 index 00000000000..4d6a99e4b4f --- /dev/null +++ b/static/usage/v7/gestures/double-click/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-gestures { + /* styles go here */ +} +``` diff --git a/static/usage/v7/gestures/double-click/angular/example_component_html.md b/static/usage/v7/gestures/double-click/angular/example_component_html.md new file mode 100644 index 00000000000..b073a11e489 --- /dev/null +++ b/static/usage/v7/gestures/double-click/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md new file mode 100644 index 00000000000..aa32737ab34 --- /dev/null +++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { +} +``` diff --git a/static/usage/v7/gestures/double-click/demo.html b/static/usage/v7/gestures/double-click/demo.html new file mode 100644 index 00000000000..923530fe776 --- /dev/null +++ b/static/usage/v7/gestures/double-click/demo.html @@ -0,0 +1,28 @@ + + + + + + Gestures + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/gestures/double-click/index.md b/static/usage/v7/gestures/double-click/index.md new file mode 100644 index 00000000000..47c4c9ad045 --- /dev/null +++ b/static/usage/v7/gestures/double-click/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.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/double-click/javascript.md b/static/usage/v7/gestures/double-click/javascript.md new file mode 100644 index 00000000000..57ea553c0ac --- /dev/null +++ b/static/usage/v7/gestures/double-click/javascript.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v7/gestures/double-click/react/main_css.md b/static/usage/v7/gestures/double-click/react/main_css.md new file mode 100644 index 00000000000..4d6a99e4b4f --- /dev/null +++ b/static/usage/v7/gestures/double-click/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-gestures { + /* styles go here */ +} +``` diff --git a/static/usage/v7/gestures/double-click/react/main_tsx.md b/static/usage/v7/gestures/double-click/react/main_tsx.md new file mode 100644 index 00000000000..72fbe7462b0 --- /dev/null +++ b/static/usage/v7/gestures/double-click/react/main_tsx.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonGestures } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} +export default Example; +``` + diff --git a/static/usage/v7/gestures/double-click/vue.md b/static/usage/v7/gestures/double-click/vue.md new file mode 100644 index 00000000000..8b109d52698 --- /dev/null +++ b/static/usage/v7/gestures/double-click/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` From 8911ba9c20e3a1bf1cb2aad71fb7765fc563bc5e Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 13 Jul 2023 10:51:21 -0400 Subject: [PATCH 2/6] Import playground --- docs/utilities/gestures.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index ab65cfb8f7b..61bc9c58cad 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -272,7 +272,9 @@ In this example, our app listens for gestures on the `.rectangle` element. When ## Double Click Gesture -### Usage +import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md'; + + ````mdx-code-block Date: Fri, 14 Jul 2023 09:49:05 -0400 Subject: [PATCH 3/6] Build out playground --- docs/utilities/gestures.md | 166 ------------------ static/code/stackblitz/v7/html/index.ts | 3 +- .../angular/example_component_css.md | 5 +- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 44 ++++- .../usage/v7/gestures/double-click/demo.html | 62 +++++-- .../v7/gestures/double-click/javascript.md | 48 ++++- .../gestures/double-click/react/main_css.md | 5 +- .../gestures/double-click/react/main_tsx.md | 53 +++++- static/usage/v7/gestures/double-click/vue.md | 61 ++++++- 10 files changed, 255 insertions(+), 196 deletions(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index 61bc9c58cad..a06e5e33428 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -276,172 +276,6 @@ import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md'; -````mdx-code-block - - - -```javascript -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)']; -const DOUBLE_CLICK_THRESHOLD = 500; -const rectangle = document.querySelector('.rectangle'); -const gesture = createGesture({ - el: rectangle, - threshold: 0, - onStart: () => { onStart(); } -}); - -gesture.enable(); - -let lastOnStart = 0; -let currentColor = 'rgba(0, 0, 255, 0.5)'; - -const onStart = () => { - const now = Date.now(); - - if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { - rectangle.style.setProperty('background', getRandomBackground()); - lastOnStart = 0; - } else { - lastOnStart = now; - } -} - -const getRandomBackground = () => { - const options = backgrounds.filter(bg => bg !== currentColor); - currentColor = options[Math.floor(Math.random() * options.length)]; - - return currentColor; -} -``` - - - -```tsx -@ViewChild('rectangle') rectangle: ElementRef; - -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)']; -private currentColor: string = 'rgba(0, 0, 255, 0.5)'; -private lastOnStart: number = 0; -private DOUBLE_CLICK_THRESHOLD: number = 500; - -ngOnInit() { - const gesture = this.gestureCtrl.create({ - el: this.rectangle.nativeElement, - threshold: 0, - onStart: () => { this.onStart(); } - }); - - gesture.enable(); -} - -private onStart() { - const now = Date.now(); - - if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) { - this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground()); - this.lastOnStart = 0; - } else { - this.lastOnStart = now; - } -} - -private getRandomBackground() { - const options = this.backgrounds.filter(bg => bg !== this.currentColor); - this.currentColor = options[Math.floor(Math.random() * options.length)]; - - return this.currentColor; -} -``` - - - -```javascript -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)']; -const DOUBLE_CLICK_THRESHOLD = 500; -const rectangle = document.querySelector('.rectangle'); -const gesture = createGesture({ - el: rectangle, - threshold: 0, - onStart: () => { onStart(); } -}); - -gesture.enable(); - -let lastOnStart = 0; -let currentColor = 'rgba(0, 0, 255, 0.5)'; - -const onStart = () => { - const now = Date.now(); - - if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { - rectangle.style.setProperty('background', getRandomBackground()); - lastOnStart = 0; - } else { - lastOnStart = now; - } -} - -const getRandomBackground = () => { - const options = backgrounds.filter(bg => bg !== currentColor); - currentColor = options[Math.floor(Math.random() * options.length)]; - - return currentColor; -} -``` - - - -```javascript -import { createGesture } from '@ionic/vue'; -import { ref } from 'vue'; - -... - -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)']; -const DOUBLE_CLICK_THRESHOLD = 500; -const rectangleRef = ref(); -const gesture = createGesture({ - el: rectangleRef.value, - threshold: 0, - onStart: () => { onStart(); } -}); - -gesture.enable(); - -let lastOnStart = 0; -let currentColor = 'rgba(0, 0, 255, 0.5)'; - -const onStart = () => { - const now = Date.now(); - - if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { - rectangleRef.value.style.setProperty('background', getRandomBackground()); - lastOnStart = 0; - } else { - lastOnStart = now; - } -} - -const getRandomBackground = () => { - const options = backgrounds.filter(bg => bg !== currentColor); - currentColor = options[Math.floor(Math.random() * options.length)]; - - return currentColor; -} -``` - - -```` - 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. diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts index c820961c828..071bc801d6c 100644 --- a/static/code/stackblitz/v7/html/index.ts +++ b/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; diff --git a/static/usage/v7/gestures/double-click/angular/example_component_css.md b/static/usage/v7/gestures/double-click/angular/example_component_css.md index 4d6a99e4b4f..043d289ab58 100644 --- a/static/usage/v7/gestures/double-click/angular/example_component_css.md +++ b/static/usage/v7/gestures/double-click/angular/example_component_css.md @@ -1,5 +1,6 @@ ```css -ion-gestures { - /* styles go here */ +ion-card { + transform: translateX(0); + user-select: none; } ``` diff --git a/static/usage/v7/gestures/double-click/angular/example_component_html.md b/static/usage/v7/gestures/double-click/angular/example_component_html.md index b073a11e489..b0b24e75d67 100644 --- a/static/usage/v7/gestures/double-click/angular/example_component_html.md +++ b/static/usage/v7/gestures/double-click/angular/example_component_html.md @@ -1,3 +1,5 @@ ```html - + + Double click me to move the card. + ``` diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md index aa32737ab34..3d623a0b93d 100644 --- a/static/usage/v7/gestures/double-click/angular/example_component_ts.md +++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { GestureController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -7,5 +8,46 @@ import { Component } from '@angular/core'; styleUrls: ['./example.component.css'], }) export class ExampleComponent { + @ViewChild('card', { read: ElementRef }) card: ElementRef; + + private currentOffset: number = 0; + private lastOnStart: number = 0; + private DOUBLE_CLICK_THRESHOLD: number = 500; + + constructor(private el: ElementRef, private gestureCtrl: GestureController) {} + + ngAfterViewInit() { + const gesture = this.gestureCtrl.create({ + el: this.card.nativeElement, + threshold: 0, + onStart: () => { + this.onStart(); + }, + gestureName: 'double-click', + }); + + gesture.enable(); + } + + private onStart() { + const now = Date.now(); + + if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) { + this.card.nativeElement.style.setProperty('transform', this.getNewTransform()); + this.lastOnStart = 0; + } else { + this.lastOnStart = now; + } + } + + private getNewTransform() { + if (this.currentOffset >= 100) { + this.currentOffset = 0; + } else { + this.currentOffset += 20; + } + + return `translateX(${this.currentOffset}px)`; + } } ``` diff --git a/static/usage/v7/gestures/double-click/demo.html b/static/usage/v7/gestures/double-click/demo.html index 923530fe776..f9debccc004 100644 --- a/static/usage/v7/gestures/double-click/demo.html +++ b/static/usage/v7/gestures/double-click/demo.html @@ -3,26 +3,68 @@ - Gestures + Double-Click Gestures + + - - -
- -
- - + + + Double click me to move the card. + + diff --git a/static/usage/v7/gestures/double-click/javascript.md b/static/usage/v7/gestures/double-click/javascript.md index 57ea553c0ac..162a656f997 100644 --- a/static/usage/v7/gestures/double-click/javascript.md +++ b/static/usage/v7/gestures/double-click/javascript.md @@ -1,9 +1,51 @@ ```html - + + Double click me to move the card. + + + ``` diff --git a/static/usage/v7/gestures/double-click/react/main_css.md b/static/usage/v7/gestures/double-click/react/main_css.md index 4d6a99e4b4f..043d289ab58 100644 --- a/static/usage/v7/gestures/double-click/react/main_css.md +++ b/static/usage/v7/gestures/double-click/react/main_css.md @@ -1,5 +1,6 @@ ```css -ion-gestures { - /* styles go here */ +ion-card { + transform: translateX(0); + user-select: none; } ``` diff --git a/static/usage/v7/gestures/double-click/react/main_tsx.md b/static/usage/v7/gestures/double-click/react/main_tsx.md index 72fbe7462b0..bc8d4e997ab 100644 --- a/static/usage/v7/gestures/double-click/react/main_tsx.md +++ b/static/usage/v7/gestures/double-click/react/main_tsx.md @@ -1,14 +1,59 @@ ```tsx -import React from 'react'; -import { IonGestures } from '@ionic/react'; +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardContent, createGesture } from '@ionic/react'; import './main.css'; function Example() { + const DOUBLE_CLICK_THRESHOLD = 500; + const card = useRef(null); + + let lastOnStart = 0; + let currentOffset = 0; + + const getNewTransform = () => { + if (currentOffset >= 100) { + currentOffset = 0; + } else { + currentOffset += 20; + } + + return `translateX(${currentOffset}px)`; + }; + + const onStart = () => { + const now = Date.now(); + + if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { + if (card.current) { + card.current.style.setProperty('transform', getNewTransform()); + lastOnStart = 0; + } + } else { + lastOnStart = now; + } + }; + + useEffect(() => { + if (card.current) { + const gesture = createGesture({ + el: card.current, + threshold: 0, + onStart: () => { + onStart(); + }, + gestureName: 'double-click', + }); + + gesture.enable(); + } + }); + return ( - + + Double click me to move the card. + ); } export default Example; ``` - diff --git a/static/usage/v7/gestures/double-click/vue.md b/static/usage/v7/gestures/double-click/vue.md index 8b109d52698..d0c5bedec14 100644 --- a/static/usage/v7/gestures/double-click/vue.md +++ b/static/usage/v7/gestures/double-click/vue.md @@ -1,22 +1,71 @@ ```html ``` From b899fe57438c78ad090371be7f7bab045849bca8 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 14 Jul 2023 09:51:26 -0400 Subject: [PATCH 4/6] Remove codepen --- docs/utilities/gestures.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index a06e5e33428..f00158c4862 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -278,8 +278,6 @@ import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md'; 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. - - ## Gesture Animations See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations) From c834c3f609fe79ffb8bdd10c5faff38351281aca Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 14 Jul 2023 15:27:15 -0400 Subject: [PATCH 5/6] Apply suggestions from code review Co-authored-by: Maria Hutt --- .../v7/gestures/double-click/angular/example_component_ts.md | 4 +--- static/usage/v7/gestures/double-click/demo.html | 4 +--- static/usage/v7/gestures/double-click/javascript.md | 4 +--- static/usage/v7/gestures/double-click/react/main_tsx.md | 4 +--- static/usage/v7/gestures/double-click/vue.md | 4 +--- 5 files changed, 5 insertions(+), 15 deletions(-) diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md index 3d623a0b93d..08159621553 100644 --- a/static/usage/v7/gestures/double-click/angular/example_component_ts.md +++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md @@ -20,9 +20,7 @@ export class ExampleComponent { const gesture = this.gestureCtrl.create({ el: this.card.nativeElement, threshold: 0, - onStart: () => { - this.onStart(); - }, + onStart: () => this.onStart(), gestureName: 'double-click', }); diff --git a/static/usage/v7/gestures/double-click/demo.html b/static/usage/v7/gestures/double-click/demo.html index f9debccc004..7cf272ad642 100644 --- a/static/usage/v7/gestures/double-click/demo.html +++ b/static/usage/v7/gestures/double-click/demo.html @@ -18,9 +18,7 @@ const gesture = createGesture({ el: card, threshold: 0, - onStart: () => { - onStart(); - }, + onStart, gestureName: 'double-click', }); diff --git a/static/usage/v7/gestures/double-click/javascript.md b/static/usage/v7/gestures/double-click/javascript.md index 162a656f997..6f065fa3c45 100644 --- a/static/usage/v7/gestures/double-click/javascript.md +++ b/static/usage/v7/gestures/double-click/javascript.md @@ -16,9 +16,7 @@ const gesture = createGesture({ el: card, threshold: 0, - onStart: () => { - onStart(); - }, + onStart, gestureName: 'double-click', }); diff --git a/static/usage/v7/gestures/double-click/react/main_tsx.md b/static/usage/v7/gestures/double-click/react/main_tsx.md index bc8d4e997ab..4e9e90cf243 100644 --- a/static/usage/v7/gestures/double-click/react/main_tsx.md +++ b/static/usage/v7/gestures/double-click/react/main_tsx.md @@ -39,9 +39,7 @@ function Example() { const gesture = createGesture({ el: card.current, threshold: 0, - onStart: () => { - onStart(); - }, + onStart, gestureName: 'double-click', }); diff --git a/static/usage/v7/gestures/double-click/vue.md b/static/usage/v7/gestures/double-click/vue.md index d0c5bedec14..aebfad5a830 100644 --- a/static/usage/v7/gestures/double-click/vue.md +++ b/static/usage/v7/gestures/double-click/vue.md @@ -25,9 +25,7 @@ const gesture = createGesture({ el: card.value.$el, threshold: 0, - onStart: () => { - onStart(); - }, + onStart, gestureName: 'double-click', }); From e4d352dcf59ca7ef247e0efe84d1b2fa0642fa36 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 14 Jul 2023 15:38:22 -0400 Subject: [PATCH 6/6] Address PR feedback --- docs/utilities/gestures.md | 4 ++-- static/usage/v7/gestures/double-click/demo.html | 3 +-- static/usage/v7/gestures/double-click/javascript.md | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md index f00158c4862..cee6e2aef2e 100644 --- a/docs/utilities/gestures.md +++ b/docs/utilities/gestures.md @@ -274,9 +274,9 @@ In this example, our app listens for gestures on the `.rectangle` element. When import DoubleClick from '@site/static/usage/v7/gestures/double-click/index.md'; - +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. -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. + ## Gesture Animations diff --git a/static/usage/v7/gestures/double-click/demo.html b/static/usage/v7/gestures/double-click/demo.html index 7cf272ad642..c293e8183a6 100644 --- a/static/usage/v7/gestures/double-click/demo.html +++ b/static/usage/v7/gestures/double-click/demo.html @@ -18,14 +18,13 @@ const gesture = createGesture({ el: card, threshold: 0, - onStart, + onStart: () => onStart(), gestureName: 'double-click', }); gesture.enable(); let lastOnStart = 0; - // TODO: change to not random in angular & javascript let currentOffset = 0; const onStart = () => { diff --git a/static/usage/v7/gestures/double-click/javascript.md b/static/usage/v7/gestures/double-click/javascript.md index 6f065fa3c45..a45b7255bbe 100644 --- a/static/usage/v7/gestures/double-click/javascript.md +++ b/static/usage/v7/gestures/double-click/javascript.md @@ -16,7 +16,7 @@ const gesture = createGesture({ el: card, threshold: 0, - onStart, + onStart: () => onStart(), gestureName: 'double-click', });