1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
const Avatar = {
cropper: null,
init: function(inputSelector) {
jQuery(document).on('change', inputSelector, function() {
Avatar.readFile(this);
jQuery(document)
.off('submit.avatar', 'form.settings-avatar')
.on('submit.avatar', 'form.settings-avatar', function() {
var data = Avatar.cropper.getData();
return Avatar.checkImageSize(data);
});
});
},
readFile: function(input) {
if (window.FileReader && input.files && input.files[0]) {
var reader = new window.FileReader();
if (input.files[0].size <= jQuery(input).data('max-size')) {
var container = jQuery('div#avatar-preview'),
dialog = container.closest('div[role="dialog"]');
// We are in a modal dialog
if (dialog.length > 0) {
// Adjust maximal cropper container height to dialog dimensions.
container.css('height', dialog.height() - 200);
container.css('width', dialog.width() - 220);
container.css('max-height', dialog.height() - 200);
container.css('max-width', dialog.width() - 220);
// No dialog, full page.
} else {
dialog = jQuery('#content');
// Responsive view.
if (jQuery('html').hasClass('responsified')) {
// Adjust maximal cropper container height to page dimensions.
container.css('height', dialog.height() - 220);
container.css('width', 0.95 * dialog.width());
container.css('max-height', dialog.height() * 220);
container.css('max-width', 0.95 * dialog.width());
// Non-dialog, non-responsive view.
} else {
// Adjust maximal cropper container height to page dimensions.
container.css('height', dialog.height() - 100);
container.css('width', dialog.width() - 200);
container.css('max-height', dialog.height() * 220);
container.css('max-width', dialog.width() - 100);
}
}
reader.onload = function(event) {
var image = document.getElementById('new-avatar');
if (image) {
image.src = event.target.result;
import(/* webpackChunkName: "avatarcropper" */ 'cropperjs/dist/cropper.js')
.then(function(cropperjs) {
var Cropper = cropperjs['default'];
Avatar.cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 2
});
})
.catch(function(error) {
console.log('An error occurred while loading the croppers lib', error);
});
}
};
reader.readAsDataURL(input.files[0]);
jQuery('#avatar-buttons').removeClass('hidden-js');
jQuery('label.file-upload').hide();
jQuery('#avatar-zoom-in').on('click', function() {
Avatar.cropper.zoom(0.1);
return false;
});
jQuery('#avatar-zoom-out').on('click', function() {
Avatar.cropper.zoom(-0.1);
return false;
});
jQuery('#avatar-rotate-clockwise').on('click', function() {
Avatar.cropper.rotate(90);
return false;
});
jQuery('#avatar-rotate-counter-clockwise').on('click', function() {
Avatar.cropper.rotate(-90);
return false;
});
jQuery('#submit-avatar').on('click', function() {
jQuery('#cropped-image').attr('value', Avatar.cropper.getCroppedCanvas().toDataURL('image/jpeg', 0.7));
});
} else {
alert(jQuery(input).data('message-too-large'));
}
} else {
alert("Sorry - your browser doesn't support the FileReader API");
}
},
checkImageSize: function(data) {
// Show a warning if cropped area is smaller than 250x250px.
if (data.width < 250 || data.height < 250) {
return confirm(jQuery('#new-avatar').data('message-too-small'));
}
return true;
}
};
export default Avatar;
|
