// 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()
    }
}