Skip to content

Latest commit

 

History

History
288 lines (231 loc) · 9.9 KB

Events.md

File metadata and controls

288 lines (231 loc) · 9.9 KB
Raw

@squirrel-forge/ui-util

Back to table of contents

Documentation

Javascript / Events

Error <[ Events ]> HTTP

Table of contents

bindMultiClick

bindMultiClick - Bind single and double click on one element

Description

bindMultiClick( element, single, double, timeout = 350, beforeDelayed = null ) // void

Bind a single and a double click event on the same element without causing event collisions.

Parameters

Parameter Type Default Description
element HTMLElement - Element to bind handlers to
single Function - Single click callback
double Function - Double click callback
timeout Number 350 Click frequency timeout
beforeDelayed Function null Callback to run for each delayed single click

Return Values

Type/Value Description
void None.

Examples

// Bind the events
bindMultiClick( element, () => {
    console.log( 'single click action' );
}, () => {
    console.log( 'double click action' );
} );

bindNodeList

bindNodeList - Bind multiple events to each node

Description

bindNodeList( elements, events, unbind = false ) // void

Bind or unbind multiple event listeners on each element in a NodeList or Array.

Parameters

Parameter Type Default Description
elements Array/NodeList - Array or NodeList of elements to bind
events Array - Array of listener argument arrays
unbind Boolean false Remove event listeners

Return Values

Type/Value Description
void None.

Examples

const events = [
    [ 'click', ( event ) => console.log( 'click' ) ],
    [ 'focus', ( event ) => console.log( 'focus' ) ],
    [ 'blur', ( event ) => console.log( 'blur' ) ],
];

// Bind the events
bindNodeList( document.querySelectorAll( 'a' ), events );

// Unbind the events
bindNodeList( document.querySelectorAll( 'a' ), events, true );

CallbackEvents

CallbackEvents class - Abstract class used for creating dom event connected or EventTarget alike objects. The class extends EventDispatcher class.

Class overview

class CallbackEvents extends EventDispatcher {
  constructor( element = null, scope = window, prefix = 'callback.', debug = null ) {}
}

For more details check the CallbackEvents source file.

Notes

All EventDispatcher methods are available and event names should be the callback name that is called on given context.

debounce

debounce - Debounce event

Description

debounce( func, delay = null ) // Function

Function wrapper to debounce event listeners on events like window.resize, window.scroll or mouse.move and cause them to cancel until below a given frequency.

Parameters

Parameter Type Default Description
func Function - Function to debounce
delay Number 350 Frequency delay in ms

Return Values

Type/Value Description
void None.

Examples

window.addEventListener( 'resize', debounce( () => console.log( 'resize::complete' ) ) );

docReady

docReady - Document ready callback

Description

docReady( callback ) // void

Run a given callback when the document is ready, checks document.readyState complete or binds a DOMContentLoaded listener to run the callback.

Parameters

Parameter Type Default Description
callback Function - Callback to run when ready

Return Values

Type/Value Description
void None.

Examples

docReady( () => console.log( 'ready steady go!' ) );

Draggables

Draggables class - Mouse drag handler for multiple elements.

Class overview

class Draggables {
    constructor( draggables = null, context = window ) {}
    thresholdX : Number
    thresholdY : Number
    bind( draggables ) {} // void
}

Draggable object definition:

const draggable = {
    draggable : HTMLElement,
    container : HTMLElement,
    onbefore : ( event, _dgbl ) => {}, // udefined|false
    onstart : ( event, _dgbl ) => {}, // void
    onend : ( event, position, delta, _dgbl ) => {}, // void
    onmove : ( event, position, delta, _dgbl ) => {}, // void
    onclick : ( event, position, delta, _dgbl ) => {}, // void
    axis : ('both'|'x'|'y'),
    offsetX : ('start'|'left'|'center'|'middle'|'right'|'end'),
    offsetY : ('start'|'top'|'center'|'middle'|'bottom'|'end'),
    overflowX : Boolean,
    overflowY : Boolean,
    local : Boolean,
}

For more details check the Draggables source file.

EventDispatcher

EventDispatcher class - Abstract class used for creating dom event connected or EventTarget alike objects.

Class overview

class EventDispatcher {
  static isCompat( obj ) {} // Boolean
  constructor( element = null, parent = null, debug = null ) {}
  debug : null|Console
  target : null|window|document|HTMLElement|EventTarget
  parent : null|EventDispatcher
  isSimulated : Boolean
  hasSimulated( name ) {} // Boolean
  dispatchEvent( name, detail = null, bubbles = true, cancelable = false ) {} // Boolean
  addEventListener( name, callback, useCaptureOptions = false ) {} // void
  removeEventListener( name, callback, useCaptureOptions = false ) {} // void
  addEventList( events ) {} // void
}

For more details check the EventDispatcher source file.

Notes

When using the simulated mode (with null as target), the events are bubbled to the parent element manually unless event.stopPropagation() was called in a listener. When bubbling manually, you can use event.detail.target and event.detail.current just as target and currentTarget with normal dom events, when a valid object is bound as target then the detail properties will always be the object that triggered the event.

getFocusable

getFocusable - Get focusable element from context

Description

getFocusable( context, last = false, selector = null ) // null|HTMLElement

Get first or last focusable element from given context using a selector.

Parameters

Parameter Type Default Description
context HTMLElement - Context to select from
last Boolean false Get first or last element, false for first element, true for last
selector Null/String null Element selector, default: a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])

Return Values

Type/Value Description
HTMLElement Focusable element
null Empty.

Examples

const element = getFocusable( document.getElementById( 'dialog-id' ) );
if ( element ) element.focus();

tabFocusLock

tabFocusLock - Lock tab focus to context and return unbind function.

Description

tabFocusLock( context, condition = true, loop = true, selector = null ) // Function

Restrict tab focus to a given element context, will loop tab focus, by focusing the corresponding first or last element when leaving the context.

Parameters

Parameter Type Default Description
context HTMLElement - Context to restrict tab focus to
condition Boolean/Function true Function that return a boolean to enable or disable tab focus restriction
loop Boolean true Loop element focus
selector HTMLElement null Focusable selector, see the getFocusable function

Return Values

Type/Value Description
Function Function to unbind event handler.

Examples

const remove = tabFocusLock( document.getElementById( 'dialog-id' ) );
// Call remove(); to unbind the handler if not needed anymore.

Error <[ Events ]> HTTP