{"id":22249009,"url":"https://github.com/coditheck/swipe_events_manager","last_synced_at":"2026-01-25T21:37:39.417Z","repository":{"id":199941426,"uuid":"704804629","full_name":"CodiTheck/swipe_events_manager","owner":"CodiTheck","description":"A front-end library for managing touch screen events on mobile devices.","archived":false,"fork":false,"pushed_at":"2024-10-24T00:14:53.000Z","size":1106,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-28T04:40:07.077Z","etag":null,"topics":["swipe","swipe-event","swipe-gesture","swipeable","swiper","swipify","touch-end","touch-event","touch-start"],"latest_commit_sha":null,"homepage":"https://CodiTheck.github.io/swipe_events_manager","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodiTheck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-14T06:24:48.000Z","updated_at":"2024-10-24T00:07:23.000Z","dependencies_parsed_at":"2023-10-14T16:04:20.467Z","dependency_job_id":"8f531404-effd-4553-ad90-0d4c1adfde52","html_url":"https://github.com/CodiTheck/swipe_events_manager","commit_stats":null,"previous_names":["coditheck/swipe_events_manager"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/CodiTheck/swipe_events_manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodiTheck%2Fswipe_events_manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodiTheck%2Fswipe_events_manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodiTheck%2Fswipe_events_manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodiTheck%2Fswipe_events_manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodiTheck","download_url":"https://codeload.github.com/CodiTheck/swipe_events_manager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodiTheck%2Fswipe_events_manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28759417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T20:56:06.009Z","status":"ssl_error","status_checked_at":"2026-01-25T20:54:48.203Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["swipe","swipe-event","swipe-gesture","swipeable","swiper","swipify","touch-end","touch-event","touch-start"],"created_at":"2024-12-03T06:21:14.234Z","updated_at":"2026-01-25T21:37:39.403Z","avatar_url":"https://github.com/CodiTheck.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Swipe Events Manager\n![Swipe Gestures](https://img.shields.io/badge/swipe%20gestures-%232671E5.svg?style=for-the-badge)\n![Swipe Event](https://img.shields.io/badge/swipe%20event-6DA55F?style=for-the-badge)\n![Swipify](https://img.shields.io/badge/swipify-%23F05033.svg?style=for-the-badge)\n![Swiper](https://img.shields.io/badge/swiper-%23121011.svg?style=for-the-badge)\n![Swipe](https://img.shields.io/badge/swipe-%23323330.svg?style=for-the-badge)\n\nThis Node Package Manager (\u003ca href = \"https://www.npmjs.com\"\u003e\u003ci\u003eNPM\u003c/i\u003e\u003c/a\u003e)\nis a Front-End library for managing touch screen events on mobile devices.\nIt provides a support for JavaScript and TypeScript.\n\n## Table of contents\n1. [Access links](#links)\n2. [References](#refs)\n3. [Final result](#result)\n4. [Installation](#install)\n5. [Get started](#learn)\n6. [Sources code](#sources)\n    1. [Clonning](#cloning)\n    2. [Dependencies installation](#dev-install)\n    3. [Running](#running)\n\n## Access links \u003ca id = \"links\"\u003e\u003c/a\u003e\nAn example of use case of the package is already hosted on web and can be\naccessible through one of these links below :\n- https://CodiTheck.github.io/swipe_events_manager\n- https://obrymec.github.io/swipe_events_manager\n- https://obrymec.gitlab.io/swipe_events_manager\n\n## References \u003ca id = \"refs\"\u003e\u003c/a\u003e\nThe package sources can be found via one these links below :\n- https://www.npmjs.com/package/@prince-obrymec/swipe-events-manager\n- https://github.com/CodiTheck/swipe_events_manager\n- https://gitlab.com/obrymec/swipe_events_manager\n\n## Final result \u003ca id = \"result\"\u003e\u003c/a\u003e\nThis is the final result of the project :\u003cbr/\u003e\u003cbr/\u003e\n![First Render](./render/render_1.png)\n![Second Render](./render/render_2.png)\n\n## Installation \u003ca id = \"install\"\u003e\u003c/a\u003e\nWe can install the module via `npm`, `pnpm` or `yarn`. For `npm`,\nuse the command line below :\n```sh\nnpm install @prince-obrymec/swipe-events-manager --save-dev\n```\n\nFor `pnpm`, use the command line below :\n```sh\npnpm install @prince-obrymec/swipe-events-manager --save-dev\n```\n\nFor `yarn`, use the command line below :\n```sh\nyarn add @prince-obrymec/swipe-events-manager --save-dev\n```\n\nWe can also get the CDN link there :\n```html\n\u003cscript\n  src = \"https://CodiTheck.github.io/swipe_events_manager/build/swipe.min.js\"\n  type = \"text/javascript\"\n\u003e\u003c/script\u003e\n\u003cscript\n  src = \"https://CodiTheck.github.io/swipe_events_manager/build/swipe.js\"\n  type = \"text/javascript\"\n\u003e\u003c/script\u003e\n\n\u003c!--CDN links for CJS support--\u003e\n\u003cscript\n  src = \"https://CodiTheck.github.io/swipe_events_manager/build/cjs/swipe.min.js\"\n  type = \"text/javascript\"\n\u003e\u003c/script\u003e\n\u003cscript\n  src = \"https://CodiTheck.github.io/swipe_events_manager/build/cjs/swipe.js\"\n  type = \"text/javascript\"\n\u003e\u003c/script\u003e\n```\n\n## Get Started \u003ca id = \"learn\"\u003e\u003c/a\u003e\nBefore listen any swipe event, we must create an object instance of that.\nOf course, we must also import the module before any usage.\n```js\n// Package importation.\nimport {SwipeEventsManager} from \"@prince-obrymec/swipe-events-manager\";\n\n// We can create a swipe manager with a tag reference.\nconst swipeManager1 = new SwipeEventsManager(myTagRef);\n\n// We can also create a swipe manager with a tag id, class etc...\nconst swipeManager2 = new SwipeEventsManager(\"#my-tag\");\n```\n\nNotice that when we creating a swipe manager, we can pass two arguments\nto that object. The first is the tag where swipe events will be listened\nand the second is a callback method that is triggered when any swipe\nevent is detected on the selected markup. The callback fetch the swipe\ndirection for you. \u003ci\u003e\u003cb\u003eOnly first argument is required when we\ncreating an object instance of a swipe events manager\u003c/i\u003e\u003c/b\u003e.\n\nNow we can rewrite the code above like this :\n```js\n// Package importation.\nimport {SwipeEventsManager} from \"@prince-obrymec/swipe-events-manager\";\n\n// We can create a swipe manager with a tag\n// id, class, etc... and a callback method\n// to listen upcoming swipe events on the\n// selected tag.\nconst swipeManager = new SwipeEventsManager(\n  \"#my-tag\", function (direction) {\n    /** ... */\n  }\n);\n```\n\nWe can know the swipe's direction thank the fetched direction from our\ncallback. The direction is a constant with the following values :\n\n- \u003cb\u003eSWIPE_UP\u003c/b\u003e : Returned when the swipe direction is to top.\n- \u003cb\u003eSWIPE_RIGHT\u003c/b\u003e : Returned when the swipe direction is to right.\n- \u003cb\u003eSWIPE_DOWN\u003c/b\u003e : Returned when the swipe direction is to bottom.\n- \u003cb\u003eSWIPE_LEFT\u003c/b\u003e : Returned when the swipe direction is to left.\n\nFinally the full source code will be :\n```js\n// Package importation.\nimport {\n  SwipeEventsManager,\n  SwipeEventType\n} from \"@prince-obrymec/swipe-events-manager\";\n\n// We can create a swipe manager with a tag\n// id, class, etc... and a callback method\n// to listen upcoming swipe events on the\n// selected tag.\nconst swipeManager = new SwipeEventsManager(\n  \"#my-tag\", function (direction) {\n    // The selected tag's name.\n    const tagName = swipeManager.getTag().tagName;\n\n    // Whether the direction is right.\n    if (direction === SwipeEventType.SWIPE_RIGHT) {\n      // Makes a warn on the browser.\n      window.alert(`SWIPE RIGHT DETECTED: ${tagName}`);\n    }\n\n    // Whether the direction is bottom.\n    else if (direction === SwipeEventType.SWIPE_DOWN) {\n      // Makes a warn on the browser.\n      window.alert(`SWIPE DOWN DETECTED: ${tagName}`);\n    }\n\n    // Whether the direction is left.\n    else if (direction === SwipeEventType.SWIPE_LEFT) {\n      // Makes a warn on the browser.\n      window.alert(`SWIPE LEFT DETECTED: ${tagName}`);\n    }\n\n    // Whether the direction is top.\n    else if (direction === SwipeEventType.SWIPE_UP) {\n      // Makes a warn on the browser.\n      window.alert(`SWIPE UP DETECTED: ${tagName}`);\n    }\n  }\n);\n```\n\nAnother way to do that is to use `listen` method provided by the swipe\nevents manager directly. But use this method if and only if you don't\nprovide a callback when you creating a swipe events manager. The code\nbelow show you a use case :\n```js\n// Package importation.\nimport {\n  SwipeEventsManager,\n  SwipeEventType\n} from \"@prince-obrymec/swipe-events-manager\";\n\n// We can create a swipe manager with a tag reference.\nconst swipeManager = new SwipeEventsManager(myTagRef);\n\n// Listens swipe directions.\nswipeManager.listen(function (direction) {\n  // Whether the direction is right.\n  if (direction === SwipeEventType.SWIPE_RIGHT) {\n    // Makes a warn on the browser.\n    window.alert(\"SWIPE RIGHT DETECTED !\");\n  }\n\n  // Whether the direction is bottom.\n  else if (direction === SwipeEventType.SWIPE_DOWN) {\n    // Makes a warn on the browser.\n    window.alert(\"SWIPE DOWN DETECTED !\");\n  }\n\n  // Whether the direction is left.\n  else if (direction === SwipeEventType.SWIPE_LEFT) {\n    // Makes a warn on the browser.\n    window.alert(\"SWIPE LEFT DETECTED !\");\n  }\n\n  // Whether the direction is top.\n  else if (direction === SwipeEventType.SWIPE_UP) {\n    // Makes a warn on the browser.\n    window.alert(\"SWIPE UP DETECTED !\");\n  }\n});\n```\n\nThe package offers also some additional methods that are :\n```js\n// Package importation.\nimport {SwipeEventsManager} from \"@prince-obrymec/swipe-events-manager\";\n\n// The old tag reference.\nconst oldTag = document.querySelector(\"#old-tag\");\n// The new tag reference.\nconst newTag = document.querySelector(\"#new-tag\");\n\n// Creating a new object instance of a swipe events manager.\nconst swipeManager = new SwipeEventsManager(oldTag);\n\n// Returns the current selected tag reference on the manager.\nconsole.log(swipeManager.getTag());\n\n// Overrides the current selected tag to another. Notice\n// that old tag events are destroyed before go to the\n// new tag.\nswipeManager.setTag(newTag);\n\n// We could also set the active tag by giving the id,\n// class, etc... of the new tag directly.\nswipeManager.setTag(\"#new-tag\");\n\n// We can destroy all listened swipe events on the active markup.\nswipeManager.free();\n```\n\n## Sources code \u003ca id = \"sources\"\u003e\u003c/a\u003e\nIf you want to get package sources code, make sure to have \u003ci\u003e\n\u003ca href = \"https://nodejs.org/en/download\"\u003eNodeJs\u003c/a\u003e\u003c/i\u003e already\ninstalled in your machine. If it isn't the case, you can install \u003ci\u003e\n\u003ca href = \"https://nodejs.org/en/download\"\u003eNodeJs\u003c/a\u003e\u003c/i\u003e through\nthe command lines below :\n```sh\nsudo apt install curl;\\\ncurl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash;\\\nsource ~/.bashrc;\\\nnvm --version;\\\nnvm install --lts;\\\nnode --version;\\\nnpm install yarn --global;\\\nyarn --version\n```\n\n### Cloning \u003ca id = \"cloning\"\u003e\u003c/a\u003e\n```sh\ngit clone git@github.com:CodiTheck/swipe_events_manager.git swipe_events_manager/\n```\n\n### Dependencies installation \u003ca id = \"dev-install\"\u003e\u003c/a\u003e\nGo to the root folder of the project sources and run :\n```sh\nyarn install\n```\n\n### Running \u003ca id = \"running\"\u003e\u003c/a\u003e\nGo to the root folder of the project and run :\n```sh\nyarn start\n```\n\nThen, open your favorite browser and tap on\nthe search bar, the following link :\n```sh\nhttp://localhost:1234\n```\n\nEnjoy :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoditheck%2Fswipe_events_manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoditheck%2Fswipe_events_manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoditheck%2Fswipe_events_manager/lists"}