use post message to update patterns

Author: dmolsen

public/styleguide/js/url-handler.js

@@ -12,8 +12,9 @@
 
 var urlHandler = {
 
-	// if true it'll make sure iFrames and history aren't updated on back button click
+	// set-up some default vars
 	skipBack: false,
+	targetOrigin: (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host,
 
 	/**
 	* get the real file name for a given pattern name
@@ -117,15 +118,17 @@ var urlHandler = {
 	/**
 	* push a pattern onto the current history based on a click
 	* @param  {String}       the shorthand partials syntax for a given pattern
+	* @param  {String}       the path given by the loaded iframe
 	*/
-	pushPattern: function (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);
+	pushPattern: function (pattern, givenPath) {
+		var data         = { "pattern": pattern };
+		var fileName     = urlHandler.getFileName(pattern);
+		var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
+		if (givenPath != expectedPath) {
+			document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
 		} else {
-			history.pushState(data, "", window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern);
+			var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
+			history.pushState(data, null, addressReplacement);
 		}
 	},
 
@@ -152,10 +155,10 @@ var urlHandler = {
 		var iFramePath = "";
 		iFramePath = this.getFileName(patternName);
 		if (iFramePath == "") {
-			iFramePath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
+			iFramePath = "styleguide/html/styleguide.html";
 		}
 
-		document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
+		document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
 
 		if (wsnConnected) {
 			wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );