Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dispatch jQuery events as regular DOM events
# ~ Dispatch jQuery events as regular DOM events ~
#
# Delegated events are given a new name in the format `jquery:<original event name>`.
# If you delegate `ajax:send` you will be able to listen for `jquery:ajax:send`
# on native event listeners such as Stimulus actions and `EventTarget.addEventListener`.
#
# Notes:
# * The first parameter must be called "event".
# * The parameters can be accessed as members on the `event.detail` object.
#
# Example:
# delegate 'ajax:send', parameters: ['event', 'xhr']
# document.addEventListener 'jquery:ajax:send', (event) -> console.log(event.detail)
#
delegate = (eventName, {parameters}) ->
handler = (args...) ->
data = {}
data[name] = args[index] for name, index in parameters
delegatedEvent = new CustomEvent("jquery:#{eventName}",
bubbles: true,
cancelable: true,
detail: data)
data.event.target.dispatchEvent(delegatedEvent)
$(document).on(eventName, handler)
@kaspermeyer

This comment has been minimized.

Copy link
Owner

kaspermeyer commented Dec 13, 2018

# jQuery UJS
#
# Source: https://github.com/rails/jquery-ujs/wiki/ajax
#
delegate 'ajax:before',           parameters: ['event']
delegate 'ajax:beforeSend',       parameters: ['event', 'xhr', 'settings']
delegate 'ajax:send',             parameters: ['event', 'xhr']
delegate 'ajax:success',          parameters: ['event', 'data', 'status', 'xhr']
delegate 'ajax:error',            parameters: ['event', 'xhr', 'status', 'error']
delegate 'ajax:complete',         parameters: ['event', 'xhr', 'status']
delegate 'ajax:aborted:required', parameters: ['event', 'elements']
delegate 'ajax:aborted:file',     parameters: ['event', 'elements']
@kaspermeyer

This comment has been minimized.

Copy link
Owner

kaspermeyer commented Dec 13, 2018

# Select 2 (v4.0)
#
# Source: https://select2.org/programmatic-control/events
#
delegate 'select2:closing',     parameters: ['event']
delegate 'select2:close',       parameters: ['event']
delegate 'select2:opening',     parameters: ['event']
delegate 'select2:open',        parameters: ['event']
delegate 'select2:selecting',   parameters: ['event']
delegate 'select2:select',      parameters: ['event']
delegate 'select2:unselecting', parameters: ['event']
delegate 'select2:unselect',    parameters: ['event']
@kaspermeyer

This comment has been minimized.

Copy link
Owner

kaspermeyer commented Dec 13, 2018

# Bootstrap (v4.1)
#
# Source: https://getbootstrap.com/docs/4.1/getting-started/javascript/#events
#
# ~ alert
delegate 'close.bs.alert',        parameters: ['event']
delegate 'closed.bs.alert',       parameters: ['event']
# ~ carousel
delegate 'slide.bs.carousel',     parameters: ['event']
delegate 'slid.bs.carousel',      parameters: ['event']
# ~ collapse
delegate 'show.bs.collapse',      parameters: ['event']
delegate 'shown.bs.collapse',     parameters: ['event']
delegate 'hide.bs.collapse',      parameters: ['event']
delegate 'hidden.bs.collapse',    parameters: ['event']
# ~ dropdown
delegate 'show.bs.dropdown',      parameters: ['event']
delegate 'shown.bs.dropdown',     parameters: ['event']
delegate 'hide.bs.dropdown',      parameters: ['event']
delegate 'hidden.bs.dropdown',    parameters: ['event']
# ~ tab
delegate 'show.bs.tab',           parameters: ['event']
delegate 'shown.bs.tab',          parameters: ['event']
delegate 'hide.bs.tab',           parameters: ['event']
delegate 'hidden.bs.tab',         parameters: ['event']
# ~ modal
delegate 'show.bs.modal',         parameters: ['event']
delegate 'shown.bs.modal',        parameters: ['event']
delegate 'hide.bs.modal',         parameters: ['event']
delegate 'hidden.bs.modal',       parameters: ['event']
# ~ popover
delegate 'show.bs.popover',       parameters: ['event']
delegate 'shown.bs.popover',      parameters: ['event']
delegate 'hide.bs.popover',       parameters: ['event']
delegate 'hidden.bs.popover',     parameters: ['event']
delegate 'inserted.bs.popover',   parameters: ['event']
# ~ scrollspy
delegate 'activate.bs.scrollspy', parameters: ['event']
# ~ tooltip
delegate 'show.bs.tooltip',       parameters: ['event']
delegate 'shown.bs.tooltip',      parameters: ['event']
delegate 'hide.bs.tooltip',       parameters: ['event']
delegate 'hidden.bs.tooltip',     parameters: ['event']
delegate 'inserted.bs.tooltip',   parameters: ['event']
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment