- updatge to v2.4.1 Croppie.js

- add zoomer and exif options
- fix package.json
- code refactoring

Author: orifn

gulpfile.js

@@ -19,7 +19,7 @@ gulp.task('css', ['clean'], function(cb) {
         gulp.src('unminified/ng-croppie.css'),
         rename({suffix: '.min'}),
         minify({compatibility: 'ie11', keepBreaks: true}),
-        header(banner, {pkg: pkg}),
+        //header(banner, {pkg: pkg}),
         gulp.dest('minified')
     ], cb);
 });
@@ -29,7 +29,7 @@ gulp.task('js', ['clean'], function(cb) {
         gulp.src('unminified/ng-croppie.js'),
         rename({suffix: '.min'}),
         uglify(),
-        header(banner, {pkg: pkg}),
+        //header(banner, {pkg: pkg}),
         gulp.dest('minified')
     ], cb);
 });

minified/ng-croppie.min.css

@@ -2,7 +2,10 @@
   "name": "ng-croppie",
   "version": "1.0.0",
   "description": "An Angular module for the awesome Croppie.js",
-  "main": "index.js",
+  "main": [
+    "unminified/ng-croppie.js",
+    "unminified/ng-croppie.css"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

minified/ng-croppie.min.js

@@ -1,73 +1,100 @@
 .croppie-container {
-	padding: 30px;
+    width: 100%;
+    height: 100%;
 }
+
 .croppie-container .cr-image {
-	z-index: -1;
-	position: absolute;
-	top: 0;
-	left: 0;
-	transform-origin: 0 0;
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
+    max-width: none;
 }
 
 .croppie-container .cr-boundary {
-	position: relative;
-	overflow: hidden;
-	margin: 0 auto;
-	z-index: 1;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
 }
 
 .croppie-container .cr-viewport {
-	position: absolute;
-	border: 2px solid #fff;
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	box-shadow:0 0 0 899px rgba(0, 0, 0, 0.5);
-	z-index: 0;
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+    z-index: 0;
+}
+
+.croppie-container .cr-original-image {
+    display: none;
 }
+
 .croppie-container .cr-vp-circle {
-	border-radius: 50%;
+    border-radius: 50%;
 }
+
 .croppie-container .cr-overlay {
-	z-index: 1;
-	position: absolute;
-	cursor: move;
+    z-index: 1;
+    position: absolute;
+    cursor: move;
 }
+
 .croppie-container .cr-slider-wrap {
-	width: 75%;
-	margin: 0 auto;
-	margin-top: 25px;
-	text-align: center;
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
 }
+
 .croppie-result {
-	position: relative;
-	overflow: hidden;
+    position: relative;
+    overflow: hidden;
 }
+
 .croppie-result img {
-	position: absolute;
+    position: absolute;
+}
+
+.croppie-container .cr-image,
+.croppie-container .cr-overlay,
+.croppie-container .cr-viewport {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
 }
 
 /*************************************/
 /***** STYLING RANGE INPUT ***********/
 /*************************************/
-/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+/* http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
 /*************************************/
 
 .cr-slider {
-    -webkit-appearance: none;/*removes default webkit styles*/
+    -webkit-appearance: none;
+    /*removes default webkit styles*/
     /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
-    width: 300px;/*required for proper track sizing in FF*/
+    width: 300px;
+    /*required for proper track sizing in FF*/
     max-width: 100%;
 }
+
 .cr-slider::-webkit-slider-runnable-track {
     width: 100%;
     height: 3px;
     background: rgba(0, 0, 0, 0.5);
     border: 0;
     border-radius: 3px;
 }
+
 .cr-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
@@ -77,6 +104,7 @@
     background: #ddd;
     margin-top: -6px;
 }
+
 .cr-slider:focus {
     outline: none;
 }
@@ -93,6 +121,7 @@
     border: 0;
     border-radius: 3px;
 }
+
 .cr-slider::-moz-range-thumb {
     border: none;
     height: 16px;
@@ -102,19 +131,19 @@
     margin-top: -6px;
 }
 
-/*hide the outline behind the border*/
-.cr-slider:-moz-focusring{
+/* hide the outline behind the border */
+.cr-slider:-moz-focusring {
     outline: 1px solid white;
     outline-offset: -1px;
 }
 
 .cr-slider::-ms-track {
-    width: 300px;
+    width: 100%;
     height: 5px;
-    background: transparent;/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-    border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
+    background: transparent; /* remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    border-color: transparent; /* leave room for the larger thumb to overflow with a transparent border */
     border-width: 6px 0;
-    color: transparent;/*remove default tick marks*/
+    color: transparent;/* remove default tick marks */
 }
 .cr-slider::-ms-fill-lower {
     background: rgba(0, 0, 0, 0.5);
@@ -130,16 +159,19 @@
     width: 16px;
     border-radius: 50%;
     background: #ddd;
+    margin-top:1px;
 }
 .cr-slider:focus::-ms-fill-lower {
     background: rgba(0, 0, 0, 0.5);
 }
 .cr-slider:focus::-ms-fill-upper {
     background: rgba(0, 0, 0, 0.5);
 }
+/*******************************************/
 
+/***********************************/
 /* Rotation Tools */
-/******************/
+/***********************************/
 .cr-rotate-controls {
     position: absolute;
     bottom: 5px;
@@ -161,26 +193,4 @@
 }
 .cr-rotate-r i:before {
     content: '↻';
-}
-/*******************************************/
-
-
-/* Just cross hairs for debugging - can be removed upon release */
-.croppie-container .cr-viewport.debug:before,
-.croppie-container .cr-viewport.debug:after {
-    background: white;
-    width: 1px;
-    height: 1px;
-    content: '';
-    position: absolute;
-}
-.croppie-container .cr-viewport.debug:before {
-	top: 0;
-    height: 100%;
-    left: 50%;
-}
-.croppie-container .cr-viewport.debug:after {
-	top: 50%;
-	left: 0;
-	width: 100%;
-}
+}