add: Crop and select button. So you can select the image directly aft…

…er crop
noam148 · Nov 20, 2016 · e5b01e6 · e5b01e6
1 parent f132d7e
commit e5b01e6
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 16 deletions.
diff --git a/assets/source/js/script.imagemanager.module.js b/assets/source/js/script.imagemanager.module.js
@@ -45,7 +45,7 @@ var imageManagerModule = {
 	},
 	//pick the selected image
 	pickImage: function(){
-
+		//switch between select type
 		switch(imageManagerModule.selectType){
 			//default widget selector
 			case "input":
@@ -145,7 +145,9 @@ var imageManagerModule = {
 		}
 	},
 	//get image details
-	getDetails: function(id){
+	getDetails: function(id, pickAfterGetDetails){
+		//set propertie if not set
+		pickAfterGetDetails = pickAfterGetDetails !== undefined ? pickAfterGetDetails : false;
 		//call action by ajax
 		$.ajax({
 			url: imageManagerModule.baseUrl+"/view",
@@ -158,15 +160,22 @@ var imageManagerModule = {
 			success: function (responseData, textStatus, jqXHR) {
 				//set imageManagerModule.selectedImage property
 				imageManagerModule.selectedImage = responseData; 
-				//set text elements
-				$("#module-imagemanager .image-info .fileName").text(responseData.fileName).attr("title",responseData.fileName);
-				$("#module-imagemanager .image-info .created").text(responseData.created);
-				$("#module-imagemanager .image-info .fileSize").text(responseData.fileSize);
-				$("#module-imagemanager .image-info .dimensions .dimension-width").text(responseData.dimensionWidth);
-				$("#module-imagemanager .image-info .dimensions .dimension-height").text(responseData.dimensionHeight);
-				$("#module-imagemanager .image-info .thumbnail").html("<img src='"+responseData.image+"' alt='"+responseData.fileName+"'/>");
-				//remove hide class
-				$("#module-imagemanager .image-info").removeClass("hide");
+
+				//if need to pick image?
+				if(pickAfterGetDetails){
+					imageManagerModule.pickImage();
+				//else set data
+				}else{
+					//set text elements
+					$("#module-imagemanager .image-info .fileName").text(responseData.fileName).attr("title",responseData.fileName);
+					$("#module-imagemanager .image-info .created").text(responseData.created);
+					$("#module-imagemanager .image-info .fileSize").text(responseData.fileSize);
+					$("#module-imagemanager .image-info .dimensions .dimension-width").text(responseData.dimensionWidth);
+					$("#module-imagemanager .image-info .dimensions .dimension-height").text(responseData.dimensionHeight);
+					$("#module-imagemanager .image-info .thumbnail").html("<img src='"+responseData.image+"' alt='"+responseData.fileName+"'/>");
+					//remove hide class
+					$("#module-imagemanager .image-info").removeClass("hide");
+				}
 			},
 			error: function (jqXHR, textStatus, errorThrown) {
 				alert("Error: can't get ''data''");
@@ -230,7 +239,9 @@ var imageManagerModule = {
 			}
 		},
 		//apply crop
-		applyCrop: function(){
+		applyCrop: function(pickAfterCrop){
+			//set propertie if not set
+			pickAfterCrop = pickAfterCrop !== undefined ? pickAfterCrop : false;
 			//check if isset image
 			if(imageManagerModule.selectedImage !== null){
 				//set image in cropper
@@ -248,10 +259,16 @@ var imageManagerModule = {
 					success: function (responseData, textStatus, jqXHR) {
 						//set cropped image
 						if(responseData !== null){
-							//reload pjax container
-							$.pjax.reload('#pjax-mediamanager', {push: false, replace: false, timeout: 5000, scrollTo: false});
-							//set new image
-							imageManagerModule.selectImage(responseData);
+							//if pickAfterCrop is true? select directly else
+							if(pickAfterCrop){
+								imageManagerModule.getDetails(responseData, true);
+							//else select the image only
+							}else{
+								//set new image
+								imageManagerModule.selectImage(responseData);
+								//reload pjax container
+								$.pjax.reload('#pjax-mediamanager', {push: false, replace: false, timeout: 5000, scrollTo: false});
+							}
 						}
 						//close editor
 						imageManagerModule.editor.close();
@@ -297,6 +314,11 @@ $(document).ready(function () {
 		imageManagerModule.editor.applyCrop();	
 		return false;
 	});
+	//on click apply crop
+	$(document).on("click", "#module-imagemanager .image-cropper .apply-crop-select", function (){
+		imageManagerModule.editor.applyCrop(true);	
+		return false;
+	});
 	//on click cancel crop
 	$(document).on("click", "#module-imagemanager .image-cropper .cancel-crop", function (){
 		imageManagerModule.editor.close();	

diff --git a/messages/de/imagemanager.php b/messages/de/imagemanager.php
@@ -5,6 +5,7 @@
     'Cancel' => 'Annullieren',
     'Created' => 'Erstellt',
     'Crop' => 'Zuschneiden',
+	'Crop and select' => 'Zuschneiden und auswählen',
     'Delete' => 'Löschen',
     'File hash' => 'File hash',
     'File name' => 'File Name',

diff --git a/messages/en/imagemanager.php b/messages/en/imagemanager.php
@@ -5,6 +5,7 @@
 	'Cancel' => 'Cancel',
 	'Created' => 'Created',
 	'Crop' => 'Crop',
+	'Crop and select' => 'Crop and select',
 	'Delete' => 'Delete',
 	'File hash' => 'File hash',
     'File name' => 'File name',

diff --git a/messages/fr/imagemanager.php b/messages/fr/imagemanager.php
@@ -5,6 +5,7 @@
     'Cancel' => 'Annuler',
     'Created' => 'Crée',
     'Crop' => 'Ajuster',
+	'Crop and select' => 'Ajuster et sélectionner',
     'Delete' => 'Effacer',
     'File hash' => 'Hash du fichier',
     'File name' => 'Nom du fichier',

diff --git a/messages/it/imagemanager.php b/messages/it/imagemanager.php
@@ -5,6 +5,7 @@
 	'Cancel' => 'Cancellre',
 	'Created' => 'Creato',
 	'Crop' => 'Tagliare a formato',
+	'Crop and select' => 'Tagliare a formato e selezionare',
 	'Delete' => 'Cancellare',
 	'File hash' => 'File hash',
 	'File name' => 'Nome del file',

diff --git a/messages/nl/imagemanager.php b/messages/nl/imagemanager.php
@@ -5,6 +5,7 @@
 	'Cancel' => 'Annuleer',
 	'Created' => 'Aangemaakt',
 	'Crop' => 'Bijsnijden',
+	'Crop and select' => 'Bijsnijden en selecteren',
 	'Delete' => 'Verwijderen',
 	'File hash' => 'Bestand hash',
     'File name' => 'Bestandsnaam',

diff --git a/views/manager/index.php b/views/manager/index.php
@@ -20,6 +20,12 @@
 						<i class="fa fa-crop"></i>
 						<span class="hidden-xs"><?=Yii::t('imagemanager','Crop')?></span>
 					</a>
+					<?php if($viewMode === "iframe"): ?>
+					<a href="#" class="btn btn-primary apply-crop-select">
+						<i class="fa fa-crop"></i>
+						<span class="hidden-xs"><?=Yii::t('imagemanager','Crop and select')?></span>
+					</a>
+					<?php endif; ?>
 					<a href="#" class="btn btn-default cancel-crop">
 						<i class="fa fa-undo"></i>
 						<span class="hidden-xs"><?=Yii::t('imagemanager','Cancel')?></span>