0.1.5 • Published 9 months ago
@lyssal/ajax-page-loader v0.1.5
AJAX page loader
The Lyssal AJAX page loader permits to load pages more simply using AJAX. Laodings are created with the Lyssal blinking library.
Installation
Yarn
yarn add @lyssal/ajax-page-loader
NPM
npm install @lyssal/ajax-page-loader
How to use
Set the attribute data-ajax="true"
in your links or submit buttons to activate the AJAX page loader.
Init with:
import '@lyssal/ajax-page-loader/lib/ajax-page-loader.css';
import AjaxPageLoader from '@lyssal/ajax-page-loader/lib/ajax-page-loader.amd';
// You can redefine the elements to activate adding a parameter to the class
let ajaxPageLoader = new AjaxPageLoader();
// For element for all links except if they have the attribute `data-ajax="false"`.
// let ajaxPageLoader = new AjaxPageLoader('a[href]:not([data-ajax="false"])');
// The element in which the page loader will be used
// By default, It is `body`
ajaxPageLoader.setDefaultTarget('#page');
If you have a problem with a form, verify if you have the action
parameter.
Classic use
<link rel="stylesheet" href="{...}/ajax-page-loader/lib/ajax-page-loader.css">
<script type="text/javascript" src="{...}/ajax-page-loader/lib/ajax-page-loader.var.js"></script>
<script type="text/javascript">
var ajaxPageLoader = new AjaxPageLoader();
ajaxPageLoader.setDefaultTarget('#page');
</script>
Advanced functionalities
Default properties
You can define default properties with AjaxPageLoader
.
Read the documentation in the JavaScript file for more informations.
For example:
ajaxPageLoader.setBeforeContentSettingEvent((ajaxLink) => {
// Go to the top of the page
global.window.scrollTo(0, 0);
});
ajaxPageLoader.setAfterContentSettingEvent((ajaxLink) => {
// Update something in the updated DOM
});
ajaxPageLoader.setAfterAjaxLoadingEvent((ajaxLink) => {
// Change the browser tab title
const url = ajaxLink.getUrl();
global.history.pushState({}, null, url);
// Update the tab title
document.title = document.querySelector('h1').textContent;
});
// As we dynamically change the URL, we refresh the page when the user use back / forward buttons
window.addEventListener('popstate', function(event) {
window.location.href = window.location.pathname;
}, false);
Attributes
Always you have to use data-ajax="true"
in your DOM element (but you can customize this attribute with the setSelector()
method).
But you also can add these attributes in specific elements:
data-target
: The element where the page will be loaded, can be emptydata-url
: The URL of the AJAX call (by default, thehref
parameter of the link or theaction
parameter of the form)data-redirect-url
: The redirect location, useful to force a redirection when forms are submitteddata-refresh-target
: The other elements which have to be refreshed (separated with commas) ; usedata-url
anddata-target
on these elementsdata-method
: The HTTP method ; by default It isGET
or the form method for submit buttonsdata-before-ajax-loading
: The function name to call before the AJAX loading (the argument is the AjaxLink element)data-after-ajax-loading
: The function name to call after the AJAX loading (the argument is the AjaxLink element)data-before-form-submitting
: The function name to call before a form submit (the argument is the AjaxLink element)data-after-form-submitting
: The function name to call after a form submit (the argument is the AjaxLink element)data-before-content-setting
: The function name to call before the content setting (the argument is the AjaxLink element)data-after-content-setting
: The function name to call after the content setting (the argument is the AjaxLink element)data-ajax-events="false"
: Unactivate all events
Technical documentation
Expect the documentation in the JavaScript files in the @lyssal/ajax-page-loader/src/
directory.