Last active
July 5, 2017 09:10
-
-
Save Alan-Liang/4c4a5fecb1bfa2e7f1f63f616ff545b3 to your computer and use it in GitHub Desktop.
A simple pjax library without jquery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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(); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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