How to implement swipe-listener?

Question

I know this is very basic. I want to implement this swipe-listener package into my html code.

This is the example code from the readme:

const SwipeListener = require('swipe-listener');

var container = document.querySelector('#container');
var listener = SwipeListener(container);
container.addEventListener('swipe', function (e) {
  var directions = e.detail.directions;
  var x = e.detail.x;
  var y = e.detail.y;

  if (directions.left) {
    console.log('Swiped left.');
  }

  if (directions.right) {
    console.log('Swiped right.');
  }

   .
   .
   .

});

When I run the file, I get a "document is not defined" error. What do I have to specify here? I was assuming that I have to specify a div element in "#container". I have an iFrame in which the swipe should be detected. This iFrame has a name and id. Which one must I use?

Furthermore I required the file in the index.html like this.

<script>
    require('./swipeListener.js')
</script>

Is this the right way or do I have to put

<script type="text/javascript" src="swipeListener.js"></script>

?

Possible duplicate of [javascript require doesn't work inside html](https://stackoverflow.com/questions/50011068/javascript-require-doesnt-work-inside-html) — Mike Doe, Aug 20 '19 at 11:10

score 2 · Accepted Answer · answered Aug 20 '19 at 11:08

2

As you can read here, you cant use require in regular javascript in the browser, it is a function from Node.js. In order to make your example usable in a simple html page, you have to use your second approach that imports the library using a script tag.

This can be done either by downloading the library and including it with

<script src="path/to/swipe-listener.js" type="text/javascript"></script>

or by including it via a CDN with

<script src="https://unpkg.com/swipe-listener@latest/dist/swipe-listener.min.js" type="text/javascript"></script>

After including the library you can use it as you did in your example but without the line

const SwipeListener = require('swipe-listener');

I created a minimalistic example you can checkout in this jsfiddle

answered Aug 20 '19 at 11:08

Howäms

141
4

Thank you so much! Can you also tell me where to put the JS code? I have it in a seperate file and included it as the swipe-listener.min.js. I wrapped the iFrame in a div tag, which I called swipeContainer, as in your example. I still don't get a reaction, when I swipe. Maybe I should mention, that this is an Electron app. – neolith Aug 20 '19 at 12:50
Why does your example work on jsfiddle, but not if I put the same code into seperate files and test it in a browser? – neolith Aug 21 '19 at 07:23
@neolith i cant tell if it is relevant that it is an Electron App, as i dont have any experience with electron. Regarding your second comment: It is important that your own javascript code is executed after the DOM is loaded, because your code is trying to add an event listener to a DOM element. As a quick workaround this can be achieved by putting the script tag of your own javascript code behind the body tag. For further questions please tell if you see any errors in the browser console – Howäms Aug 21 '19 at 08:19
Thank you. I simultaneuously found the solution. The script has to be inserted inside the div tag. Else it doesn't work. – neolith Aug 21 '19 at 08:31
No problem, just remember that this is not a very clean solution. It might be better to put the script tag into the head of your HTML and add some code to your own javascript, that checks if the DOM is loaded, the pure javascript method would be `document.addEventListener("DOMContentLoaded", function (event) { });` – Howäms Aug 21 '19 at 09:44

How to implement swipe-listener?

1 Answers1