Improvements to menu generation

closes #138 closes #160
pattern-lab · Oct 6, 2015 · aa521b9 · aa521b9
1 parent 0c8a530
commit aa521b9
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 36 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -8,6 +8,7 @@ PL-node-v0.13.0
 - THX: Thanks @e2tha-e for finding, fixing, and unit testing the data merge issue.
 - ADD: Support for recursive partial inclusion
 - THX: Thanks @e2tha-e for making pattern inclusion a lot more robust. Great work!!!
+- FIX: Improvements to style guide menu generation and capitalization.
 
 PL-node-v0.12.0
  - ADD: Gulp support arrives with an optional configuration

diff --git a/builder/object_factory.js b/builder/object_factory.js
@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.12.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.12.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. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -17,7 +17,10 @@
     this.subdir = subdir;
     this.name = subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName; //this is the unique name with the subDir
     this.jsonFileData = data || {};
-    this.patternName = this.fileName.replace(/^\d*\-/, ''); //this is the display name for the ui. strip numeric + hyphen prefixes
+    this.patternName = this.fileName.replace(/^\d*\-/, '');
+    this.patternDisplayName = this.patternName.split('-').reduce(function(val, working){
+      return val.charAt(0).toUpperCase() + val.slice(1) + ' ' + working.charAt(0).toUpperCase() + working.slice(1);
+    }, '').trim(); //this is the display name for the ui. strip numeric + hyphen prefixes
     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);
@@ -33,7 +36,9 @@
 
   var oBucket = function(name){
     this.bucketNameLC = name;
-    this.bucketNameUC = name.charAt(0).toUpperCase() + name.slice(1);
+    this.bucketNameUC = name.split('-').reduce(function(val, working){
+      return val.charAt(0).toUpperCase() + val.slice(1) + ' ' + working.charAt(0).toUpperCase() + working.slice(1);
+    }, '').trim();
     this.navItems = [];
     this.navItemsIndex = [];
     this.patternItems = [];
@@ -42,15 +47,19 @@
 
   var oNavItem = function(name){
     this.sectionNameLC = name;
-    this.sectionNameUC = name.charAt(0).toUpperCase() + name.slice(1);
+    this.sectionNameUC = name.split('-').reduce(function(val, working){
+      return val.charAt(0).toUpperCase() + val.slice(1) + ' ' + working.charAt(0).toUpperCase() + working.slice(1);
+    }, '').trim();
     this.navSubItems = [];
     this.navSubItemsIndex = [];
   };
 
   var oNavSubItem = function(name){
     this.patternPath = '';
     this.patternPartial = '';
-    this.patternName = name.charAt(0).toUpperCase() + name.slice(1);
+    this.patternName = name.split(' ').reduce(function(val, working){
+      return val.charAt(0).toUpperCase() + val.slice(1) + ' ' + working.charAt(0).toUpperCase() + working.slice(1);
+    }, '').trim();
   };
 
   module.exports = {

diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js
@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.12.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.12.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. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -113,7 +113,9 @@
       try {
         var jsonFilename = patternlab.config.patterns.source + currentPattern.subdir + '/' + currentPattern.fileName  + ".json";
         currentPattern.jsonFileData = fs.readJSONSync(jsonFilename.substring(2));
-        console.log('found pattern-specific data.json for ' + currentPattern.key);
+        if(patternlab.config.debug){
+          console.log('found pattern-specific data.json for ' + currentPattern.key);
+        }
       }
       catch(e) {
       }
@@ -122,10 +124,12 @@
       try {
         var listJsonFileName = patternlab.config.patterns.source + currentPattern.subdir + '/' + currentPattern.fileName  + ".listitems.json";
         currentPattern.patternSpecificListJson = fs.readJSONSync(listJsonFileName.substring(2));
-        console.log('found pattern-specific listitems.json for ' + currentPattern.key);
+        if(patternlab.config.debug){
+          console.log('found pattern-specific listitems.json for ' + currentPattern.key);
+        }
       }
       catch(e) {
-      }      
+      }
 
       //add the raw template to memory
       currentPattern.template = fs.readFileSync(file, 'utf8');

diff --git a/builder/patternlab.js b/builder/patternlab.js
@@ -217,7 +217,8 @@ var patternlab_engine = function () {
         patternlab.viewAllPaths[bucketName] = {};
 
         //get the navItem
-        var navItemName = pattern.subdir.split('-').pop();
+        var navItemName = pattern.subdir.split('/').pop();
+        navItemName = navItemName.replace(/(\d).(-)/g, '');
 
         //get the navSubItem
         var navSubItemName = pattern.patternName.replace(/-/g, ' ');

diff --git a/source/_patternlab-files/styleguide.mustache b/source/_patternlab-files/styleguide.mustache
@@ -9,21 +9,21 @@
 		<link rel="stylesheet" href="../../css/style.css" media="all" />
 	</head>
 	<body class="sg-pattern-list">
-		
+
 		<!-- Style Guide Main Content -->
 		<div class="sg-main" role="main">
-			
+
 			<!-- Patterns -->
 			<div id="sg-patterns">
 				{{# partials }}
 					<div class="sg-pattern">
-						<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
+						<h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartialPath }}">{{ patternDisplayName }}</a></h2>
 						<div class="sg-pattern-body">
 							{{{ patternPartial }}}
 							<div class="sg-code" style="display: none">
 								{{# patternLineageExists }}
 									<div class="sg-code-contains">
-										This pattern contains: 
+										This pattern contains:
 										{{# patternLineages }}
 											<a href="{{ lineagePath }}"><code>{{ lineagePattern }}</code><a>
 										{{/ patternLineages }}
@@ -48,7 +48,7 @@
 					</div>
 				{{/ partials }}
 			</div> <!--end #sg-patterns-->
-			
+
 		</div><!--End Style Guide Main Content-->
 
 		<!-- JS to hook everything together and do annotations -->
@@ -63,6 +63,6 @@
 		<script src="../../styleguide/js/postmessage.js"></script>
 		<script src="../../data/annotations.js"></script>
 		<script src="../../styleguide/js/annotations-pattern.js"></script>
-		<script src="../../styleguide/js/code-pattern.js"></script>		
+		<script src="../../styleguide/js/code-pattern.js"></script>
 	</body>
-</html>
+</html>
diff --git a/source/_patternlab-files/viewall.mustache b/source/_patternlab-files/viewall.mustache
@@ -9,21 +9,21 @@
     <link rel="stylesheet" href="../../css/style.css" media="all" />
   </head>
   <body class="sg-pattern-list">
-    
+
     <!-- View All Patterns in a Pattern Sub-Type -->
     <div class="sg-main" role="main">
-      
+
       <!-- Patterns -->
       <div id="sg-patterns">
         {{# partials }}
           <div class="sg-pattern">
-            <h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
+            <h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternDisplayName }}</a></h2>
             <div class="sg-pattern-body">
               {{{ patternPartial }}}
               <div class="sg-code" style="display: none">
                 {{# patternLineageExists }}
                   <div class="sg-code-contains">
-                    This pattern contains: 
+                    This pattern contains:
                     {{# patternLineages }}
                       <a href="{{ lineagePath }}"><code>{{ lineagePattern }}</code></a>
                     {{/ patternLineages }}
@@ -48,9 +48,9 @@
           </div>
         {{/ partials }}
       </div> <!--end #sg-patterns-->
-  
+
     </div><!--end .sg-main-->
-    
+
     <!-- JS to hook everything together and do annotations -->
     <script>
       // handle injection of items from patternlab.js
@@ -63,6 +63,6 @@
     <script src="../../data/annotations.js"></script>
     <script src="../../styleguide/js/annotations-pattern.js"></script>
     <script src="../../styleguide/js/code-pattern.js"></script>
-    
+
   </body>
-</html>
+</html>
diff --git a/test/object_factory_tests.js b/test/object_factory_tests.js
@@ -12,6 +12,7 @@
 			test.equals(p.fileName, '00-colors');
 			test.equals(p.jsonFileData.d, 123);
 			test.equals(p.patternName, 'colors');
+			test.equals(p.patternDisplayName, 'Colors');
 			test.equals(p.patternLink, '00-atoms-00-global-00-colors/00-atoms-00-global-00-colors.html');
 			test.equals(p.patternGroup, 'atoms');
 			test.equals(p.patternSubGroup, 'global');
@@ -24,6 +25,12 @@
 			test.equals(p.lineageR.length, 0);
 			test.equals(p.lineageRIndex.length, 0);
 			test.done();
+		},
+		'test oPattern capitalizes patternDisplayName correctly' : function(test){
+			var p = new of.oPattern('source/_patterns/00-atoms/00-global/00-colors-alt.mustache', '00-atoms/00-global', '00-colors-alt.mustache', { d: 123});
+			test.equals(p.patternName, 'colors-alt');
+			test.equals(p.patternDisplayName, 'Colors Alt');
+			test.done();
 		}
 	};
 
@@ -37,26 +44,44 @@
 			test.equals(b.patternItems.length, 0);
 			test.equals(b.patternItemsIndex.length, 0);
 			test.done();
+		},
+		'test oBucket capitalizes bucketNameUC' : function(test){
+			var b = new of.oBucket('page-templates');
+			test.equals(b.bucketNameLC, 'page-templates');
+			test.equals(b.bucketNameUC, 'Page Templates');
+			test.done();
 		}
 	};
 
 	exports['oNavItem initialization'] = {
 		'test oNavItem initializes correctly' : function(test){
 			var ni = new of.oNavItem('test');
 			test.equals(ni.sectionNameLC, 'test');
+			test.equals(ni.sectionNameUC, 'Test');
 			test.equals(ni.navSubItems.length, 0);
 			test.equals(ni.navSubItemsIndex.length, 0);
 			test.done();
+		},
+		'test oNavItem correctly capitalizes sectionNameUC' : function(test){
+			var ni = new of.oNavItem('global-concepts');
+			test.equals(ni.sectionNameLC, 'global-concepts');
+			test.equals(ni.sectionNameUC, 'Global Concepts');
+			test.done();
 		}
 	};
-	
+
 	exports['oSubNavItem initialization'] = {
 		'test oSubNavItem initializes correctly' : function(test){
 			var sni = new of.oNavSubItem('test');
 			test.equals(sni.patternName, 'Test');
 			test.equals(sni.patternPath, '');
 			test.equals(sni.patternPartial, '');
 			test.done();
+		},
+		'test oSubNavItem capitalizes patternName' : function(test){
+			var sni = new of.oNavSubItem('nav button');
+			test.equals(sni.patternName, 'Nav Button');
+			test.done();
 		}
 	};