Patch for https://github.com/ijprest/keyboard-layout-editor/issues/52

gistfile1.diff

From 065c49efe04a92b71465a54f935e9211e2393cd7 Mon Sep 17 00:00:00 2001
From: Kevin Schoedel <[email protected]>
Date: Thu, 19 Dec 2013 13:49:13 -0500
Subject: [PATCH] Add user-defined color palettes.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The “Color Swatches” menu option “Current key colors” builds a palette
from the colors in use in the layout.

https://github.com/ijprest/keyboard-layout-editor/issues/52
---
 kb.html |  4 +++-
 kb.js   | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/kb.html b/kb.html
index 917fd7d..2617bf5 100644
--- a/kb.html
+++ b/kb.html
@@ -57,6 +57,8 @@ All rights reserved.
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-th"></i> Color Swatches <b class="caret"></b></a>
 			<ul class="dropdown-menu">
 				<li ng-repeat="pal in palettes"><a ng-click="loadPalette(pal)" href="#">{{pal.name}}</a></li>
+				<li class="divider"></li>
+				<li><a ng-click="makePaletteFromKeys()" href="#">Current key colors</a></li>
 			</ul>
 		</li>	
 	</ul>
@@ -416,4 +418,4 @@ All rights reserved.
 	</div>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/kb.js b/kb.js
index 5366568..acd43f1 100644
--- a/kb.js
+++ b/kb.js
@@ -398,7 +398,65 @@
 				$scope.multi = angular.copy($scope.selectedKeys.last());
 			});
 		};
-	
+
+		$scope.makePaletteFromKeys = function(event) {
+			if (event) {
+				event.preventDefault();
+			}
+			var unselect = false;
+			if($scope.selectedKeys.length<1) {
+				$scope.selectAll();
+				unselect = true;
+			}
+
+			var colors = {};
+			// Get the unique colors of selected keys.
+			$scope.selectedKeys.forEach(function(selectedKey) {
+				colors[selectedKey.color] = null;
+				colors[selectedKey.text] = null;
+			});
+			// Build palette.
+			var p = {
+				"name": "Custom palette",
+				"description": "This is a custom palette generated from existing colors in the keyboard layout.",
+				"href": $scope.getPermalink(),
+				"colors": []
+			};
+			// Build colors.
+			for (var prop in colors) {
+				if (colors.hasOwnProperty(prop) && prop[0] == '#') {
+					var color = null;
+					// Look for the color in the current palette, and use it if found,
+					// in order to keep the name.
+					if ($scope.palette && $scope.palette.colors) {
+						for (var i = 0, len = $scope.palette.colors.length; i < len; ++i) {
+							if ($scope.palette.colors[i].css == prop) {
+								color = $scope.palette.colors[i];
+								break;
+							}
+						}
+					}
+					if (color == null) {
+						// Make a new color.
+						color = $color.sRGB8(parseInt(prop.slice(1,3), 16),
+																 parseInt(prop.slice(3,5), 16),
+																 parseInt(prop.slice(5,7), 16));
+						color.css = color.hex();
+						color.name = color.css;
+					}
+					if (color) {
+						p.colors.push(color);
+					}
+				}
+			}
+			p.colors.sort(function(a, b) { return a.name.localeCompare(b.name); });
+			$scope.loadPalette(p);
+
+			if (unselect) {
+				$scope.unselectAll();
+			}
+		}
+
 		$scope.moveKeys = function(x,y,$event) {
 			$event.preventDefault();
 			if($scope.selectedKeys.length<1) { 
-- 
1.8.4.3