rikaaa-paging v1.0.3

rikaaa-paging.js

rikaaa-paging is plugin in order to impliment asynchronous transition between website's page.
This plugin is using Ajax,History API and Generator.
The function of this plugin similar to pjax and barba.js.
Please see example.

Installation & Usage

import rikaaaPaging from "rikaaa-paging";

var entires = rikaaaPaging(
    ["#header", "#article", "#footer"],
    document.querySelectorAll("a")
);

<script src="rikaaa-paging/dist/rikaaa-paging.iife.js"></script>

var entires = self.rikaaaPaging(
    ["#header", "#article", "#footer"],
    document.querySelectorAll("a")
);

Progress

1. The ahchor element was clicked. browser back | forward.
2. The hookReady() method of this plugin will be triggerd.
3. delay
4. XMLHttpRequest
5. The hookStart() method of this plugin will be triggerd.
6. delay
7. The website will be transformed.
8. The hookEnd() method of this plugin will be triggerd.
9. delay
10. The hookResult() method of this plugin will be triggerd.
11. history.pushState() method will be triggerd. The url was changed.
12. back to list 1.

Constructor

var entires = rikaaaPaging(ArrayOfIdAttribute,NodeListOfAnchorElement);

Methods

・entires.hookReady(function)

The method will be triggerd when the anchor element you seted clicked or browser back / forward.
The argument of this method is must be function with return own argument or function with return "false". If the return value is own argument,The process of this plugin will be continu. If the return value is false, The process of this plugin will be cancel.

var entires = rikaaaPaging(["#header", "#article", "#footer"],document.querySelectorAll("a"));

entires.hookReady(function(config) {
    config.currentUrl;
    config.href;
    config.afterDelay = 1000;
    config.onProgress = function(progressByPercent){
        console.log(progressByPercent);
    };
    config.onDelay = function(progress){
        console.log(progress);
    };

    return config;
});

・entires.hookStart(function)

This method will be triggerd when XMLHttpRequest ended.
If you set "config.afterDelay" parameter with "hookReady" function,this function will be delay. The argument of this method is must be function with return own argument or function with return "false". If the return value is own argument,The process of this plugin will be continu. If the return value is false, The process of this plugin will be cancel.

var entires = rikaaaPaging(["#header", "#article", "#footer"],document.querySelectorAll("a"));



entires.hookStart(function(config) {
    config.ready;
    config.idAttributes;
    config.currentTargets;
    config.nextTargets;
    config.title;
    config.keywords;
    config.description;
    config.response;
    config.afterDelay;
    config.onDelay;

    return config;
});

・entires.hookEnd()

This method will be triggerd when the dom overwrited.
If you set "config.afterDelay" parameter with "hookStart" function,this function will be delay. The argument of this method is must be function with return own argument or function with return "false". If the return value is own argument,The process of this plugin will be continu. If the return value is false, The process of this plugin will be cancel.

var entires = rikaaaPaging(["#header", "#article", "#footer"],document.querySelectorAll("a"));

entires.hookEnd(function(config) {
    config.idAttributes;
    config.previousTargets;
    config.updatedTargets;
    config.newUrl;
    config.ready;
    config.start;
    config.afterDelay;
    config.onDelay;

    return config;
});

・entires.hookResult()

This method will be triggerd when just before history.pushState/history.replaceState.
If you set "config.afterDelay" parameter with "hookEnd" function. this function will be delay.
The argument of this method is function without return value.

var entires = rikaaaPaging(["#header", "#article", "#footer"],document.querySelectorAll("a"));

entires.hookResult(function(config) {
    config.oldUrl;
    config.newUrl;
    config.updatedTarget;
    config.previousTarget;
});

・entires.curve(type,value)

The function of method will be easing value.

・entires.map(value,istart,istop,ostart,ostop)

The function of method is equivalent with map function of Processing.
Prease see https://processing.org/reference/map_.html

Browser Support

• Google Chrome
• Safari
• Firefox
• Edge
• IE 11

License

Apache-2.0 © rikaaa.org