Plnode1 6

CHANGELOG

@@ -1,5 +1,14 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
+PL-node-v0.1.6
+ - ADD: media queries found in css added to ish controls
+ - ADD: basic lineage support
+ - ADD: more unit tests
+
+PL-node-v0.1.5
+ - ADD: Added support for live reload via gruntfile
+ - THX: thanks @marcinmodestowicz for the proper syntax!
+
 PL-node-v0.1.4
  - FIX: Resolved issue with nested pattern rendering
  - FIX: Supporting flat pattern name regex's in unix-systems

Gruntfile.js

@@ -19,6 +19,18 @@ module.exports = function(grunt) {
 			object_factory: {
 				src: './builder/object_factory.js',
 				dest: './builder/object_factory.js'
+			},
+			lineage: {
+				src: './builder/lineage_hunter.js',
+				dest: './builder/lineage_hunter.js'
+			},
+			media_hunter: {
+				src: './builder/media_hunter.js',
+				dest: './builder/media_hunter.js'
+			},
+			patternlab_grunt: {
+				src: './builder/patternlab_grunt.js',
+				dest: './builder/patternlab_grunt.js'
 			}
 		},
 		copy: {

README.md

@@ -1,3 +1,5 @@
+[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) 
+
 ## About the Node Version of Pattern Lab
 
 The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.
@@ -78,9 +80,9 @@ Pattern states should be lowercase and use hyphens where spaces are present.
 ##### Server
 Running `grunt serve` will compile the patternlab front end and host it on <a href="http://localhost:9001">http://localhost:9001</a> by default. Page will reload on any saved source code change.
 
-### Under Active Development
+===
 
-[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) The Node version of Pattern Lab is under active development by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md).
+The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md).
 
 ### Forward, To the Specification!
 
@@ -98,53 +100,48 @@ grunt.registerTask('default', ['clean', 'concat', 'patternlab:only_patterns', /*
 
 This will output compiled patterns to ./public/patterns/
 
-===
+### Where is the Gulp Version?
 
-**THE FOLLOWING IS FROM THE PATTERNLAB-PHP PROJECT.  A LOT STILL APPLIES TO PATTERNLAB-NODE, BUT IT HAS NOT BEEN ADAPTED YET.  USE AT YOUR OWN PERIL**
+The core patternlab engine is free of any dependencies to grunt, allowing users to integrate with gulp if desired. Future efforts here will orient towards [this gulp implementation](https://github.com/oscar-g/patternlab-node/tree/dev-gulp) by [oscar-g](https://github.com/oscar-g).
 
 ===
 
-### Demo
-
-You can play with a demo of the front-end of the PHP version of Pattern Lab at [demo.pattern-lab.info](http://demo.pattern-lab.info).
-
-### Getting Started
-
-The PHP version of Pattern Lab should be relatively easy for anyone to get up and running. 
+## Working with Patterns
 
-* [Requirements](https://github.com/pattern-lab/patternlab-php/wiki/Requirements)
-* [Installing the PHP Version of Pattern Lab](https://github.com/pattern-lab/patternlab-php/wiki/Installing-the-PHP-Version-of-Pattern-Lab)
-* [Generating the Pattern Lab Website for the First Time](https://github.com/pattern-lab/patternlab-php/wiki/Generating-the-Pattern-Lab-Website-for-the-First-Time)
-* [Editing the Pattern Lab Website Source Files](https://github.com/pattern-lab/patternlab-php/wiki/Editing-the-Pattern-Lab-Website-Source-Files)
-* [Using the Command-line Options](https://github.com/pattern-lab/patternlab-php/wiki/Using-the-Command-line-Options)
-
-### Working with Patterns
+(The following documentation is built for the PHP version of Pattern Lab, but most applies to the node version too. If you find omissions or mistakes please open an issue.)
 
 Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use [Mustache](http://mustache.github.io/) so please read [Mustache's docs](http://mustache.github.io/mustache.5.html) as well.
 
-* [How Patterns Are Organized](https://github.com/pattern-lab/patternlab-php/wiki/How-Patterns-Are-Organized)
-* [Adding New Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Adding-New-Patterns)
-* [Reorganizing Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Reorganizing-Patterns)
-* [Converting Old Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Converting-Old-Patterns)
-* ["Hiding" Patterns in the Navigation](https://github.com/pattern-lab/patternlab-php/wiki/Hiding-Patterns-in-the-Navigation)
-* [Including One Pattern Within Another via Partials](https://github.com/pattern-lab/patternlab-php/wiki/Including-One-Pattern-Within-Another)
-* [Linking Directly to a Pattern](https://github.com/pattern-lab/patternlab-php/wiki/Linking-Directly-to-a-Pattern)
-* [Managing Assets for a Pattern: JavaScript, images, CSS, etc.](https://github.com/pattern-lab/patternlab-php/wiki/Managing-Assets-for-a-Pattern)
-* [Modifying the Standard Header & Footer for Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Modifying-the-Standard-Header-&-Footer-for-Patterns)
-
-### Creating & Working With Dynamic Data for a Pattern
-
-The PHP version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the [inclusion of one pattern within another](https://github.com/pattern-lab/patternlab-php/wiki/Including-One-Pattern-Within-Another) it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The PHP version of Pattern Lab uses a JSON file, `source/_data/data.json`, to centralize many of these attributes.
-
-* [Introduction to JSON & Mustache Variables](http://github.com/pattern-lab/patternlab-php/wiki/Introduction-to-JSON-&-Mustache-Variables)
-* [Overriding the Central `data.json` Values with Pattern-specific Values](https://github.com/pattern-lab/patternlab-php/wiki/Overriding-the-Central-%60data.json%60-Values-with-Pattern-specific-Values)
-* [Linking to Patterns with Pattern Lab's Default `link` Variable](https://github.com/pattern-lab/patternlab-php/wiki/Linking-to-Patterns-with-Pattern-Lab's-Default-%60link%60-Variable)
-* [Creating Lists with Pattern Lab's Default `listItems` Variable](https://github.com/pattern-lab/patternlab-php/wiki/Creating-Lists-with-Pattern-Lab's-Default-%60listItems%60-Variable)
-
-### Using Pattern Lab's Advanced Features
-
-By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that the PHP version of Pattern Lab can make your development workflow a little smoother:
-
-* [Watching for Changes and Auto-Regenerating Patterns](https://github.com/pattern-lab/patternlab-php/wiki/Watching-for-Changes-and-Auto-Regenerating-Patterns)
-* [Auto-Reloading the Browser Window When Changes Are Made](https://github.com/pattern-lab/patternlab-php/wiki/Auto-Reloading-the-Browser-Window-When-Changes-Are-Made)
-* [Multi-browser & Multi-device Testing with Page Follow](https://github.com/pattern-lab/patternlab-php/wiki/Multi-browser-&-Multi-device-Testing-with-Page-Follow)
+* [How Patterns Are Organized](http://patternlab.io/docs/pattern-organization.html)
+* [Adding New Patterns](http://patternlab.io/docs/pattern-add-new.html)
+* [Reorganizing Patterns](http://patternlab.io/docs/pattern-reorganizing.html)
+* [Including One Pattern Within Another via Partials](http://patternlab.io/docs/pattern-including.html)
+* [Managing Assets for a Pattern: JavaScript, images, CSS, etc.](http://patternlab.io/docs/pattern-managing-assets.html)
+* [Modifying the Pattern Header and Footer](http://patternlab.io/docs/pattern-header-footer.html)
+* [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
+* [Using Pattern State](http://patternlab.io/docs/pattern-states.html)
+* ["Hiding" Patterns in the Navigation](http://patternlab.io/docs/pattern-hiding.html)
+* [Adding Annotations](http://patternlab.io/docs/pattern-adding-annotations.html)
+* [Viewing Patterns on a Mobile Device](http://patternlab.io/docs/pattern-mobile-view.html)
+
+## Creating & Working With Dynamic Data for a Pattern
+
+The Node version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the [inclusion of one pattern within another](http://patternlab.io/docs/pattern-including.html) it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The Node version of Pattern Lab uses a JSON file, `source/_data/data.json`, to centralize many of these attributes.
+
+* [Introduction to JSON & Mustache Variables](http://patternlab.io/docs/data-json-mustache.html)
+* [Overriding the Central `data.json` Values with Pattern-specific Values](http://patternlab.io/docs/data-pattern-specific.html)
+* [Linking to Patterns with Pattern Lab's Default `link` Variable](http://patternlab.io/docs/data-link-variable.html)
+* [Creating Lists with Pattern Lab's Default `listItems` Variable](http://patternlab.io/docs/data-listitems.html)
+
+## Using Pattern Lab's Advanced Features
+
+By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:
+
+* [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
+* [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
+* [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
+* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html) 
+* [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
+* [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
+* [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon
+* [Editing the config.ini Options](http://patternlab.io/docs/advanced-config-options.html) - Node version coming soon

builder/lineage_hunter.js

@@ -0,0 +1,63 @@
+/* 
+ * patternlab-node - v0.1.6 - 2014 
+ * 
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license. 
+ * 
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ *
+ */
+
+(function () {
+	"use strict";
+
+	var lineage_hunter = function(){
+
+		function findlineage(pattern, patternlab){
+
+			pattern.lineage = [];
+			pattern.lineageIndex = [];
+			//find the {{> template-name }} within patterns
+			var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ]+)}}/g);
+			if(matches !== null){
+				matches.forEach(function(match, index, matches){
+					//strip out the template cruft
+					var cleanPattern = match.replace("{{> ", "").replace(" }}", "");
+
+					//add if it doesnt exist
+					if (pattern.lineageIndex.indexOf(cleanPattern) === -1){
+
+						pattern.lineageIndex.push(cleanPattern);
+
+						patternlab.patterns.forEach(function(p, index, patterns){
+
+							//find the pattern in question
+							var searchPattern = p.patternGroup + "-" + p.patternName;
+
+							if(searchPattern === cleanPattern){
+								//create the more complex patternLineage object too
+								var l = {
+									"lineagePattern": cleanPattern,
+									"lineagePath": "../../patterns/" + p.patternLink
+								}
+								pattern.lineage.push(JSON.stringify(l));
+							}
+
+						});
+
+					}
+				});
+			}
+		}
+
+		return {
+			find_lineage: function(pattern, patternlab){
+				findlineage(pattern, patternlab);
+			}
+		};
+
+	};
+
+	module.exports = lineage_hunter;
+
+}());

builder/media_hunter.js

@@ -1,14 +1,40 @@
+/* 
+ * patternlab-node - v0.1.6 - 2014 
+ * 
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license. 
+ * 
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ *
+ */
+
 (function () {
 	"use strict";
 
+	var diveSync = require('diveSync'),
+		path = require('path'),
+		fs = require('fs-extra');
+
 	var media_hunter = function(){
 
 		function findMediaQueries(patternlab){
 			patternlab.mediaQueries = [];
 
-
-
-
+			diveSync('./source/css', function(err, file){
+				if(path.extname(file) === '.css'){
+					var contents = fs.readFileSync(file, 'utf8');
+					var safeContents = contents.replace("\r", " ").replace("\n", " ");
+					var matches = safeContents.match(/\((min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/g);
+					for(var i = 0; i < matches.length; i++){
+						var breakpoint = matches[i].substring(matches[i].indexOf(' ') + 1);
+						if(patternlab.mediaQueries.indexOf(breakpoint) === -1){
+							patternlab.mediaQueries.push(breakpoint);
+						}
+					}
+				}
+			});	
+			//alpha sort for now, but should meet most use-cases except greater than 100ems. you are using ems right?
+			patternlab.mediaQueries.sort();
 		}
 
 		return {
@@ -21,4 +47,23 @@
 
 	module.exports = media_hunter;
 
-}());
+}());
+
+	// protected function gatherMQs() {
+
+	// 	$mqs = array();
+
+	// 	foreach(glob($this->sd."/css/*.css") as $filename) {
+	// 		$data    = file_get_contents($filename);
+	// 		preg_match_all("/(min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/",$data,$matches);
+	// 		foreach ($matches[3] as $match) {
+	// 			if (!in_array($match,$mqs)) {
+	// 				$mqs[] = $match;
+	// 			}
+	// 		}	
+	// 	}
+
+	// 	sort($mqs);
+	// 	return $mqs;
+
+	// }

builder/object_factory.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.1.4 - 2014 
+ * patternlab-node - v0.1.6 - 2014 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 

builder/patternlab.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.1.4 - 2014 
+ * patternlab-node - v0.1.6 - 2014 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -16,6 +16,7 @@ var patternlab_engine = function(){
 		of = require('./object_factory'),
 		pa = require('./pattern_assembler'),
 		mh = require('./media_hunter'),
+		lh = require('./lineage_hunter'),
 		patternlab = {};
 
 	patternlab.package =fs.readJSONSync('./package.json');
@@ -92,6 +93,8 @@ var patternlab_engine = function(){
 			//see if this file has a state
 			if(patternlab.config.patternStates[currentPattern.patternName]){
 				currentPattern.patternState = patternlab.config.patternStates[currentPattern.patternName];
+			} else{
+				currentPattern.patternState = "";
 			}
 
 			//look for a json file for this template
@@ -114,12 +117,16 @@ var patternlab_engine = function(){
 
 			//write the compiled template to the public patterns directory
 			flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html';
+			currentPattern.patternLink = flatPatternPath;
+
+			//find pattern lineage
+			var lineage_hunter = new lh();
+			lineage_hunter.find_lineage(currentPattern, patternlab);
 
 			//add footer info before writing
 			var currentPatternFooter = renderPattern(patternlab.footer, currentPattern);
 
 			fs.outputFileSync('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + currentPatternFooter);
-			currentPattern.patternLink = flatPatternPath;
 
 			//add as a partial in case this is referenced later.  convert to syntax needed by existing patterns
 			var sub = subdir.substring(subdir.indexOf('-') + 1);
@@ -150,9 +157,8 @@ var patternlab_engine = function(){
 		patternlab.viewAllPaths = {};
 
 		//find mediaQueries
-		// var media_hunter = new mh();
-		// media_hunter.find_media_queries(patternlab);
-		// console.log(patternlab.mediaQueries);
+		var media_hunter = new mh();
+		media_hunter.find_media_queries(patternlab);
 
 		//build the styleguide
 		var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8');
@@ -297,6 +303,7 @@ var patternlab_engine = function(){
 
 		//ishControls
 		var ishControlsTemplate = fs.readFileSync('./source/_patternlab-files/partials/ishControls.mustache', 'utf8');
+		patternlab.config.mqs = patternlab.mediaQueries;
 		var ishControlsPartialHtml = renderPattern(ishControlsTemplate, patternlab.config);
 
 		//patternPaths

builder/patternlab-grunt.js → builder/patternlab_grunt.js

@@ -1,3 +1,13 @@
+/* 
+ * patternlab-node - v0.1.6 - 2014 
+ * 
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license. 
+ * 
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ *
+ */
+
 var patternlab_engine = require('./patternlab.js');
 
 module.exports = function(grunt) {

config.json

@@ -16,7 +16,7 @@
  		"ranndom": true,
  		"disco": true,
  		"hay": true,
- 		"mqs": false,
+ 		"mqs": true,
  		"find": false,
  		"views-all": true,
  		"views-annotations": true,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "patternlab-node",
   "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "devDependencies": {
     "grunt": "~0.4.0",
     "grunt-contrib-watch": "~0.6.1",

public/styleguide/js/code-viewer.js

@@ -297,7 +297,7 @@ var codeViewer = {
 			e.preventDefault();
 			$("#sg-code-loader").css("display","block");
 			var obj = JSON.stringify({ "path": urlHandler.getFileName($(this).attr("data-patternpartial")) });
-			document.getElementById("sg-viewport").contentWindow.postMessage(obj,codeViewer.targetOrigin);
+			document.getElementById("sg-viewport").contentWindow.postMessage(JSON.parse(obj),codeViewer.targetOrigin);
 		});
 
 		// show pattern state