@argab/swipe v3.0.1

The Library provides handlers for touchstart, touchend, and touchmove event listeners that apply to DOM elements.

Create Sidebars, Dropdowns, and any kind of UI element that is controlled by a touch event.

Simple usage example

import {SwipeElement, SwipeService} from '@argab/swipe'

const el = document.getElementById('#swipe')

const swipe = new SwipeService(el, {
    direction: 'left', // up|down|left|right
    onStart: () => {
    }, // do smth on touchsart
    onEnd: () => {
    }, // do smth on touchend
    onMove: () => {
    }, // do smth on touchmove
    fixed: true, // the swipe element will be returned 
                 // to it`s stating position on touchend
    fixedTimeout: 200,
})

const swipeEl = new SwipeElement(el, swipe)

swipe.validate() && swipeEl.addListeners()

Note that in order to make an element movable on touch,
You must apply absolute positioning or fixed CSS styling to it.

Integration with Vue.js

import {VueSwipeDirective} from '@argab/swipe'

const app = createApp({})

app.directive('swipe', VueSwipeDirective)

Now you can apply a simple swipe elements on Vue Templates:

<template>
    <transition name="ui-sidebar-transition">
        <div
            v-show="show"
            class="ui-sidebar"
            :class="swipe && 'ui-sidebar-swipe'"
            v-swipe.left.fixed:200="swipe && {
                onEnd: ({threshold}) => {
                    if (threshold <= 50) {
                        $listener.setup('sidebar', {showSwiped: false})
                        return show = false
                    }
                },
            }"
        >
            <h1>Simple Swipe</h1>
            <slot/>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        swipe: Boolean
    },
    data: () => ({
        show: true,
    }),
    mounted () {
        this.swipe && this.$listener.on('sidebar', {
            state: {
                showSwiped: (show) => this.show = Boolean(show)
            }
        })
        this.swipe && this.$listener.setup('sidebar', {
            swipe: true,
            showSwiped: false,
        })
    },
    beforeDestroy () {
        this.$listener.reset('sidebar')
    }
}
</script>

<style lang="scss">
.ui-sidebar {
    height: 100vh;
    width: 100%;
    background-color: #2E3440;
    color: #fff;
    padding: 20px;

    &-swipe {
        position: fixed;
        top: 0;
        left: 0
    }
}

.ui-sidebar-transition-enter-active,
.ui-sidebar-transition-leave-enter {
    transform: translateX(0);
    transition: all .2s linear;
}

.ui-sidebar-transition-enter,
.ui-sidebar-transition-leave-to {
    transform: translateX(-100%);
}
</style>

API

SwipeService's properties

Event Handler's (onStart, onEnd, onMove) arguments

Try out another powerful package from the author:

Request Service - This Library can totally organize working with REST API in your whole project.

Please, don't forget to paste into author's github repository

this support will inspire to create more powerful things for You.