Merge pull request #1 from topaz1008/master

rodikh · rodikh · commit 6356e7bc5bf2 · 2014-06-25T16:39:36.000+03:00
Added support for promises on schema and startval.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 /.idea
 /bower_components
+/build
 /node_modules
 
 [Tt]humbs.db
diff --git a/.jscs.json b/.jscs.json
@@ -1,5 +1,5 @@
 {
-    "excludeFiles": ["bower_components/**", "node_modules/**"],
+    "excludeFiles": ["bower_components/**", "node_modules/**", "build/**", "dist/**"],
     "disallowKeywords": ["with"],
     "disallowTrailingWhitespace": true,
     "requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
diff --git a/.jshintignore b/.jshintignore
@@ -1,2 +1,4 @@
 bower_components/**
+build/**
+dist/**
 node_modules/**
diff --git a/.jshintrc b/.jshintrc
@@ -52,6 +52,7 @@
     "node": true,
     "nonstandard": false,
     "predef": [
-        "angular"
+        "angular",
+        "JSONEditor"
     ]
 }
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
 JSON Editor Angular directive
 =============================
 
-angular-json-editor is an angular module that provides a directive that wraps [jdorn's JSON Editor](https://github.com/jdorn/json-editor).
+A directive that wraps [jdorn's json-editor](https://github.com/jdorn/json-editor).
 
 JSON Editor takes a JSON Schema and uses it to generate an HTML form.
 
-For further information about supported schema properties and usage, check out the original [JSON Editor repository](https://github.com/jdorn/json-editor).
+For further information about supported schema properties and usage, check out the original [json-editor](https://github.com/jdorn/json-editor).
 
 Requirements
 ----------------
@@ -15,59 +15,36 @@ The module doesn't include the original json-editor code, but it is included in
 Installation
 ------------
 
-Install angular-json-editor using bower, which will install the source json-editor as well.
+Install via bower
 
-If you are not using bower, please download the original [json-editor from here](https://github.com/jdorn/json-editor).
+    bower install angular-json-editor --save
+    
+Then include the directive and json-editor in your html (you can also use the minified versions)
+    
+```html
+    <script src="bower_components/json-editor/dist/jsoneditor.js"></script>
+    <script src="bower_components/angular-json-editor/angular-json-editor.js"></script>
+```
 
 Usage
 -----
 
-Include the json-editor and angular scripts first, and then include angular-json-editor.
-
-There are two optional ways of passing a json schema to the editor.
-
-* Pass the schema using a scope object as the value of the directive's attribute
-
-	```js
-	.controller('MyCtrl', function ($scope) {
-		$scope.schemaObj = {
-			"type": "object",
-			"properties": {
-				"name": {
-					"type": "string",
-					"required": true,
-					"minLength": 1
-				},
-				"age": {
-					"type": "integer",
-					"title": "Age",
-					"min": 0
-				}
-			}
-		};
-	}
-	```
-
-	```html
-	<div json-editor="schemaObj"></div>
-	```
-
-* Use an external JSON file as the schema and pass the url using the schema-url attribute
-
-	```html
-	<div json-editor="" schema-url="/schema/person.json"></div>
-	```
-
-The editor object that is returned from JSON-Editor can be made available to the scope by using the editor="" attribute.
-```html
-<div json-editor="schemaObj" editor="editor1"></div>
-```
+The directive supports both synchronous and asynchronous values, all values can be either a scope object, or a promise returned from $q, $http, $timeout, $resource etc.
+Please check out `demo/index.html` and `demo/app.js` for an example usage of both scenarios.
 
 ### Validation
-The directive can attach an isValid property to the scope by using the is-valid attribute.
+The directive exposes an `isValid` property on the scope, which can be used to enable/disable show/hide buttons using `ng-disabled/ng-enabled` or `ng-hide/ng-show`.
 ```html
-<form>
-	<div json-editor="schemaObj" editor="editor1" is-valid="isValid"></div>
-	<input type="submit" ng-disabled="!isValid"
-</form>
-```
+<button type="button" ng-disabled="!isValid">Button 1</button>
+```
+
+Building
+---------
+
+Clone the project, install bower and npm dependencies by running
+
+    bower install && npm install
+
+If you dont have grunt-cli installed globally run `npm install -g grunt-cli`
+
+Then run `grunt` and look in the `dist` folder.
diff --git a/bower.json b/bower.json
@@ -1,9 +1,26 @@
 {
     "name": "angular-json-editor",
     "version": "0.0.1",
-	"main": "src/angular-json-editor.js",
+    "authors": [
+        "Rodik Hanukaev <rodikh@gmail.com>",
+        "Topaz Bar <topaz1008@gmail.com>"
+    ],
+    "description": "angular.js directive for jdorn's json-editor",
+    "license": "MIT",
+    "main": "src/angular-json-editor.js",
+    "keywords": [
+        "angular",
+        "directive",
+        "json-editor",
+        "form",
+        "schema"
+    ],
+    "ignore": [
+        "bower_components",
+        "node_modules"
+    ],
     "dependencies": {
-        "json-editor": "*",
-		"angular": "1.2.*"
+        "json-editor": "~0.6.17",
+        "angular": "*"
     }
 }
diff --git a/demo/app.js b/demo/app.js
@@ -1,8 +1,17 @@
 'use strict';
 
-angular.module('demoApp', ['angular-json-editor'])
-.controller('MyCtrl', function ($scope) {
-    $scope.ctrlSchema = {
+angular.module('demoApp', ['angular-json-editor']).config(function (JsonEditorConfig) {
+
+    // angular-json-editor configuration
+    JsonEditorConfig.iconlib = 'bootstrap3';
+    JsonEditorConfig.theme = 'bootstrap3';
+
+    // Configure the buttons controller
+    JsonEditorConfig.controller = 'ButtonsController';
+
+}).controller('SyncAppController', function ($scope) {
+
+    $scope.mySchema = {
         type: 'object',
         properties: {
             name: {
@@ -20,16 +29,35 @@ angular.module('demoApp', ['angular-json-editor'])
         }
     };
 
-    $scope.startval = {
+    $scope.myStartVal = {
         age: 20
     };
 
+}).controller('AsyncAppController', function ($scope, $http, $timeout) {
+
+    // Load with $http
+    $scope.mySchema = $http.get('schema.json');
+
+    // Values can be a promise from anywhere
+    $scope.myStartVal = $timeout(function () {
+        return {
+            age: 20
+        };
+
+    }, 2000);
+
+}).controller('ButtonsController', function ($scope) {
+
+    /**
+     * Custom actions controller which allows you to add any other buttons/actions to the form.
+     */
+
     $scope.onSubmit = function () {
-        var formData = $scope.editor.getValue();
-        console.log('formData', formData);
+        console.log('onSubmit Data', $scope.editor.getValue());
+    };
+
+    $scope.onAction2 = function () {
+        console.log('onAction2');
     };
-});
 
-angular.element(window.document).ready(function () {
-	angular.bootstrap(window.document, ['demoApp']);
 });
diff --git a/demo/index.html b/demo/index.html
@@ -4,19 +4,45 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="author" content="Rodik">
+    <title>angular-json-editor Demo</title>
+
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 </head>
-<body>
-    <div class="container" ng-controller="MyCtrl">
-        <form ng-submit="onSubmit()">
-            <div json-editor="ctrlSchema" startval="startval" editor="editor" is-valid="isValid"></div>
-            <input type="submit" value="Submit" ng-disabled="!isValid">
-        </form>
-    </div>
-    
-    <script src="../bower_components/angular/angular.js"></script>
-    <script src="../bower_components/json-editor/dist/jsoneditor.js"></script>
-    <script src="../src/angular-json-editor.js"></script>
-    <script src="../demo/app.js"></script>
+<body ng-app="demoApp">
+
+<h2>Synchronous values</h2>
+<div class="container" ng-controller="SyncAppController">
+    <json-editor schema="mySchema" startval="myStartVal" editor="myEditor">
+
+        <button type="submit" class="btn btn-success" ng-click="onSubmit($event)" ng-disabled="!isValid">
+            <span class="glyphicon glyphicon-check"></span>
+            Submit
+        </button>
+
+        <button type="button" class="btn btn-danger" ng-click="onAction2($event)">
+            <span class="glyphicon glyphicon-remove"></span>
+            Action 2
+        </button>
+
+    </json-editor>
+</div>
+
+<h2>Asynchronous values</h2>
+<div class="container" ng-controller="AsyncAppController">
+    <json-editor schema="mySchema" startval="myStartVal" editor="myEditor">
+
+        <button type="submit" class="btn btn-success" ng-click="onSubmit($event)" ng-disabled="!isValid">
+            <span class="glyphicon glyphicon-check"></span>
+            Submit
+        </button>
+
+    </json-editor>
+</div>
+
+<script src="../bower_components/json-editor/dist/jsoneditor.js"></script>
+<script src="../bower_components/angular/angular.js"></script>
+<script src="../src/angular-json-editor.js"></script>
+<script src="app.js"></script>
+
 </body>
 </html>
diff --git a/dist/angular-json-editor.min.js b/dist/angular-json-editor.min.js
diff --git a/grunt/clean.js b/grunt/clean.js
@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+    grunt.config('clean', {
+        all: ['dist/*']
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-clean');
+};
diff --git a/grunt/codestyle.js b/grunt/codestyle.js
@@ -0,0 +1,21 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+    grunt.config('jshint', {
+        options: {
+            jshintrc: '.jshintrc'
+        },
+        src: ['gruntfile.js', 'grunt/**/*.js', 'src/**/*.js', 'demo/**/*.js']
+    });
+
+    grunt.config('jscs', {
+        options: {
+            config: '.jscs.json'
+        },
+        src: ['gruntfile.js', 'grunt/**/*.js', 'src/**/*.js', 'demo/**/*.js']
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-jscs-checker');
+};
diff --git a/grunt/concat.js b/grunt/concat.js
@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+    grunt.config('concat', {
+        options: {
+            separator: ''
+        },
+        dist: {
+            options: {
+                // Replace all 'use strict' statements in the code with a single one at the top
+                // And wrap everything in a self executing anonymous function which scopes window and angular.
+                banner: '(function (window, angular) {\n\'use strict\';\n',
+                footer: '\n})(window, angular);',
+                process: function (src, filepath) {
+                    return '// Source: ' + filepath + '\n' +
+                        src.replace(/('use strict'|"use strict");/g, '');
+                }
+            },
+            src: ['src/**/*.js'],
+            dest: 'build/angular-json-editor-concat.js',
+            nonull: true
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-concat');
+};
diff --git a/grunt/connect.js b/grunt/connect.js
@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+    grunt.config('connect', {
+        server: {
+            options: {
+                keepalive: true,
+                port: 3001,
+                base: './'
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-connect');
+};
diff --git a/grunt/uglify.js b/grunt/uglify.js
@@ -0,0 +1,30 @@
+/* jshint camelcase:false */
+'use strict';
+
+module.exports = function (grunt) {
+
+    grunt.config('uglify', {
+        options: {
+            banner: '// <%= pkg.name %> v<%= pkg.version %>\n'
+        },
+        app: {
+            options: {
+                mangle: true,
+                beautify: false,
+                sourceMap: false,
+                compress: {
+                    unused: false,
+                    drop_console: true,
+                    side_effects: false,
+                    dead_code: true
+                }
+            },
+            files: [{
+                src: ['build/angular-json-editor-concat.js'],
+                dest: 'dist/angular-json-editor.min.js'
+            }]
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+};
diff --git a/gruntfile.js b/gruntfile.js
diff --git a/package.json b/package.json
diff --git a/src/angular-json-editor.js b/src/angular-json-editor.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "excludeFiles": ["bower_components/", "node_modules/"],`
	`2`	`+ "excludeFiles": ["bower_components/", "node_modules/", "build/", "dist/"],`
`3`	`3`	`"disallowKeywords": ["with"],`
`4`	`4`	`"disallowTrailingWhitespace": true,`
`5`	`5`	`"requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],`
Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,7 @@`
`52`	`52`	`"node": true,`
`53`	`53`	`"nonstandard": false,`
`54`	`54`	`"predef": [`
`55`		`- "angular"`
	`55`	`+ "angular",`
	`56`	`+ "JSONEditor"`
`56`	`57`	`]`
`57`	`58`	`}`