b980481d0d
* Added InstantClick to frontend docs. * Added linting/formatting section to frontend docs. * Fixed up some wording about linting. * Added documentation about styles to frontend docs. * Fixed a typo. * Cleaned up InstantClick docs. * Fixed a typo
43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# InstantClick
|
|
|
|
Like the [InstantClick](http://instantclick.io/) tag line says, “InstantClick is
|
|
a JavaScript library that dramatically speeds up your website, making navigation
|
|
effectively instant in most cases.”.
|
|
|
|
The way it works is if a user hovers over a hyperlink, chances are their
|
|
intentions are to click on it. InstantClick will start prefetching the page
|
|
while a user is hovering over a hyperlink, so that by the time they do click on
|
|
it, it's instantaneous. On mobile devices, preloading starts on
|
|
[touchstart](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event).
|
|
|
|
Aside from prefetching pages, InstantClick also allows you to customize what
|
|
happens when an InstantClick page changes.
|
|
|
|
```javascript
|
|
// Found in https://github.com/thepracticaldev/dev.to/blob/master/app/javascript/packs/githubRepos.jsx#L11)
|
|
window.InstantClick.on('change', () => {
|
|
loadElement();
|
|
});
|
|
```
|
|
|
|
You can also decide whether or not to reevaluate a script in an InstantClick
|
|
loaded page via the `data-no-instant` attribute.
|
|
|
|
```javascript
|
|
// Found in https://github.com/thepracticaldev/dev.to/blob/master/app/assets/javascripts/utilities/buildCommentHTML.js.erb#L80
|
|
function actions(comment) {
|
|
if (comment.newly_created) {
|
|
return '<div class="actions" data-comment-id="'+comment.id+'" data-path="'+comment.url+'">\
|
|
<span class="current-user-actions" style="display: '+ (comment.newly_created ? 'inline-block' : 'none') +';">\
|
|
<a data-no-instant="" href="'+comment.url+'/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>\
|
|
<a href="'+comment.url+'/edit" class="edit-butt" rel="nofollow">EDIT</a>\
|
|
</span>\
|
|
<a href="#" class="toggle-reply-form" rel="nofollow">REPLY</a>\
|
|
</div>';
|
|
} else {
|
|
...
|
|
```
|
|
|
|
For more information on this, see the
|
|
[Events and script re-evaluation in InstantClick](http://instantclick.io/scripts)
|
|
documentation.
|