Skip to content

Commit

Permalink
Merge pull request #140 from pattern-lab/dev
Browse files Browse the repository at this point in the history
Dev to Master
  • Loading branch information
Brian Muenzenmeyer committed Aug 26, 2015
2 parents bdd5973 + 31b4dfc commit 7a0b0d9
Show file tree
Hide file tree
Showing 18 changed files with 533 additions and 146 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 4 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
66 changes: 38 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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).
Expand All @@ -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?

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.10.1 - 2015
* patternlab-node - v0.11.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Expand Down
108 changes: 108 additions & 0 deletions builder/list_item_hunter.js
Original file line number Diff line number Diff line change
@@ -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;

}());
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.10.1 - 2015
* patternlab-node - v0.11.0 - 2015
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Expand Down
5 changes: 2 additions & 3 deletions builder/object_factory.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
Expand Down
22 changes: 10 additions & 12 deletions builder/parameter_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
Expand All @@ -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);
Expand Down
Loading

0 comments on commit 7a0b0d9

Please sign in to comment.