rikaaa-paging

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);

argument	description
ArrayOfIdAttribute	The parameter to set array of html id attribute. The string of id attribute is equivalent with css selector. The HTML tag with this id will be updated.
NodeListOfAnchorElements	The parameter to set nodelist of anchor element. The webpage transition and hookReady function will be start when this anchor elements clicked.

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;
});

parameter	type	description
config.currentUrl	string	The parameter is current url.
config.href	string	The parameter is new url. The XMLHttpRequest use this parameter with XMLHttpRequest.open method.
config.afterDelay	number	The parameter is delay time. This parameter delay entires.hookStart() method. The default value is 0.
config.onProgress	Function	The parameter is function. This function will be running while XMLHttpRequest.onprogress event triggring. The progress value of XMLHttpRequest will be assigned to argument of this function. This range of value is 0 to 100.
config.onDelay	Function	The parameter is function. This function will be running while Delaying entires.hookStart() method. The progress value of delay will be assigned to argument of this function.

・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;
});

parameter	type	description
config.ready	Record<string,any>	The parameter is same as own argument of function assigned entires.hookReady() method's argument.
config.idAttributes	Array of string	The parameter is same as first argument of contructor.
onfig.currentTargets	Record<string,Element>	The parameter is Record. The key is string of id attribute. The value is Element. This Element will be overwrited by value of config.nextTargets.
config.nextTargets	Record<string,Element>	The parameter is Recorde. The key is string of id attribute. The value is Element. The Element will be added to curent DOM tree.
config.title	string	The parameter is new content of title tag.
config.keywords	Array of string	The parameter is new content of keywords.
config.description	string	The parameter is new content of description.
config.response	Recode<string,any>	The parameter is return value of XMLHttpRequest. However, this value is not parfect return value.
config.afterDelay	number	The parameter is delay time. This parameter delay entires.hookEnd() method. The default value is 0.
config.onDelay	Function	The parameter is function. This function will be running while Delaying entires.hookEnd() method. The progress value of delay will be assigned to argument of this function.

・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;
});

parameter	type	description
config.idAttributes	Array of string	The parameter is same as first argument of contructor.
config.previousTargets	Record<string,Element>	The parameter is Record. The key is string of id attribute. The value is Element. This Element was already overwrited by config.updatedTargets value.
config.updatedTargets	Record<string,Element>	The parameter is Record. The key is string of id attribute. The value is Element. This Element was already added to DOM tree.
config.newUrl	string	The parameter is new url. This parameter is third argument history.pushstate() method.
config.ready	Record<string,any>	The parameter is same as own argument of function assigned entires.hookReady() method's argument.
config.start	Record<string,any>	The parameter is same as own argument of function assigned entires.hookStart() method's argument.
config.afterDelay	number	The parameter is delay time. This parameter delay entires.hookResult() method. The default value is 0.
config.onDelay	Function	The parameter is function. This function will be running while Delaying entires.hookResult() method. The progress value of delay will be assigned to argument of this function.

・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;
});

parameter	type	description
config.oldUrl	string	The parameter is old url. This url will be overwrite by new url.
config.newUrl	string	The parameter is new url.
config.updatedTarget	Record<string,Element>	The parameter is Record. The key is string of id attribute. The value is Element. This Element was already added to DOM tree.
config.previousTarget	Record<string,Element>	The parameter is Record. The key is string of id attribute. The value is Element. This Element was already overwrited by config.updatedTargets value.

・entires.curve(type,value)

---

The function of method will be easing value.

argument	type	description
type	string	The parameter to set easing type. The variety of this parameter is "LINER","EASE_IN","EASE_OUT","EASE_IN_OUT".
value	number	The parameter to set value. This value will be easing. The range of parameter is 0 to 1.

・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