Show "CSS" and "JS" tabs in code section

Gruntfile.js

@@ -76,6 +76,8 @@ module.exports = function(grunt) {
 				files: [
 				'source/_patterns/**/*.mustache',
 				'source/_patterns/**/*.json',
+				'source/_patterns/**/*.css',
+				'source/_patterns/**/*.js',
 				'source/_data/*.json'
 				],
 				tasks: ['default']

builder/patternlab.js

@@ -8,7 +8,7 @@
  *
  */
 
- var patternlab_engine = function(){
+var patternlab_engine = function(){
   var path = require('path'),
   fs = require('fs-extra'),
   extend = require('util')._extend,
@@ -78,8 +78,10 @@
       var subdir = path.dirname(path.relative('./source/_patterns', file)).replace('\\', '/');
       var filename = path.basename(file);
 
-      //ignore _underscored patterns, json (for now), and dotfiles
-      if(filename.charAt(0) === '_' || path.extname(filename) === '.json' || filename.charAt(0) === '.'){
+      //ignore _underscored patterns, json/css/js (for now), and dotfiles
+      if(filename.charAt(0) === '_' ||
+        path.extname(filename) === '.json' || path.extname(filename) === '.css' || path.extname(filename) === '.js' ||
+        filename.charAt(0) === '.'){
         return;
       }
 
@@ -102,6 +104,24 @@
       }
       currentPattern.template = fs.readFileSync(abspath, 'utf8');
 
+      //look for a css file for this template
+      var cssPath = abspath.substr(0, abspath.lastIndexOf(".")) + ".css";
+      var cssExists = fs.existsSync(cssPath);
+
+      if (cssExists) {
+        currentPattern.cssExists = true;
+        currentPattern.css = fs.readFileSync(cssPath, 'utf8');
+      }
+
+      //look for a js file for this template
+      var jsPath = abspath.substr(0, abspath.lastIndexOf(".")) + ".js";
+      var jsExists = fs.existsSync(jsPath);
+
+      if (jsExists) {
+        currentPattern.jsExists = true;
+        currentPattern.js = fs.readFileSync(jsPath, 'utf8');
+      }
+
       //find pattern lineage
       var lineage_hunter = new lh();
       lineage_hunter.find_lineage(currentPattern, patternlab);
@@ -185,6 +205,16 @@ var entity_encoder = new he();
 
       //write the encoded version too
       fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial));
+
+      //write the css file too
+      if(pattern.cssExists){
+        fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.css'), pattern.css);
+      }
+
+      //write the js file too
+      if(pattern.jsExists){
+        fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.js'), pattern.js);
+      }
     });
 
     //export patterns if necessary

public/styleguide/js/code-pattern.js

@@ -7,68 +7,68 @@
  */
 
 var codePattern = {
-	
+
 	codeOverlayActive:  false,
 	codeEmbeddedActive: false,
 	targetOrigin: (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host,
-	
+
 	/**
 	* toggle the annotation feature on/off
 	* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
 	* @param  {Object}      event info
 	*/
 	receiveIframeMessage: function(event) {
-		
+
 		var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
-		
+
 		// does the origin sending the message match the current host? if not dev/null the request
 		if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
 			return;
 		}
-		
+
 		if (data.codeToggle !== undefined) {
-			
+
 			var els, i;
-			
+
 			// if this is an overlay make sure it's active for the onclick event
 			codePattern.codeOverlayActive  = false;
 			codePattern.codeEmbeddedActive = false;
-			
+
 			// see which flag to toggle based on if this is a styleguide or view-all page
 			if ((data.codeToggle == "on") && (document.getElementById("sg-patterns") !== null)) {
 				codePattern.codeEmbeddedActive = true;
 			} else if (data.codeToggle == "on") {
 				codePattern.codeOverlayActive  = true;
 			}
-			
+
 			// if comments embedding is turned off make sure to hide the annotations div
 			if (!codePattern.codeEmbeddedActive && (document.getElementById("sg-patterns") !== null)) {
 				els = document.getElementsByClassName("sg-code");
 				for (i = 0; i < els.length; i++) {
 					els[i].style.display = "none";
 				}
 			}
-			
+
 			// if comments overlay is turned on add the has-comment class and pointer
 			if (codePattern.codeOverlayActive) {
-				
-				var obj = JSON.stringify({ "codeOverlay": "on", "lineage": lineage, "lineageR": lineageR, "patternPartial": patternPartial, "patternState": patternState, "cssEnabled": cssEnabled });
+
+				var obj = JSON.stringify({ "codeOverlay": "on", "lineage": lineage, "lineageR": lineageR, "patternPartial": patternPartial, "patternState": patternState, "cssEnabled": cssEnabled, "jsEnabled": jsEnabled });
 				parent.postMessage(obj,codePattern.targetOrigin);
-				
+
 			} else if (codePattern.codeEmbeddedActive) {
-				
+
 				// if code embedding is turned on simply display them
 				els = document.getElementsByClassName("sg-code");
 				for (i = 0; i < els.length; ++i) {
 					els[i].style.display = "block";
 				}
-				
+
 			}
-			
+
 		}
-		
+
 	}
-	
+
 };
 
 // add the onclick handlers to the elements that have an annotations