Make this library 'developer-friendly'

blavenie · blavenie · commit 127658111d26 · 2020-04-13T15:59:34.000+02:00
- merge pull request andyshora#31
diff --git a/.gitignore b/.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/
diff --git a/CONTRIBUTING.md b/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.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,61 @@
+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,
+          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']);
+};
diff --git a/README.md b/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
 
@@ -37,7 +49,7 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
 
 ### Example markup
 ```html
-<image-crop			 
+<image-crop
  data-height="200"
  data-width="150"
  data-shape="square"
@@ -50,7 +62,7 @@ I'm attempting to make a self-contained AngularJS Directive which will allow you
  crop="initCrop"
  padding="250"
  max-size="1024"
-></image-crop>	
+></image-crop>
 ```
 
 # See a standalone working example
diff --git a/bower.json b/bower.json
@@ -5,12 +5,19 @@
   "authors": [
     "Andy Shora <andyshora@gmail.com>"
   ],
+  "contributors": [
+    "Ashish Bardhan <ashbardhan@gmail.com>"
+  ],
   "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",
diff --git a/demo/index.html b/demo/index.html
@@ -9,9 +9,9 @@
   
   <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.5.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>
 
@@ -50,7 +50,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 */
diff --git a/demo/index2.html b/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.5.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 {
diff --git a/dist/angular-image-crop.css b/dist/angular-image-crop.css
@@ -1,8 +1,8 @@
-/* Some of these styles you can override, things like colors,
+/*
+ * ANGULAR-IMAGE-CROP Basic Styling
+ * Some of these styles you can override, things like colors,
  * however some styles are required for the structure, and are critical to this module behaving properly!
  */
-
-/* Core component styles */
 .ng-image-crop {
   text-align: center;
   margin: 0 auto;
@@ -13,49 +13,35 @@
   -o-user-select: none;
   user-select: none;
 }
-/* Each of the 3 steps in the process are contained within sections */
 .ng-image-crop > section {
   background: #ccc;
 }
-/* The cropping button */
 .ng-image-crop button {
   margin-top: 10px;
 }
-/* The dashed cropping guideline */
 .ng-image-crop .cropping-guide {
   display: block;
-  background: rgba(255, 255, 255, .3);
+  background: rgba(255, 255, 255, 0.3);
   border: 2px dashed white;
   position: absolute;
   pointer-events: none;
 }
-/* The circular themed cropping guideline */
-.ng-image-crop--circle .cropping-guide {
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
-}
-/* The canvas where the user positions the image via dragging and zooming */
 .ng-image-crop .cropping-canvas {
-  background: rgba(255, 255, 255, .3);
+  background: rgba(255, 255, 255, 0.3);
   margin: 0 auto;
   cursor: move;
 }
-/* The overlayed draggable zoom handle in the corner of the module */
 .ng-image-crop .zoom-handle {
   display: block;
   position: absolute;
   bottom: 1px;
   left: 1px;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255, 255, 255, 0.7);
   width: 80px;
   height: 80px;
   cursor: move;
   border-radius: 200px 50px;
 }
-/* The text within the zoom handle */
 .ng-image-crop .zoom-handle > span {
   color: rgba(0, 0, 0, 0.5);
   -webkit-transform: rotate(-45deg);
@@ -66,4 +52,11 @@
   display: block;
   position: relative;
   top: 32px;
-}
+}
+.ng-image-crop--circle .cropping-guide {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+}
diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@
   "name": "angular-image-crop",
   "version": "2.0.0",
   "description": "A better way to crop images client-side using AngularJS",
-  "homepage": "http://andyshora.com/angular-image-cropper.html",
-  "author": "Andy Shora <andyshora@gmail.com>",
-  "license": "MIT",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "repository": {
     "type": "git",
-    "url": "git@github.com:andyshora/angular-image-crop.git"
+    "url": "git+https://github.com/andyshora/angular-image-crop.git"
   },
   "keywords": [
     "angular",
@@ -17,12 +17,27 @@
     "cropper",
     "avatar"
   ],
+  "authors": [
+    "Andy Shora <andyshora@gmail.com>"
+  ],
+  "contributors": [
+    "Ashish Bardhan <ashbardhan@gmail.com>",
+    "Benoit Lavenier <benoit.lavenier@gmail.com>"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/andyshora/angular-image-crop/issues"
+  },
+  "homepage": "http://andyshora.com/angular-image-cropper.html",
   "dependencies": {
     "angular": "^1.5.11"
   },
-  "readmeFilename": "README.md",
-  "bugs": {
-    "url": "https://github.com/andyshora/angular-image-crop/issues",
-    "new": "https://github.com/andyshora/angular-image-crop/issues/new"
+  "devDependencies": {
+    "grunt": "^1.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-less": "^2.0.0",
+    "grunt-contrib-uglify": "~4.0.1",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-ng-annotate": "^4.0.0"
   }
 }
diff --git a/src/angular-image-crop.js b/src/angular-image-crop.js
@@ -1,5 +1,5 @@
 /**
- * AngularJS Directive - Image Crop v1.1.0
+ * AngularJS Directive - Image Crop v2.0.0
  * Copyright (c) 2014 Andy Shora, andyshora@gmail.com, andyshora.com
  * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
  */
@@ -760,6 +760,7 @@
 
   angular.module('ImageCropper',[])
     .directive('imageCrop', function($q) {
+      'ngInject'; // Need for ngAnnotate, before uglify
 
       return {
         template: '<div id="image-crop-{{ rand }}" class="ng-image-crop ng-image-crop--{{ shape }}" ng-style="moduleStyles"><section ng-style="sectionStyles" ng-show="step==1"></section><section ng-style="sectionStyles" ng-show="step==2"><canvas class="cropping-canvas" width="{{ canvasWidth }}" height="{{ canvasHeight }}" ng-mousemove="onCanvasMouseMove($event)" ng-mousedown="onCanvasMouseDown($event)"></canvas><div ng-style="croppingGuideStyles" class="cropping-guide"></div><div class="zoom-handle" ng-mousemove="onHandleMouseMove($event)" ng-mousedown="onHandleMouseDown($event)" ng-mouseup="onHandleMouseUp($event)"><span>&larr; zoom &rarr;</span></div></section><section ng-style="sectionStyles" class="image-crop-section-final" ng-show="step==3"><img class="image-crop-final" ng-src="{{ croppedDataUri }}" /></section></div>',
diff --git a/src/angular-image-crop.less b/src/angular-image-crop.less
