Merge pull request #562 from LuccaSA/image.cropper.jpg

feat: jpg support in image-cropper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucca-ui",
-  "version": "4.1.5",
+  "version": "4.2.0",
   "description": "less and js framework by lucca",
   "main": "dist/lucca-ui.js",
   "dependencies": {
@@ -82,6 +82,7 @@
     "build": "grunt dist"
   },
   "volta": {
-    "node": "8.17.0"
+    "node": "8.17.0",
+    "yarn": "1.21.1"
   }
 }

ts/image-picker/image-cropper.directive.ts

@@ -8,8 +8,15 @@ module lui {
 }
 module lui.imagepicker {
 	"use strict";
+	type ImageFormat = "image/jpeg" | "image/png";
+	const imageFormats = {
+		"image/jpeg": { extension: "jpg" },
+		"image/png": { extension: "png" },
+	};
+	const defaultImageFormat: ImageFormat = "image/png";
 	interface IImageCropperScope extends angular.IScope {
 		image: string;
+		imageFormat: ImageFormat;
 		fileName: string;
 		cropped: string;
 		cancelLabel: string;
@@ -47,7 +54,7 @@ module lui.imagepicker {
 		public link: ng.IDirectiveLinkFn = (scope: IImageCropperScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
 
 			let handleFileSelect = (evt) => {
-				let file = evt.currentTarget.files[0];
+				let file = (evt.currentTarget as HTMLInputElement).files[0];
 				let reader = new FileReader();
 				/* tslint:disable */
 				// see https://github.com/Microsoft/TypeScript/issues/4163
@@ -56,6 +63,7 @@ module lui.imagepicker {
 					scope.$apply(($scope) => {
 						scope.image = event.target.result;
 						scope.fileName = file.name;
+						scope.imageFormat = Object.keys(imageFormats).indexOf(file.type) !== -1 ? file.type as ImageFormat : defaultImageFormat;
 						if (!scope.croppingDisabled) {
 							scope.openCropper();
 						} else {
@@ -91,6 +99,9 @@ module lui.imagepicker {
 						image: (): string => {
 							return $scope.image;
 						},
+						imageFormat: (): ImageFormat => {
+							return $scope.imageFormat;
+						},
 						fileName: (): string => {
 							return $scope.fileName;
 						},
@@ -105,7 +116,7 @@ module lui.imagepicker {
 				let modalInstance = $uibModal.open(modalOptions);
 				modalInstance.result.then(({image, cropped}: {image: string, cropped: boolean}) => {
 					$scope.cropped = image;
-					const tempFileName = cropped ? $scope.fileName.substr(0, $scope.fileName.lastIndexOf(".")) + ".png" : $scope.fileName;
+					const tempFileName = cropped ? $scope.fileName.slice(0, $scope.fileName.lastIndexOf(".")) + "." + imageFormats[$scope.imageFormat].extension : $scope.fileName;
 					$scope.onCropped(image, tempFileName);
 				}, () => {
 					if (!!$scope.onCancelled) {
@@ -117,11 +128,12 @@ module lui.imagepicker {
 	}
 	class LuidImageCropperModalController {
 		public static IID: string = "luidImageCropperModalController";
-		public static $inject: Array<string> = ["$scope", "$uibModalInstance", "moment", "image", "croppingRatio", "cancelLabel"];
+		public static $inject: Array<string> = ["$scope", "$uibModalInstance", "moment", "image", "imageFormat", "croppingRatio", "cancelLabel"];
 
-		constructor($scope: IImageCropperScope, $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance, moment: moment.MomentStatic, image: string, fileName: string, croppingRatio: number, cancelLabel: string) {
+		constructor($scope: IImageCropperScope, $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance, moment: moment.MomentStatic, image: string, imageFormat: ImageFormat, fileName: string, croppingRatio: number, cancelLabel: string) {
 			let doClose: boolean = false;
 			$scope.image = image;
+			$scope.imageFormat = imageFormat;
 			$scope.fileName = fileName;
 			$scope.cancelLabel = cancelLabel;
 			$scope.croppingRatio = croppingRatio;

ts/image-picker/image-cropper.modal.html

@@ -1,5 +1,5 @@
 <div class="luid-cropper">
-	<ui-cropper image="image" result-image="cropped" area-type="rectangle" result-image-size="'max'" aspect-ratio="croppingRatio"></ui-cropper>
+	<ui-cropper image="image" result-image="cropped" result-image-format="{{imageFormat}}" area-type="rectangle" result-image-size="'max'" aspect-ratio="croppingRatio"></ui-cropper>
 </div>
 <footer class="modal-footer lui right aligned">
 	<div class="lui button" ng-click="crop()">{{ 'LUIIMGCROPPER_CROP' | translate }}</div>

ts/user-picker/user-picker.controller.ts

@@ -353,6 +353,6 @@ module lui.userpicker {
 			"LUIDUSERPICKER_MAIL": "correo electrónico",
 			"LUIDUSERPICKER_ME": "Yo :",
 			"LUIDUSERPICKER_ALL": "Todos los usuarios",
-		})
+		});
 	}]);
 }

yarn.lock

@@ -1854,7 +1854,7 @@ [email protected]:
     lodash._reescape "^3.0.0"
     lodash._reevaluate "^3.0.0"
     lodash._reinterpolate "^3.0.0"
-    lodash.template "^4.5.0"
+    lodash.template "^3.0.0"
     minimist "^1.1.0"
     multipipe "^0.1.2"
     object-assign "^3.0.0"
@@ -2667,26 +2667,6 @@ lockfile@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.3.tgz#2638fc39a0331e9cac1a04b71799931c9c50df79"
 
-lodash._basecopy@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
-
-lodash._basetostring@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
-
-lodash._basevalues@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
-
-lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
-lodash._isiterateecall@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
-
 lodash._reescape@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reescape/-/lodash._reescape-3.0.0.tgz#2b1d6f5dfe07c8a355753e5f27fac7f1cde1616a"
@@ -2699,10 +2679,6 @@ lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
 
-lodash._root@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
-
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -2711,37 +2687,11 @@ lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
-lodash.escape@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
-  dependencies:
-    lodash._root "^3.0.0"
-
-lodash.isarguments@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
-
-lodash.isarray@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
-
-lodash.keys@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
-  dependencies:
-    lodash._getnative "^3.0.0"
-    lodash.isarguments "^3.0.0"
-    lodash.isarray "^3.0.0"
-
 lodash.mergewith@^4.6.0:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
 
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
-[email protected]:
+lodash.template@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
   integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
@@ -3084,7 +3034,7 @@ node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.7.2:
+node-sass@4.7.2, node-sass@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
   dependencies:
@@ -4909,9 +4859,10 @@ xmlbuilder@>=1.0.0, xmlbuilder@~9.0.1:
   version "9.0.7"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
 
-[email protected]:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.2.tgz#dd6899bfbcf684b554e393c30b13b9f3b001a7ee"
+[email protected]:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
+  integrity sha512-kauAa/1btT613pYX92WXR6kx5trYeckB5YMd3pPvtkMo2Twdfhwl683M8NiSqWHHo97xAC6bnvK1DWFKxfmejg==
 
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"