Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds Event Handler Options #847

Closed
wants to merge 5 commits into from
Closed

Adds Event Handler Options #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dd93d61
Started passive event listeners
samends Sep 4, 2020
71e6073
Updated test to pass event options
samends Sep 16, 2020
683916e
Updated event types for all events
samends Sep 18, 2020
c4ee80a
Updated types on interface for event options
samends Sep 25, 2020
478ddcb
Removed unused interface
samends Sep 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
249 changes: 162 additions & 87 deletions src/core/interfaces.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,77 +18,146 @@ export interface TypedTargetEvent<T extends EventTarget, Y extends EventType = E
target: T;
}

/*
These are the event handlers.
*/
export type EventHandlerResult = boolean | void;

export interface EventHandler {
(event?: Event): EventHandlerResult;
}

export interface FocusEventHandler {
(event?: FocusEvent): EventHandlerResult;
}

export interface KeyboardEventHandler {
(event?: KeyboardEvent): EventHandlerResult;
}

export interface MouseEventHandler {
(event?: MouseEvent): EventHandlerResult;
}

/**
* Cannot extend the global due to TS error: `All declarations of 'target' must have identical modifiers.`
*/
export interface DojoEvent<T extends EventTarget = EventTarget> extends Event {
export interface DojoEvent<T extends EventTarget | null = EventTarget | null> extends Event {
target: T;
}

declare global {
interface MouseEvent<T extends EventTarget = EventTarget> {
interface MouseEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface PointerEvent<T extends EventTarget = EventTarget> {
interface PointerEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface TouchEvent<T extends EventTarget = EventTarget> {
interface TouchEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface KeyboardEvent<T extends EventTarget = EventTarget> {
interface KeyboardEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface FocusEvent<T extends EventTarget = EventTarget> {
interface FocusEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface UIEvent<T extends EventTarget = EventTarget> {
interface UIEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
interface WheelEvent<T extends EventTarget = EventTarget> {
interface WheelEvent<T extends EventTarget | null = EventTarget | null> {
target: T;
}
}

export type BlurEventHandler = FocusEventHandler;
export type ChangeEventHandler = EventHandler;
export type ClickEventHandler = MouseEventHandler;
export type DoubleClickEventHandler = MouseEventHandler;
export type InputEventHandler = EventHandler;
export type KeyDownEventHandler = KeyboardEventHandler;
export type KeyPressEventHandler = KeyboardEventHandler;
export type KeyUpEventHandler = KeyboardEventHandler;
export type LoadEventHandler = EventHandler;
export type MouseDownEventHandler = MouseEventHandler;
export type MouseEnterEventHandler = MouseEventHandler;
export type MouseLeaveEventHandler = MouseEventHandler;
export type MouseMoveEventHandler = MouseEventHandler;
export type MouseOutEventHandler = MouseEventHandler;
export type MouseOverEventHandler = MouseEventHandler;
export type MouseUpEventHandler = MouseEventHandler;
export type MouseWheelEventHandler = (event?: MouseWheelEvent | WheelEvent) => EventHandlerResult;
export type ScrollEventHandler = (event?: UIEvent) => EventHandlerResult;
export type SubmitEventHandler = EventHandler;
/*
These are the event handlers.
*/
export interface EventHandler {
(event: Event): void | boolean;
}

interface PointerEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: PointerEvent<E>): void | boolean;
}

interface MouseEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: MouseEvent<E>): void | boolean;
}

interface DojoEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: DojoEvent<E>): void | boolean;
}

interface KeyboardEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: KeyboardEvent<E>): void | boolean;
}

interface UIEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: UIEvent<E>): void | boolean;
}

interface FocusEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: FocusEvent<E>): void | boolean;
}

interface WheelEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: WheelEvent<E>): void | boolean;
}

interface TouchEventHandler<E extends EventTarget | null = EventTarget | null> {
(event: TouchEvent<E>): void | boolean;
}

interface TouchEventHandlerWithOptions<E extends EventTarget | null = EventTarget | null> {
handler: TouchEventHandler<E>;
}

interface DojoEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: DojoEventHandler<T>;
}

interface FocusEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: FocusEventHandler<T>;
}

interface KeyboardEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: KeyboardEventHandler<T>;
}

interface MouseEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: MouseEventHandler<T>;
}

interface PointerEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: PointerEventHandler<T>;
}

interface TouchEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: TouchEventHandler<T>;
}

interface UIEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: UIEventHandler<T>;
}

interface WheelEventWithOptions<T extends EventTarget | null> extends EventOptions {
handler: WheelEventHandler<T>;
}

export type VNodePropertiesWheelEventHandler<E extends EventTarget | null = EventTarget | null> =
| WheelEventWithOptions<E>
| WheelEventHandler<E>;
export type VNodePropertiesMouseEventHandler<E extends EventTarget | null = EventTarget | null> =
| MouseEventWithOptions<E>
| MouseEventHandler<E>;
export type VNodePropertiesFocusEventHandler<E extends EventTarget | null = EventTarget | null> =
| FocusEventWithOptions<E>
| FocusEventHandler<E>;
export type VNodePropertiesUIEventHandler<E extends EventTarget | null = EventTarget | null> =
| UIEventWithOptions<E>
| UIEventHandler<E>;
export type VNodePropertiesKeyboardEventHandler<E extends EventTarget | null = EventTarget | null> =
| KeyboardEventWithOptions<E>
| KeyboardEventHandler<E>;
export type VNodePropertiesEventHandler<E extends EventTarget | null = EventTarget | null> =
| DojoEventWithOptions<E>
| DojoEventHandler<E>;
export type VNodePropertiesPointerEventHandler<E extends EventTarget | null = EventTarget | null> =
| PointerEventWithOptions<E>
| PointerEventHandler<E>;
export type VNodePropertiesTouchEventHandler<E extends EventTarget | null = EventTarget | null> =
| TouchEventHandlerWithOptions<E>
| TouchEventHandler<E>;

export type VNodeHandlers =
| VNodePropertiesMouseEventHandler
| VNodePropertiesWheelEventHandler
| VNodePropertiesTouchEventHandler
| VNodePropertiesPointerEventHandler
| VNodePropertiesEventHandler
| VNodePropertiesKeyboardEventHandler
| VNodePropertiesUIEventHandler
| VNodePropertiesFocusEventHandler;

export interface TransitionStrategy {
enter(element: Element, enterAnimation: string, enterAnimationActive?: SupportedClassName): void;
Expand Down Expand Up @@ -154,6 +223,12 @@ export interface Classes {
};
}

export interface EventOptions {
passive?: boolean;
capture?: boolean;
once?: boolean;
}

export type DeferredVirtualProperties = (inserted: boolean) => VNodeProperties;

export type NodeOperationPredicate = () => boolean;
Expand Down Expand Up @@ -366,13 +441,47 @@ export interface AriaAttributes {
'aria-valuetext'?: string;
}

export interface VNodeProperties<T extends EventTarget = EventTarget> extends AriaAttributes {
export interface VNodeEvents<T extends EventTarget | null = EventTarget | null> {
onpointermove?: VNodePropertiesPointerEventHandler<T>;
onpointerdown?: VNodePropertiesPointerEventHandler<T>;
onpointerup?: VNodePropertiesPointerEventHandler<T>;
onpointerover?: VNodePropertiesPointerEventHandler<T>;
onpointerout?: VNodePropertiesPointerEventHandler<T>;
onpointerenter?: VNodePropertiesPointerEventHandler<T>;
onpointerleave?: VNodePropertiesPointerEventHandler<T>;
onpointercancel?: VNodePropertiesPointerEventHandler<T>;
onblur?: VNodePropertiesFocusEventHandler<T>;
onchange?: VNodePropertiesEventHandler<T>;
onclick?: VNodePropertiesMouseEventHandler<T>;
ondblclick?: VNodePropertiesMouseEventHandler<T>;
onfocus?: VNodePropertiesFocusEventHandler<T>;
oninput?: VNodePropertiesEventHandler<T>;
onkeydown?: VNodePropertiesKeyboardEventHandler<T>;
onkeypress?: VNodePropertiesKeyboardEventHandler<T>;
onkeyup?: VNodePropertiesKeyboardEventHandler<T>;
onload?: VNodePropertiesEventHandler<T>;
onmousedown?: VNodePropertiesMouseEventHandler<T>;
onmouseenter?: VNodePropertiesMouseEventHandler<T>;
onmouseleave?: VNodePropertiesMouseEventHandler<T>;
onmousemove?: VNodePropertiesMouseEventHandler<T>;
onmouseout?: VNodePropertiesMouseEventHandler<T>;
onmouseover?: VNodePropertiesMouseEventHandler<T>;
onmouseup?: VNodePropertiesMouseEventHandler<T>;
onmousewheel?: VNodePropertiesWheelEventHandler<T>;
onscroll?: VNodePropertiesUIEventHandler<T>;
onsubmit?: VNodePropertiesEventHandler<T>;
ontouchcancel?: VNodePropertiesTouchEventHandler<T>;
ontouchend?: VNodePropertiesTouchEventHandler<T>;
ontouchmove?: VNodePropertiesTouchEventHandler<T>;
ontouchstart?: VNodePropertiesTouchEventHandler<T>;
}

export interface VNodeProperties<T extends EventTarget | null = EventTarget | null>
extends VNodeEvents<T>,
AriaAttributes {
enterAnimation?: SupportedClassName;

exitAnimation?: SupportedClassName;

enterAnimationActive?: SupportedClassName;

exitAnimationActive?: SupportedClassName;

/**
Expand All @@ -389,23 +498,9 @@ export interface VNodeProperties<T extends EventTarget = EventTarget> extends Ar
* An object literal like `{height:'100px'}` which allows styles to be changed dynamically. All values must be strings.
*/
readonly styles?: Partial<CSSStyleDeclaration>;

// Pointer Events
onpointermove?(ev: PointerEvent<T>): boolean | void;
onpointerdown?(ev: PointerEvent<T>): boolean | void;
onpointerup?(ev: PointerEvent<T>): boolean | void;
onpointerover?(ev: PointerEvent<T>): boolean | void;
onpointerout?(ev: PointerEvent<T>): boolean | void;
onpointerenter?(ev: PointerEvent<T>): boolean | void;
onpointerleave?(ev: PointerEvent<T>): boolean | void;
onpointercancel?(ev: PointerEvent<T>): boolean | void;
// For Pointer Event Polyfill see: https://github.com/jquery/PEP
readonly 'touch-action'?: string;
// From Element
ontouchcancel?(ev: TouchEvent<T>): boolean | void;
ontouchend?(ev: TouchEvent<T>): boolean | void;
ontouchmove?(ev: TouchEvent<T>): boolean | void;
ontouchstart?(ev: TouchEvent<T>): boolean | void;
// From HTMLFormElement
readonly action?: string;
readonly encoding?: string;
Expand All @@ -414,26 +509,6 @@ export interface VNodeProperties<T extends EventTarget = EventTarget> extends Ar
readonly name?: string;
readonly target?: string;
// From HTMLElement
onblur?(ev: FocusEvent<T>): boolean | void;
onchange?(ev: DojoEvent<T>): boolean | void;
onclick?(ev: MouseEvent<T>): boolean | void;
ondblclick?(ev: MouseEvent<T>): boolean | void;
onfocus?(ev: FocusEvent<T>): boolean | void;
oninput?(ev: DojoEvent<T>): boolean | void;
onkeydown?(ev: KeyboardEvent<T>): boolean | void;
onkeypress?(ev: KeyboardEvent<T>): boolean | void;
onkeyup?(ev: KeyboardEvent<T>): boolean | void;
onload?(ev: DojoEvent<T>): boolean | void;
onmousedown?(ev: MouseEvent<T>): boolean | void;
onmouseenter?(ev: MouseEvent<T>): boolean | void;
onmouseleave?(ev: MouseEvent<T>): boolean | void;
onmousemove?(ev: MouseEvent<T>): boolean | void;
onmouseout?(ev: MouseEvent<T>): boolean | void;
onmouseover?(ev: MouseEvent<T>): boolean | void;
onmouseup?(ev: MouseEvent<T>): boolean | void;
onmousewheel?(ev: WheelEvent<T>): boolean | void;
onscroll?(ev: UIEvent<T>): boolean | void;
onsubmit?(ev: DojoEvent<T>): boolean | void;
readonly spellcheck?: boolean;
readonly tabIndex?: number;
readonly disabled?: boolean;
Expand Down Expand Up @@ -464,7 +539,7 @@ export interface VNodeProperties<T extends EventTarget = EventTarget> extends Ar
readonly focus?: boolean | NodeOperationPredicate;

/**
* determines is the element needs to be clicked
* determines if the element needs to be clicked
*/
readonly click?: boolean | NodeOperationPredicate;

Expand Down