Merge branch 'release-0.3.0'

CHANGELOG

@@ -1,5 +1,15 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
+PL-v0.3.0
+ - ADD: added "all" link to the nav that takes the user back to the style guide
+ - ADD: title tag updates when switching patterns
+ - FIX: if a pattern type or pattern sub-type doesn't have any patterns it's removed from the nav
+ - FIX: added styleguide.css to the pattern header
+ - FIX: commented out the video & audio patterns to address an issue w/ Chrome 29, frames, & History API
+ - FIX: reduced the number of comments called in the comment-thread pattern
+ - FIX: patterns won't try to auto-reload if viewed directly
+ - THX: thanks to @bmuenzenmeyer for the "all link" suggestion
+
 PL-v0.2.0
  - ADD: better styling in the overall navigation (via @geibi)
  - FIX: better windows support for the generator and watcher

builder/builder.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Builder CLI - v0.1
+ * Pattern Lab Builder CLI - v0.3.0
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

builder/lib/builder.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Builder Class - v0.1
+ * Pattern Lab Builder Class - v0.3.0
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license
@@ -346,6 +346,7 @@ protected function gatherNavItems() {
 		$b  = array("buckets" => array()); // the array that will contain the items
 		$bi = 0;                           // track the number for the bucket array
 		$ni = 0;                           // track the number for the nav items array
+		$incrementNavItem = true;          // track nav item regeneration so we avoid rebuilding view all pages
 
 		// iterate through each pattern type and add them as buckets
 		foreach($this->patternTypes as $patternType) {
@@ -380,6 +381,12 @@ protected function gatherNavItems() {
 
 				}
 
+				// if all of the patterns for a given pattern type (e.g. atoms) were commented out we need to unset it
+				if (!isset($b["buckets"][$bi]["patternItems"])) {
+					unset($b["buckets"][$bi]);
+					$bi--;
+				}
+
 			} else {
 
 				// iterate over pattern sub-types
@@ -413,6 +420,12 @@ protected function gatherNavItems() {
 
 						}
 
+						// if all of the patterns for a given sub-type were commented out we need to unset it
+						if (!isset($b["buckets"][$bi]["navItems"][$ni]["navSubItems"])) {
+							unset($b["buckets"][$bi]["navItems"][$ni]);
+							$incrementNavItem = false;
+						}
+
 					}
 
 					// add a view all for the section
@@ -428,7 +441,13 @@ protected function gatherNavItems() {
 						$this->viewAllPaths[$vaBucket][$vaDirFinal] = $patternType."-".$dirClean;
 					}
 
-					$ni++;
+					// this feels like such a hacky way of doing it
+					if (!$incrementNavItem) {
+						$incrementNavItem = true;
+					} else {
+						$ni++;
+					}
+
 				}
 			}
 

builder/lib/generator.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Generator Class - v0.1
+ * Pattern Lab Generator Class - v0.3.0
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

builder/lib/watcher.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Watcher Class - v0.1
+ * Pattern Lab Watcher Class - v0.3.0
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

public/styleguide/css/styleguide.css

@@ -55,6 +55,10 @@ html, body {
   background: #dddddd;
   -webkit-text-size-adjust: 100%; }
 
+html#pattern-frame {
+  background: #ffffff;
+}
+
 .sg-nav-wrapper {
   overflow: hidden;
   background: #dddddd; }

public/styleguide/css/styleguide.scss

@@ -112,6 +112,10 @@ html, body {
 	-webkit-text-size-adjust: 100%;
 }
 
+html#pattern-frame {
+	background: #fff;
+}
+
 .sg-nav-wrapper {
 	overflow: hidden;
 	background: $sg-tertiary;

public/styleguide/js/styleguide.js

@@ -1,4 +1,5 @@
 (function(w){
+
 	var sw = document.body.clientWidth, //Viewport Width
 		sh = document.body.clientHeight, //Viewport Height
 		minViewportWidth = 240, //Minimum Size for Viewport
@@ -355,7 +356,7 @@
 	}
 
 	// load the iframe source
-	var patternName = "";
+	var patternName = "all";
 	var patternPath = "";
 	var iFramePath  = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
 	if ((oGetVars.p != undefined) || (oGetVars.pattern != undefined)) {
@@ -364,14 +365,20 @@
 		iFramePath  = (patternPath != "") ? window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+patternPath : iFramePath;
 	}
 
-	document.getElementById("sg-viewport").contentWindow.location.assign(iFramePath);
+	if (patternName != "all") {
+		document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
+		history.replaceState({ "pattern": patternName }, null, null);
+	}
 
-	history.replaceState({ "pattern": patternName }, null, null);
+	urlHandler.skipBack = true;
+	document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
 
 	//IFrame functionality
 
 	//Scripts to run after the page has loaded into the iframe
 	$sgViewport.load(function (){
+
+		/*
 		var $sgSrc = $sgViewport.attr('src'),
 			$vp = $sgViewport.contents(),
 			$sgPattern = $vp.find('.sg-pattern');
@@ -431,6 +438,7 @@
 			});
 			$vp.find('.sg-annotations').show();
 		}
+		*/
 
 		// Pattern Click
 		// this doesn't work because patternlab-php assumes the iframe is being refreshed. not the overall app
@@ -449,15 +457,15 @@
 // having it outside fixes an auto-close bug i ran into
 $('.sg-nav a').not('.sg-acc-handle').on("click", function(e){
 
+	e.preventDefault();
+
 	// update the iframe via the history api handler
-	urlHandler.pushPattern($(this).attr("data-patternpartial"));
+	document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin);
 
 	// close up the menu
 	$(this).parents('.sg-acc-panel').toggleClass('active');
 	$(this).parents('.sg-acc-panel').siblings('.sg-acc-handle').toggleClass('active');
 
-	e.stopPropagation();
-
 	return false;
 
 });
@@ -501,9 +509,12 @@ function receiveIframeMessage(event) {
 
 		if (!urlHandler.skipBack) {
 
-			var iFramePath = urlHandler.getFileName(event.data.patternpartial);
-			urlHandler.pushPattern(event.data.patternpartial, event.data.path);
+			if ((history.state == null) || (history.state.pattern != event.data.patternpartial)) {
+				urlHandler.pushPattern(event.data.patternpartial, event.data.path);
+			}
+
 			if (wsnConnected) {
+				var iFramePath = urlHandler.getFileName(event.data.patternpartial);
 				wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
 			}
 

public/styleguide/js/url-handler.js

@@ -31,6 +31,10 @@ var urlHandler = {
 			return fileName;
 		}
 
+		if (name == "all") {
+			return "styleguide/html/styleguide.html";
+		}
+
 		var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths;
 		nameClean = name.replace("viewall-","");
 
@@ -125,10 +129,13 @@ var urlHandler = {
 		var fileName     = urlHandler.getFileName(pattern);
 		var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
 		if (givenPath != expectedPath) {
+			// make sure to update the iframe because there was a click
 			document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
 		} else {
+			// add to the history
 			var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
 			history.pushState(data, null, addressReplacement);
+			document.getElementById("title").innerHTML = "Pattern Lab - "+pattern;
 		}
 	},
 
@@ -141,13 +148,8 @@ var urlHandler = {
 		var state = e.state;
 
 		if (state == null) {
-			var rVars = this.getRequestVars();
-			if ((rVars.p != undefined) || (rVars.pattern != undefined)) {
-				var patternName = (rVars.p != undefined) ? rVars.p : rVars.pattern;
-			} else {
-				this.skipBack = false;
-				return;
-			}
+			this.skipBack = false;
+			return;
 		} else if (state != null) {
 			var patternName = state.pattern;
 		} 
@@ -159,6 +161,7 @@ var urlHandler = {
 		}
 
 		document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
+		document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
 
 		if (wsnConnected) {
 			wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );

source/_patternlab-files/index.mustache

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>Pattern Lab</title>
+		<title id="title">Pattern Lab</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width" />
 		<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />

source/_patternlab-files/partials/patternNav.mustache

@@ -13,4 +13,5 @@
 		{{/ patternItems }}
 		</ol></li>
 	{{/ buckets }}
+	<li><a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">All</a></li>
 </ol>

source/_patternlab-files/pattern-header-footer/footer.html

@@ -9,8 +9,10 @@
 	<script>
 
 		// alert the iframe parent that the pattern has loaded. for page follow.
-		var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
-		parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
+		if (self != top) {
+			var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+			parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
+		}
 
 		// if there are clicks on the iframe make sure the nav in the iframe parent closes
 		var body = document.getElementsByTagName('body');

source/_patternlab-files/pattern-header-footer/header.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html id="pattern-frame">
 <head>
 	<title>Pattern Lab Pattern</title>
 	<meta charset="UTF-8">
@@ -9,8 +9,9 @@
 		Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
 		Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
 	-->
+
+	<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
 	<link rel="stylesheet" href="../../css/style.css" media="all" />
-	<script src="../../js/modernizr.js"></script>
 </head>
 <body>
 

source/_patternlab-files/styleguide.mustache

@@ -23,6 +23,12 @@
 </div> <!--end #patterns-->
 </div><!--End Style Guide Main Content-->
 <script>
+
+	if (self != top) {
+		var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+		parent.postMessage( { "patternpartial": "all", "path": window.location.toString() }, targetOrigin);
+	}
+	
 	var body = document.getElementsByTagName('body');
 	body[0].onclick = function() {
 		var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
@@ -32,9 +38,11 @@
 	var els = document.getElementsByClassName("patternLink");
 	for (i in els) {
 		els[i].onclick = function() {
-			var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
-			parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
-			return false;
+			if (self != top) {
+				var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+				parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
+				return false;
+			}
 		}
 	}
 	

source/_patternlab-files/viewall.mustache

@@ -25,6 +25,12 @@
 </div><!--end .sg-main-->
 <script>
 	
+	// alert the iframe parent that the pattern has loaded. for page follow.
+	if (self != top) {
+		var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+		parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
+	}
+	
 	var body = document.getElementsByTagName('body');
 	body[0].onclick = function() {
 		var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
@@ -34,16 +40,14 @@
 	var els = document.getElementsByClassName("patternLink");
 	for (i in els) {
 		els[i].onclick = function() {
-			var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
-			parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
-			return false;
+			if (self != top) {
+				var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
+				parent.postMessage( { "patternpartial": this.getAttribute("data-patternpartial"), "path": "foo" }, targetOrigin);
+				return false;
+			}
 		}
 	}
 	
-	// alert the iframe parent that the pattern has loaded. for page follow.
-	var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
-	parent.postMessage( { "patternpartial": "{{ patternPartial }}", "path": window.location.toString() }, targetOrigin);
-	
 	// watch the iframe source so that it can be sent back to everyone else.
 	function receiveIframeMessage(event) {
 		

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