Create a smooth and animated navigation through your web pages.
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();
})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();
})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.
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"
})
});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
Asap offers a usefull events's system to interact at any moment during the life cycle of a visit.
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);
});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)
})- 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>)
Asap.js is write in ES5 syntax.
Install the package
git clone https://github.com/SolalDR/Asap.js.gitInstall dependencies
npm installLaunch watching
npm run watch- 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
- Cmd + Click don't open a new tab
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent