event triggers refactor - more generic eventTriggers, allow adding tr…#129
event triggers refactor - more generic eventTriggers, allow adding tr…#129michabeeri wants to merge 5 commits intomasterfrom
Conversation
| const focusListener = (e: FocusEvent) => { | ||
| if (!source.contains(e.relatedTarget as HTMLElement)) { | ||
| (handler as (e: FocusEvent) => void)(e); | ||
| } | ||
| }; | ||
|
|
||
| const clickListener = (e: MouseEvent) => { | ||
| if ((e as PointerEvent).pointerType) { | ||
| (handler as (e: MouseEvent) => void)(e); | ||
| } | ||
| }; | ||
|
|
||
| const keydownListener = (e: KeyboardEvent) => { | ||
| if (e.code === 'Space') { | ||
| e.preventDefault(); | ||
| (handler as (e: KeyboardEvent) => void)(e); | ||
| } else if (e.code === 'Enter') { | ||
| (handler as (e: KeyboardEvent) => void)(e); | ||
| } | ||
| }; |
There was a problem hiding this comment.
We probably want to move these outside and create them on-demand from a map by type.
The focusHandler should be created when the event type is focusin or focusout.
The clickHandler should be created when the event type is click, for now, we may extend this for other types.
The keydownListener can be the "default activate" handler, and should be created when event type is keydown. We'll probably extend these later for allowing other keys etc.
| const isEnterLeave = isEnterLeaveMode(genericConfig); | ||
| if (isEnterLeave) { |
There was a problem hiding this comment.
Should be enough:
| const isEnterLeave = isEnterLeaveMode(genericConfig); | |
| if (isEnterLeave) { | |
| if (enterLeave) { |
| const enter = genericConfig.enter ?? []; | ||
| const leaveEvents = genericConfig.leave ?? []; |
There was a problem hiding this comment.
These are already guaranteed to be arrays at this point.
| const enterEvents: string[] = enterLeave?.enter ? [...enterLeave.enter] : []; | ||
| const leaveEvents: string[] = enterLeave?.leave ? [...enterLeave.leave] : []; |
There was a problem hiding this comment.
Not necessary, these are already converted to Arrays.
| } | ||
| if (!isToggleMode && isLeave && isToggle) { | ||
| targetController.toggleEffect(effectId, 'remove', item); | ||
| } |
There was a problem hiding this comment.
| } | |
| } else { | |
| if (isEnter) { | |
| targetController.toggleEffect(effectId, isToggle ? 'add' : method, item); | |
| } | |
| if (isLeave && isToggle) { | |
| targetController.toggleEffect(effectId, 'remove', item); | |
| } | |
| } |
| } | ||
| } | ||
| } else { | ||
| animation.progress(0); |
There was a problem hiding this comment.
I think we need to add:
| animation.progress(0); | |
| animation.progress(0); | |
| delete element.dataset.interactEnter; |
| if (animation.isCSS) { | ||
| animation.onFinish(() => { | ||
| fastdom.mutate(() => { | ||
| element.dataset[enterLeave ? 'motionEnter' : 'interactEnter'] = 'done'; |
There was a problem hiding this comment.
That was left by mistake:
| element.dataset[enterLeave ? 'motionEnter' : 'interactEnter'] = 'done'; | |
| element.dataset.interactEnter = 'done'; |
2 participants
…iggers more easily
Description
Related Issue
Checklist
Screenshots / Demos
Additional Notes