From a0ceba83d5ecc4faf907777cb41712bef3ebaf65 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sun, 25 Aug 2013 22:54:18 -0500 Subject: [PATCH] nav/template stuff --- README.md | 11 +-- dist/framework-with-theme.css | 7 +- example/buttons.html | 47 ++++----- example/grid.html | 30 +++--- example/index.html | 52 +++++----- example/listview.html | 127 ++++++++++++------------- js/framework/framework-init.js | 18 +--- js/framework/framework-navigation.js | 136 +++++++++++---------------- js/framework/framework-template.js | 18 +++- js/framework/framework-transition.js | 37 ++++++-- js/framework/test/event-listeners.js | 10 +- scss/framework/structure/_base.scss | 7 ++ 12 files changed, 254 insertions(+), 246 deletions(-) diff --git a/README.md b/README.md index 1106fb8641..68137b938f 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,12 @@ Framework! 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 to request. + 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. __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. - 3. __pageload__: The new page the user will view has already been received from the server or cache, and has been placed into the DOM. However, 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. - 4. __pagetransition__: Right before a page transition is about to begin. The new page is in the DOM, but the old page is still being viewed, so its time to transition between the two. The event's detail data contains the `newActivePageId`. - 5. __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. - 6. __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. + 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. + 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. ### WebApp Events diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index 3f98a9898e..7ccda54253 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } @@ -37,6 +36,12 @@ main > * { .content-padded { padding: 10px; } +.hide { + display: none; } + +.show { + display: block; } + .button { position: relative; display: inline-block; diff --git a/example/buttons.html b/example/buttons.html index b14323ee23..425039d458 100644 --- a/example/buttons.html +++ b/example/buttons.html @@ -28,33 +28,34 @@ +
-
+
-
-

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark -

-

-

- Success - Warning - Danger - Dark -
-

-
+
+

+ Default + Secondary + Primary + Info + Success + Warning + Danger + Dark +

+

+

+ Success + Warning + Danger + Dark +
+

+
+
-
- +
diff --git a/example/grid.html b/example/grid.html index b598e9d00f..b6fa086c99 100644 --- a/example/grid.html +++ b/example/grid.html @@ -6,21 +6,25 @@ -
+
-
-

- Grid -

-

- List View -

-

- Home -

-
+
-
+
+

+ Grid +

+

+ List View +

+

+ Home +

+
+ +
+ +
diff --git a/example/index.html b/example/index.html index 5a874a4021..78410f4df2 100644 --- a/example/index.html +++ b/example/index.html @@ -26,33 +26,37 @@ - + -
- - - -

Willkommen!

- - - -
+
-
-

- Button Examples -

-

- List View Example -

-

- Grid Example -

-
+
+ + + +

Willkommen!

+ + + +
-
-

Auf Wiedersehen

-
+
+

+ Button Examples +

+

+ List View Example +

+

+ Grid Example +

+
+ +
+

Auf Wiedersehen

+
+ +
diff --git a/example/listview.html b/example/listview.html index eb67231628..8a0dae24c9 100644 --- a/example/listview.html +++ b/example/listview.html @@ -28,76 +28,71 @@ +
-
+
+
+ +
-
- -
- - -
- - - +
+
diff --git a/js/framework/framework-init.js b/js/framework/framework-init.js index f9ce8f4f8f..3ae6f6596a 100644 --- a/js/framework/framework-init.js +++ b/js/framework/framework-init.js @@ -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 diff --git a/js/framework/framework-navigation.js b/js/framework/framework-navigation.js index ce5fd4cfeb..e20a647725 100644 --- a/js/framework/framework-navigation.js +++ b/js/framework/framework-navigation.js @@ -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 || {}); \ No newline at end of file diff --git a/js/framework/framework-template.js b/js/framework/framework-template.js index 52dd7a01c7..7c7ad85fe1 100644 --- a/js/framework/framework-template.js +++ b/js/framework/framework-template.js @@ -9,13 +9,15 @@ var x, el, - emptyTemplates = []; + tmp, + emptyTemplates = [], + container; // collect up all the templates currently in the DOM for(x=0; x * { .content-padded { padding: $contentPadding; } + +.hide { + display: none; +} +.show { + display: block; +} \ No newline at end of file