@composi/gestures swipe with lit element

Question

I am trying to implement gestures with my lit-element using the library: https://github.com/composi/gestures

At the top of my file I have the following:

import { gestures } from '@composi/gestures'
gestures();

Then in my render function I have:

render() {
 return html`
  <div class="tablet-menu " id="tablet-menu-T">
  <div class="tablet-menu-body" on-swipe="${this._swipe}">
....

However the _swipe function is never called, so it doesn't seem that it registers the swipe command.

What have I done wrong?

Answer 1

Make it arrow function

<div class="tablet-menu-body" on-swipe="() => ${this._swipe}">

Maybe syntax of my answer is wrong, but you have to apply it with arrow function

Answer 2

This is using the wrong event handler syntax.

  <div class="tablet-menu-body" on-swipe="${this._swipe}">

Instead of an on- prefix, use an @ prefix:

  <div class="tablet-menu-body" @swipe="${this._swipe}">

See: https://lit-html.polymer-project.org/guide/template-reference#event-listeners

Note: you do not need to use arrow functions for LitElement class methods. They are called with the correct this reference automatically.