From 2c5f8ed8e6063f2346fec0e7819163f29d0ede2f Mon Sep 17 00:00:00 2001
From: pichalite <pichalite.com@gmail.com>
Date: Mon, 6 Feb 2017 21:00:21 +0000
Subject: [PATCH] Add image options to cropper modal

---
 public/src/client/account/edit.js | 16 ++++++++++++++++
 src/views/modals/crop_picture.tpl | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js
index 57eea04782..752499f34f 100644
--- a/public/src/client/account/edit.js
+++ b/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();
diff --git a/src/views/modals/crop_picture.tpl b/src/views/modals/crop_picture.tpl
index d3bf8e075b..4234c43774 100644
--- a/src/views/modals/crop_picture.tpl
+++ b/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>