Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev to Master #140

Merged
merged 9 commits into from
Aug 26, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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