2018-12-26 19:39:51 +09:00
|
|
|
import { apiUrl, locale } from '../../config';
|
2018-02-21 02:53:34 +09:00
|
|
|
import ProgressDialog from '../views/components/progress-dialog.vue';
|
|
|
|
|
2018-11-09 16:00:29 +09:00
|
|
|
export default ($root: any) => {
|
2018-02-21 02:53:34 +09:00
|
|
|
|
2019-02-18 19:26:53 +09:00
|
|
|
const cropImage = file => new Promise(async (resolve, reject) => {
|
|
|
|
const CropWindow = await import('../views/components/crop-window.vue').then(x => x.default);
|
2018-11-09 16:00:29 +09:00
|
|
|
const w = $root.new(CropWindow, {
|
2018-05-27 13:49:09 +09:00
|
|
|
image: file,
|
2018-12-26 19:39:51 +09:00
|
|
|
title: locale['desktop']['banner-crop-title'],
|
2018-05-27 13:49:09 +09:00
|
|
|
aspectRatio: 16 / 9
|
|
|
|
});
|
2018-02-21 02:53:34 +09:00
|
|
|
|
|
|
|
w.$once('cropped', blob => {
|
|
|
|
const data = new FormData();
|
2018-11-09 16:00:29 +09:00
|
|
|
data.append('i', $root.$store.state.i.token);
|
2018-02-21 02:53:34 +09:00
|
|
|
data.append('file', blob, file.name + '.cropped.png');
|
|
|
|
|
2018-11-09 16:00:29 +09:00
|
|
|
$root.api('drive/folders/find', {
|
2018-12-26 19:39:51 +09:00
|
|
|
name: locale['desktop']['banner']
|
2018-02-21 02:53:34 +09:00
|
|
|
}).then(bannerFolder => {
|
|
|
|
if (bannerFolder.length === 0) {
|
2018-11-09 16:00:29 +09:00
|
|
|
$root.api('drive/folders/create', {
|
2018-12-26 19:39:51 +09:00
|
|
|
name: locale['desktop']['banner']
|
2018-02-21 02:53:34 +09:00
|
|
|
}).then(iconFolder => {
|
2018-04-09 00:33:56 +09:00
|
|
|
resolve(upload(data, iconFolder));
|
2018-02-21 02:53:34 +09:00
|
|
|
});
|
|
|
|
} else {
|
2018-04-09 00:33:56 +09:00
|
|
|
resolve(upload(data, bannerFolder[0]));
|
2018-02-21 02:53:34 +09:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
w.$once('skipped', () => {
|
2018-04-09 00:33:56 +09:00
|
|
|
resolve(file);
|
2018-02-21 02:53:34 +09:00
|
|
|
});
|
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
w.$once('cancelled', reject);
|
|
|
|
|
2018-02-21 02:53:34 +09:00
|
|
|
document.body.appendChild(w.$el);
|
2018-04-09 00:33:56 +09:00
|
|
|
});
|
2018-02-21 02:53:34 +09:00
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
const upload = (data, folder) => new Promise((resolve, reject) => {
|
2018-11-09 16:00:29 +09:00
|
|
|
const dialog = $root.new(ProgressDialog, {
|
2018-12-26 19:39:51 +09:00
|
|
|
title: locale['desktop']['uploading-banner']
|
2018-05-27 13:49:09 +09:00
|
|
|
});
|
2018-02-21 02:53:34 +09:00
|
|
|
document.body.appendChild(dialog.$el);
|
|
|
|
|
2018-03-29 14:48:47 +09:00
|
|
|
if (folder) data.append('folderId', folder.id);
|
2018-02-21 02:53:34 +09:00
|
|
|
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
xhr.open('POST', apiUrl + '/drive/files/create', true);
|
|
|
|
xhr.onload = e => {
|
|
|
|
const file = JSON.parse((e.target as any).response);
|
|
|
|
(dialog as any).close();
|
2018-04-09 00:33:56 +09:00
|
|
|
resolve(file);
|
2018-02-21 02:53:34 +09:00
|
|
|
};
|
2018-04-09 00:33:56 +09:00
|
|
|
xhr.onerror = reject;
|
2018-02-21 02:53:34 +09:00
|
|
|
|
|
|
|
xhr.upload.onprogress = e => {
|
2018-02-21 05:55:19 +09:00
|
|
|
if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
|
2018-02-21 02:53:34 +09:00
|
|
|
};
|
|
|
|
|
|
|
|
xhr.send(data);
|
2018-04-09 00:33:56 +09:00
|
|
|
});
|
2018-02-21 02:53:34 +09:00
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
const setBanner = file => {
|
2018-11-09 16:00:29 +09:00
|
|
|
return $root.api('i/update', {
|
2018-03-29 14:48:47 +09:00
|
|
|
bannerId: file.id
|
2018-02-21 02:53:34 +09:00
|
|
|
}).then(i => {
|
2018-11-09 16:00:29 +09:00
|
|
|
$root.$store.commit('updateIKeyValue', {
|
2018-05-27 13:49:09 +09:00
|
|
|
key: 'bannerId',
|
|
|
|
value: i.bannerId
|
|
|
|
});
|
2018-11-09 16:00:29 +09:00
|
|
|
$root.$store.commit('updateIKeyValue', {
|
2018-05-27 13:49:09 +09:00
|
|
|
key: 'bannerUrl',
|
|
|
|
value: i.bannerUrl
|
|
|
|
});
|
2018-02-21 05:55:19 +09:00
|
|
|
|
2018-12-02 15:28:52 +09:00
|
|
|
$root.dialog({
|
2018-12-26 19:39:51 +09:00
|
|
|
title: locale['desktop']['banner-updated'],
|
2018-11-14 16:30:58 +09:00
|
|
|
text: null
|
2018-02-21 02:53:34 +09:00
|
|
|
});
|
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
return i;
|
2018-02-21 02:53:34 +09:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
return (file = null) => {
|
|
|
|
const selectedFile = file
|
|
|
|
? Promise.resolve(file)
|
2018-11-09 16:00:29 +09:00
|
|
|
: $root.$chooseDriveFile({
|
2018-04-09 00:33:56 +09:00
|
|
|
multiple: false,
|
2018-12-26 19:39:51 +09:00
|
|
|
title: locale['desktop']['choose-banner']
|
2018-04-09 00:33:56 +09:00
|
|
|
});
|
2018-04-26 14:44:23 +09:00
|
|
|
|
2018-04-09 00:33:56 +09:00
|
|
|
return selectedFile
|
|
|
|
.then(cropImage)
|
|
|
|
.then(setBanner)
|
|
|
|
.catch(err => err && console.warn(err));
|
|
|
|
};
|
2018-02-21 02:53:34 +09:00
|
|
|
};
|