initial list item support

closes #92

Author: bmuenzenmeyer

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: {

builder/list_item_hunter.js

@@ -0,0 +1,109 @@
+/* 
+ * patternlab-node - v0.10.1 - 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();
+
+          //find the boundaries of the block
+          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);
+          }
+
+          //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 = patternlab.listitems['' + items.indexOf(loopNumberString)]; //this is a propety
+            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.length > 0){
+
+              for(var j = 0; j < foundPartials.length; j++){
+                //add the lineage once for the parent pattern
+                //TODO
+
+                //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/object_factory.js

@@ -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

@@ -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 ? JSON.parse(JSON.stringify(pattern.data)) : JSON.parse(JSON.stringify(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);

builder/pattern_assembler.js

@@ -13,12 +13,27 @@
 
   var pattern_assembler = function(){
 
+    function isObjectEmpty(obj) {
+      for(var prop in obj) {
+          if(obj.hasOwnProperty(prop))
+              return false;
+      }
+
+      return true;
+    }
+
+
     //find and return any {{> template-name }} within pattern
     function findPartials(pattern){
       var matches = pattern.template.match(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g);
       return matches;
     }
 
+    function findListItems(pattern){
+      var matches = pattern.template.match(/({{#( )?)(listItems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g);
+      return matches;
+    }
+
     function setState(pattern, patternlab){
       if(patternlab.config.patternStates[pattern.patternName]){
         pattern.patternState = patternlab.config.patternStates[pattern.patternName];
@@ -86,10 +101,12 @@
       lh = require('./lineage_hunter'),
       ph = require('./parameter_hunter'),
       pph = require('./pseudopattern_hunter'),
+      lih = require('./list_item_hunter'),
       path = require('path');
 
       var parameter_hunter = new ph(),
       lineage_hunter = new lh(),
+      list_item_hunter = new lih(),
       pseudopattern_hunter = new pph();
 
       currentPattern.extendedTemplate = currentPattern.template;
@@ -102,6 +119,10 @@
         if(patternlab.config.debug){
           console.log('found partials for ' + currentPattern.key);
         }
+
+        //find any listItem partials
+        list_item_hunter.process_list_item_partials(currentPattern, patternlab);
+
         //determine if the template contains any pattern parameters. if so they must be immediately consumed
         parameter_hunter.find_parameters(currentPattern, patternlab);
 
@@ -166,15 +187,17 @@
       }
       patternlab.listItemArray = shuffle(list);
 
-      for(var i = 1; i <= 12; i++){
-        var top = i;
-        var c = 1;
+      for(var i = 1; i <= patternlab.listItemArray.length; i++){
         var tempItems = [];
-        while(c <= top){
-          tempItems.push(patternlab.listItemArray[c]);
-          c++;
+        if( i === 1){
+          tempItems.push(patternlab.listItemArray[0]);
+          patternlab.listitems['' + i ] = tempItems;
+        } else{
+          for(var c = 1; c <= i; c++){
+            tempItems.push(patternlab.listItemArray[c - 1]);
+            patternlab.listitems['' + i ] = tempItems;
+          }
         }
-        patternlab.listitems['' + i ] = tempItems;
       }
     }
 
@@ -188,6 +211,9 @@
       find_pattern_partials: function(pattern){
         return findPartials(pattern);
       },
+      find_list_items: function(pattern){
+        return findListItems(pattern)
+      },
       setPatternState: function(pattern, patternlab){
         setState(pattern, patternlab);
       },
@@ -211,6 +237,9 @@
       },
       combine_listItems: function(patternlab){
         buildListItems(patternlab);
+      },
+      is_object_empty: function(obj){
+        return isObjectEmpty(obj);
       }
     };
 

builder/patternlab.js

@@ -94,7 +94,6 @@ var patternlab_engine = function () {
       //render the pattern, but first consolidate any data we may have
       var allData =  JSON.parse(JSON.stringify(patternlab.data));
       allData = pattern_assembler.merge_data(allData, pattern.jsonFileData);
-      allData = pattern_assembler.merge_data(allData, pattern.data);
 
       pattern.patternPartial = pattern_assembler.renderPattern(pattern.extendedTemplate, allData);
 

source/_patterns/02-organisms/02-comments/00-comment-thread.mustache

@@ -3,9 +3,9 @@
 		<h2 class="section-title">59 Comments</h2>
 		{{> molecules-comment-form }} 
 		<ul class="comment-list">
-			{{#listItems.twelve}}
+			{{#listItems.five}}
 				{{> molecules-single-comment }} 
-			{{/listItems.twelve}}
+			{{/listItems.five}}
 		</ul>
 	</div>
 	{{> molecules-pagination }}