A simple and flexible long-press action handler for DOM elements.
npm install nagaoshiSimple | Robust | Universal | Vanilla-Friendly | Prototype-Ready
A simple and flexible long-press action handler for DOM elements.
!Nagaoshi Demo: Long-press for continuous increment and decrement and reset
``html
`
`html
`
``
npm install nagaoshi
``
yarn add nagaoshi
``
pnpm add nagaoshi
`html`
| Argument | Type | Default | Description |
| -------- | --------------- | -------- | ------------------------------------------ |
| element | HTMLElement | - | The element to set the long press event on |
| action | Function | () => {} | The action to execute on long press |
| options | NagaoshiOptions | {} | Optional configuration object |
| Option | Type | Default | Description |
| -------- | -------- | --------- | -------------------------------------------------------------------- |
| interval | number | 75 | The interval (in ms) between each action execution during long press |
| delay | number | 1000 | The delay (in ms) before long press is triggered |
| onStart | Function | undefined | Callback function when long press starts |
| onFinish | Function | undefined | Callback function when long press finishes |
| onCancel | Function | undefined | Callback function when long press is cancelled |
The nagaoshi utility automatically detects interactive content in the DOM. It searches for elements that match the following criteria:
- a[href]: Links with href attributesbutton
- : Button elementsdetails
- : Details elementsembed
- : Embed elementsiframe
- : Iframe elementslabel
- : Label elementsselect
- : Select elementstextarea
- : Textarea elementsaudio[controls]
- : Audio elements with controlsvideo[controls]
- : Video elements with controlsimg[usemap]
- : Images with usemap attributesinput:not([type="hidden"])
- : All input elements except hidden inputs
When these elements are detected, the nagaoshi functionality is automatically applied, allowing you to use the custom 'nagaoshi' event listener without explicitly calling the nagaoshi function.
`javascript
import { nagaoshi } from "nagaoshi";
const button = document.querySelector("button");
nagaoshi(button, () => {
console.log("Long press detected!");
});
`
`javascript
import { nagaoshi } from "nagaoshi";
const button = document.querySelector("button");
nagaoshi(
button,
() => {
console.log("Long press action");
},
{
interval: 100,
delay: 500,
onStart: () => console.log("Long press started"),
onFinish: () => console.log("Long press finished"),
onCancel: () => console.log("Long press cancelled"),
}
);
`
`javascript
const button = document.querySelector("button");
button.addEventListener("nagaoshi", () => {
console.log("Long press detected via custom event!");
});
`
The nagaoshi function returns a cleanup function that removes all event listeners:
`javascript
const cleanup = nagaoshi(button, () => {
console.log("Long press detected!");
});
// Later, when you want to remove the long press functionality:
cleanup();
`
`typescript
import { nagaoshi, NagaoshiOptions } from "nagaoshi";
const button = document.querySelector("button") as HTMLElement;
const options: NagaoshiOptions = {
interval: 100,
delay: 500,
onStart: () => console.log("Long press started"),
onFinish: () => console.log("Long press finished"),
onCancel: () => console.log("Long press cancelled"),
};
nagaoshi(
button,
() => {
console.log("Long press detected!");
},
options
);
`
The nagaoshi utility automatically sets the aria-pressed attribute on the target element during a long press. This allows you to style the element based on its pressed state, enhancing both visual feedback and accessibility.
Example CSS:
`css`
button[aria-pressed="true"] {
background-color: #4caf50;
color: white;
}
The nagaoshi utility also supports keyboard events for accessibility:
`javascript
import { nagaoshi } from "nagaoshi";
const button = document.querySelector("button");
nagaoshi(button, () => {
console.log("Long press or key hold detected!");
});
`
Users can trigger the long press action by holding down the Enter or Space key.
- Two ways to use: explicit nagaoshi function call or custom 'nagaoshi' event listeneraria-pressed` attribute for styling and accessibility
- Automatic detection of interactive elements
- Supports both pointer and keyboard events for accessibility
- Customizable delay and interval for long press detection
- Provides callbacks for start, finish, and cancel events
- TypeScript support
- Cleanup function for easy removal of event listeners
- Uses
This utility uses modern JavaScript features and should work in all contemporary browsers. For older browsers, you may need to use appropriate polyfills or transpile the code.