Merge pull request #140 from pattern-lab/dev

Dev to Master

Author: Brian Muenzenmeyer

CHANGELOG

@@ -1,4 +1,11 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
+
+PL-node-v0.11.0
+ - ADD: Ignore pattern directories that start with an underscore.
+ - ADD: Support for lists with the listItems variable
+ - FIX: Resolved issue where pattern parameter data bled into global data object
+ - ADD: Support a fluid viewport
+
 PL-node-v0.10.1
  - ADD: Added more unit tests for recently more-modular code
  - FIX: Lineage was not working for patterns with pattern parameters

Gruntfile.js

@@ -47,6 +47,10 @@ module.exports = function(grunt) {
 			pseudopattern_hunter: {
 				src: './builder/pseudopattern_hunter.js',
 				dest: './builder/pseudopattern_hunter.js'
+			},
+			list_item_hunter: {
+				src: './builder/list_item_hunter.js',
+				dest: './builder/list_item_hunter.js'
 			}
 		},
 		copy: {

README.md

@@ -73,6 +73,40 @@ Pattern states should be lowercase and use hyphens where spaces are present.
 }
 ```
 
+##### Pattern Export
+`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
+
+```
+"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
+"patternExportDirectory": "./pattern_exports/"
+```
+
+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
+
+##### excluding patterns
+
+If you'd like to exclude an individual pattern you can do so by prepending the filename with an underscore, like: `_filename.mustache`
+
+You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...`
+
+##### Verbose Mode
+`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
+
+##### 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.
+
+### Advanced Pattern Library Features
+
 ##### Pattern Parameters
 Pattern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page.
 
@@ -157,32 +191,6 @@ This would compile to:
 As you can see, it's a much easier way of linking patterns to one another.
 
 
-##### Pattern Export
-`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
-
-```
-"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
-"patternExportDirectory": "./pattern_exports/"
-```
-
-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.
-
-##### 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.
-
 ===
 
 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).
@@ -191,9 +199,11 @@ The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitte
 
 You can find some simple upgrade documenation in it's current home here (unreleased but confirmed to work): [https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md](https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md)
 
-### Forward, To the Specification!
+### ROADMAP
+
+A roadmap exists for Pattern Lab Node. Check it out [here](https://github.com/pattern-lab/patternlab-node/issues/134)
 
-Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together.
+Dave Olsen has also published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together.
 
 ### Is Pattern Lab a Platform or a Build Tool?
 

builder/lineage_hunter.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.10.1 - 2015 
+ * patternlab-node - v0.11.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 

builder/list_item_hunter.js

@@ -0,0 +1,108 @@
+/* 
+ * patternlab-node - v0.11.0 - 2015 
+ * 
+ * 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 list_item_hunter = function(){
+
+		var extend = require('util')._extend,
+		pa = require('./pattern_assembler'),
+		mustache = require('mustache'),
+		pattern_assembler = new pa(),
+    items = [ 'zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen','twenty'];
+
+		function processListItemPartials(pattern, patternlab){
+      //find any listitem blocks
+      var matches = pattern_assembler.find_list_items(pattern, patternlab);
+			if(matches !== null){
+				matches.forEach(function(liMatch, index, matches){
+
+          if(patternlab.config.debug){
+            console.log('found listItem of size ' + liMatch + ' inside ' + pattern.key);
+          }
+
+          //find the boundaries of the block
+          var loopNumberString = liMatch.split('.')[1].split('}')[0].trim();
+          var end = liMatch.replace('#', '/');
+          var patternBlock = pattern.template.substring(pattern.template.indexOf(liMatch) + liMatch.length, pattern.template.indexOf(end)).trim();
+
+          //build arrays that repeat the block, however large we need to
+          var repeatedBlockTemplate = [];
+          var repeatedBlockHtml = '';
+          for(var i = 0; i < items.indexOf(loopNumberString); i++){
+            repeatedBlockTemplate.push(patternBlock);
+          }
+
+          //check for a local listitems.json file
+          var listData = JSON.parse(JSON.stringify(patternlab.listitems));
+          listData = pattern_assembler.merge_data(listData, pattern.patternSpecificListJson);
+
+          //iterate over each copied block, rendering its contents along with pattenlab.listitems[i]
+          for(var i = 0; i < repeatedBlockTemplate.length; i++){
+
+            var thisBlockTemplate = repeatedBlockTemplate[i];
+            var thisBlockHTML = "";
+
+            //combine listItem data with pattern data with global data
+            var itemData = listData['' + items.indexOf(loopNumberString)]; //this is a property like "2"
+            var globalData = JSON.parse(JSON.stringify(patternlab.data));
+            var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
+
+            var allData = pattern_assembler.merge_data(globalData, localData);
+            allData = pattern_assembler.merge_data(allData, itemData[i]);
+            allData.link = extend({}, patternlab.data.link);
+
+            //check for partials within the repeated block
+            var foundPartials = pattern_assembler.find_pattern_partials({ 'template' : thisBlockTemplate });
+
+            if(foundPartials && foundPartials.length > 0){
+
+              for(var j = 0; j < foundPartials.length; j++){
+
+                //get the partial
+                var partialName = foundPartials[j].match(/([a-z-]+)/ig)[0];
+                var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
+
+                //replace its reference within the block with the extended template
+                thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
+              }
+
+              //render with data
+              thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
+
+            } else{
+              //just render with mergedData
+              thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
+            }
+
+            //add the rendered HTML to our string
+            repeatedBlockHtml = repeatedBlockHtml + thisBlockHTML;
+          }
+
+          //replace the block with our generated HTML 
+          var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
+          pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);
+
+				});
+			}
+		}
+
+		return {
+			process_list_item_partials: function(pattern, patternlab){
+				processListItemPartials(pattern, patternlab);
+			}
+		};
+
+	};
+
+	module.exports = list_item_hunter;
+
+}());

builder/media_hunter.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.10.1 - 2015 
+ * patternlab-node - v0.11.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 

builder/object_factory.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.10.1 - 2015 
+ * patternlab-node - v0.11.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -15,8 +15,7 @@
     this.fileName = filename.substring(0, filename.indexOf('.'));
     this.subdir = subdir;
     this.name = subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName; //this is the unique name with the subDir
-    this.data =  data || null;
-    this.jsonFileData = {};
+    this.jsonFileData = data || {};
     this.patternName = this.fileName.substring(this.fileName.indexOf('-') + 1); //this is the display name for the ui
     this.patternLink = this.name + '/' + this.name + '.html';
     this.patternGroup = this.name.substring(this.name.indexOf('-') + 1, this.name.indexOf('-', 4) + 1 - this.name.indexOf('-') + 1);

builder/parameter_hunter.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.10.1 - 2015 
+ * patternlab-node - v0.11.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -23,9 +23,10 @@
 			//find the {{> template-name(*) }} within patterns
 			var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(\()(.+)(\))([ ]+)?}}/g);
 			if(matches !== null){
+				//compile this partial immeadiately, essentially consuming it.
 				matches.forEach(function(pMatch, index, matches){
 					//find the partial's name
-					var partialName = pMatch.match(/([a-z-]+)/ig)[0]
+					var partialName = pMatch.match(/([a-z-]+)/ig)[0];
 
 					if(patternlab.config.debug){
 						console.log('found patternParameters for ' + partialName);
@@ -39,20 +40,17 @@
 					//do no evil. there is no good way to do this that I can think of without using a split, which then makes commas and colons special characters and unusable within the pattern params
 					var paramData = eval(paramString);
 
-					//compile this partial immeadiately, essentially consuming it.
 					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
-					var existingData = pattern.data || patternlab.data;
+					var globalData = JSON.parse(JSON.stringify(patternlab.data));
+					var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
 
-					//merge paramData with any other data that exists.
-					for (var prop in paramData) {
-						if (existingData.hasOwnProperty(prop)) {
-							existingData[prop] = paramData[prop];
-						} 
-					}
+					var allData = pattern_assembler.merge_data(globalData, localData);
+					allData = pattern_assembler.merge_data(allData, paramData);
 
 					//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
-					existingData.link = extend({}, patternlab.data.link);
-					var renderedPartial = pattern_assembler.renderPattern(partialPattern.extendedTemplate, existingData, patternlab.partials);
+					allData.link = extend({}, patternlab.data.link);
+
+					var renderedPartial = pattern_assembler.renderPattern(partialPattern.extendedTemplate, allData, patternlab.partials);
 
 					//remove the parameter from the partial and replace it with the rendered partial + paramData
 					pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial);