Add custom JS events

[lucasvallenet]

Add /utils/events.js with addStartEvent and andEndEvents utils to easily bind an even on start/end with a debounce delay. Also added addScrollUpEvent and addScrollDownEvent to easily listen when the scroll direction updates

Usage of events :

addStartEvent

import { addStartEvent } from './utils/events'

// Detect document mousemove start with 1000ms delay
addStartEvent(document, 'mousemove', 1000)

document.addEventListener('mousemoveStart', () => {
   // ...callback
})

addEndEvent

import { addEndEvent } from './utils/events'

// Detect window resize end with 200ms delay (default value)
addEndEvent(window, 'resize')

window.addEventListener('resizeEnd', () => {
   // ...callback
})

addScrollUpEvent

import { addScrollUpEvent } from './utils/events'

// Add scroll up listener (binded by default to window)
addScrollUpEvent()

window.addEventListener('scrollUp', () => {
   // ...callback
})

addScrollDownEvent

import { addScrollDownEvent } from './utils/events'

// Add scroll down listener to specific DOM element
const $div = document.getElementById('#div')
addScrollUpEvent($div)

$div.addEventListener('scrollDown', () => {
   // ...callback
})

[mcaskill]

Additional suggestions:

• Should there be functions in place to disable custom events or remove base the event listeners that dispatch them?
• I think the addScrollUpEvent and addScrollDownEvent could be refactored to use the same event listener on scroll.

---

Given the scope of this pull request, changes to /www/assets/styles should be excluded.

[lucasvallenet]

I made the requested changed.

I also blended the addScrollUpEvent / addScrollDownEvent to a unique function. There is only one scroll listener and if we want to know when we scroll up, we usually also want to know when we scroll down...

[mcaskill]

All that is missing is to exclude /www/assets/styles.

[lucasvallenet]

All that is missing is to exclude /www/assets/styles.

Didn't it reset on [0610a7d] ?

[mcaskill]

Didn't it reset on [0610a7d] ?

Oh, you reverted changes. I would suggest rebasing the master branch and dropping commits like that. Makes for a cleaner history.

[Jerek0]

👋 Thanks for the PR!

addStartEvent / addEndEvent

Some things worry me about this:

• You can't remove a custom event as it stands. It's fine as long as you use it on document or window I guess, but if you setup a "start" event on a div that later disappears, the listener's still there and that's no good.
• It can be used only once per EventTarget. I could imagine a situation where you want a "resizeend" on window with 200ms delay for one purpose, but somewhere else you need it to be 500ms delay.

Can you provide a concrete example where this would be useful aside from a global resizeend with a defined debounce delay? I wonder if that sort of custom event with a debounce should be done manually where needed only?

addScrollDirectionEvents

Regarding the scroll up/down events, it works well but I wonder if it's the right place for such a feature. Maybe it should be inside the Scroll module of the project instead? Also, we may want to prevent calling addScrollDirectionEvents multiple times on the same EventTarget.

---

By the way, it didn't work right away during my tests. I figured some variables/functions calls didn't exist, it's now fixed ✅

[arnvvd]

Outcome from meeting on 2022-10-05
Status: On hold

• Something to bring and discuss with Locodash