REDAXO-Addon: Vanilla

REDAXO 5 Addon um jQuery-Events in Vanilla JS abzufangen.

Events

Event	Parameter
`$rex:ready`	[event]
`$pjax:start`	[event, xhr, status, error]
`$pjax:success`	[event, xhr, status]
`$pjax:end`	[event, xhr, settings]
`$pjax:click`	[event, xhr]
`$pjax:error`	[event, elements]

Verwendung

document.addEventListener('$rex:ready', () => console.log('REDAXO is ready'));
document.addEventListener('$pjax:success', event => console.log('Pjax succeeded', event.detail.xhr, event.detail.status));

Weitere Events hinzufügen:

delegatejQueryEvent('jquery:event');
document.addEventListener('$jquery:event', () => console.log('Event fired'));

Weitere Events mit Parametern hinzufügen:

delegatejQueryEvent('jquery:event', ['event', 'param']);
document.addEventListener('$jquery:event', event => console.log('Event fired', event.detail.param));

Alpine.js

Alpine.js Directive:

document.addEventListener('alpine:init', () => {
    Alpine.directive('rex-ready', (element, {expression}, {evaluate, cleanup}) => {
        let readyHandler = () => {
            evaluate(expression)
        }

        window.addEventListener('$rex:ready', readyHandler);

        cleanup(() => {
            window.removeEventListener('$rex:ready', readyHandler)
        })
    });
});

<div x-data="{}"
     x-rex-ready="console.log('REDAXO is ready!')">
</div>

Entwicklung

Assets bauen/minifizieren:

Node Module installieren npm install oder yarn

Assets bauen/minifizieren npm run build oder yarn build

Credits