Team:HSAAHNU Anhui/inject.js
From 2014hs.igem.org
(Difference between revisions)
(add debug code) |
(add support for html5 history api) |
||
Line 95: | Line 95: | ||
}); | }); | ||
- | function fetchData ( | + | function fetchData (path, callback) { |
var team = '/Team:HSAAHNU_Anhui'; | var team = '/Team:HSAAHNU_Anhui'; | ||
var query = '?action=raw&ctype=text/css'; | var query = '?action=raw&ctype=text/css'; | ||
- | var url = team + | + | var url = team + path.href + query; |
$.ajax(url).done(function (data) { | $.ajax(url).done(function (data) { | ||
callback(null, data); | callback(null, data); | ||
Line 104: | Line 104: | ||
} | } | ||
- | function loadNewPage ( | + | function loadNewPage (path) { |
NProgress.start(); | NProgress.start(); | ||
- | fetchData( | + | fetchData(path, function (err, data) { |
- | + | ||
data = data.split('<main>')[1]; | data = data.split('<main>')[1]; | ||
- | |||
data = data.split('</main>')[0]; | data = data.split('</main>')[0]; | ||
- | |||
document.body.innerHTML = data; | document.body.innerHTML = data; | ||
+ | completePageSpecificJobs(); | ||
NProgress.done(); | NProgress.done(); | ||
}); | }); | ||
Line 135: | Line 133: | ||
return { | return { | ||
- | + | href: next[0], | |
- | anchor: next[1] | + | anchor: next[1], |
}; | }; | ||
} | } | ||
function setupPJAXListener () { | function setupPJAXListener () { | ||
+ | if (history == null) | ||
+ | return; | ||
+ | |||
$("a").click(function (event) { | $("a").click(function (event) { | ||
var node = event.target; | var node = event.target; | ||
- | var | + | var path = analyzeAnchor(node.href); |
- | if ( | + | if (path === false) |
return true; | return true; | ||
- | + | history.pushState(null, null, node.href); | |
+ | loadNewPage(path); | ||
return false; | return false; | ||
+ | }); | ||
+ | |||
+ | window.addEventListener('popstate', function (event) { | ||
+ | loadNewPage(location.pathname); | ||
}); | }); | ||
} | } |
Revision as of 11:06, 30 May 2014
/*
* Basically this script will do the following thing: * Remove old styles. * Remove old script tags. * Apply common stylesheets. (Bootstrap, NProgress) * Apply common scripts. (jQuery, Bootstrap, NProgress) * Update jQuery. * move inner HTML of main tag to body tag for clarity. * Clean up script tags in head tag for debugging purpose. * Set up PJAX for better performance. * Complete page specific jobs. */
var commonStylesheets = [
'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', 'http://ricostacruz.com/nprogress/nprogress.css', '/Team:HSAAHNU_Anhui/normalize.css?action=raw&ctype=text/css'
];
var commonScripts = [
'http://code.jquery.com/jquery-1.11.1.min.js', 'http://ricostacruz.com/nprogress/nprogress.js'
];
function cleanup () {
function removeNodesFromHead (tag, constriant) { constriant = constriant ? constriant : function () { return true; }; var nodes = document.head.getElementsByTagName(tag); var failedCounter = 0; var iterator = 0; while (nodes.length !== failedCounter) { var node = nodes[iterator]; if (constriant(node)) document.head.removeChild(node); else { failedCounter ++; iterator ++; } } };
removeNodesFromHead('style'); removeNodesFromHead('script'); removeNodesFromHead('link', function (node) { var isStylesheet = node.rel === 'stylesheet'; return isStylesheet; });
var main = document.body.getElementsByTagName('main')[0]; document.body.innerHTML = main.innerHTML;
}
function applyCommonResources () {
function applyResources (factory, urls) { urls.forEach(function (url) { var node = factory(url); document.head.appendChild(node); }); };
applyResources(function (url) { var node = document.createElement('link'); node.href = url; node.rel = 'stylesheet'; return node; }, commonStylesheets); applyResources(function (url) { var node = document.createElement('script'); node.src = url; return node; }, commonScripts);
}
var JQueryLoadingTime = 0; function waitForJQueryToBeUpdated () {
//16 seconds is long enough. var isLoadFailed = JQueryLoadingTime >= 32; if (isLoadFailed) alert('One component of this page failed to load. Please refresh!');
var isJQueryUpdated = $.fn.jquery === '1.11.1'; if (isJQueryUpdated) resumeInitAfterJQueryUpdated(); else { JQueryLoadingTime ++; setTimeout(waitForJQueryToBeUpdated, 500); }
}
$(document).ready(function () {
cleanup(); applyCommonResources(); waitForJQueryToBeUpdated();
});
function fetchData (path, callback) {
var team = '/Team:HSAAHNU_Anhui'; var query = '?action=raw&ctype=text/css'; var url = team + path.href + query; $.ajax(url).done(function (data) { callback(null, data); });
}
function loadNewPage (path) {
NProgress.start(); fetchData(path, function (err, data) { data = data.split('<main>')[1]; data = data.split('</main>')[0]; document.body.innerHTML = data; completePageSpecificJobs(); NProgress.done(); });
}
function startsWith (lhs, rhs) {
return lhs.substr(0, rhs.length) === rhs;
}
function analyzeAnchor (href) {
var basePath = 'https://2014hs.igem.org/Team:HSAAHNU_Anhui'; var isOutsideLink = !startsWith(href, basePath); if (isOutsideLink) return false;
var current = document.URL.substr(basePath.length).split('#'); var next = href.substr(basePath.length).split('#');
var isSamePage = current[0] == next[0]; if (isSamePage) return false;
return { href: next[0], anchor: next[1], };
}
function setupPJAXListener () {
if (history == null) return;
$("a").click(function (event) { var node = event.target; var path = analyzeAnchor(node.href); if (path === false) return true;
history.pushState(null, null, node.href); loadNewPage(path); return false; });
window.addEventListener('popstate', function (event) { loadNewPage(location.pathname); });
}
function completePageSpecificJobs () {
var info = thisPageInfo; var isInfoObject = info instanceof Object; if (!isInfoObject) return false;
info.title ? $('title')[0].innerText = info.title : null;
}
function resumeInitAfterJQueryUpdated () {
setupPJAXListener(); completePageSpecificJobs();
}