|
| 1 | +/* eslint-disable no-console */ |
| 2 | +/* eslint-disable no-eval */ |
| 3 | + |
1 | 4 | (() => { |
2 | 5 | const elementsInProgress = {}; |
3 | 6 | const eventsInProgress = {}; |
4 | 7 |
|
5 | | - function dispatchEvents() { |
6 | | - if (arguments.length === 0) { |
| 8 | + function dispatchEvents(...args) { |
| 9 | + if (args.length === 0) { |
7 | 10 | console.error('Please provide at least one event'); |
8 | 11 | } |
9 | 12 |
|
10 | 13 | const els = {}; |
11 | 14 | const events = []; |
12 | 15 | const listeners = [...document.querySelectorAll('[data-haste-ajax-listeners]')]; |
13 | 16 |
|
14 | | - [...arguments].forEach(event => { |
| 17 | + args.forEach((event) => { |
15 | 18 | let eventData = event; |
16 | 19 |
|
17 | 20 | if (typeof event === 'string') { |
|
21 | 24 | let found = false; |
22 | 25 |
|
23 | 26 | // Find the elements that listen to particular event |
24 | | - listeners.forEach(el => { |
| 27 | + listeners.forEach((el) => { |
25 | 28 | if (el.dataset.hasteAjaxListeners.split(' ').indexOf(eventData.name) !== -1) { |
26 | 29 | found = true; |
27 | 30 | els[el.dataset.hasteAjaxId] = el; |
|
34 | 37 | }); |
35 | 38 |
|
36 | 39 | if (Object.keys(els).length > 0 && events.length > 0) { |
37 | | - events.forEach(event => sendRequest(els, event)); |
| 40 | + events.forEach((event) => sendRequest(els, event)); |
38 | 41 | } |
39 | 42 | } |
40 | 43 |
|
|
44 | 47 | eventsInProgress[event.name].abort(); |
45 | 48 | } |
46 | 49 |
|
47 | | - for (const key in els) { |
| 50 | + Object.keys(els).forEach((key) => { |
48 | 51 | // Mark the events to be updated by this event |
49 | 52 | elementsInProgress[key] = event.name; |
50 | 53 |
|
51 | 54 | // Add the CSS class |
52 | 55 | els[key].classList.add('haste-ajax-reloading'); |
53 | | - } |
| 56 | + }); |
54 | 57 |
|
55 | 58 | const xhr = new XMLHttpRequest(); |
56 | 59 |
|
|
61 | 64 | xhr.setRequestHeader('Haste-Ajax-Reload', event.name); |
62 | 65 |
|
63 | 66 | // Set the custom headers |
64 | | - for (const header in event.headers || {}) { |
65 | | - xhr.setRequestHeader(header, event.headers[header]); |
66 | | - } |
| 67 | + Object.entries(event.headers || {}).forEach((v) => { |
| 68 | + xhr.setRequestHeader(...v); |
| 69 | + }); |
67 | 70 |
|
68 | 71 | xhr.onload = () => { |
69 | 72 | if (xhr.status === 200) { |
70 | 73 | const newEls = {}; |
71 | 74 | const entries = JSON.parse(xhr.responseText); |
72 | 75 |
|
73 | | - Object.keys(entries).forEach(id => { |
| 76 | + Object.keys(entries).forEach((id) => { |
74 | 77 | // Replace the entry only if it's marked to be updated by this event |
75 | 78 | if (els[id] && elementsInProgress[id] === event.name) { |
76 | 79 | els[id].outerHTML = entries[id]; |
|
80 | 83 | newEls[id] = document.querySelector(`[data-haste-ajax-id="${id}"]`); |
81 | 84 |
|
82 | 85 | // Execute the <script> tags inside the new element |
83 | | - [...newEls[id].getElementsByTagName('script')].forEach(script => eval(script.innerHTML)); |
| 86 | + [...newEls[id].getElementsByTagName('script')].forEach((script) => eval(script.innerHTML)); |
84 | 87 | } |
85 | 88 | }); |
86 | 89 |
|
87 | 90 | // Dispatch a global custom event |
88 | | - document.dispatchEvent(new CustomEvent('HasteAjaxReloadComplete', { |
89 | | - bubbles: false, |
90 | | - cancelable: false, |
91 | | - detail: { |
92 | | - entries, |
93 | | - event: event.name, |
94 | | - eventData: event, |
95 | | - oldElements: els, |
96 | | - newElements: newEls |
97 | | - } |
98 | | - })); |
| 91 | + document.dispatchEvent( |
| 92 | + new CustomEvent('HasteAjaxReloadComplete', { |
| 93 | + bubbles: false, |
| 94 | + cancelable: false, |
| 95 | + detail: { |
| 96 | + entries, |
| 97 | + event: event.name, |
| 98 | + eventData: event, |
| 99 | + oldElements: els, |
| 100 | + newElements: newEls, |
| 101 | + }, |
| 102 | + }), |
| 103 | + ); |
99 | 104 | } else { |
100 | 105 | console.error(`The request for event "${event.name}" has failed`); |
101 | 106 | console.error(xhr); |
|
0 commit comments