iframe url with 'patterns' bugfix

Author: scottnath

README.md

@@ -148,6 +148,15 @@ As you can see, it's a much easier way of linking patterns to one another.
 
 Coupled with exported css (much easier to extract with existing tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.
 
+##### baseurl
+
+If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo`
+
+```
+"baseurl" : "/patterns-demo"
+```
+
+Default: blank
 
 ##### Verbose Mode
 `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.

builder/patternlab.js

@@ -174,6 +174,11 @@ var entity_encoder = new he();
         pattern.patternPartial = renderPattern(pattern.template, patternlab.data, patternlab.partials);
       }
 
+      // check for baseurl in config.json
+      if(patternlab.config.baseurl){
+        pattern.baseurl = patternlab.config.baseurl;
+      }
+      
       //add footer info before writing
       var patternFooter = renderPattern(patternlab.footer, pattern);
 

config.json

@@ -32,5 +32,6 @@
       "homepage-emergency" : "inprogress"
   },
   "patternExportKeys": [],
-  "patternExportDirectory": "./pattern_exports/"
+  "patternExportDirectory": "./pattern_exports/",
+  "baseurl" : ""
  }

public/styleguide/js/postmessage.js

@@ -86,10 +86,26 @@ function receiveIframeMessage(event) {
 	if (data.path !== undefined) {
 
 		if (patternPartial !== "") {
-			
+
+			if(baseurl){
+        // create main site url
+        var siteurl = window.location.protocol+"//"+window.location.host;
+        // add a trailing slash if it doesn't exist
+        siteurl = siteurl.replace(/\/?$/, '/');
+        // remove a begining slash for baseurl if it exists
+        baseurl = baseurl.replace(/^\//, '');
+        // connect baseurl to siteurl
+        siteurl = siteurl + baseurl;
+        // add a trailing slash if it doesn't exist
+        siteurl = siteurl.replace(/\/?$/, '/');
+        // build our final path
+        path = siteurl+data.path+'?'+Date.now();
+      } else {
 			// handle patterns and the view all page
-			var re = /patterns\/(.*)$/;
-			path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now();
+        var re = /patterns\/(.*)$/;
+        path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now();
+      }
+      
 			window.location.replace(path);
 
 		} else {

source/_patternlab-files/pattern-header-footer/footer.html

@@ -11,7 +11,8 @@
 		var patternPartial = "{{ patternGroup }}-{{ patternName }}";
 		var lineage = [{{{ lineage }}}];
 		var lineageR = [{{{ lineageR }}}];
-		var patternState = "{{patternState}}"
+		var patternState = "{{patternState}}";
+		var baseurl = "{{{baseurl}}}";
 		var cssEnabled = false; //TODO
 	</script>