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 (href, callback) {
+
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 + href.path + query;
+
   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 (href) {
+
function loadNewPage (path) {
   NProgress.start();
   NProgress.start();
-
   fetchData(href, function (err, data) {
+
   fetchData(path, function (err, data) {
-
    console.log(data);
+
     data = data.split('<main>')[1];
     data = data.split('<main>')[1];
-
    console.log(data);
 
     data = data.split('</main>')[0];
     data = data.split('</main>')[0];
-
    console.log(data);
 
     document.body.innerHTML = data;
     document.body.innerHTML = data;
 +
    completePageSpecificJobs();
     NProgress.done();
     NProgress.done();
   });
   });
Line 135: Line 133:
   return {
   return {
-
     path: next[0],
+
     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 href = analyzeAnchor(node.href);
+
     var path = analyzeAnchor(node.href);
-
     if (href === false)
+
     if (path === false)
       return true;
       return true;
-
     loadNewPage(href);
+
     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();

}