From d160ca6117cdf0436e9d1d027da7e0b2acef2b80 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 26 Aug 2013 10:46:11 -0500 Subject: [PATCH] nav stuff --- README.md | 4 +++- js/framework/framework-init.js | 3 +++ js/framework/framework-navigation.js | 12 +++++----- js/framework/framework-template.js | 1 - js/framework/framework-transition.js | 33 ++++++++++++++++++---------- js/framework/test/event-listeners.js | 4 ---- 6 files changed, 34 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 68137b938f..0043493338 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Page events happen in the order shown and described below: 1. __pageinit__: The user clicked an internal webapp link, which triggers this event before the next page is either requested from the server or retrieved from the cache. The event's detail data contains the URL of the request. - __pageinitfailed__: This event is triggered when something has gone wrong while trying to receive data for the next page to show. - 2. __pageload__: The new page the user will view has already been successfully received from the server or cache. However, it has not been placed into the DOM, it has not started or ended the page transition, it is not in view for the user, and the old page it's replacing is still in view. + 2. __pageloaded__: The new page the user will view has already been successfully received from the server or cache. However, it has not been placed into the DOM, it has not started or ended the page transition, it is not in view for the user, and the old page it's replacing is still in view. 3. __pagecreate__: This event is triggered after the new page has been added to the DOM. However, the new page has not started the transition to be in view yet, and the old page is still in view for the user. 4. __pageview__: The new page the user is viewing has already been received from the server or cache, it has been placed into the DOM, the page transition has completed. This is primarily the event you'll want to listen to to know when a new page is being viewed. Note that while the the old page is not showing, the old page has not been removed from the DOM yet. 5. __pageremove__: The new page is already being viewed by the user and the old page has transitioned out of view. This event is triggered before the old page is about to be removed from the DOM. @@ -24,3 +24,5 @@ Page events happen in the order shown and described below: __ready__: The DOM is ready. +__initalized__: The webapp has been initalized. + diff --git a/js/framework/framework-init.js b/js/framework/framework-init.js index 3ae6f6596a..baecdc835e 100644 --- a/js/framework/framework-init.js +++ b/js/framework/framework-init.js @@ -10,6 +10,9 @@ // trigger that the start page is in view framework.trigger("pageview"); + + // trigger that the webapp has been initalized + framework.trigger("initalized"); } // When the DOM is ready, initalize the webapp diff --git a/js/framework/framework-navigation.js b/js/framework/framework-navigation.js index 9956b8ea08..ad736662d9 100644 --- a/js/framework/framework-navigation.js +++ b/js/framework/framework-navigation.js @@ -68,8 +68,8 @@ } function locationChange(e) { - if(!framework._initPopstate) { - framework._initPopstate = true; + if(!this._initPopstate) { + this._initPopstate = true; return; } @@ -81,7 +81,6 @@ } function requestData(options) { - framework.isRequesting = true; var xhr = new XMLHttpRequest(); xhr.open('GET', options.url, true); xhr.onreadystatechange = function() { @@ -97,14 +96,15 @@ } function successPageLoad(xhr, options) { - framework.isRequesting = false; + var data = parseXHR(xhr, options); framework.trigger("pageloaded", { - data: parseXHR(xhr, options) + data: data }); + history.pushState({}, data.title, data.url); + document.title = data.title; } function failedPageLoad(xhr, options) { - framework.isRequesting = false; framework.trigger("pageinitfailed", { responseText: xhr.responseText, responseStatus: xhr.status diff --git a/js/framework/framework-template.js b/js/framework/framework-template.js index 2bb8c451d3..16cf68cbc7 100644 --- a/js/framework/framework-template.js +++ b/js/framework/framework-template.js @@ -53,7 +53,6 @@ tmp = sessionStorage.getItem("t:" + el.dataset.template); if(tmp) { // we've got template data, plug it into this element's innerHTML - container = document.createElement("div"); container.innerHTML = tmp; diff --git a/js/framework/framework-transition.js b/js/framework/framework-transition.js index 57d9a4a15e..c37c38d8c7 100644 --- a/js/framework/framework-transition.js +++ b/js/framework/framework-transition.js @@ -1,30 +1,41 @@ (function(window, document, framework) { - function initTransition(e) { + function initTransitions(e) { var data = e.detail.data; - displayTransition(data); - } - // No animation. Nothing fancy here, just display none to block - function displayTransition(data) { - // build a new main element to hold the new data + // build a new main element to hold the new html var newMainElement = document.createElement("main"); newMainElement.innerHTML = data.main; + // get the old main element, which will be the first one var oldMainElement = document.querySelector("main"); + // decide how to do the page transition + if(data.transition === "slide-from-left") { + slideStart(newMainElement, oldMainElement, "left"); + } else { + // No animation. Nothing fancy here + noTransition(newMainElement, oldMainElement, data); + } + } + + function noTransition(newMainElement, oldMainElement, data) { + // entirely replace the old element, no transition oldMainElement.parentNode.replaceChild(newMainElement, oldMainElement); framework.trigger("pagecreate", { - id: data.id, url: data.url, title: data.title }); - - history.pushState({}, data.title, data.url); - framework.trigger("pageview"); } - framework.on("pageloaded", initTransition); + function slideStart(newMainElement, oldMainElement, fromDirection) { + // copy what the main element currently looks like into a document fragment + // make all the changes to the document fragment, then replace the + // old main with the two new ones. Both the old and new main will be + // in the DOM, but their CSS classes will do the transitioning for us + } + + framework.on("pageloaded", initTransitions); })(this, document, FM = this.FM || {}); diff --git a/js/framework/test/event-listeners.js b/js/framework/test/event-listeners.js index 189fe6583a..05b608756d 100644 --- a/js/framework/test/event-listeners.js +++ b/js/framework/test/event-listeners.js @@ -30,10 +30,6 @@ console.log('pagecreate,', e.detail.url); }); - framework.on('pagetransition', function(e){ - console.log('pagetransition, newActivePageId:', e.detail.newActivePageId); - }); - framework.on('pageview', function(){ console.log('pageview'); });