starting ajax stuff

This commit is contained in:
Adam Bradley
2013-08-23 15:59:32 -05:00
parent 246f33e568
commit 1542f75908
4 changed files with 71 additions and 29 deletions

View File

@ -1,2 +1,6 @@
native-examples Framework!
=============== ===============
python -m SimpleHTTPServer 8000
http://localhost:8000/example/

View File

@ -4,13 +4,17 @@
<link rel="stylesheet" href="../dist/framework-theme-default.css"> <link rel="stylesheet" href="../dist/framework-theme-default.css">
</head> </head>
<body> <body>
<header class="bar-header"> <header class="bar-header">
<a class="button-prev" data-previous="true" href="#"> <a class="button-prev" data-history-go="-1" href="#">
Previous Previous
</a> </a>
<h1 class="title">Willkommen!</h1> <h1 class="title">Willkommen!</h1>
</header> </header>
<div class="content">
<main>
<p> <p>
<a class="button button-default" href="grid.html">Grid</a> <a class="button button-default" href="grid.html">Grid</a>
</p> </p>
@ -20,9 +24,17 @@
<p> <p>
<a class="button button-secondary" href="index.html">Home</a> <a class="button button-secondary" href="index.html">Home</a>
</p> </p>
</div> </main>
<footer class="bar-footer">
</footer>
<footer class="bar-footer"></footer>
<script id="framework-globals" type="text/globals">
asdfasf
</script>
<script src="../js/jquery/jquery-1.10.2.js"></script> <script src="../js/jquery/jquery-1.10.2.js"></script>
<script src="../js/framework/framework-utilities.js"></script> <script src="../js/framework/framework-utilities.js"></script>
<script src="../js/framework/framework-navigation.js"></script> <script src="../js/framework/framework-navigation.js"></script>

View File

@ -19,42 +19,49 @@
// A link has been clicked // A link has been clicked
function linkClick(e) { function linkClick(e) {
var
target = e.target,
href = target.getAttribute("href");
// data-previous="true"
// shortcut if they just want to go to the previous page
if(target.dataset.previous === "true") {
window.history.back();
return preventDefault(e);
}
// if they clicked a link while scrolling don't nav to it // if they clicked a link while scrolling don't nav to it
if(framework.isScrolling || href === "#") { if(framework.isScrolling) {
return preventDefault(e); e.preventDefault();
return false;
}
var
target = e.target;
// data-history-go="-1"
// shortcut if they just want to use window.history.go()
if(target.dataset.historyGo) {
window.history.go( parseInt(target.dataset.historyGo, 10) );
e.preventDefault();
return false;
} }
// only intercept the nav click if they're going to the same domain // only intercept the nav click if they're going to the same domain
if (location.protocol === target.protocol && location.host === target.host) { if (location.protocol === target.protocol && location.host === target.host) {
// this link is an anchor to the same page // this link is an anchor to the same page
if(href.indexOf("#") === 0) { if(target.getAttribute("href").indexOf("#") === 0) {
hashLinkClick(target, href); hashLinkClick(target);
} else { } else {
pageLinkClick(target, href); pageLinkClick(target);
} }
return preventDefault(e); e.preventDefault();
return false;
} }
} }
// they are navigating to another URL within the same domain // they are navigating to another URL within the same domain
function pageLinkClick(target, href) { function pageLinkClick(target) {
console.log("pageLinkClick, get:", href); console.log("pageLinkClick, get:", target.href);
push({
url: target.href
});
} }
// they are navigation to an anchor within the same page // they are navigation to an anchor within the same page
function hashLinkClick(target, href) { function hashLinkClick(target) {
console.log("hashLinkClick, get:", href); console.log("hashLinkClick, get:", target.href);
} }
function touchEnd(e) { function touchEnd(e) {
@ -65,9 +72,28 @@
} }
function preventDefault(e) { function push(options) {
e.preventDefault(); framework.isRequesting = true;
return false; var xhr = new XMLHttpRequest();
xhr.open('GET', options.url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if(xhr.status === 200) {
successRequest(xhr, options);
} else {
failedRequest(options.url);
}
}
};
xhr.send();
}
function successRequest(xhr, options) {
framework.isRequesting = false;
}
function failedRequest(options) {
framework.isRequesting = false;
} }
framework.on("ready", function(){ framework.on("ready", function(){

View File