forked from FoundKeyGang/FoundKey
Fix banner selection from user page and drives
Previously, updateBanner takes a callback as a first argument of the function, but some calls passes a file object. I've refactored it with Promise to avoid those misuses (although it should have type definitions :/)
This commit is contained in:
parent
2ce9ea2eda
commit
8a37227907
2 changed files with 30 additions and 24 deletions
|
@ -3,9 +3,9 @@ import { apiUrl } from '../../config';
|
||||||
import CropWindow from '../views/components/crop-window.vue';
|
import CropWindow from '../views/components/crop-window.vue';
|
||||||
import ProgressDialog from '../views/components/progress-dialog.vue';
|
import ProgressDialog from '../views/components/progress-dialog.vue';
|
||||||
|
|
||||||
export default (os: OS) => (cb, file = null) => {
|
export default (os: OS) => {
|
||||||
const fileSelected = file => {
|
|
||||||
|
|
||||||
|
const cropImage = file => new Promise((resolve, reject) => {
|
||||||
const w = new CropWindow({
|
const w = new CropWindow({
|
||||||
propsData: {
|
propsData: {
|
||||||
image: file,
|
image: file,
|
||||||
|
@ -26,22 +26,24 @@ export default (os: OS) => (cb, file = null) => {
|
||||||
os.api('drive/folders/create', {
|
os.api('drive/folders/create', {
|
||||||
name: 'バナー'
|
name: 'バナー'
|
||||||
}).then(iconFolder => {
|
}).then(iconFolder => {
|
||||||
upload(data, iconFolder);
|
resolve(upload(data, iconFolder));
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
upload(data, bannerFolder[0]);
|
resolve(upload(data, bannerFolder[0]));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
w.$once('skipped', () => {
|
w.$once('skipped', () => {
|
||||||
set(file);
|
resolve(file);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.body.appendChild(w.$el);
|
w.$once('cancelled', reject);
|
||||||
};
|
|
||||||
|
|
||||||
const upload = (data, folder) => {
|
document.body.appendChild(w.$el);
|
||||||
|
});
|
||||||
|
|
||||||
|
const upload = (data, folder) => new Promise((resolve, reject) => {
|
||||||
const dialog = new ProgressDialog({
|
const dialog = new ProgressDialog({
|
||||||
propsData: {
|
propsData: {
|
||||||
title: '新しいバナーをアップロードしています'
|
title: '新しいバナーをアップロードしています'
|
||||||
|
@ -56,18 +58,19 @@ export default (os: OS) => (cb, file = null) => {
|
||||||
xhr.onload = e => {
|
xhr.onload = e => {
|
||||||
const file = JSON.parse((e.target as any).response);
|
const file = JSON.parse((e.target as any).response);
|
||||||
(dialog as any).close();
|
(dialog as any).close();
|
||||||
set(file);
|
resolve(file);
|
||||||
};
|
};
|
||||||
|
xhr.onerror = reject;
|
||||||
|
|
||||||
xhr.upload.onprogress = e => {
|
xhr.upload.onprogress = e => {
|
||||||
if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
|
if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
|
||||||
};
|
};
|
||||||
|
|
||||||
xhr.send(data);
|
xhr.send(data);
|
||||||
};
|
});
|
||||||
|
|
||||||
const set = file => {
|
const setBanner = file => {
|
||||||
os.api('i/update', {
|
return os.api('i/update', {
|
||||||
bannerId: file.id
|
bannerId: file.id
|
||||||
}).then(i => {
|
}).then(i => {
|
||||||
os.i.bannerId = i.bannerId;
|
os.i.bannerId = i.bannerId;
|
||||||
|
@ -81,18 +84,21 @@ export default (os: OS) => (cb, file = null) => {
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
|
|
||||||
if (cb) cb(i);
|
return i;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
if (file) {
|
return (file = null) => {
|
||||||
fileSelected(file);
|
const selectedFile = file
|
||||||
} else {
|
? Promise.resolve(file)
|
||||||
os.apis.chooseDriveFile({
|
: os.apis.chooseDriveFile({
|
||||||
multiple: false,
|
multiple: false,
|
||||||
title: '%fa:image%バナーにする画像を選択'
|
title: '%fa:image%バナーにする画像を選択'
|
||||||
}).then(file => {
|
});
|
||||||
fileSelected(file);
|
|
||||||
});
|
return selectedFile
|
||||||
}
|
.then(cropImage)
|
||||||
|
.then(setBanner)
|
||||||
|
.catch(err => err && console.warn(err));
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -62,7 +62,7 @@ export default Vue.extend({
|
||||||
onBannerClick() {
|
onBannerClick() {
|
||||||
if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
|
if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
|
||||||
|
|
||||||
(this as any).apis.updateBanner((this as any).os.i, i => {
|
(this as any).apis.updateBanner().then(i => {
|
||||||
this.user.bannerUrl = i.bannerUrl;
|
this.user.bannerUrl = i.bannerUrl;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue