mq support in ish controls

media query hunter support
reads style.css for the unique max|min widths

unit tests to support this

Author: bmuenzenmeyer

builder/media_hunter.js

@@ -1,14 +1,30 @@
 (function () {
 	"use strict";
 
+	var diveSync = require('diveSync'),
+		path = require('path'),
+		fs = require('fs-extra');
+
 	var media_hunter = function(){
 
 		function findMediaQueries(patternlab){
 			patternlab.mediaQueries = [];
 
-			
-
-			
+			diveSync('./source/css', function(err, file){
+				if(path.extname(file) === '.css'){
+					var contents = fs.readFileSync(file, 'utf8');
+					var safeContents = contents.replace("\r", " ").replace("\n", " ");
+					var matches = safeContents.match(/\((min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/g);
+					for(var i = 0; i < matches.length; i++){
+						var breakpoint = matches[i].substring(matches[i].indexOf(' ') + 1);
+						if(patternlab.mediaQueries.indexOf(breakpoint) === -1){
+							patternlab.mediaQueries.push(breakpoint);
+						}
+					}
+				}
+			});	
+			//alpha sort for now, but should meet most use-cases except greater than 100ems. you are using ems right?
+			patternlab.mediaQueries.sort();
 		}
 
 		return {
@@ -21,4 +37,23 @@
 
 	module.exports = media_hunter;
 
-}());
+}());
+
+	// protected function gatherMQs() {
+		
+	// 	$mqs = array();
+		
+	// 	foreach(glob($this->sd."/css/*.css") as $filename) {
+	// 		$data    = file_get_contents($filename);
+	// 		preg_match_all("/(min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/",$data,$matches);
+	// 		foreach ($matches[3] as $match) {
+	// 			if (!in_array($match,$mqs)) {
+	// 				$mqs[] = $match;
+	// 			}
+	// 		}	
+	// 	}
+		
+	// 	sort($mqs);
+	// 	return $mqs;
+		
+	// }

builder/patternlab.js

@@ -150,9 +150,8 @@ var patternlab_engine = function(){
 		patternlab.viewAllPaths = {};
 
 		//find mediaQueries
-		// var media_hunter = new mh();
-		// media_hunter.find_media_queries(patternlab);
-		// console.log(patternlab.mediaQueries);
+		var media_hunter = new mh();
+		media_hunter.find_media_queries(patternlab);
 
 		//build the styleguide
 		var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8');
@@ -297,6 +296,9 @@ var patternlab_engine = function(){
 
 		//ishControls
 		var ishControlsTemplate = fs.readFileSync('./source/_patternlab-files/partials/ishControls.mustache', 'utf8');
+		console.log(patternlab.mediaQueries);
+		patternlab.config.mqs = patternlab.mediaQueries;
+		console.log(patternlab.config);
 		var ishControlsPartialHtml = renderPattern(ishControlsTemplate, patternlab.config);
 
 		//patternPaths

config.json

@@ -16,7 +16,7 @@
  		"ranndom": true,
  		"disco": true,
  		"hay": true,
- 		"mqs": false,
+ 		"mqs": true,
  		"find": false,
  		"views-all": true,
  		"views-annotations": true,

test/media_hunter_tests.js

@@ -0,0 +1,21 @@
+(function () {
+"use strict";
+
+	var MediaHunter = require('../builder/media_hunter');
+
+	exports['media_query hunter '] = {
+		'test media hunter finds query' : function(test){
+
+			//setup pl object
+			var pl = {};
+			var mh = new MediaHunter();
+
+			mh.find_media_queries(pl);
+
+			test.equals(pl.mediaQueries.length, 6);
+
+			test.done();
+		}
+	};
+
+}());