Add 'View All' for each subsection in menus and generate required files

Author: walmokrani

builder/object_factory.js

@@ -14,13 +14,13 @@
 	var oPattern = function(subdir, filename, data){
 		this.fileName = filename.substring(0, filename.indexOf('.'));
 		this.subdir = subdir;
-		this.name = (subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName).replace(/\\/g, '-'); //this is the unique name with the subDir
+        this.name = subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName; //this is the unique name with the subDir
 		this.data =  data || null;
 		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);
 		this.patternSubGroup = subdir.substring(subdir.indexOf('/') + 4);
-		this.flatPatternPath = subdir.replace(/\//g, '-');
+        this.flatPatternPath = subdir.replace(/[\/\\]/g, '-');
 		this.key = this.patternGroup + '-' + this.patternName;
 		this.template = '';
 		this.patternPartial = '';

builder/patternlab.js

@@ -75,7 +75,7 @@ var patternlab_engine = function(){
 
 			//extract some information
 			var abspath = file.substring(2);
-			var subdir = path.dirname(path.relative('./source/_patterns', file));
+            var subdir = path.dirname(path.relative('./source/_patterns', file)).replace('\\', '/');
 			var filename = path.basename(file);
 
 			//ignore _underscored patterns, json (for now), and dotfiles
@@ -208,6 +208,33 @@ var patternlab_engine = function(){
 		var styleguideHtml = renderPattern(styleguideTemplate, {partials: patternlab.patterns});
 		fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml);
 
+        //build the viewall pages
+        var prevSubdir = '',
+            i;
+
+        for (i = 0; i < patternlab.patterns.length; i++) {
+            var pattern = patternlab.patterns[i];
+
+            // check if the current sub section is different from the previous one
+            if (pattern.subdir !== prevSubdir) {
+                prevSubdir = pattern.subdir;
+
+                var viewAllPatterns = [],
+                    patternPartial = "viewall-" + pattern.patternGroup + "-" + pattern.patternSubGroup,
+                    j;
+
+                for (j = 0; j < patternlab.patterns.length; j++) {
+                    if (patternlab.patterns[j].subdir == pattern.subdir) {
+                        viewAllPatterns.push(patternlab.patterns[j]);
+                    }
+                }
+
+                var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8');
+                var viewAllHtml = renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial});
+                fs.outputFileSync('./public/patterns/' + pattern.flatPatternPath + '/index.html', viewAllHtml);
+            }
+        }
+
 		//build the patternlab website
 		var patternlabSiteTemplate = fs.readFileSync('./source/_patternlab-files/index.mustache', 'utf8');
 
@@ -222,8 +249,9 @@ var patternlab_engine = function(){
 				//add the bucket
 				var bucket = new of.oBucket(bucketName);
 
-				//add paternPath
+				//add patternPath and viewAllPath
 				patternlab.patternPaths[bucketName] = {};
+                patternlab.viewAllPaths[bucketName] = {};
 
 				//get the navItem
 				var navItemName = pattern.subdir.split('-').pop();
@@ -331,12 +359,26 @@ var patternlab_engine = function(){
 						navItem.navSubItemsIndex.push(navSubItemName);
 					}
 
+                    //add the navViewAllSubItem
+                    var navViewAllSubItem = new of.oNavSubItem("");
+                    navViewAllSubItem.patternName = "View All";
+                    navViewAllSubItem.patternPath = pattern.flatPatternPath + "/index.html";
+                    navViewAllSubItem.patternPartial = "viewall-" + pattern.patternGroup + "-" + pattern.patternSubGroup;
+
+                    //check if we are moving to a new sub section in the next loop
+                    if (pattern.patternSubGroup !== patternlab.patterns[i + 1].patternSubGroup) {
+                        navItem.navSubItems.push(navViewAllSubItem);
+                        navItem.navSubItemsIndex.push("View All");
+                    }
+
 					// just add to patternPaths
 					addToPatternPaths(bucketName, pattern);
 				}
 
 			}
 
+            patternlab.viewAllPaths[bucketName][pattern.patternSubGroup] = pattern.flatPatternPath;
+
 		}
 
 		//the patternlab site requires a lot of partials to be rendered.
@@ -355,14 +397,14 @@ var patternlab_engine = function(){
 
 		//viewAllPaths
 		var viewAllPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/viewAllPaths.mustache', 'utf8');
-		var viewAllPathersPartialHtml = renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)});
+		var viewAllPathsPartialHtml = renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)});
 
 		//render the patternlab template, with all partials
 		var patternlabSiteHtml = renderPattern(patternlabSiteTemplate, {}, {
 			'ishControls': ishControlsPartialHtml,
 			'patternNav': patternNavPartialHtml,
 			'patternPaths': patternPathsPartialHtml,
-			'viewAllPaths': viewAllPathersPartialHtml
+			'viewAllPaths': viewAllPathsPartialHtml
 		});
 		fs.outputFileSync('./public/index.html', patternlabSiteHtml);
 	}

source/_patternlab-files/viewall.mustache

@@ -5,6 +5,7 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width" />
 		<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
+        <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css" media="all" />
 		<link rel="stylesheet" href="../../css/style.css" media="all" />
 	</head>
 	<body class="sg-pattern-list">
@@ -56,6 +57,7 @@
 			var patternPartial = "{{ patternPartial }}";
 			var lineage = "";
 		</script>
+        <script src="../../styleguide/js/vendor/jwerty.js"></script>
 		<script src="../../styleguide/js/postmessage.js"></script>
 		<script src="../../data/annotations.js"></script>
 		<script src="../../styleguide/js/annotations-pattern.js"></script>