Merge pull request #175 from pattern-lab/stylemodifiers

Style Modifier Support

Author: Brian Muenzenmeyer

CHANGELOG

@@ -1,5 +1,8 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
+PL-node-v0.14.0
+- ADD: Support for style modifiers
+
 PL-node-v0.13.1
 - FIX: Allow verbose partials for list items
 - THX: Thanks @e2tha-e

Gruntfile.js

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

README.md

@@ -179,6 +179,32 @@ Pattern parameters **do not** currently support the following:
 
 You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
 
+##### Pattern Style Modifiers
+Style Modifiers allow you to create a base pattern that you can easily modify by adding a class name to the pattern partial. Read more about them [here](http://patternlab.io/docs/pattern-stylemodifier.html), including support with pattern parameters. Below is the gist.
+
+The basic syntax is this:
+
+```
+{{> atoms-message:error }}
+```
+
+This works by using a reserved mustache variable of sorts called {{ styleModifier }} applied to the atoms-message mustache file itself:
+
+```
+<div class="message {{ styleModifier }}">{{ message }}</div>
+```
+
+Once rendered, it looks like this:
+
+```
+<div>
+    <div class="message error"></div>
+</div>
+```
+
+
+
+
 ##### Pseudo-Patterns
 Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.
 

builder/lineage_hunter.js

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

builder/list_item_hunter.js

@@ -1,12 +1,12 @@
-/* 
- * patternlab-node - v0.13.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. 
- *
- */
+/*
+* patternlab-node - v0.14.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";
@@ -15,81 +15,88 @@
 
 		var extend = require('util')._extend,
 		pa = require('./pattern_assembler'),
+		smh = require('./style_modifier_hunter'),
 		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'];
+		style_modifier_hunter = new smh(),
+		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);
+			//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);
-          }
+					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();
+					//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);
-          }
+					//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);
+					//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++){
+					//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 = "";
+						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));
+						//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);
+						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 });
+						//check for partials within the repeated block
+						var foundPartials = pattern_assembler.find_pattern_partials({ 'template' : thisBlockTemplate });
 
-            if(foundPartials && foundPartials.length > 0){
+						if(foundPartials && foundPartials.length > 0){
 
-              for(var j = 0; j < foundPartials.length; j++){
+							for(var j = 0; j < foundPartials.length; j++){
 
-                //get the partial
-                var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[0];
-                var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
+								//get the partial
+								var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[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);
-              }
+								//if partial has style modifier data, replace the styleModifier value
+								if(pattern.stylePartials && pattern.stylePartials.length > 0){
+									style_modifier_hunter.consume_style_modifier(partialPattern, foundPartials[j], patternlab);
+								}
 
-              //render with data
-              thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
+								//replace its reference within the block with the extended template
+								thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
+							}
 
-            } else{
-              //just render with mergedData
-              thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
-            }
+							//render with data
+							thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
 
-            //add the rendered HTML to our string
-            repeatedBlockHtml = repeatedBlockHtml + thisBlockHTML;
-          }
+						} else{
+							//just render with mergedData
+							thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
+						}
 
-          //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);
+						//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);
 
 				});
 			}

builder/media_hunter.js

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

builder/object_factory.js

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

builder/parameter_hunter.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.13.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.14.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. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -16,17 +16,18 @@
 		var extend = require('util')._extend,
 		pa = require('./pattern_assembler'),
 		mustache = require('mustache'),
+		smh = require('./style_modifier_hunter'),
+		style_modifier_hunter = new smh(),
 		pattern_assembler = new pa();
 
 		function findparameters(pattern, patternlab){
 
-			//find the {{> template-name(*) }} within patterns
-			var matches = pattern.template.match(/{{>([ ]+)?([\w\-\.\/~]+)(\()(.+)(\))([ ]+)?}}/g);
-			if(matches !== null){
+			if(pattern.parameteredPartials && pattern.parameteredPartials.length > 0){
 				//compile this partial immeadiately, essentially consuming it.
-				matches.forEach(function(pMatch, index, matches){
-					//find the partial's name
+				pattern.parameteredPartials.forEach(function(pMatch, index, matches){
+					//find the partial's name and retrieve it
 					var partialName = pMatch.match(/([\w\-\.\/~]+)/g)[0];
+					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
 
 					if(patternlab.config.debug){
 						console.log('found patternParameters for ' + partialName);
@@ -40,13 +41,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);
 
-					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
 					var globalData = JSON.parse(JSON.stringify(patternlab.data));
-					var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
+					var localData = JSON.parse(JSON.stringify(pattern.jsonFileData || {}));
 
 					var allData = pattern_assembler.merge_data(globalData, localData);
 					allData = pattern_assembler.merge_data(allData, paramData);
 
+					//if partial has style modifier data, replace the styleModifier value
+					if(pattern.stylePartials && pattern.stylePartials.length > 0){
+						style_modifier_hunter.consume_style_modifier(partialPattern, pMatch, patternlab);
+					}
+
 					//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
 					allData.link = extend({}, patternlab.data.link);