npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svelte-action-touch-to-mouse

v1.0.2

Published

Svelte action that converts automatically touch events into mouse events

Downloads

24

Readme

svelte-action-touch-to-mouse

Svelte action that maps touch events to mouse events.

NPM users: please consider the Github README for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)

Note: this code generates events of type mousemove, mousedown and mouseup - it does not (yet) generate mouseenter, mouseleave, mouseover or mouseout events. Additionally, mousemove events continue to fire even after the touchpoint has left the HTML element where the touch started

Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.

Installation

svelte-action-touch-to-mouse may be used as an ECMAScript module (ESM) or CommonJS Svelte uses modules, it is highly recommended to use ESM.

You may either install the package into your build environment using NPM, Yarn or PNPM

npm install svelte-action-touch-to-mouse
// or
yarn add svelte-action-touch-to-mouse
// or
pnpm add svelte-action-touch-to-mouse

Access

How to access the package depends on the type of module you prefer

  • ESM (or Svelte): import { touchToMouse } from 'svelte-action-touch-to-mouse';
  • CommonJS: const { touchToMouse } = require('svelte-action-touch-to-mouse')

Usage within Svelte

For Svelte, it is recommended to import the package in a module context. From then on, its exports may be used as usual:

<script lang="ts">
  import { touchToMouse } from 'svelte-action-touch-to-mouse';
  let dragging = false;
  const onMouseMove = (event: MouseEvent) => {
    // we are capturing touch events as well, mapped to mouse events
  }
  const onMouseDown = (event: MouseEvent) => (dragging = true)
  const onMouseUp = (event: MouseEvent) => (dragging = false)
</script>

<svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} />

<button use:touchToMouse on:mousedown={onMouseDown}>
  it doesn't have to be a button, it just works.
</button>

Parameters

touchToMouse can accept deep as a parameter, a bolean defaulting to false.

This allows to track down inner elements that are contained in the desired Element and trigger the click action with it as well.

This is normally not necessary but iOS devices might be unable to untrack touch events from inner elements even if pointer-events:none; has been set in the inner components to avoid undesired clicks in those elements.

An example of a suitable moment to use it can be shown here:

<script lang="ts">
  ...
</script>
...
<button use:touchToMouse on:mousedown={onMouseDown}>
  <span style="pointer-events:none;">We want to ignore if we touch this, but still it gets clicked as target on iOS devices</span>
  <span style="pointer-events:none;">or this <img src="/drag-icon.svg" /></span>
</button>

To solve this you can use use:touchToMouse={{deep: true}} like this:

<button use:touchToMouse={{deep: true}} on:mousedown={onMouseDown}>
  <span style="pointer-events:none;">Now it works as expected</span>
  <span style="pointer-events:none;"><img src="/drag-icon.svg" /></span>
</button>

Examples

If you want more examples let me know and I will add some fully working examples.

Background Information

There still exist numerous JavaScript libraries and frameworks dealing with MouseEvents only - ignoring the TouchEvents used on mobile devices. This simple module maps TouchEvents to corresponding MouseEvents and, thus, allows such libraries to be used on mobile devices as well.

It does so by mapping events for certain HTML elements only in order to avoid undesired side effects on other elements.

<element use:touchToMouse use:otherLibrariesWithOnlyMouseEvents on:mousedown={onlyMouseEvents}></element>

Important Note

This Svelte action will add some classes to the element to avoid the entire web-app to be dragging with it or for the MouseEvent consumers to work as expected.

-webkit-touch-callout:none;
-ms-touch-action:none;
touch-action:none;

Also, consider adding touch-action:none to any nested element that also contains pointer-events:none for iOS compatibility.

Build Instructions

You may easily build this package yourself.

Just install NPM according to the instructions for your platform and follow these steps:

  1. either clone this repository using git or download a ZIP archive with its contents to your disk and unpack it there
  2. open a shell and navigate to the root directory of this repository
  3. run npm install in order to install the complete build environment
  4. execute npm run build to create a new build

License

MIT License