Added the ability to upload a JSON file.

-- "Upload" button on the raw-data tab
-- Drag & drop to either the raw-data editor, or to the main kb preview
area

CONTRIB.md

@@ -15,6 +15,7 @@ Third-Party Software
 The following third-party software packages were used in the creation of keyboard-layout-editor.com:
 * [AngularJS](https://angularjs.org/)
 * [AngularUI](https://angular-ui.github.io/)
+* [ng-file-upload](https://github.com/danialfarid/ng-file-upload)
 * [Bootstrap](http://getbootstrap.com/)
 * [JQuery](https://jquery.com/)
 * [colors.js](https://gist.github.com/mikelikespie/641528) (quick RGB to LAB conversions)

kb.css

@@ -287,6 +287,8 @@ span.PETSCII {
 	overflow-y: auto !important;
 }
 
+.drag-over { border: dotted 3px red !important; box-sizing: border-box; }
+
 /* Only show the keyboard layout itself when printing */
 @media print {
   html, body { overflow:hidden; height:100%; margin: 0 !important; padding: 0 !important; }

kb.html

@@ -23,6 +23,7 @@
 <script type="text/javascript" src="js/color.js"></script>
 <script type="text/javascript" src="js/marked.min.js"></script>
 <script type="text/javascript" src="js/FileSaver.min.js"></script>
+<script type="text/javascript" src="js/ng-file-upload.min.js"></script>
 <script type="text/javascript" src="extensions.js"></script>
 <script type="text/javascript" src="render.js"></script>
 <script type="text/javascript" src="serial.js"></script>
@@ -134,7 +135,8 @@
 					 'ctrl-90' : 'undo()',
 					 'ctrl-shift-90' : 'redo()',
 					 'ctrl-89' : 'redo()' }" 
-		 ng-mousedown="selectClick($event)">
+		 ng-mousedown="selectClick($event)"
+     ngf-drop="true" ngf-change="uploadJson($files, $event)" ngf-drag-over-class="drag-over">
 
 		<div ng-repeat="key in keys()" 
 			 class="key {{key.profile}}" 
@@ -334,10 +336,13 @@
 
 		<!-- RAW DATA EDITOR -->
 		<div ng-class="{hidden:selTab!=2}" class="col-md-12">
-			<textarea id="rawdata" spellcheck="false" ng-model="serialized" ng-change="updateFromSerialized()" ng-class="{error:deserializeException!==''}"></textarea>
+      <div ngf-drop="true" ngf-change="uploadJson($files, $event)" ngf-drag-over-class="drag-over">
+		    <textarea id="rawdata" spellcheck="false" ng-model="serialized" ng-change="updateFromSerialized()" ng-class="{error:deserializeException!==''}"></textarea>
+      </div>
       <div style='text-align:right;margin-top:4px;'>
         <div class="btn-group btn-group-xs" role="group">
-          <button type="button" class="btn btn-primary" ng-click="downloadJson()"><i class="fa fa-download"></i> Download as JSON</button>
+          <button type="button" class="btn btn-primary" ng-click="downloadJson()"><i class="fa fa-download"></i> Download JSON</button>
+          <button ngf-select="true" class="btn btn-primary" ngf-change="uploadJson($files, $event)"><i class="fa fa-upload"></i> Upload JSON</button>
         </div>
         <div class="btn-group btn-group-xs" role="group">
           <a class="btn btn-primary" href="https://github.com/ijprest/keyboard-layout-editor/wiki/Serialized-Data-Format" target='_blank'><i class="fa fa-question-circle"></i> Raw Data Syntax</a>

kb.js

@@ -11,7 +11,7 @@
 	function fromJsonPretty(json) { return $serial.fromJsonL('['+json+']'); }
 
 	// The angular module for our application
-	var kbApp = angular.module('kbApp', ["ngSanitize", "ui.utils"]);
+	var kbApp = angular.module('kbApp', ["ngSanitize", "ui.utils", "ngFileUpload"]);
 
 	// The main application controller
 	kbApp.controller('kbCtrl', ['$scope','$http','$location','$timeout', '$sce', '$sanitize', function($scope, $http, $location, $timeout, $sce, $sanitize) {
@@ -80,7 +80,21 @@
 			return $scope.dirty;
 		};
 		$scope.downloadJson = function() {
-			$serial.downloadJson($serial.serialize($scope.keyboard));
+			var data = angular.toJson($serial.serialize($scope.keyboard), true /*pretty*/);
+			var blob = new Blob([data], {type:"application/json"});
+			saveAs(blob, "keyboard-layout.json");
+		};
+		$scope.uploadJson = function(file, event) {
+			if(file && file[0]) {
+				var reader = new FileReader();
+				reader.onload = function(event) {
+					transaction("upload", function() {
+						$scope.deserializeAndRender($serial.fromJsonL(event.target.result));
+						$scope.serializedRaw = '['+$scope.serialized+']';
+					});
+				};
+				reader.readAsText(file[0]);
+			}
 		};
 
 		// Helper function to select a single key

serial.js

@@ -209,12 +209,4 @@ var $serial = {};
 		});
 	};
 
-	$serial.downloadJson = function(layout) {
-		console.log(layout);
-		var data = angular.toJson(layout, true /*pretty*/);
-		console.log(data);
-		var blob = new Blob([data], {type:"application/json"});
-		saveAs(blob, "keyboard-layout.json");
-	};
-
 }());