Skip to content

Instantly share code, notes, and snippets.

@renakdup

renakdup/detect-swipe-event.js

Last active December 12, 2022 23:57
Show Gist options
  • Save renakdup/95e05e8afe853526aae19b3f373f9448 to your computer and use it in GitHub Desktop.
Save renakdup/95e05e8afe853526aae19b3f373f9448 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. renakdup revised this gist Dec 12, 2022. 1 changed file with 60 additions and 0 deletions.
    60 changes: 60 additions & 0 deletions detect-swipe-event.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    // Detect swipe event. Detect touch swipe event.
    // Example
    detectSwipeEvent(document.getElementsByClassName('js-mobile-nav__background')[0], function (orientation) {
    console.log(orientation)
    });

    /**
    * @param element js element
    * @param callback Your callback invoke on swipe event. Attribute "swipe orientation" transfer to callback.
    */
    function detectSwipeEvent (element, callback) {
    element.addEventListener('touchstart', startTouch, false)
    element.addEventListener('touchmove', moveTouch, false)

    // Swipe Up / Down / Left / Right
    var initialX = null
    var initialY = null

    function startTouch (e) {
    initialX = e.touches[ 0 ].clientX
    initialY = e.touches[ 0 ].clientY
    }

    function moveTouch (e) {
    if (initialX === null) {
    return
    }

    if (initialY === null) {
    return
    }

    var currentX = e.touches[ 0 ].clientX
    var currentY = e.touches[ 0 ].clientY

    var diffX = initialX - currentX
    var diffY = initialY - currentY

    if (Math.abs(diffX) > Math.abs(diffY)) {
    // sliding horizontally
    if (diffX > 0) {
    callback('left')
    } else {
    callback('right')
    }
    } else {
    // sliding vertically
    if (diffY > 0) {
    callback('up')
    } else {
    callback('down')
    }
    }

    initialX = null
    initialY = null

    e.preventDefault()
    }
    }
  2. renakdup revised this gist Dec 12, 2022. No changes.
  3. renakdup renamed this gist Aug 7, 2017. 1 changed file with 0 additions and 0 deletions.
    0 rand → rand.js
    View file
    File renamed without changes.
  4. renakdup revised this gist Aug 7, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions rand
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    var rand = min + Math.floor(Math.random() * (max + 1 - min));
  5. renakdup revised this gist Aug 6, 2017. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion xz.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    sdfsdfsdfsd
  6. renakdup revised this gist Aug 6, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions xz.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    sdfsdfsdfsd
  7. renakdup revised this gist Aug 6, 2017. No changes.
  8. renakdup revised this gist Aug 6, 2017. No changes.
  9. renakdup renamed this gist Aug 6, 2017. 1 changed file with 0 additions and 0 deletions.
    0 isNumeric → isNumeric.js
    View file
    File renamed without changes.
  10. renakdup created this gist Aug 6, 2017.
    3 changes: 3 additions & 0 deletions isNumeric
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
    }