arrow_back
View code

<div class="width-xxxxlg height-xxxxlg bg-lower radius-md content"></div>
                        
Copy HTML

/*
 * File: _swipe-plugin.scss
 * Location /src/scss/components
 * Swipe plugin component
 */

.content:active {
  background-color: var(--color-lower);
}
                        
Copy SCSS

/*
 * File: swipe-plugin.js
 * Location /src/js/components
 * Swipe plugin component
*/

class Swipe {
  constructor(element) {
    this.element = element;
    this.dragging = false;
    this.thresh = 40;
    this.position = {
      x: null,
      y: null
    };

    this.element.addEventListener("touchstart", this.startDrag.bind(this));
    this.element.addEventListener("mousedown", this.startDrag.bind(this));
  }
  initDragEventListeners() {
    this.element.addEventListener("touchmove", this.drag.bind(this));
    this.element.addEventListener("mousemove", this.drag.bind(this));
    this.element.addEventListener("touchend", this.endDrag.bind(this));
    this.element.addEventListener("mouseup", this.endDrag.bind(this));
    this.element.addEventListener("mouseleave", this.endDrag.bind(this));
  }
  cancelDragging() {
    this.element.removeEventListener("touchmove", this.drag);
    this.element.removeEventListener("mousemove", this.drag);
    this.element.removeEventListener("touchend", this.endDrag);
    this.element.removeEventListener("mouseup", this.endDrag);
    this.element.removeEventListener("mouseleave", this.endDrag);
  }
  startDrag(e) {
    this.dragging = true;
    this.initDragEventListeners();
    this.position = {
      x: parseInt(this.ev(e).clientX),
      y: parseInt(this.ev(e).clientY)
    };
    this.dispatchSwipeEvent("dragStart", this.position);
  }
  ev(e) {
    return e.changedTouches ? e.changedTouches[0] : e;
  }
  drag(e) {
    if (!this.dragging) return;
    setTimeout(() => {
      this.dispatchSwipeEvent("dragging", {
        x: parseInt(this.ev(e).clientX),
        y: parseInt(this.ev(e).clientY)
      });
    }, 300);
  }
  endDrag(e) {
    this.dragging = false;
    this.cancelDragging();
    var x = parseInt(this.ev(e).clientX),
      y = parseInt(this.ev(e).clientY);
    if (this.position.x != null && this.position.y != null) {
      if (Math.abs(x - this.position.x) > this.thresh) {
        if (Math.sign(x - this.position.x) > 0) {
          console.log("swipe right");
          this.dispatchSwipeEvent("swipeRight", {
            x,
            y
          });
        } else {
          this.dispatchSwipeEvent("swipeLeft", {
            x,
            y
          });
          console.log("swipe left");
        }
      }
      if (Math.abs(y - this.position.y) > this.thresh) {
        if (Math.sign(y - this.position.y) > 0) {
          this.dispatchSwipeEvent("swipeDown", {
            x,
            y
          });
          console.log("swipe down");
        } else {
          this.dispatchSwipeEvent("swipeUp", {
            x,
            y
          });
          console.log("swipe up");
        }
      }

      this.position = {
        x: null,
        y: null
      };
    }
  }
  dispatchSwipeEvent(eventName, payload) {
    this.element.dispatchEvent(
      new CustomEvent(eventName, {
        detail: payload
      })
    );
  }
}

const el = document.querySelector(".content");
const info = document.querySelector(".info .txt");
const icon = document.querySelector(".info .icon");
new Swipe(el);
el.addEventListener("swipeLeft", () => {
  info.innerHTML = "You swiped left";
  icon.innerHTML = "arrow_back";
});
el.addEventListener("swipeUp", () => {
  info.innerHTML = "You swiped up";
  icon.innerHTML = "arrow_upward";
});
el.addEventListener("swipeDown", () => {
  info.innerHTML = "You swiped down";
  icon.innerHTML = "arrow_downward";
});
el.addEventListener("swipeRight", () => {
  info.innerHTML = "You swiped right";
  icon.innerHTML = "arrow_forward";
});
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.