yomotsu/hold-event

hold-event

Provides key hold-start, holding, hold-end and other events.

• keyboard
• multiple keys
• element

Key press and hold

The 1st argument is a KeyboardEvent.code.

const keyLeft = new holdEvent.KeyboardKeyHold( 'ArrowLeft' );

keyLeft.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLD_START, ( event ) => console.log( event ) );
keyLeft.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLDING, ( event ) => console.log( event ) );
keyLeft.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLD_END, ( event ) => console.log( event ) );

Element press and hold

const $button = document.getElementById( 'button' )
const buttonHold = new holdEvent.ElementHold( $button );

buttonHold.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLD_START, ( event ) => console.log( event ) );
buttonHold.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLDING, ( event ) => console.log( event ) );
buttonHold.addEventListener( holdEvent.HOLD_EVENT_TYPE.HOLD_END, ( event ) => console.log( event ) );

hold-event's Issues

keyCode is deprecated

KeyboardEvent.keyCode is deprecated now, could you please update it to code or key？

Can this be extended to TouchEvents?

Thank you for this also, it saved a lot of work for me in my Virtual Exhibition. This works perfectly with keyboard and movement icons. Can this be extended to touchevents?

I read about this a bit and I can see the problem. Even nipplejs lacks the "hold" support. Or do you know a working method/npn/git for this purpose?

Missing removeEventListener

Its missing removeEventListener for event cleanup.

add keyboard shift / control / alt key status when sending holding events

Hi @yomotsu

Thank you for your open work.

To handle walk/run in your great camera controls component, using hold event, we need extra keys (shift, alt, ctrl)

keyLeft.addEventListener( 'holding', event => {
    if (event.shiftKey) ...
    if (event.altKey) ...
    if (event.ctrlKey) ...
} );

Should i PR or perhaps you can do that quickly ?

thank you

will npm be updated to version 1.0.0 ?

will npm be updated to version 1.0.0 ?

How to use it in React, with import?

Thanks for the package! Can you please show how to use it in React?

Thanks!