Swipe Library

---

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

Name	Data Type	Arguments	Return	Default	Description
direction	String	up|down|left|right			Target Element's moving direction
fixed	Boolean	true|false		false	Target Element will be returned to it's stating position on touchend
fixedTimeout	Number	milliseconds		0	Timeout before Target Element returned to it's stating position
onStart	Function	Object	undefined		On touchstart event handler
onEnd	Function	Object	undefined		On touchend event handler
onMove	Function	Object	false|undefined		On touchmove event handler. Returning FALSE forces embedded handler to stop execution

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

Argument	Data Type	Example	Description
x	Number		Target Event's absolute coordinate
y	Number		Target Event's absolute coordinate
period	Number		The period in milliseconds that left from touchstart event
dir	Object	{up: true, down: false, left: true, right: false}	Target Element's direction data
event	Object		Target Event's data
startX	Number		Target Event's starting position's absolute coordinate
startY	Number		Target Event's starting position's absolute coordinate
diff	Object	{x: 0, y: 0}	Difference between Target Event's absolute coordinate and Target Event's starting position's absolute coordinate
threshold	Number	0-100%	The offset in percentage from the initial position of the Target Element

---

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.