Svelte – Longpress Actions

---

Hello guyss.. welcome back to Svelte Channel… hahah

longpress.js

export function longpress(node, duration) {
let timer;

const handleMousedown = () => {
    timer = setTimeout(() => {
        node.dispatchEvent(
            new CustomEvent('longpress')
        );
    }, duration);
};

const handleMouseup = () => {
    clearTimeout(timer)
};

node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);

return {
    update(newDuration) {
        duration = newDuration;
    },
    destroy() {
        node.removeEventListener('mousedown', handleMousedown);
        node.removeEventListener('mouseup', handleMouseup);
    }
};

kemudian buat file component LongpressActions.svelte

const handleMousedown = () => {
    timer = setTimeout(() => {
        node.dispatchEvent(
            new CustomEvent('longpress')
        );
    }, duration);
};

const handleMouseup = () => {
    clearTimeout(timer)
};

node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);

return {
    update(newDuration) {
        duration = newDuration;
    },
    destroy() {
        node.removeEventListener('mousedown', handleMousedown);
        node.removeEventListener('mouseup', handleMouseup);
    }
};

dan import ke App.svelte

const handleMousedown = () => {
    timer = setTimeout(() => {
        node.dispatchEvent(
            new CustomEvent('longpress')
        );
    }, duration);
};

const handleMouseup = () => {
    clearTimeout(timer)
};

node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);

return {
    update(newDuration) {
        duration = newDuration;
    },
    destroy() {
        node.removeEventListener('mousedown', handleMousedown);
        node.removeEventListener('mouseup', handleMouseup);
    }
};

dan hasilnya akan seperti ini …

Okay mantab… untuk link github ada disini… cyaa….