index.test.js

/**
 * @project SwipeEventsManager - https://CodiTheck.github.io/swipe_events_manager
 * @fileoverview Tests the package to prevent upcomming bugs.
 * @author Obrymec - https://obrymec.vercel.app
 * @created 2023-10-12
 * @updated 2024-10-24
 * @file index.test.js
 * @version 0.0.3
 */

// Plugin dependencies.
import {SwipeEventsManager, SwipeEventType} from "./build/swipe.min.js";

// The bottom card tag reference.
const bottomCard = document.querySelector("div.bottom-card");
// Initializes the package instance.
const swipeManager = new SwipeEventsManager("div.top-card");
// The top card tag reference.
const topCard = document.querySelector("div.top-card");
// Free all swipe effects.
document.querySelector("button").addEventListener(
  "click", swipeManager.free
);
// Listens `click` event on the bottom card.
bottomCard.addEventListener("click", () => {
  // Remove `active` class from the `top-card`.
  topCard.classList.remove("active");
  // Adds `active` class to the `bottom-card`.
  bottomCard.classList.add("active");
  // Sets target.
  swipeManager.setTag(bottomCard);
});
// Listens `click` event on the top card.
topCard.addEventListener("click", () => {
  // Remove `active` class from the `bottom-card`.
  bottomCard.classList.remove("active");
  // Adds `active` class to the `top-card`.
  topCard.classList.add("active");
  // Sets target.
  swipeManager.setTag(topCard);
});
// Listens swipe directions.
swipeManager.listen(function (direction) {
  // The active tag reference.
  const tagName = swipeManager.getTag().getAttribute("name");
  // Whether the direction is to right.
  if (direction === SwipeEventType.SWIPE_RIGHT) {
    // Makes a warn on the browser.
    window.alert(`SWIPE RIGHT DETECTED: ${tagName}`);
  // Whether the direction is to bottom.
  } else if (direction === SwipeEventType.SWIPE_DOWN) {
    // Makes a warn on the browser.
    window.alert(`SWIPE DOWN DETECTED: ${tagName}`);
  // Whether the direction is to left.
  } else if (direction === SwipeEventType.SWIPE_LEFT) {
    // Makes a warn on the browser.
    window.alert(`SWIPE LEFT DETECTED: ${tagName}`);
  // Whether the direction is to top.
  } else if (direction === SwipeEventType.SWIPE_UP) {
    // Makes a warn on the browser.
    window.alert(`SWIPE UP DETECTED: ${tagName}`);
  }
});