fix #37, and merge pull requests #28 #30 #31 #32

.gitignore

@@ -0,0 +1,22 @@
+# Created by http://gitignore.io
+
+### SublimeText ###
+*.sublime-*
+
+### vim related ###
+*.swp
+*.swo
+
+### OSX related ###
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+
+### IDE-related ###
+.idea
+*.iml
+
+### Package folders ###
+bower_components/
+node_modules/

CONTRIBUTING.md

@@ -0,0 +1,28 @@
+The stylesheet of **angular-image-crop** is written in [LESS](http://lesscss.org/).
+
+#Setup
+1. [Fork this project](https://help.github.com/articles/fork-a-repo) and clone it on your system.
+2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master`
+
+#Building
+
+**angular-image-crop.js** and **angular-image-crop.css** uses [Grunt](http://gruntjs.com/) for the build process which you need to have installed on your system.
+
+Also there are four additional Grunt tasks required to build the library:
+
+1. [grunt-contrib-copy](https://npmjs.org/package/grunt-contrib-copy)
+
+2. [grunt-contrib-less](https://www.npmjs.com/package/grunt-contrib-less)
+
+3. [grunt-contrib-uglify](https://www.npmjs.com/package/grunt-contrib-uglify)
+
+4. [grunt-contrib-watch](https://www.npmjs.com/package/grunt-contrib-watch)
+
+To install all the dependencies, run `npm install`.
+
+Once you have the dependencies installed, run `grunt` from the project directory. This will run the default grunt task which compiles the files in `src` folder and stores them (and their minified forms) into `dist` folder.
+
+#Things to remember
+- Before submitting a patch, rebase your branch on upstream `master` to make life easier for the merger/author.
+
+- **DO NOT** add the final build files (compiled in `dist` folder) into your commits. It will be compiled again and updated later, once your patch has been merged by the merger/author.

Gruntfile.js

@@ -0,0 +1,64 @@
+module.exports = function (grunt) {
+  grunt.initConfig({
+    'pkg': grunt.file.readJSON('package.json'),
+    'less': {
+      'unminified': {
+        src: ['src/<%= pkg.name %>.less'],
+        dest: 'dist/<%= pkg.name %>.css'
+      },
+      'minified': {
+        options: {
+          compress: true
+        },
+        src: ['src/<%= pkg.name %>.less'],
+        dest: 'dist/<%= pkg.name %>.min.css'
+      }
+    },
+    ngAnnotate: {
+      'js': {
+        options: {
+          single_quotes: true
+        },
+        src: 'src/<%= pkg.name %>.js',
+        dest: 'dist/<%= pkg.name %>.js'
+      }
+    },
+    uglify: {
+      'js': {
+        options: {
+          toplevel: true,
+          warnings: true,
+          compress: true,
+          mangle: {
+            reserved: ['BinaryFile', 'EXIF']
+          },
+          output: {
+            beautify: false,
+            preamble: "/* AngularJS Directive - <%= pkg.name %> v<%= pkg.version %> (minified) - license <%= pkg.license %> */",
+            max_line_len: 120000
+          }
+        },
+        src: ['dist/<%= pkg.name %>.js'],
+        dest: 'dist/<%= pkg.name %>.min.js'
+      }
+    },
+    watch: {
+      'js' : {
+        files: ['src/**.js'],
+        tasks: ['ngAnnotate', 'uglify']
+      },
+      'less' : {
+        files: ['src/**.less'],
+        tasks: ['less']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-ng-annotate');
+
+  grunt.registerTask('default', ['less', 'ngAnnotate', 'uglify']);
+};

README.md

@@ -14,11 +14,23 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
 # Browser Support
 * IE10+, Android 3+, iOS 6+, basically all modern browsers!
 
+# Installation
+Get the library and its stylesheet using one of the following ways:
+
+1. **Github**
+ - [unminified] : [angular-angular-image-crop.js](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.js) and [angular-image-crop.css](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.css)
+ - [minified] : [angular-image-crop.min.js](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.min.js) and [angular-image-crop.min.css](https://raw.githubusercontent.com/andyshora/angular-image-crop/master/dist/angular-image-crop.min.css)
+
+2. **Bower**
+
+  ```
+  bower install angular-image-crop
+  ```
 # Usage
 
-1. Add the dependency : `angular.module('myApp',['ImageCropper'])`
-2. Include the stylesheet
-3. Initiatlise the directive [see standalone JSBin](http://jsbin.com/fovovu/1/edit?javascript,output) for example code.
+1. Include both files inside the `<head>` element
+2. Add the dependency : `angular.module('myApp',['ImageCropper'])`
+3. Initialise the directive [see standalone JSBin](http://jsbin.com/fovovu/1/edit?javascript,output) for example code.
 
 ## Parameters
 
@@ -28,25 +40,31 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
 * max-size (integer) - max size of the image, in pixels
 * shape (string) - the cropping guideline shape (circle/square)
 * step (bound integer) - the variable which dictates which step the user will see (used for resetting purposes)
+* safe-move(string true/false) - allow moving the image under the cropping area without restrictions
+* fill-color(string color name / HEX) - the color to fill with the empty space (used with safe-move)
 * src (bound Blob or base64 string) - scope variable that will be the source image for the crop
 * result (bound string) - the variable which will have the resulting data uri bound to it
 * result-blob (bound Blob) - the variable which will have the resulting data as a Blob object
 * crop (bound boolean) - scope variable that must be set to true when the image is ready to be cropped
+* result-format - setting the result file format if different from default "image/png", optional
 
 ### Example markup
 ```html
-<image-crop			 
+<image-crop
  data-height="200"
  data-width="150"
  data-shape="square"
  data-step="imageCropStep"
+ data-safe-move='true'
+ data-fill-color="red"
  src="imgSrc"
  data-result="result"
  data-result-blob="resultBlob"
+ data-result-format="image/jpeg"
  crop="initCrop"
  padding="250"
  max-size="1024"
-></image-crop>	
+></image-crop>
 ```
 
 # See a standalone working example

bower.json

@@ -1,16 +1,23 @@
 {
   "name": "angular-image-crop",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "homepage": "http://andyshora.com/angular-image-cropper.html",
   "authors": [
     "Andy Shora <[email protected]>"
   ],
+  "contributors": [
+    "Ashish Bardhan <[email protected]>"
+  ],
   "description": "A better way to crop images client-side using AngularJS",
   "main": [
-    "image-crop.js",
-    "image-crop-styles.css"
+    "dist/angular-image-crop.min.js",
+    "dist/angular-image-crop-styles.min.css"
+  ],
+  "ignore": [
+    "src/*.js",
+    "CONTRIBUTING.md",
+    "Gruntfile.js"
   ],
-  "ignore": [],
   "keywords": [
     "angular",
     "angularjs",

index.html → demo/index.html

@@ -9,49 +9,49 @@
 
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
   <!-- REQUIRED 1/3 - AngularJS Core -->
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
   <!-- REQUIRED 2/3 - styles for the image crop component -->
-  <link rel="stylesheet" href="image-crop-styles.css">
-  
+  <link rel="stylesheet" href="../dist/angular-image-crop.min.css">
+
   <script>
-  
+
     var myApp = null;
-	
+
     (function() {
 
-    angular.module('myApp', ['ImageCropper'])  
-	  
+    angular.module('myApp', ['ImageCropper'])
+
 	.controller('MainController', ['$scope', function($scope) {
-		
-		$scope.fileChanged = function(e) {			
-		
+
+		$scope.fileChanged = function(e) {
+
 			var files = e.target.files;
-		
+
      		var fileReader = new FileReader();
-			fileReader.readAsDataURL(files[0]);		
-			
+			fileReader.readAsDataURL(files[0]);
+
 			fileReader.onload = function(e) {
 				$scope.imgSrc = this.result;
 				$scope.$apply();
 			};
-			
-		}		
-	   
+
+		}
+
 		$scope.clear = function() {
 			 $scope.imageCropStep = 1;
 			 delete $scope.imgSrc;
 			 delete $scope.result;
 			 delete $scope.resultBlob;
 		};
-		
+
 	}]);
 
     })();
   </script>
-  
+
   <!-- REQUIRED 3/3 - the image crop directive -->
-  <script src="image-crop.js"></script>
-  
+  <script src="../dist/angular-image-crop.min.js"></script>
+
   <style>
     /* Styles for this demo page */
     body {
@@ -104,6 +104,7 @@
 			 src="imgSrc" //scope variable that will be the source image for the crop (may be a Blob or base64 string)
 			 data-result-blob="result" //scope variable that will contain the Blob information
 			 data-result="resultDataUrl" //scope variable that will contain the image's base64 string representation
+			 data-result-format="image/jpeg" // result file format, if different from default "image/png", optional
 			 crop="initCrop" //scope variable that must be set to true when the image is ready to be cropped
 			 padding="250" //space, in pixels, rounding the shape
 			 max-size="1024" //max of the image, in pixels
@@ -115,6 +116,8 @@
 			 data-shape="square"
 			 data-step="imageCropStep"
 			 src="imgSrc"
+			 data-safe-move="false"
+			 data-fill-color="red"
 			 data-result="result"
 			 data-result-blob="resultBlob"
 			 crop="initCrop"
@@ -144,4 +147,4 @@ <h2>Result</h2>
 
      </div>
   </body>
-</html>
+</html>

index2.html → demo/index2.html

@@ -6,9 +6,9 @@
   <title>Test</title>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
   <!-- REQUIRED 1/3 - AngularJS Core -->
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
   <!-- REQUIRED 2/3 - styles for the image crop component -->
-  <link rel="stylesheet" href="image-crop-styles.css">
+  <link rel="stylesheet" href="../dist/angular-image-crop.min.css">
   <script>
     var myApp = null;
     (function() {
@@ -40,7 +40,7 @@
     })();
   </script>
   <!-- REQUIRED 3/3 - the image crop directive -->
-  <script src="image-crop.js"></script>
+  <script src="../dist/angular-image-crop.min.js"></script>
   <style>
     /* Styles for this demo page */
     body {
@@ -116,4 +116,4 @@ <h2>Result</h2>
        <p ng-hide="imageCropResult2">Not cropped yet</p>
      </div>
   </body>
-</html>
+</html>