Merge pull request #5417 from pichalite/cropper-options

Add image options to cropper modal

public/src/client/account/edit.js

@@ -224,6 +224,22 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator',
 						viewMode: 1
 					});
 					
+					cropperModal.find('.rotate').on('click', function () {
+						var degrees = this.getAttribute("data-degrees");
+						cropperTool.rotate(degrees);	
+					});
+					
+					cropperModal.find('.flip').on('click', function () {
+						var option = this.getAttribute("data-option");
+						var method = this.getAttribute("data-method");
+						method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
+						this.setAttribute("data-option", option * -1);
+					});
+					
+					cropperModal.find('.reset').on('click', function () {
+						cropperTool.reset();	
+					});
+					
 					cropperModal.find('.crop-btn').on('click', function () {
 						$(this).addClass('disabled');
 						var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();

src/views/modals/crop_picture.tpl

@@ -11,7 +11,22 @@
 						</div>
 					</div>
 					
-					<img id="cropped-image" src="{url}" >
+					<div class="cropper">
+						<img id="cropped-image" src="{url}" >
+					</div>
+					
+					<div class="btn-group">
+						<button class="btn btn-primary rotate" data-degrees="-45"><i class="fa fa-rotate-left"></i></button>
+						<button class="btn btn-primary rotate" data-degrees="45"><i class="fa fa-rotate-right"></i></button>
+					</div>
+					<div class="btn-group">
+						<button class="btn btn-primary flip" data-option="-1" data-method="scaleX"><i class="fa fa-arrows-h"></i></button>
+						<button class="btn btn-primary flip" data-option="1" data-method="scaleY"><i class="fa fa-arrows-v"></i></button>
+					</div>
+					<div class="btn-group">
+						<button class="btn btn-primary reset"><i class="fa fa-refresh"></i></button>
+					</div>
+					
  				</div>
 				<div class="modal-footer">
 					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>