Skip to content

Commit

Permalink
Merge pull request #178 from pattern-lab/dev
Browse files Browse the repository at this point in the history
Dev push for v0.14.0
  • Loading branch information
Brian Muenzenmeyer committed Nov 6, 2015
2 parents f8c24b2 + fbd6ab2 commit c6cbcdb
Show file tree
Hide file tree
Showing 24 changed files with 529 additions and 201 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.

PL-node-v0.14.0
- ADD: Support for style modifiers
- ADD: Support for styleGuideExcludes
- THX: Thanks to @bramsmulders for the styleGuideExcludes pull request and @illepic for the original headsup
- FIX: Fix an issue where listitem blocks would only render if the pattern containing the block had a partial within it

PL-node-v0.13.1
- FIX: Allow verbose partials for list items
- THX: Thanks @e2tha-e
Expand Down
4 changes: 4 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
38 changes: 38 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,18 @@ If you'd like to exclude an individual pattern you can do so by prepending the f

You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...`

##### Style Guide Excludes

Exclude whole pattern types from the "All patterns" styleguide by adding entries to `config.json`. This is quite useful to make speedier. Pattern Lab Node ships with the following:

```
"styleGuideExcludes": [
"templates",
"pages"
]
```


##### Debug Mode
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.

Expand Down Expand Up @@ -179,6 +191,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.

Expand Down
2 changes: 1 addition & 1 deletion builder/lineage_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
112 changes: 59 additions & 53 deletions builder/list_item_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -15,81 +15,87 @@

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.listitems);

//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 != undefined ? itemData[i] : {}); //itemData could be undefined if the listblock contains no partial, just markup
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);
//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);
}

//replace its reference within the block with the extended template
thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
}
//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);
//render with data
thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);

} else{
//just render with mergedData
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;
}
//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);
//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);

});
}
Expand Down
2 changes: 1 addition & 1 deletion builder/media_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion builder/object_factory.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
21 changes: 13 additions & 8 deletions builder/parameter_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
Expand All @@ -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);

Expand Down
Loading

0 comments on commit c6cbcdb

Please sign in to comment.