https://github.com/friendsofredaxo/vanilla

Vanilla JS Helper für REDAXO 5
https://github.com/friendsofredaxo/vanilla

jquery redaxo redaxo-addon

Last synced: about 1 month ago
JSON representation

Vanilla JS Helper für REDAXO 5

• Host: GitHub
• URL: https://github.com/friendsofredaxo/vanilla
• Owner: FriendsOfREDAXO
• License: mit
• Created: 2022-12-23T11:39:47.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-11T18:38:39.000Z (3 months ago)
• Last Synced: 2024-09-12T04:55:22.347Z (3 months ago)
• Topics: jquery, redaxo, redaxo-addon
• Language: JavaScript
• Homepage:
• Size: 31.3 KB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```javascript

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:

```javascript

delegatejQueryEvent('jquery:event');

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

```

Weitere Events mit Parametern hinzufügen:

```javascript

delegatejQueryEvent('jquery:event', ['event', 'param']);

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

```

### Alpine.js

Alpine.js Directive:

```javascript

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)

        })

    });

});

```

```html





```


## Entwicklung

Assets bauen/minifizieren:

**Node Module installieren**

`npm install` oder `yarn`

**Assets bauen/minifizieren**

`npm run build` oder `yarn build`

## Credits

**jquery-events-to-dom-events**

https://github.com/leastbad/jquery-events-to-dom-events