feature-matrix - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

package.json

 {
   "name": "feature-matrix",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A library for displaying a product's browser version requirements based on the underlying features",
@@ -5,0 +5,0 @@ "author": "Concept Safety Systems",

src/browsers.js

@@ -63,2 +63,3 @@ import parseProductVersionString from './parseProductVersionString';
 			/^ios_saf$/i,
+			/^mobile safari$/i
 		]
@@ -65,0 +66,0 @@ },

src/columns.js

@@ -9,3 +9,9 @@ export function pivot(columns, numRows) {
 		columns.forEach(function (column) {
-			featureSupport.push(column.features[i].support);
+			let support = JSON.parse(JSON.stringify(column.features[i].support))
+
+			if (column.isYourColumn) {
+				support.isYours = true;
+			}
+
+			featureSupport.push(support);
 		});
@@ -12,0 +18,0 @@

src/FeatureMatrix.js

 import $ from 'jquery';
 import browserFeatureProviders from './featureProviders';
-import { browsers } from './browsers';
+import { browsers, parseBrowserName } from './browsers';
 import FeatureMatrixRequirements from './FeatureMatrixRequirements';
@@ -13,8 +13,15 @@ import { pivot, groupColumns } from './columns';
 	for (let c of columns) {
-		if (browsers.length == 0 || browsers[browsers.length - 1].name != c.name) {
+		if (c.isYourColumn) {
 			browsers.push({
 				name: c.name,
 				icon: c.icon,
+				isYourBrowser: true,
 				span: 1
 			});
+		} else if (browsers.length == 0 || browsers[browsers.length - 1].name != c.name || browsers[browsers.length - 1].isYourBrowser) {
+			browsers.push({
+				name: c.name,
+				icon: c.icon,
+				span: 1
+			});
 		} else {
@@ -39,3 +46,5 @@ browsers[browsers.length - 1].span += 1;
 		featureColumnLabel = 'Feature',
-		pluginRequirementGenerator = (plugin, version) => `Requires the installation of ${plugin} ${version}` 
+		pluginRequirementGenerator = (plugin, version) => `Requires the installation of ${plugin} ${version}`,
+		browser = null,
+		version = null
 	} = {}) {
@@ -45,3 +54,4 @@ this.mountpoint = $(mountpoint);
 			requirements, supportedText, unsupportedText, unknownText, 
-			featureColumnLabel, pluginRequirementGenerator, partialText
+			featureColumnLabel, pluginRequirementGenerator, partialText,
+			browser, version
 		});
@@ -65,4 +75,27 @@
 
+		// hunt for a column that matches the user's browser (if we have one)
+		let yourColumn = null;
+		if (this.browser && this.version) {
+			let parsed = parseBrowserName(this.browser);
+			if (parsed) {
+				for (let col of columns) {
+					if (col.key != parsed) {
+						continue;
+					}
+
+					if (col.version == '' + this.version) {
+						yourColumn = col;
+						break;
+					}
+				}
+			}
+		}
+
 		columns = groupColumns(columns);
 
+		if (yourColumn) {
+			yourColumn.isYourColumn = true;
+			columns.unshift(yourColumn);
+		}
+
 		let rows = pivot(columns, this.requirements.features.length);
@@ -80,7 +113,19 @@
 		getBrowsers(columns).forEach((b) => {
-			browserHeaderRow.append('<th colspan="' + b.span + '" class="browser"><img src="' + b.icon + '" alt="" /><br />' + b.name.replace(/\s+/g, '<br />') + "</th>")
+			if (!b.isYourBrowser) {
+				browserHeaderRow.append('<th colspan="' + b.span + '" class="browser"><img src="' + b.icon + '" alt="" /><br />' + b.name.replace(/\s+/g, '<br />') + "</th>")
+			} else {
+				browserHeaderRow.append('<th colspan="' + b.span + '" class="browser yours"><img src="' + b.icon + '" alt="" /><br />Your Browser<br />(' + b.name.replace(/\s+/g, '<br />') + ")</th>")
+				browserHeaderRow.append('<th colspan="1" class="browser filler" />')
+			}
 		});
 
 		// the image is purely decorative, so we use an empty alt="" attribute
-		columns.forEach(col => versionHeaderRow.append('<th class="version">' + col.version + "</th>"));
+		columns.forEach((col) => {
+			if (col.isYourColumn) {
+				versionHeaderRow.append('<th class="version yours">' + col.version + "</th>");
+				versionHeaderRow.append('<th class="version filler"/>');
+			} else {
+				versionHeaderRow.append('<th class="version">' + col.version + "</th>");
+			}
+		});
 
@@ -166,3 +211,3 @@ table.append(header);
 
-		rows.forEach((row) => {
+		rows.forEach((row, i) => {
 			let tr = $("<tr>");
@@ -176,19 +221,32 @@
 			row.support.forEach((s) => {
+				let yoursClass = "";
+				if (s.isYours) {
+					yoursClass = " yours";
+
+					if (i == rows.length - 1) {
+						yoursClass = " yours last";
+					}
+				}
+
 				switch (s.support) {
 					case 'supported':
-						tr.append('<td class="support supported"><span>' + this.supportedText + "</span>" + renderSuperscripts(s, common) + "</td>");
+						tr.append('<td class="support supported' + yoursClass + '"><span>' + this.supportedText + "</span>" + renderSuperscripts(s, common) + "</td>");
 						break;
 
 					case 'partial':
-						tr.append('<td class="support partial"><span>' + this.partialText + "</span>" + renderSuperscripts(s, common) + "</td>");
+						tr.append('<td class="support partial' + yoursClass + '"><span>' + this.partialText + "</span>" + renderSuperscripts(s, common) + "</td>");
 						break;
 
 					case 'unsupported':
-						tr.append('<td class="support unsupported"><span>' + this.unsupportedText + "</span>" + renderSuperscripts(s, common) + "</td>");
+						tr.append('<td class="support unsupported' + yoursClass + '"><span>' + this.unsupportedText + "</span>" + renderSuperscripts(s, common) + "</td>");
 						break;
 
 					default:
-						tr.append('<td class="support unknown"><span>' + this.unknownText + "</span>" + renderSuperscripts(s, common) + "</td>");
+						tr.append('<td class="support unknown' + yoursClass + '"><span>' + this.unknownText + "</span>" + renderSuperscripts(s, common) + "</td>");
 						break;
 				}
+
+				if (s.isYours) {
+					tr.append('<td class="filler" />');
+				}
 			});
@@ -195,0 +253,0 @@

src/FeatureMatrixRequirements.js

@@ -131,2 +131,3 @@ import $ from 'jquery';
 			var versionSupport = {
+				key: browser,
 				name: browsers[browser].shortName,
@@ -133,0 +134,0 @@ version: "" + version,

No alert changes

Improved metrics

Total package byte prevSize

1156676

increased by0.92%

Lines of code

1552

increased by4.3%

No dependency changes