Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-01-02 13:50:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5417 from pichalite/cropper-options

Browse Source 
Add image options to cropper modal
This commit is contained in:
psychobunny
2017-02-06 16:17:49 -05:00
committed by GitHub
parent dbc3113940 2c5f8ed8e6
commit 034f3f0268
2 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/src/client/account/edit.js
View File

@@ -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();

17
src/views/modals/crop_picture.tpl
View File

@@ -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>