javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

nav/template stuff

Browse Source
This commit is contained in:
Adam Bradley
2013-08-25 22:54:18 -05:00
parent ae871c1613
commit a0ceba83d5
12 changed files with 254 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
js/framework/framework-init.js
View File

@ -8,22 +8,8 @@
// trigger that the DOM is ready
framework.trigger("ready");
// ensure that the start page has an id
var mainElement = document.querySelector("main");
if(mainElement) {
if(!mainElement.id || mainElement.id === "") {
mainElement.id = "pg" + Math.floor( Math.random() * 999999 );
}
// remember what the active page's id is
framework.activePageId = mainElement.id;
// inform the framework that the start page has been added to the DOM
framework.trigger("pagecreate", {id: mainElement.id, url: location.href});
// trigger that the start page is in view
framework.trigger("pageview");
}
// trigger that the start page is in view
framework.trigger("pageview");
}
// When the DOM is ready, initalize the webapp

136
js/framework/framework-navigation.js
View File

@ -1,8 +1,10 @@
(function(window, document, location, framework) {
var
x,
link;
x,
y,
link,
element;
// Add listeners to each link in the document
function addNavListeners() {
@ -17,16 +19,34 @@
}
// Remove listeners from the links in the inactive page element
function removeInactivePageNavListeners(e) {
var element = document.getElementById(e.detail.id);
if(element) {
function removePages(e) {
var removeElements = document.body.getElementsByClassName("remove-element");
for(x = 0; x < removeElements.length; x++) {
element = removeElements[x];
links = element.querySelectorAll("a");
for(x = 0; x < links.length; x++) {
links[x].removeEventListener('click', linkClick, false);
for(y = 0; y < links.length; y++) {
links[y].removeEventListener('click', linkClick, false);
}
element.parentNode.removeChild(element);
}
}
var _init = false;
function locationChange(e) {
if(!_init) {
_init = true;
return;
}
requestData({
url: location.href,
success: successPageLoad,
fail: failedPageLoad
});
}
// A link has been clicked
function linkClick(e) {
@ -36,32 +56,32 @@
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) );
if(e.currentTarget.dataset.historyGo) {
window.history.go( parseInt(e.currentTarget.dataset.historyGo, 10) );
e.preventDefault();
return false;
}
// only intercept the nav click if they're going to the same domain or page
if (location.protocol === target.protocol && location.host === target.host) {
if (location.protocol === e.currentTarget.protocol && location.host === e.currentTarget.host) {
// trigger the event that a new page should be shown
framework.trigger("pageinit", target.href);
framework.trigger("pageinit", e.currentTarget.href);
// decide how to handle this click depending on the href
if(target.getAttribute("href").indexOf("#") === 0) {
if(e.currentTarget.getAttribute("href").indexOf("#") === 0) {
// this click is going to another element within this same page
hashLinkClick(target);
} else {
// this click is going to another page in the same domain
pageLinkClick(target);
requestData({
url: e.currentTarget.href,
success: successPageLoad,
fail: failedPageLoad
});
}
// stop the browser itself from continuing on with this click
@ -71,29 +91,16 @@
}
}
// they are navigating to another URL within the same domain
function pageLinkClick(target) {
push({
url: target.href
});
}
// they are navigation to an anchor within the same page
function hashLinkClick(target) {
console.log("hashLinkClick, get:", target.href);
}
function push(options) {
function requestData(options) {
framework.isRequesting = true;
var xhr = new XMLHttpRequest();
xhr.open('GET', options.url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if(xhr.status === 200) {
successPageLoad(xhr, options);
options.success(xhr, options);
} else {
failedPageLoad(options.url);
options.fail(xhr, options);
}
}
};
@ -102,21 +109,17 @@
function successPageLoad(xhr, options) {
framework.isRequesting = false;
var data = parseXHR(xhr, options);
insertPageIntoDom(data);
framework.trigger("pagetransition", {
newActivePageId: data.id,
url: data.url,
title: data.title
framework.trigger("pageloaded", {
data: parseXHR(xhr, options)
});
}
function failedPageLoad(options) {
framework.trigger("pageinitfailed");
function failedPageLoad(xhr, options) {
framework.isRequesting = false;
framework.trigger("pageinitfailed", {
responseText: xhr.responseText,
responseStatus: xhr.status
});
}
function parseXHR(xhr, options) {
@ -143,51 +146,24 @@
// get the main content of the page
tmp = container.querySelector("main");
if(tmp) {
// get an id for this element
if(!tmp.id || tmp.id === "") {
// it doesn't already have an id, so build a random one for it
data.id = "pg" + Math.floor( Math.random() * 999999 );
} else {
// use their existing id
data.id = tmp.id;
}
data.main = tmp.innerHTML;
} else {
// something is wrong with the data, trigger that the page init failed
framework.trigger("pageinitfailed");
}
return data;
}
function insertPageIntoDom(data) {
if(data && data.main) {
// get the first main element
var oldMainElement = document.querySelector("main");
// build a new main element to hold the new data
var newMainElement = document.createElement("main");
newMainElement.id = data.id;
newMainElement.innerHTML = data.main;
// insert the new main element before the old main element
oldMainElement.parentNode.insertBefore(newMainElement, oldMainElement);
// inform the framework that a new page has been added to the DOM
framework.trigger("pagecreate", {
id: data.id,
url: data.url,
title: data.title
});
} else {
// something is wrong with the data, trigger that the page init failed
framework.trigger("pageinitfailed");
}
}
// after a page has been added to the DOM
framework.on("ready", addNavListeners);
framework.on("pagecreate", addNavListeners);
// before a page is about to be removed from the DOM
framework.on("pageremove", removeInactivePageNavListeners);
framework.on("pageremove", removePages);
// listen to when the location changes
framework.on("popstate", locationChange);
})(this, document, location, FM = this.FM || {});

18
js/framework/framework-template.js
View File

@ -9,13 +9,15 @@
var
x,
el,
emptyTemplates = [];
tmp,
emptyTemplates = [],
container;
// collect up all the templates currently in the DOM
for(x=0; x<document.all.length; x++) {
el = document.all[x];
if(el.dataset.template && !el._templateSet) {
if(el.dataset.template && !el.tSet) {
// this element is either supplying template
// data or it needs to be filled with template data
@ -34,26 +36,32 @@
// lasts for as long as the browser is open and survives over page
// reloads and restores. Opening a page in a new tab or window will
// cause a new session to be initiated.
sessionStorage.setItem(el.dataset.template, el.innerHTML);
sessionStorage.setItem("t:" + el.dataset.template, el.outerHTML);
}
// remember that this is set so we don't bother doing all this
// code again for the same element in the future
el._templateIsSet = true;
el.tSet = true;
}
}
// go through each empty template and build it up with existing template data
for(x=0; x<emptyTemplates.length; x++) {
el = emptyTemplates[x];
tmp = sessionStorage.getItem("t:" + el.dataset.template);
if(tmp) {
// we've got template data, plug it into this element's innerHTML
emptyTemplates[x].innerHTML = tmp;
container = document.createElement("div");
container.innerHTML = tmp;
el.parentNode.replaceChild(container.children[0], el);
}
}
}
framework.on("ready", initTemplates);
framework.on("pagecreate", initTemplates);
})(this, document, FM = this.FM || {});

37
js/framework/framework-transition.js
View File

@ -1,18 +1,41 @@
(function(window, document, framework) {
function transitionBegin(e) {
function initTransition(e) {
var data = e.detail.data;
displayTransition(data);
}
var activePageElement = document.getElementById(framework.activePageId);
if(activePageElement) {
// No animation. Nothing fancy here, just display none to block
function displayTransition(data) {
// build a new main element to hold the new data
var newMainElement = document.createElement("main");
newMainElement.innerHTML = data.main;
activePageElement.parentNode.removeChild(activePageElement);
}
var oldMainElement = document.querySelector("main");
oldMainElement.className += " hide remove-element";
insertPageIntoDom(newMainElement, oldMainElement, data);
history.pushState({}, data.title, data.url);
framework.trigger("pageview");
framework.trigger("pageremove");
}
// insert the new main element before the old main element
function insertPageIntoDom(newMainElement, oldMainElement, data) {
oldMainElement.parentNode.insertBefore(newMainElement, oldMainElement);
// inform the framework that a new page has been added to the DOM
framework.trigger("pagecreate", {
id: data.id,
url: data.url,
title: data.title
});
}
framework.on("pagetransition", transitionBegin);
framework.on("pageloaded", initTransition);
})(this, document, FM = this.FM || {});

10
js/framework/test/event-listeners.js
View File

@ -22,18 +22,18 @@
console.log('pageinitfailed');
});
framework.on('pageloaded', function(e){
console.log('pageloaded,', e.detail.data.url, ", Title:", e.detail.data.title);
});
framework.on('pagecreate', function(e){
console.log('pagecreate, id:', e.detail.id, ", URL:", e.detail.url);
console.log('pagecreate,', e.detail.url);
});
framework.on('pagetransition', function(e){
console.log('pagetransition, newActivePageId:', e.detail.newActivePageId);
});
framework.on('pageload', function(){
console.log('pageload');
});
framework.on('pageview', function(){
console.log('pageview');
});