Merge branch 'history-test'

Author: dmolsen

builder/lib/builder.lib.php

@@ -214,6 +214,7 @@ protected function generateViewAllPages() {
 
 								// get all the rendered partials that match
 								$sid = $this->gatherPartialsByMatch($patternType, $patternSubType);
+								$sid["patternPartial"] = $subItem["patternPartial"];
 
 								// render the viewall template
 								$v = $this->mfs->render('viewall',$sid);

public/styleguide/js/native.history.js

@@ -365,6 +365,8 @@
 
 	document.getElementById("sg-viewport").contentWindow.location.assign(iFramePath);
 
+	history.replaceState({ "pattern": patternName }, null, null);
+	
 	//IFrame functionality
 
 	//Scripts to run after the page has loaded into the iframe
@@ -496,19 +498,16 @@ function receiveIframeMessage(event) {
 
 	} else if (event.data.patternpartial != undefined) {
 
-		// make sure the pop pattern doesn't fire
-		urlHandler.doPop = false;
-		
 		if (!urlHandler.skipBack) {
 			var iFramePath = urlHandler.getFileName(event.data.patternpartial);
 			urlHandler.pushPattern(event.data.patternpartial);
 			if (wsnConnected) {
 				wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
 			}
+			
 		}
 
 		// reset the defaults
-		urlHandler.doPop    = true;
 		urlHandler.skipBack = false;
 
 	}

public/styleguide/js/styleguide.js

@@ -13,7 +13,6 @@
 var urlHandler = {
 
 	// if true it'll make sure iFrames and history aren't updated on back button click
-	doPop:    true,
 	skipBack: false,
 
 	/**
@@ -120,42 +119,56 @@ var urlHandler = {
 	* @param  {String}       the shorthand partials syntax for a given pattern
 	*/
 	pushPattern: function (pattern) {
-		History.pushState({ "pattern": pattern }, null, window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern);
+		var data = { "pattern": pattern };
+		var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+urlHandler.getFileName(pattern);
+		if (document.getElementById("sg-viewport").contentWindow.location.toString() != path) {
+			urlHandler.skipBack = true;
+			document.getElementById("sg-viewport").contentWindow.location.replace(path);
+		} else {
+			history.pushState(data, "", window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern);
+		}
 	},
 
 	/**
 	* based on a click forward or backward modify the url and iframe source
 	* @param  {Object}      event info like state and properties set in pushState()
 	*/
-	popPattern: function (state) {
+	popPattern: function (e) {
 
-		if (state.data == null) {
-			return;
-		}
+		var state = e.state;
 
-		// make sure that the iframe message stuff is skipped
-		this.skipBack = true;
+		if (state == null) {
+			var rVars = this.getRequestVars();
+			if ((rVars.p != undefined) || (rVars.pattern != undefined)) {
+				var patternName = (rVars.p != undefined) ? rVars.p : rVars.pattern;
+			} else {
+				this.skipBack = false;
+				return;
+			}
+		} else if (state != null) {
+			var patternName = state.pattern;
+		} 
 
 		var iFramePath = "";
-		iFramePath = this.getFileName(state.data.pattern);
+		iFramePath = this.getFileName(patternName);
 		if (iFramePath == "") {
 			iFramePath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
 		}
 
 		document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
 
 		if (wsnConnected) {
-			wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+state.data.pattern+'" }' );
+			wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );
 		}
 
 	}
-
+	
 }
 
-History.Adapter.bind(window,'statechange',function(){
-	if (urlHandler.doPop) {
-		var state = History.getState();
-		urlHandler.popPattern(state);
-	}
-	urlHandler.doPop = true;
-});
+/**
+* handle the onpopstate event
+*/
+window.onpopstate = function (event) {
+	urlHandler.skipBack = true;
+	urlHandler.popPattern(event);
+}

public/styleguide/js/url-handler.js

@@ -31,7 +31,6 @@
 		</div>
 		<!--end iFrame-->
 
-		<script src="styleguide/js/native.history.js"></script>
 		<script src="styleguide/js/data-saver.js"></script>
 		{{> patternPaths }}
 		{{> viewAllPaths }}

source/_patternlab-files/index.mustache

@@ -24,17 +24,23 @@
 
 </div><!--end .sg-main-->
 <script>
+	
 	var body = document.getElementsByTagName('body');
 	body[0].onclick = function() {
-		parent.postMessage({"bodyclick":"bodyclick"},window.location.protocol+"//"+window.location.host)
+		parent.postMessage( { "bodyclick":"bodyclick" }, window.location.protocol+"//"+window.location.host)
 	};
+	
 	var els = document.getElementsByClassName("patternLink");
 	for (i in els) {
 		els[i].onclick = function() {
-			parent.postMessage({"patternpartial":this.getAttribute("data-patternpartial")},window.location.protocol+"//"+window.location.host);
+			parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial") }, window.location.protocol+"//"+window.location.host);
 			return false;
 		}
 	}
+	
+	// alert the iframe parent that the pattern has loaded. for page follow.
+	parent.postMessage( { "url": window.location.host, "patternpartial": "{{ patternPartial }}" },window.location.protocol+"//"+window.location.host);
+	
 </script>
 </body>
 </html>