mirror of
https://github.com/phpbb/phpbb.git
synced 2025-08-25 09:30:46 +02:00
[ticket/15769] Crop avatars on upload
PHPBB3-15769
This commit is contained in:
mrgoldy
Marc Alexander
304
phpBB/assets/css/cropper.css
Normal file
304
phpBB/assets/css/cropper.css
Normal file
@@ -0,0 +1,304 @@
|
||||
/*!
|
||||
* Cropper.js v1.5.6
|
||||
* https://fengyuanchen.github.io/cropperjs
|
||||
*
|
||||
* Copyright 2015-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2019-10-04T04:33:44.164Z
|
||||
*/
|
||||
|
||||
.cropper-container {
|
||||
direction: ltr;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cropper-container img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
image-orientation: 0deg;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
min-height: 0 !important;
|
||||
min-width: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas,
|
||||
.cropper-drag-box,
|
||||
.cropper-crop-box,
|
||||
.cropper-modal {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cropper-drag-box {
|
||||
background-color: #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cropper-modal {
|
||||
background-color: #000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cropper-view-box {
|
||||
display: block;
|
||||
height: 100%;
|
||||
outline: 1px solid #39f;
|
||||
outline-color: rgba(51, 153, 255, 0.75);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-dashed {
|
||||
border: 0 dashed #eee;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cropper-dashed.dashed-h {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px;
|
||||
height: calc(100% / 3);
|
||||
left: 0;
|
||||
top: calc(100% / 3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-dashed.dashed-v {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
height: 100%;
|
||||
left: calc(100% / 3);
|
||||
top: 0;
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.cropper-center {
|
||||
display: block;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
opacity: 0.75;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.cropper-center::before,
|
||||
.cropper-center::after {
|
||||
background-color: #eee;
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cropper-center::before {
|
||||
height: 1px;
|
||||
left: -3px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.cropper-center::after {
|
||||
height: 7px;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
display: block;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-face {
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cropper-line {
|
||||
background-color: #39f;
|
||||
}
|
||||
|
||||
.cropper-line.line-e {
|
||||
cursor: ew-resize;
|
||||
right: -3px;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-line.line-n {
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-line.line-w {
|
||||
cursor: ew-resize;
|
||||
left: -3px;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-line.line-s {
|
||||
bottom: -3px;
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cropper-point {
|
||||
background-color: #39f;
|
||||
height: 5px;
|
||||
opacity: 0.75;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-point.point-e {
|
||||
cursor: ew-resize;
|
||||
margin-top: -3px;
|
||||
right: -3px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.cropper-point.point-n {
|
||||
cursor: ns-resize;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-w {
|
||||
cursor: ew-resize;
|
||||
left: -3px;
|
||||
margin-top: -3px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.cropper-point.point-s {
|
||||
bottom: -3px;
|
||||
cursor: s-resize;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-ne {
|
||||
cursor: nesw-resize;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-nw {
|
||||
cursor: nwse-resize;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-sw {
|
||||
bottom: -3px;
|
||||
cursor: nesw-resize;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-se {
|
||||
bottom: -3px;
|
||||
cursor: nwse-resize;
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
right: -3px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cropper-point.point-se {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.cropper-point.point-se {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.cropper-point.point-se {
|
||||
height: 5px;
|
||||
opacity: 0.75;
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cropper-point.point-se::before {
|
||||
background-color: #39f;
|
||||
bottom: -50%;
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.cropper-invisible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cropper-bg {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
.cropper-hide {
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.cropper-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cropper-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.cropper-crop {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.cropper-disabled .cropper-drag-box,
|
||||
.cropper-disabled .cropper-face,
|
||||
.cropper-disabled .cropper-line,
|
||||
.cropper-disabled .cropper-point {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
9
phpBB/assets/css/cropper.min.css
vendored
Normal file
9
phpBB/assets/css/cropper.min.css
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* Cropper.js v1.5.6
|
||||
* https://fengyuanchen.github.io/cropperjs
|
||||
*
|
||||
* Copyright 2015-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2019-10-04T04:33:44.164Z
|
||||
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
||||
3616
phpBB/assets/javascript/cropper.js
Normal file
3616
phpBB/assets/javascript/cropper.js
Normal file
File diff suppressed because it is too large
Load Diff
10
phpBB/assets/javascript/cropper.min.js
vendored
Normal file
10
phpBB/assets/javascript/cropper.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
73
phpBB/assets/javascript/jquery-cropper.js
vendored
Normal file
73
phpBB/assets/javascript/jquery-cropper.js
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
/*!
|
||||
* jQuery Cropper v1.0.1
|
||||
* https://fengyuanchen.github.io/jquery-cropper
|
||||
*
|
||||
* Copyright 2018-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2019-10-19T08:48:33.062Z
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) :
|
||||
typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) :
|
||||
(global = global || self, factory(global.jQuery, global.Cropper));
|
||||
}(this, function ($, Cropper) { 'use strict';
|
||||
|
||||
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
|
||||
Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
|
||||
|
||||
if ($ && $.fn && Cropper) {
|
||||
var AnotherCropper = $.fn.cropper;
|
||||
var NAMESPACE = 'cropper';
|
||||
|
||||
$.fn.cropper = function jQueryCropper(option) {
|
||||
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||||
args[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
var result;
|
||||
this.each(function (i, element) {
|
||||
var $element = $(element);
|
||||
var isDestroy = option === 'destroy';
|
||||
var cropper = $element.data(NAMESPACE);
|
||||
|
||||
if (!cropper) {
|
||||
if (isDestroy) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
|
||||
cropper = new Cropper(element, options);
|
||||
$element.data(NAMESPACE, cropper);
|
||||
}
|
||||
|
||||
if (typeof option === 'string') {
|
||||
var fn = cropper[option];
|
||||
|
||||
if ($.isFunction(fn)) {
|
||||
result = fn.apply(cropper, args);
|
||||
|
||||
if (result === cropper) {
|
||||
result = undefined;
|
||||
}
|
||||
|
||||
if (isDestroy) {
|
||||
$element.removeData(NAMESPACE);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return result !== undefined ? result : this;
|
||||
};
|
||||
|
||||
$.fn.cropper.Constructor = Cropper;
|
||||
$.fn.cropper.setDefaults = Cropper.setDefaults;
|
||||
|
||||
$.fn.cropper.noConflict = function noConflict() {
|
||||
$.fn.cropper = AnotherCropper;
|
||||
return this;
|
||||
};
|
||||
}
|
||||
|
||||
}));
|
||||
10
phpBB/assets/javascript/jquery-cropper.min.js
vendored
Normal file
10
phpBB/assets/javascript/jquery-cropper.min.js
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
/*!
|
||||
* jQuery Cropper v1.0.1
|
||||
* https://fengyuanchen.github.io/jquery-cropper
|
||||
*
|
||||
* Copyright 2018-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2019-10-19T08:48:33.062Z
|
||||
*/
|
||||
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r((e=e||self).jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c&&c.fn&&s){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=new Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
|
||||
174
phpBB/assets/javascript/phpbb-avatars.js
Normal file
174
phpBB/assets/javascript/phpbb-avatars.js
Normal file
@@ -0,0 +1,174 @@
|
||||
(function($) { // Avoid conflicts with other libraries
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* phpBB Avatars namespace.
|
||||
*
|
||||
* Handles cropping for local file uploads.
|
||||
*/
|
||||
phpbb.avatars = {
|
||||
cropper: null,
|
||||
image: null,
|
||||
|
||||
buttons: $('#avatar-cropper-buttons'),
|
||||
box: $('#avatar-box'),
|
||||
data: $('#avatar-cropper-data'),
|
||||
input: $('#avatar_upload_file'),
|
||||
driver: $('#avatar_driver'),
|
||||
driverUpload: 'avatar_driver_upload',
|
||||
|
||||
/**
|
||||
* Initialise avatar cropping.
|
||||
*/
|
||||
init: function() {
|
||||
// If the cropper library is not available
|
||||
if (!$.isFunction($.fn.cropper)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Correctly position the cropper buttons
|
||||
this.buttons.appendTo(this.box);
|
||||
|
||||
this.image = this.box.children('img');
|
||||
|
||||
this.bindInput();
|
||||
this.bindSelect();
|
||||
},
|
||||
|
||||
/**
|
||||
* Destroy (undo) any initialisation.
|
||||
*/
|
||||
destroy: function() {
|
||||
this.buttons.find('[data-cropper-action]').off('click.phpbb.avatars')
|
||||
this.image.off('crop.phpbb.avatars');
|
||||
|
||||
this.data.val('');
|
||||
this.buttons.hide();
|
||||
|
||||
if (this.cropper !== null) {
|
||||
this.cropper.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind a function to the avatar driver <select> element.
|
||||
*
|
||||
* If a different driver than the "upload" driver is selected, the cropper is destroyed.
|
||||
* Otherwise if the "upload" driver is (re-)selected, and it has a value, initialise it.
|
||||
*/
|
||||
bindSelect: function() {
|
||||
this.driver.on('change', function() {
|
||||
if ($(this).val() === phpbb.avatars.driverUpload) {
|
||||
if (phpbb.avatars.input.val() !== '') {
|
||||
phpbb.avatars.input.trigger('change');
|
||||
}
|
||||
} else {
|
||||
phpbb.avatars.destroy();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind a function to the avatar file upload <input> element.
|
||||
*
|
||||
* If a file was chosen and it is a valid image file, the cropper is initialised.
|
||||
* Otherwise the cropper is destroyed.
|
||||
*/
|
||||
bindInput: function() {
|
||||
this.input.on('change', function() {
|
||||
var fileReader = new FileReader;
|
||||
|
||||
if (this.files[0].type.match('image.*')) {
|
||||
fileReader.readAsDataURL(this.files[0]);
|
||||
|
||||
fileReader.onload = function() {
|
||||
phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar');
|
||||
phpbb.avatars.initCropper();
|
||||
phpbb.avatars.initButtons();
|
||||
}
|
||||
} else {
|
||||
phpbb.avatars.destroy();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind a function to all the cropper <button> elements.
|
||||
*
|
||||
* Only buttons with a data-cropper-action attribute are recognized.
|
||||
* The value for this data attribute should be a function available in the cropper.
|
||||
* It also takes two optional parameters, imploded by a comma.
|
||||
* For example: data-cropper-action="move,0,10" which results in $().cropper('move', 0, 10)
|
||||
*/
|
||||
initButtons: function() {
|
||||
|
||||
this.buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
|
||||
var option = $(this).data('cropper-action').split(',');
|
||||
var action = option[0];
|
||||
|
||||
if (typeof phpbb.avatars.cropper[action] === 'function') {
|
||||
// Special case: flip, set it to the opposite value (-1 and 1).
|
||||
if (action === 'scaleX' || action === 'scaleY') {
|
||||
phpbb.avatars.image.cropper(action, - phpbb.avatars.cropper.getData(true)[action]);
|
||||
} else {
|
||||
phpbb.avatars.image.cropper(action, option[1], option[2]);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialise the cropper (CropperJS).
|
||||
*
|
||||
* @see https://github.com/fengyuanchen/cropperjs
|
||||
*
|
||||
* This creates a cropper instance with a 1 to 1 (square) aspect ratio,
|
||||
* automatically creates the maximum available and allowed cropping area,
|
||||
* and registers a callback function for the 'crop' event.
|
||||
*/
|
||||
initCropper: function() {
|
||||
this.cropper = this.image.cropper({
|
||||
aspectRatio: 1,
|
||||
autoCropArea: 1
|
||||
}).data('cropper');
|
||||
|
||||
this.image.off('crop.phpbb.avatars').on('crop.phpbb.avatars', phpbb.avatars.onCrop);
|
||||
},
|
||||
|
||||
/**
|
||||
* The callback function for the 'crop' event.
|
||||
*
|
||||
* This function ensures that the crop area is within the configured dimensions.
|
||||
* Meaning the width and height can not exceed the limits set by an Administrator.
|
||||
*
|
||||
* It also JSON encodes the data array and places it into an <input> element,
|
||||
* which will be requested server side, and crop the image accordingly.
|
||||
* Image cropping is done server side, to ensure the best image quality
|
||||
* and image blobs (from .toBlob()) can only be send through AJAX requests.
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onCrop: function(event) {
|
||||
var data = phpbb.avatars.data.data();
|
||||
var width = event.detail.width;
|
||||
var height = event.detail.height;
|
||||
|
||||
if (width < data.minWidth || width > data.maxWidth ||
|
||||
height < data.minHeight || height > data.maxHeight
|
||||
) {
|
||||
phpbb.avatars.cropper.setData({
|
||||
width: Math.max(data.minWidth, Math.min(data.maxWidth, width)),
|
||||
height: Math.max(data.minHeight, Math.min(data.maxHeight, height)),
|
||||
});
|
||||
}
|
||||
|
||||
phpbb.avatars.data.val(JSON.stringify(phpbb.avatars.cropper.getData(true)));
|
||||
},
|
||||
};
|
||||
|
||||
$(function() {
|
||||
phpbb.avatars.init();
|
||||
});
|
||||
|
||||
})(jQuery); // Avoid conflicts with other libraries
|
||||
Reference in New Issue
Block a user