merging in the latest master goodies

dhg · Jun 25, 2012 · b72c4de · b72c4de
2 parents 46f141e + 2d3a4e4
commit b72c4de
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 20 deletions.
diff --git a/doc-assets/templates/in-the-works.html b/doc-assets/templates/in-the-works.html
@@ -1,9 +1,9 @@
 <section id="in-the-works" class="in-the-works">
   <p class="section-header"><strong>In the works.</strong> These are a few things I am still working on pulling together for Glue:</p>
   <p><strong>Callback after rendereding templates</strong> will allow for custom functions after a Glue template renders</p>
-  <p><strong>Fix multiple render calls</strong> because it's just using uneccessary computing power and is sloppy. Fix it.</p>
   <p><strong>Exit class application</strong> primarily for "animating out" of Glue templates</p>
   <p><strong>Making the index URL accessible from the back button.</strong> Since there is no fragment to indicate template, Glue won't allow you to click "back" to the index.html page.</p>
   <p><strong>Add a data-paramater to Glue links to set the container.</strong> All Glue links right now assume to .glue-container as the wrapping element, but it would be nice to be able to set a different container.</p>
   <p><strong>Use with JS template compilers</strong>. This means you will be able to use syntax of your choice - for example Mustache, Dust or Jade. This will also mean you can mash data into your templates.</p>
+  <p><s><strong>Fix multiple render calls</strong> because it's just using uneccessary computing power and is sloppy. Fix it.</s></p>
 </section>
diff --git a/doc-assets/templates/need-to-know.html b/doc-assets/templates/need-to-know.html
@@ -16,8 +16,8 @@ <h5 class="subsection-header">2. Glue-link is for links to new pages</h5>
 </pre>
     </li>
     <li>
-      <h5 class="subsection-header">3. The .glue-container in your index.html is important</h5>
-      <p>Any content that is going to change from page to page will be loaded into the .glue-container, so leave it in your index.html. Any templates outside of this will persist on every page.</p>
+      <h5 class="subsection-header">3. The .glue-container and layout.html are important</h5>
+      <p>Any content that is going to change from page to page will be loaded into the .glue-container, so leave it in your index.html. Your default template is layout.html at the top level directory.</p>
 <pre class="code-snippet">
 &lt;div class=<span class="code-value">&quot;glue-container&quot;</span>&gt;&lt;/div&gt;</span>
 </pre>

diff --git a/index.html b/index.html
@@ -15,19 +15,7 @@
 <body>
 
   <div class="glue-container">
-    <div data-glue-src="doc-assets/templates/heading"></div>
-    <div class="main-content">
-      <hr>
-      <div data-glue-src="doc-assets/templates/values"></div>
-      <hr>
-      <div data-glue-src="doc-assets/templates/need-to-know"></div>
-      <hr>
-      <div data-glue-src="doc-assets/templates/get-started"></div>
-      <hr>
-      <div data-glue-src="doc-assets/templates/examples"></div>
-      <hr>
-      <div data-glue-src="doc-assets/templates/in-the-works"></div>
-    </div>
+    <div data-glue-src="layout"></div>
   </div>
   <div class="top-noise"></div>
 

diff --git a/layout.html b/layout.html
@@ -0,0 +1,13 @@
+<div data-glue-src="doc-assets/templates/heading"></div>
+<div class="main-content">
+  <hr>
+  <div data-glue-src="doc-assets/templates/values"></div>
+  <hr>
+  <div data-glue-src="doc-assets/templates/need-to-know"></div>
+  <hr>
+  <div data-glue-src="doc-assets/templates/get-started"></div>
+  <hr>
+  <div data-glue-src="doc-assets/templates/examples"></div>
+  <hr>
+  <div data-glue-src="doc-assets/templates/in-the-works"></div>
+</div>
diff --git a/source/glue.js b/source/glue.js
@@ -13,7 +13,11 @@ $(function() {
 
   // Back button -------------------------------------
   window.onpopstate = function(event) {
-    routeToTemplate(getFragment());
+    if(getFragment()) {
+      routeToTemplate(fragment);
+    } else {
+      routeToTemplate('layout')
+    }
   };
 
   // Glue includes -----------------------------------
@@ -28,17 +32,24 @@ $(function() {
   });
 
   function getFragment() {
-    return location.hash.substr(1);
+    var localFrag = location.hash.substr(1);
+    if(location.hash.substr(1)) {
+      fragment = localFrag;
+      return fragment;
+    } else {
+      fragment = null;
+      return false;
+    }
   }
 
   function routeToTemplate(templateName, templateContainer) {
-    $('.rendered').removeClass('rendered');
     templateContainer = templateContainer || defaultYield;
     renderTemplate(templateName, templateContainer);
     location.hash = "#" + templateName;
   }
 
   function renderTemplate(templateName, templateContainer) {
+    $('.rendered').removeClass('rendered');
     $.ajax({
       url: templateName + ".html",
       cache: false
@@ -50,7 +61,7 @@ $(function() {
           renderTemplate($(this).attr('data-glue-src'), $(this));
         })
       } else {
-        defaultYield.addClass('rendered');
+        templateContainer.addClass('rendered');
       }
     });
   }