nav stuff

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.
+

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

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

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;
 

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 || {});

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');
   });