asap-js v0.5.2
Asap.js
Create a smooth and animated navigation through your web pages.
Installation
With npm
npm install asap-jsvar Asap = require("asap-js");
/* In your main script
be careful, the script must be present in each page to be launched on the first load */
window.addEventListener("load", function(){
Asap.start();
})With git
git clone https://github.com/SolalDR/Asap.js.gitAdd the script in the head of your documents (don't forget defer)
<script defer src="path/to/asap-js/dist/asap.js"></script>/* In your main script
be careful, the script must be present in each page to be launched on the first load */
window.addEventListener("load", function(){
Asap.start();
})How to use
Configuration
The configuration of Asap.js can be done in two ways. Either by passing a literal object when executing the Asap.start() method, or link by link with html data-attributes.
Initialisation
By default, Asap.js will update the entire document. However, it may be desirable to update only part of the document. This can be usefull for example to keep a header or a video playing in background.
For this reason, you can override this default behavior during the initialisation.
In the example below, the node #myCustomElement2 will replace the content of the node #myCustomElement2.
document.addEventListener("load", function(){
Asap.start({
sourceSelector: "#myCustomElement",
targetSelector: "#myCustomElement2"
})
});Attributes
Several html attributes are available to override the default behaviors.
data-asap-source: The CSS selector of the source element; The source element represents the html node that will contain the resulting content returned by the query after the update. If this attribute is not specified, the source selector by default will be "body" so the response will replace the entire page.data-asap-target: The CSS selector of the target element. The target element represents the node that contains the content to retrieve within the request. If this attribute is not specified, the target selector by default will be "body" so the entire loaded page will be returned.data-asap-off: The link will works in the normal way
Events
Asap offers a usefull events's system to interact at any moment during the life cycle of a visit.
Load
This event fire after parse the ajax response and updating the DOM. It's the equivalent of the classic "window.onload" event for Asap.js.
document.addEventListener("asap:load", function(event){
// Return the loaded visit
console.log(event.detail);
// represent the node which has been updated (body by default)
console.log(event.detail.source);
});Before Load
This event fire after parse the ajax response and before updating the DOM. It is a very usefull event because it allow to make changes on the actual DOM before update.
document.addEventListener("asap:before-load", function(e){
// ... Do some modification
})You can also stop the current visit and load the visit later (or not)
document.addEventListener("asap:before-load", function(e){
// The visit will not be loaded
e.preventDefault();
setTimeout(function(){
// Execute the load method of visit object 1sec later
e.detail.load();
}, 1000)
})How does it work
- All the link
<a>are detect at the begining. - On a click the
hrefattribute is transformed in a formated URL (if possible) - An ajax request is send to this URL
- The raw content of the response is parsed in a virtual HTMLDocument
- The node source in the actual document is replaces by the target node (by default, those elements are
<body>)
Compatibility
Asap.js is write in ES5 syntax.
Contribute
Install the package
git clone https://github.com/SolalDR/Asap.js.gitInstall dependencies
npm installLaunch watching
npm run watchTodo 1.0.0
- Implement history back & forward
- Event asap:before-send : Which is fire before a new request is send
- Implement events directly on Asap.Link object to create custom callback link by link.
- Control content-type in response's headers
- Implement animation system
- Documentation
- Coverage