translateJQueryEventsToDOM() - Re-dispatch jQuery events from DOM elements

README.md

jQuery events to DOM

Listens for jQuery events to re-dispatch them from DOM element as CustomEvent. To redispatch Bootstrap 4 modal events from modal DOM element

import translateJQueryEventsToDOM from '@actualwave/jquery-events-to-dom';

translateJQueryEventsToDOM()(
  'show.bs.modal',
  'shown.bs.modal',
  'hide.bs.modal',
  'hidden.bs.modal'
);

This will re-dispatch bootstrap modal show, shown, hide and hidden events from target DOM element.

const modalElement = document.getElementById('my-bootstrap-modal');

modalElement.addEventListener('hidden', (event) => {
  console.log('Modal is hidden now.');
});

translateJQueryEventsToDOM accepts two optional arguments

• target - DOM element to listen for jQuery events, by default document.
• jquery - jQuery instance, by default window.$.

jquery-events-to-dom.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const convertJQueryEventToDOM = (jQueryEvent) => new CustomEvent(jQueryEvent.type, { detail: jQueryEvent });

const dispatchJQueryEventToDOM = (jQueryEvent) => jQueryEvent.target.dispatchEvent(convertJQueryEventToDOM(jQueryEvent));

const translateJQueryEventsToDOM = (target = document, jQuery = window.$) => (...events) => events.forEach((jQueryEventType) => {
  jQuery(target).off(jQueryEventType, dispatchJQueryEventToDOM);
  jQuery(target).on(jQueryEventType, dispatchJQueryEventToDOM);
});

exports.translateJQueryEventsToDOM = translateJQueryEventsToDOM;
exports.default = translateJQueryEventsToDOM;

package.json

{
  "author": {
    "name": "Oleg Galaburda",
    "email": "burdiuz@gmail.com",
    "url": "http://actualwave.com/"
  },
  "bugs": {
    "url": "https://gist.github.com/burdiuz/8119b18ab78468b44b47afe3cff347df",
    "email": "burdiuz@gmail.com"
  },
  "description": "Listens for jQuery events to re-dispatch them from DOM element as CustomEvent",
  "homepage": "https://gist.github.com/burdiuz/8119b18ab78468b44b47afe3cff347df",
  "keywords": [
    "js",
    "javascript",
    "jQuery",
    "DOM",
    "event",
    "dispatchEvent"
  ],
  "license": "MIT",
  "main": "jquery-events-to-dom.js",
  "name": "@actualwave/jquery-events-to-dom",
  "version": "0.0.1"
}