2 if (typeof define ===
'function' && define.amd) {
3 define([
'jquery'], factory);
4 }
else if (typeof exports ===
'object') {
6 factory(require(
'jquery'));
14 var console = window.console || {
log:
function () {} };
16 function CropAvatar($element) {
17 this.$container = $element;
19 this.$avatarView = this.$container.find(
'.avatar-view');
20 this.$avatar = this.$avatarView.find(
'img');
21 this.$avatarModal = this.$container.find(
'#avatar-modal');
22 this.$loading = this.$container.find(
'.loading');
24 this.$avatarForm = this.$avatarModal.find(
'.avatar-form');
25 this.$avatarUpload = this.$avatarForm.find(
'.avatar-upload');
26 this.$avatarSrc = this.$avatarForm.find(
'.avatar-src');
27 this.$avatarData = this.$avatarForm.find(
'.avatar-data');
28 this.$avatarInput = this.$avatarForm.find(
'.avatar-input');
29 this.$avatarSave = this.$avatarForm.find(
'.avatar-save');
30 this.$avatarBtns = this.$avatarForm.find(
'.avatar-btns');
32 this.$avatarWrapper = this.$avatarModal.find(
'.avatar-wrapper');
33 this.$avatarPreview = this.$avatarModal.find(
'.avatar-preview');
39 CropAvatar.prototype = {
40 constructor: CropAvatar,
43 fileList: !!$(
'<input type="file">').prop(
'files'),
44 blobURLs: !!window.URL && URL.createObjectURL,
45 formData: !!window.FormData
49 this.support.datauri = this.support.fileList && this.support.blobURLs;
51 if (!this.support.formData) {
60 addListener:
function () {
61 this.$avatarView.on(
'click', $.proxy(this.click,
this));
62 this.$avatarInput.on(
'change', $.proxy(this.change,
this));
63 this.$avatarForm.on(
'submit', $.proxy(this.submit,
this));
64 this.$avatarBtns.on(
'click', $.proxy(this.rotate,
this));
67 initTooltip:
function () {
68 this.$avatarView.tooltip({
73 initModal:
function () {
74 this.$avatarModal.modal({
79 initPreview:
function () {
80 var
url = this.$avatar.attr(
'src');
82 this.$avatarPreview.empty().html(
'<img src="' + url +
'">');
85 initIframe:
function () {
86 var target =
'upload-iframe-' + (
new Date()).getTime(),
87 $iframe = $(
'<iframe>').attr({
94 $iframe.one(
'load',
function () {
97 $iframe.on(
'load',
function () {
101 data = $(
this).contents().find(
'body').text();
103 console.log(e.message);
108 data = $.parseJSON(data);
110 console.log(e.message);
113 _this.submitDone(data);
115 _this.submitFail(
'Image upload failed!');
123 this.$iframe = $iframe;
124 this.$avatarForm.attr(
'target', target).after($iframe.hide());
128 this.$avatarModal.modal(
'show');
132 change:
function () {
136 if (this.support.datauri) {
137 files = this.$avatarInput.prop(
'files');
139 if (files.length > 0) {
142 if (this.isImageFile(file)) {
144 URL.revokeObjectURL(this.url);
147 this.url = URL.createObjectURL(file);
152 file = this.$avatarInput.val();
154 if (this.isImageFile(file)) {
160 submit:
function () {
161 if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
165 if (this.support.formData) {
171 rotate:
function (e) {
175 data = $(e.target).data();
178 this.$img.cropper(data.method, data.option);
183 isImageFile:
function (file) {
185 return /^image\/\w+$/.test(file.type);
187 return /\.(jpg|jpeg|png|gif)$/.test(file);
191 startCropper:
function () {
195 this.$img.cropper(
'replace', this.url);
197 this.$img = $(
'<img src="' + this.url +
'">');
198 this.$avatarWrapper.empty().html(this.$img);
201 preview: this.$avatarPreview.selector,
202 crop:
function (data) {
206 '"height":' + data.height,
207 '"width":' + data.width,
208 '"rotate":' + data.rotate +
'}'
211 _this.$avatarData.val(json);
219 stopCropper:
function () {
221 this.$img.cropper(
'destroy');
227 ajaxUpload:
function () {
228 var url = this.$avatarForm.attr(
'action'),
229 data =
new FormData(this.$avatarForm[0]),
239 beforeSend:
function () {
243 success:
function (data) {
244 _this.submitDone(data);
247 error:
function (XMLHttpRequest, textStatus, errorThrown) {
248 _this.submitFail(textStatus || errorThrown);
251 complete:
function () {
257 syncUpload:
function () {
258 this.$avatarSave.click();
261 submitStart:
function () {
262 this.$loading.fadeIn();
265 submitDone:
function (data) {
268 if ($.isPlainObject(data) && data.state === 200) {
270 this.url = data.result;
272 if (this.support.datauri ||
this.uploaded) {
273 this.uploaded =
false;
276 this.uploaded =
true;
277 this.$avatarSrc.val(this.url);
281 this.$avatarInput.val(
'');
282 }
else if (data.message) {
283 this.alert(data.message);
286 this.alert(
'Failed to response');
290 submitFail:
function (msg) {
294 submitEnd:
function () {
295 this.$loading.fadeOut();
298 cropDone:
function () {
299 this.$avatarForm.get(0).reset();
300 this.$avatar.attr(
'src', this.url);
302 this.$avatarModal.modal(
'hide');
305 alert:
function (msg) {
307 '<div class="alert alert-danger avater-alert">',
308 '<button type="button" class="close" data-dismiss="alert">×</button>',
313 this.$avatarUpload.after($alert);
318 return new CropAvatar($(
'#crop-avatar'));