Skip to content

Instantly share code, notes, and snippets.

@Alan-Liang
Last active July 5, 2017 09:10
Show Gist options
  • Save Alan-Liang/4c4a5fecb1bfa2e7f1f63f616ff545b3 to your computer and use it in GitHub Desktop.
Save Alan-Liang/4c4a5fecb1bfa2e7f1f63f616ff545b3 to your computer and use it in GitHub Desktop.
A simple pjax library without jquery
/*
pjax library for personal use
@author Alan?Liang
*/
var pjax={};
pjax.pagecount=0;
pjax.pages=[];
/*
class pjax.page(string title,string url,function callback)
@param title the title of the page
@param url the url eg. '/index.html'
@param callback the function to call when jumped to the page
usage:
var page=new pjax.page("title","/url",function(){callback;});
var id=page.id;
reminder:please enable the user to go back to your first page by calling this:
pjax.history[0].callback=function(){do_something();};
pjax.pages[0]=pjax.history[0];
*/
pjax.page=function(title,url,callback){
this.title=title;
this.url=url;
this.callback=callback;
this.id=pjax.pagecount;
pjax.pagecount++;
pjax.pages.push(this);
};
pjax.page.prototype.type="page";
pjax.history=[new pjax.page(document.title,window.location.pathname+window.location.search)];
/*
function pjax.push(int page) throws noPageError
function pjax.push(pjax.page page) throws noPageError
@param page the page id or the page object
usage:
pjax.push(pageobj.id);//1
pjax.push(pageobj);
*/
pjax.push=function(page){
var type=typeof page;
if(type=="object")type=page.type;
var pageobj;
switch(type){
case "number":
pageobj=pjax.pages[page];
break;
case "page":
pageobj=page;
break;
default:
break;
}
if(!pageobj)throw new Error("undefined page");
var pagepushed=false;
for(var i=0;i<pjax.history.length;i++){
if(pjax.history[i].id==pageobj.id)
pagepushed=i;
}
if(typeof pagepushed=="boolean"){
pjax.history.push(pageobj);
history.pushState('',{state:pageobj.id},pageobj.url);
pageobj.callback();
}else{
for(var i=pjax.history.length-1;i>pagepushed;i--){
history.go(-1);
}
}
document.title=pageobj.title;
};
/* onpopstate */
window.onpopstate=function(e){
var state=e.state?e.state.state:null;
if(!state){
for(var i=0;i<pjax.pages.length;i++){
if(pjax.pages[i].url==(window.location.pathname+window.location.search))
state=pjax.pages[i].id;
}
}
if(typeof state=="undefined"){
throw new Error("what is the page??? the page is: "+(window.location.pathname+window.location.search));
return;
}
var pagepushed=false;
for(var i=0;i<pjax.history.length;i++){
if(pjax.history[i].id==state)
pagepushed=i;
}
if(typeof pagepushed=="boolean"){
var pageobj;
for(var i=0;i<pjax.pages.length;i++){
if(pjax.pages[i].url==(window.location.pathname+window.location.search))
pageobj=pjax.pages[i];
}
pjax.push(pageobj);
}else{
for(var i=pjax.history.length-1;i>pagepushed;i--){
pjax.history.pop();
}
document.title=pjax.history[pjax.history.length-1].title;
pjax.history[pjax.history.length-1].callback();
}
};
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>page0</title>
<script src="./pjax.js"></script>
</head>
<body>
<div id="control">
<button id="page0">page0</button>
<button id="page1">page1</button>
<button id="page2">page2</button>
<button id="page3">page3</button>
</div>
<div id="test">
default
</div>
<script>
/*
testing pjax.js
*/
var testdiv=document.getElementById("test");
pjax.history[0].callback=function(){
testdiv.innerText="default";
};
var page0=pjax.pages[0]=pjax.history[0];
var page1=new pjax.page("page1","/page1",function(){
testdiv.innerText="page1";
});
var page2=new pjax.page("page2","/page2",function(){
testdiv.innerText="page2";
});
var page3=new pjax.page("page3","/page3",function(){
testdiv.innerText="page3";
});
var p0div=document.getElementById("page0");p0div.onclick=function(){pjax.push(page0);};
var p1div=document.getElementById("page1");p1div.onclick=function(){pjax.push(page1);};
var p2div=document.getElementById("page2");p2div.onclick=function(){pjax.push(2);};
//failure example & test
var p3div=document.getElementById("page3");p3div.onclick=function(){pjax.push();};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment