Update to cropper 0.10.0 & fix for angular 1.4

koorgoo · Jun 26, 2015 · ff41008 · ff41008
1 parent a0080f6
commit ff41008
Show file tree

Hide file tree

Showing 10 changed files with 1,724 additions and 1,348 deletions.
diff --git a/bower.json b/bower.json
@@ -11,10 +11,10 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "cropper": "~0.7.7"
+    "angular": "~1.4.1"
   },
   "devDependencies": {
-    "angular": "~1.2.26",
+    "cropper": "~0.10.0",
     "jquery": "~2.1.1",
     "mocha": "~1.21.4",
     "chai": "~1.9.2"

diff --git a/demo/demo.js b/demo/demo.js
@@ -46,7 +46,7 @@ angular.module('demo', ['ngCropper'])
   $scope.options = {
     maximize: true,
     aspectRatio: 2 / 1,
-    done: function(dataNew) {
+    crop: function(dataNew) {
       data = dataNew;
     }
   };

diff --git a/demo/index.html b/demo/index.html
@@ -21,7 +21,10 @@
 
   <div ng-if="dataUrl" class="img-container">
     <img ng-if="dataUrl" ng-src="{{dataUrl}}" width="800"
-         ng-cropper ng-show="{{showEvent}}" ng-hide="{{hideEvent}}" ng-options="options">
+         ng-cropper
+         ng-cropper-show="showEvent"
+         ng-cropper-hide="hideEvent"
+         ng-cropper-options="options">
   </div>
 
   <div class="preview-container">

diff --git a/dist/ngCropper.all.css b/dist/ngCropper.all.css
@@ -1,11 +1,12 @@
 /*!
- * Cropper v0.7.9
+ * Cropper v0.10.0
  * https://github.com/fengyuanchen/cropper
  *
- * Copyright 2014-2015 Fengyuan Chen
+ * Copyright (c) 2014-2015 Fengyuan Chen and other contributors
  * Released under the MIT license
+ *
+ * Date: 2015-06-08T14:57:26.353Z
  */
-
 .cropper-container {
   position: relative;
   overflow: hidden;
@@ -17,82 +18,68 @@
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
-
 .cropper-container img {
+  display: block;
   width: 100%;
   min-width: 0 !important;
   max-width: none !important;
   height: 100%;
   min-height: 0 !important;
   max-height: none !important;
-}
 
-.cropper-modal,
-.cropper-canvas {
+  image-orientation: 0deg !important;
+}
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-
-.cropper-canvas {
+.cropper-drag-box {
   background-color: #fff;
   filter: alpha(opacity=0);
   opacity: 0;
 }
-
 .cropper-modal {
   background-color: #000;
   filter: alpha(opacity=50);
   opacity: .5;
 }
-
-.cropper-dragger {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-}
-
-.cropper-viewer {
+.cropper-view-box {
   display: block;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  outline-width: 1px;
-  outline-style: solid;
-  outline-color: #69f;
-  outline-color: rgba(51, 102, 255, .75);
+  outline: 1px solid #69f;
+  outline-color: rgba(102, 153, 255, .75);
 }
-
 .cropper-dashed {
   position: absolute;
   display: block;
   filter: alpha(opacity=50);
   border: 0 dashed #fff;
   opacity: .5;
 }
-
 .cropper-dashed.dashed-h {
-  top: 33.3%;
+  top: 33.33333333%;
   left: 0;
   width: 100%;
-  height: 33.3%;
+  height: 33.33333333%;
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
-
 .cropper-dashed.dashed-v {
   top: 0;
-  left: 33.3%;
-  width: 33.3%;
+  left: 33.33333333%;
+  width: 33.33333333%;
   height: 100%;
   border-right-width: 1px;
   border-left-width: 1px;
 }
-
 .cropper-face,
 .cropper-line,
 .cropper-point {
@@ -103,100 +90,84 @@
   filter: alpha(opacity=10);
   opacity: .1;
 }
-
 .cropper-face {
   top: 0;
   left: 0;
-  cursor: move;
   background-color: #fff;
 }
-
 .cropper-line {
   background-color: #69f;
 }
-
 .cropper-line.line-e {
   top: 0;
   right: -3px;
   width: 5px;
   cursor: e-resize;
 }
-
 .cropper-line.line-n {
   top: -3px;
   left: 0;
   height: 5px;
   cursor: n-resize;
 }
-
 .cropper-line.line-w {
   top: 0;
   left: -3px;
   width: 5px;
   cursor: w-resize;
 }
-
 .cropper-line.line-s {
   bottom: -3px;
   left: 0;
   height: 5px;
   cursor: s-resize;
 }
-
 .cropper-point {
   width: 5px;
   height: 5px;
   background-color: #69f;
   filter: alpha(opacity=75);
   opacity: .75;
 }
-
 .cropper-point.point-e {
   top: 50%;
   right: -3px;
   margin-top: -3px;
   cursor: e-resize;
 }
-
 .cropper-point.point-n {
   top: -3px;
   left: 50%;
   margin-left: -3px;
   cursor: n-resize;
 }
-
 .cropper-point.point-w {
   top: 50%;
   left: -3px;
   margin-top: -3px;
   cursor: w-resize;
 }
-
 .cropper-point.point-s {
   bottom: -3px;
   left: 50%;
   margin-left: -3px;
   cursor: s-resize;
 }
-
 .cropper-point.point-ne {
   top: -3px;
   right: -3px;
   cursor: ne-resize;
 }
-
 .cropper-point.point-nw {
   top: -3px;
   left: -3px;
   cursor: nw-resize;
 }
-
 .cropper-point.point-sw {
   bottom: -3px;
   left: -3px;
   cursor: sw-resize;
 }
-
 .cropper-point.point-se {
   right: -3px;
   bottom: -3px;
@@ -206,7 +177,6 @@
   filter: alpha(opacity=100);
   opacity: 1;
 }
-
 .cropper-point.point-se:before {
   position: absolute;
   right: -50%;
@@ -219,21 +189,18 @@
   filter: alpha(opacity=0);
   opacity: 0;
 }
-
 @media (min-width: 768px) {
   .cropper-point.point-se {
     width: 15px;
     height: 15px;
   }
 }
-
 @media (min-width: 992px) {
   .cropper-point.point-se {
     width: 10px;
     height: 10px;
   }
 }
-
 @media (min-width: 1200px) {
   .cropper-point.point-se {
     width: 5px;
@@ -242,35 +209,37 @@
     opacity: .75;
   }
 }
-
-/* Helper classes for JavaScript */
-
-.cropper-hidden {
-  display: none !important;
+.cropper-bg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
 }
-
 .cropper-invisible {
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+.cropper-hide {
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
-  width: auto !important;
-  max-width: none !important;
-  height: auto !important;
-  max-height: none !important;
+  width: auto!important;
+  min-width: 0!important;
+  max-width: none!important;
+  height: auto!important;
+  min-height: 0!important;
+  max-height: none!important;
   filter: alpha(opacity=0);
   opacity: 0;
 }
-
+.cropper-hidden {
+  display: none !important;
+}
 .cropper-move {
   cursor: move;
 }
-
 .cropper-crop {
   cursor: crosshair;
 }
-
-.cropper-disabled .cropper-canvas,
+.cropper-disabled .cropper-drag-box,
 .cropper-disabled .cropper-face,
 .cropper-disabled .cropper-line,
 .cropper-disabled .cropper-point {