https://github.com/coditheck/swipe_events_manager
A front-end library for managing touch screen events on mobile devices.
https://github.com/coditheck/swipe_events_manager
swipe swipe-event swipe-gesture swipeable swiper swipify touch-end touch-event touch-start
Last synced: 6 months ago
JSON representation
A front-end library for managing touch screen events on mobile devices.
- Host: GitHub
- URL: https://github.com/coditheck/swipe_events_manager
- Owner: CodiTheck
- License: mit
- Created: 2023-10-14T06:24:48.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-24T00:14:53.000Z (7 months ago)
- Last Synced: 2024-10-24T13:25:10.168Z (7 months ago)
- Topics: swipe, swipe-event, swipe-gesture, swipeable, swiper, swipify, touch-end, touch-event, touch-start
- Language: JavaScript
- Homepage: https://CodiTheck.github.io/swipe_events_manager
- Size: 1.05 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Swipe Events Manager
This Node Package Manager (NPM)
is a Front-End library for managing touch screen events on mobile devices.
It provides a support for JavaScript and TypeScript.
## Table of contents
1. [Access links](#links)
2. [References](#refs)
3. [Final result](#result)
4. [Installation](#install)
5. [Get started](#learn)
6. [Sources code](#sources)
1. [Clonning](#cloning)
2. [Dependencies installation](#dev-install)
3. [Running](#running)
## Access links
An example of use case of the package is already hosted on web and can be
accessible through one of these links below :
- https://CodiTheck.github.io/swipe_events_manager
- https://obrymec.github.io/swipe_events_manager
- https://obrymec.gitlab.io/swipe_events_manager
## References
The package sources can be found via one these links below :
- https://www.npmjs.com/package/@prince-obrymec/swipe-events-manager
- https://github.com/CodiTheck/swipe_events_manager
- https://gitlab.com/obrymec/swipe_events_manager
## Final result
This is the final result of the project :
## Installation
We can install the module via `npm`, `pnpm` or `yarn`. For `npm`,
use the command line below :
```sh
npm install @prince-obrymec/swipe-events-manager --save-dev
```
For `pnpm`, use the command line below :
```sh
pnpm install @prince-obrymec/swipe-events-manager --save-dev
```
For `yarn`, use the command line below :
```sh
yarn add @prince-obrymec/swipe-events-manager --save-dev
```
We can also get the CDN link there :
```html
```
## Get Started
Before listen any swipe event, we must create an object instance of that.
Of course, we must also import the module before any usage.
```js
// Package importation.
import {SwipeEventsManager} from "@prince-obrymec/swipe-events-manager";
// We can create a swipe manager with a tag reference.
const swipeManager1 = new SwipeEventsManager(myTagRef);
// We can also create a swipe manager with a tag id, class etc...
const swipeManager2 = new SwipeEventsManager("#my-tag");
```
Notice that when we creating a swipe manager, we can pass two arguments
to that object. The first is the tag where swipe events will be listened
and the second is a callback method that is triggered when any swipe
event is detected on the selected markup. The callback fetch the swipe
direction for you. Only first argument is required when we
creating an object instance of a swipe events manager.
Now we can rewrite the code above like this :
```js
// Package importation.
import {SwipeEventsManager} from "@prince-obrymec/swipe-events-manager";
// We can create a swipe manager with a tag
// id, class, etc... and a callback method
// to listen upcoming swipe events on the
// selected tag.
const swipeManager = new SwipeEventsManager(
"#my-tag", function (direction) {
/** ... */
}
);
```
We can know the swipe's direction thank the fetched direction from our
callback. The direction is a constant with the following values :
- SWIPE_UP : Returned when the swipe direction is to top.
- SWIPE_RIGHT : Returned when the swipe direction is to right.
- SWIPE_DOWN : Returned when the swipe direction is to bottom.
- SWIPE_LEFT : Returned when the swipe direction is to left.
Finally the full source code will be :
```js
// Package importation.
import {
SwipeEventsManager,
SwipeEventType
} from "@prince-obrymec/swipe-events-manager";
// We can create a swipe manager with a tag
// id, class, etc... and a callback method
// to listen upcoming swipe events on the
// selected tag.
const swipeManager = new SwipeEventsManager(
"#my-tag", function (direction) {
// The selected tag's name.
const tagName = swipeManager.getTag().tagName;
// Whether the direction is right.
if (direction === SwipeEventType.SWIPE_RIGHT) {
// Makes a warn on the browser.
window.alert(`SWIPE RIGHT DETECTED: ${tagName}`);
}
// Whether the direction is bottom.
else if (direction === SwipeEventType.SWIPE_DOWN) {
// Makes a warn on the browser.
window.alert(`SWIPE DOWN DETECTED: ${tagName}`);
}
// Whether the direction is left.
else if (direction === SwipeEventType.SWIPE_LEFT) {
// Makes a warn on the browser.
window.alert(`SWIPE LEFT DETECTED: ${tagName}`);
}
// Whether the direction is top.
else if (direction === SwipeEventType.SWIPE_UP) {
// Makes a warn on the browser.
window.alert(`SWIPE UP DETECTED: ${tagName}`);
}
}
);
```
Another way to do that is to use `listen` method provided by the swipe
events manager directly. But use this method if and only if you don't
provide a callback when you creating a swipe events manager. The code
below show you a use case :
```js
// Package importation.
import {
SwipeEventsManager,
SwipeEventType
} from "@prince-obrymec/swipe-events-manager";
// We can create a swipe manager with a tag reference.
const swipeManager = new SwipeEventsManager(myTagRef);
// Listens swipe directions.
swipeManager.listen(function (direction) {
// Whether the direction is right.
if (direction === SwipeEventType.SWIPE_RIGHT) {
// Makes a warn on the browser.
window.alert("SWIPE RIGHT DETECTED !");
}
// Whether the direction is bottom.
else if (direction === SwipeEventType.SWIPE_DOWN) {
// Makes a warn on the browser.
window.alert("SWIPE DOWN DETECTED !");
}
// Whether the direction is left.
else if (direction === SwipeEventType.SWIPE_LEFT) {
// Makes a warn on the browser.
window.alert("SWIPE LEFT DETECTED !");
}
// Whether the direction is top.
else if (direction === SwipeEventType.SWIPE_UP) {
// Makes a warn on the browser.
window.alert("SWIPE UP DETECTED !");
}
});
```
The package offers also some additional methods that are :
```js
// Package importation.
import {SwipeEventsManager} from "@prince-obrymec/swipe-events-manager";
// The old tag reference.
const oldTag = document.querySelector("#old-tag");
// The new tag reference.
const newTag = document.querySelector("#new-tag");
// Creating a new object instance of a swipe events manager.
const swipeManager = new SwipeEventsManager(oldTag);
// Returns the current selected tag reference on the manager.
console.log(swipeManager.getTag());
// Overrides the current selected tag to another. Notice
// that old tag events are destroyed before go to the
// new tag.
swipeManager.setTag(newTag);
// We could also set the active tag by giving the id,
// class, etc... of the new tag directly.
swipeManager.setTag("#new-tag");
// We can destroy all listened swipe events on the active markup.
swipeManager.free();
```
## Sources code
If you want to get package sources code, make sure to have
NodeJs already
installed in your machine. If it isn't the case, you can install
NodeJs through
the command lines below :
```sh
sudo apt install curl;\
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash;\
source ~/.bashrc;\
nvm --version;\
nvm install --lts;\
node --version;\
npm install yarn --global;\
yarn --version
```
### Cloning
```sh
git clone [email protected]:CodiTheck/swipe_events_manager.git swipe_events_manager/
```
### Dependencies installation
Go to the root folder of the project sources and run :
```sh
yarn install
```
### Running
Go to the root folder of the project and run :
```sh
yarn start
```
Then, open your favorite browser and tap on
the search bar, the following link :
```sh
http://localhost:1234
```
Enjoy :)