misskey/src/web/app/desktop/scripts/update-avatar.js

88 lines
2.2 KiB
JavaScript
Raw Normal View History

2017-03-18 20:05:11 +09:00
import * as riot from 'riot';
import CONFIG from '../../common/scripts/config';
import dialog from './dialog';
import api from '../../common/scripts/api';
2017-02-18 17:56:27 +09:00
2017-03-18 20:05:11 +09:00
export default (I, cb, file = null) => {
2017-02-18 17:56:27 +09:00
const fileSelected = file => {
const cropper = riot.mount(document.body.appendChild(document.createElement('mk-crop-window')), {
file: file,
title: 'アバターとして表示する部分を選択',
aspectRatio: 1 / 1
})[0];
2017-02-27 17:08:27 +09:00
2017-02-18 17:56:27 +09:00
cropper.on('cropped', blob => {
const data = new FormData();
data.append('i', I.token);
data.append('file', blob, file.name + '.cropped.png');
api(I, 'drive/folders/find', {
name: 'アイコン'
}).then(iconFolder => {
if (iconFolder.length === 0) {
2017-02-19 07:15:18 +09:00
api(I, 'drive/folders/create', {
2017-02-18 17:56:27 +09:00
name: 'アイコン'
}).then(iconFolder => {
2017-02-27 17:08:59 +09:00
upload(data, iconFolder);
2017-02-18 17:56:27 +09:00
});
} else {
2017-02-27 17:08:59 +09:00
upload(data, iconFolder[0]);
2017-02-18 17:56:27 +09:00
}
});
});
2017-02-27 17:08:27 +09:00
2017-02-27 17:17:40 +09:00
cropper.on('skipped', () => {
2017-02-18 17:56:27 +09:00
set(file);
});
};
2017-02-27 17:08:59 +09:00
const upload = (data, folder) => {
2017-02-18 17:56:27 +09:00
const progress = riot.mount(document.body.appendChild(document.createElement('mk-progress-dialog')), {
title: '新しいアバターをアップロードしています'
})[0];
2017-02-27 17:08:27 +09:00
2017-02-18 17:56:27 +09:00
if (folder) data.append('folder_id', folder.id);
2017-02-27 17:08:27 +09:00
2017-02-18 17:56:27 +09:00
const xhr = new XMLHttpRequest();
2017-02-19 15:32:10 +09:00
xhr.open('POST', CONFIG.apiUrl + '/drive/files/create', true);
2017-02-18 17:56:27 +09:00
xhr.onload = e => {
const file = JSON.parse(e.target.response);
progress.close();
set(file);
};
xhr.upload.onprogress = e => {
if (e.lengthComputable) progress.updateProgress(e.loaded, e.total);
};
xhr.send(data);
};
const set = file => {
api(I, 'i/update', {
avatar_id: file.id
}).then(i => {
dialog('<i class="fa fa-info-circle"></i>アバターを更新しました',
'新しいアバターが反映されるまで時間がかかる場合があります。',
[{
text: 'わかった'
}]);
if (cb) cb(i);
});
};
if (file) {
fileSelected(file);
} else {
const browser = riot.mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
multiple: false,
title: '<i class="fa fa-picture-o"></i>アバターにする画像を選択'
})[0];
browser.one('selected', file => {
fileSelected(file);
});
}
};