@helga-agency/async-loader
v1.8.0
Published
Custom element that loads content through XHR
Downloads
63
Readme
Async Loader
Component that fetches contents asynchronously and displays it when ready:
- support loading indicator
- supports error handling
Example
<async-loader
data-endpoint-url="/testContent.html"
data-trigger-event-names="loadData1,loadData2"
data-trigger-event-filter="(event.type === 'loadData1' && event.detail.loadAsync === true) || event.type === 'loadData2'"
>
<div data-content-container>Initial Content</div>
<template data-loading-template>Loading ...</template>
<template data-error-template>Error: {{message}}</template>
</async-loader>
<button class="regularContentButton">Load</button>
<script>
document.querySelector('.regularContentButton').addEventListener('click', () => {
const options = { bubbles: true, detail: { loadAsync: true } };
window.dispatchEvent(new CustomEvent('loadData', options));
});
</script>
Components
Async Loader
Exposed Element
<async-loader></async-loader>
Attributes
data-endpoint-url
(required ifdata-event-endpoint-property-name
is not set): URL that should be fetched. If bothdata-endpoint-url
anddata-event-endpoint-property-name
are provided,data-endpoint-url
will be preferred.- ~~
data-trigger-event-name
~~ (deprecated): Name of the event that causes content to be loaded; it will be listened to onwindow
. data-trigger-event-names
(required): Comma separated names of the events which will trigger the fetching of the content; they will be listened to onwindow
.data-event-endpoint-property-name
(required ifdata-endpoint-url
is not set): Name of the property in theevent
payload (detail
property of the event object) which contains the endpoint URL. Has no effect ifdata-endpoint-url
is set.data-trigger-event-filter
(optional): JavaScript expression that will be evaluated against the event if provided. Only if the event matches the expression, data will be loaded; if not, the event will be ignored. Only one variable is passed (theEvent
thats name matchesdata-trigger-event-name
); it can be accessed throughevent
.data-load-once
(optional): if this boolean attribute is set, content will load only once, no matter how many times a valid event fires.
Content
The following elements may or must be provided within <aync-loader>
:
- Any element matching
[data-content-container]
(required): Content (loading, error or successfully fetched content) will be placed within this element after it has been emptied. - A
template
element that matches[data-loading-template]
(optional): Its content will be displayed within[data-content-container]
while data is loading. - A
template
element that matches[data-error-template]
(required): Its content will be displayed within[data-content-container]
if loading data fails; you may use a string{{message}}
within the template'stextContent
to display the error message.
Events
- Dispatches
asyncLoaderFail
event if loading content fails (bubbles). - Dispatches
asyncLoaderSuccess
event if loading content succeeds (bubbles). - Both events carry a
detail
object with propertiesurl
(String
, deprecated),response
(instance of Response) andelement
(HTMLElement
that matches the dispatchingAsyncLoader
).