wip

src/client/components/deck/column.vue

@@ -210,6 +210,7 @@ export default defineComponent({
 		showMenu() {
 			os.menu({
 				items: this.getMenu(),
+			}, {
 				source: this.$refs.menu,
 			});
 		},

src/client/components/drive.file.vue

@@ -108,6 +108,7 @@ export default defineComponent({
 						icon: faTrashAlt,
 						action: this.deleteFile
 					}],
+				}, {
 					source: ev.currentTarget || ev.target,
 				});
 			}

src/client/components/note.vue

@@ -468,9 +468,10 @@ export default defineComponent({
 							renote: this.appearNote,
 						});
 					}
-				}]
+				}],
-				source: this.$refs.renoteButton,
 				viaKeyboard
+			}, {
+				source: this.$refs.renoteButton,
 			});
 		},
 
@@ -684,8 +685,9 @@ export default defineComponent({
 
 			os.menu({
 				items: menu,
-				source: this.$refs.menuButton,
 				viaKeyboard
+			}, {
+				source: this.$refs.menuButton,
 			}).then(this.focus);
 		},
 
@@ -702,8 +704,9 @@ export default defineComponent({
 						this.isDeleted = true;
 					}
 				}],
-				source: this.$refs.renoteTime,
 				viaKeyboard: viaKeyboard
+			}, {
+				source: this.$refs.renoteTime,
 			});
 		},
 

src/client/components/post-form-attaches.vue

@@ -94,7 +94,8 @@ export default defineComponent({
 					icon: faTimesCircle,
 					action: () => { this.detachMedia(file.id) }
 				}],
-				source: ev.currentTarget || ev.target
+			}, {
+				source: ev.currentTarget || ev.target,
 			}).then(() => this.menu = null);
 		}
 	}

src/client/components/post-form.vue

@@ -366,7 +366,8 @@ export default defineComponent({
 					icon: faLink,
 					action: () => { this.chooseFileFromUrl() }
 				}],
-				source: ev.currentTarget || ev.target
+			}, {
+				source: ev.currentTarget || ev.target,
 			});
 		},
 
@@ -625,6 +626,7 @@ export default defineComponent({
 						});
 					}
 				})),
+			}, {
 				source: ev.currentTarget || ev.target,
 			});
 		}

src/client/components/sidebar.vue

@@ -176,6 +176,7 @@ export default defineComponent({
 							align: 'left',
 							fixed: true,
 							width: 240,
+						}, {
 							source: ev.currentTarget || ev.target,
 						});
 					},
@@ -183,6 +184,7 @@ export default defineComponent({
 				align: 'left',
 				fixed: true,
 				width: 240,
+			}, {
 				source: ev.currentTarget || ev.target,
 			});
 		},
@@ -238,6 +240,7 @@ export default defineComponent({
 				align: 'left',
 				fixed: true,
 				width: 200,
+			}, {
 				source: ev.currentTarget || ev.target,
 			});
 		},
@@ -271,6 +274,7 @@ export default defineComponent({
 				align: 'left',
 				fixed: true,
 				width: 200,
+			}, {
 				source: ev.currentTarget || ev.target,
 			});
 		},

src/client/os.ts

@@ -113,13 +113,24 @@ export function modal(component: Component, props: Record<string, any>, events =
 }
 
 export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick: boolean; }) {
-	return modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {}, { cancelableByBgClick: opts?.cancelableByBgClick }).then(result => {
+	return new PCancelable((resolve, reject, onCancel) => {
+		const dialog = modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {}, { cancelableByBgClick: opts?.cancelableByBgClick });
+
+		dialog.then(result => {
 			if (result) {
-			return result;
+				resolve(result);
 			} else {
-			return { canceled: true };
+				resolve({ canceled: true });
 			}
 		});
+
+		dialog.catch(reject);
+
+		onCancel.shouldReject = false;
+		onCancel(() => {
+			dialog.cancel();
+		});
+	});
 }
 
 export function menu(props: Record<string, any>, opts?: { source: any; }) {

src/client/pages/channel-editor.vue

@@ -111,7 +111,7 @@ export default defineComponent({
 		},
 
 		setBannerImage(e) {
-			selectFile(this, e.currentTarget || e.target, null, false).then(file => {
+			selectFile(e.currentTarget || e.target, null, false).then(file => {
 				this.bannerId = file.id;
 			});
 		},

src/client/pages/drive.vue

@@ -70,7 +70,8 @@ export default defineComponent({
 				}],
 				fixed: true,
 				noCenter: true,
-				source: ev.currentTarget || ev.target
+			}, {
+				source: ev.currentTarget || ev.target,
 			}).then(() => {
 				this.menuOpened = false;
 			});

src/client/pages/index.home.vue

@@ -192,7 +192,8 @@ export default defineComponent({
 				}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems, channelItems.length > 0 ? null : undefined, ...channelItems],
 				fixed: true,
 				noCenter: true,
-				source: ev.currentTarget || ev.target
+			}, {
+				source: ev.currentTarget || ev.target,
 			}).then(() => {
 				this.menuOpened = false;
 			});

src/client/pages/instance/emojis.vue

@@ -127,7 +127,7 @@ export default defineComponent({
 
 	methods: {
 		async add(e) {
-			const files = await selectFile(this, e.currentTarget || e.target, null, true);
+			const files = await selectFile(e.currentTarget || e.target, null, true);
 
 			const dialog = os.dialog({
 				type: 'waiting',

src/client/pages/messaging/index.vue

@@ -127,6 +127,7 @@ export default defineComponent({
 					action: () => { this.startGroup() }
 				}],
 				noCenter: true,
+			}, {
 				source: ev.currentTarget || ev.target,
 			});
 		},

src/client/pages/messaging/messaging-room.form.vue

@@ -158,7 +158,7 @@ export default defineComponent({
 		},
 
 		chooseFile(e) {
-			selectFile(this, e.currentTarget || e.target, this.$t('selectFile'), false).then(file => {
+			selectFile(e.currentTarget || e.target, this.$t('selectFile'), false).then(file => {
 				this.file = file;
 			});
 		},

src/client/pages/my-settings/profile.vue

@@ -120,7 +120,7 @@ export default defineComponent({
 
 	methods: {
 		changeAvatar(e) {
-			selectFile(this, e.currentTarget || e.target, this.$t('avatar')).then(file => {
+			selectFile(e.currentTarget || e.target, this.$t('avatar')).then(file => {
 				os.api('i/update', {
 					avatarId: file.id,
 				});
@@ -128,7 +128,7 @@ export default defineComponent({
 		},
 
 		changeBanner(e) {
-			selectFile(this, e.currentTarget || e.target, this.$t('banner')).then(file => {
+			selectFile(e.currentTarget || e.target, this.$t('banner')).then(file => {
 				os.api('i/update', {
 					bannerId: file.id,
 				});

src/client/pages/preferences/theme.vue

@@ -188,7 +188,7 @@ export default defineComponent({
 
 	methods: {
 		setWallpaper(e) {
-			selectFile(this, e.currentTarget || e.target, null, false).then(file => {
+			selectFile(e.currentTarget || e.target, null, false).then(file => {
 				this.wallpaper = file.url;
 			});
 		},

src/client/pages/room/room.vue

@@ -224,7 +224,7 @@ export default defineComponent({
 		},
 
 		chooseImage(key, e) {
-			selectFile(this, e.currentTarget || e.target, null, false).then(file => {
+			selectFile(e.currentTarget || e.target, null, false).then(file => {
 				room.updateProp(key, `/proxy/?${urlQuery({ url: file.thumbnailUrl })}`);
 				this.$refs.preview.selected(room.getSelectedObject());
 				this.changed = true;

src/client/pages/theme-editor.vue

@@ -279,6 +279,7 @@ export default defineComponent({
 							type: 'refConst', key: '',
 						}),
 					},],
+				}, {
 					source: e.currentTarget || e.target,
 				});
 			});

src/client/scripts/select-drive-file.ts

@@ -1,4 +1,4 @@
-export function selectDriveFile($root: any, multiple) {
+export function selectDriveFile(multiple) {
 	return new Promise((res, rej) => {
 		import('@/components/drive-window.vue').then(dialog => {
 			const w = $root.new(dialog, {

src/client/scripts/select-drive-folder.ts

@@ -1,4 +1,4 @@
-export function selectDriveFolder($root: any, multiple) {
+export function selectDriveFolder(multiple) {
 	return new Promise((res, rej) => {
 		import('@/components/drive-window.vue').then(dialog => {
 			const w = $root.new(dialog, {

src/client/scripts/select-file.ts

@@ -1,18 +1,20 @@
 import { faUpload, faCloud } from '@fortawesome/free-solid-svg-icons';
 import { selectDriveFile } from './select-drive-file';
 import { apiUrl } from '@/config';
+import { store } from '@/store';
+import * as os from '@/os';
+import { locale } from '@/i18n';
 
-// TODO: component引数は消せる(各種操作がstoreに移動し、かつstoreが複数ファイルで共有されるようになったため)
+export function selectFile(src: any, label: string | null, multiple = false) {
-export function selectFile(component: any, src: any, label: string | null, multiple = false) {
 	return new Promise((res, rej) => {
 		const chooseFileFromPc = () => {
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.multiple = multiple;
 			input.onchange = () => {
-				const dialog = component.os.dialog({
+				const dialog = os.dialog({
 					type: 'waiting',
-					text: component.$t('uploading') + '...',
+					text: locale['uploading'] + '...',
 					showOkButton: false,
 					showCancelButton: false,
 					cancelableByBgClick: false
@@ -21,7 +23,7 @@ export function selectFile(component: any, src: any, label: string | null, multi
 				const promises = Array.from(input.files).map(file => new Promise((ok, err) => {
 					const data = new FormData();
 					data.append('file', file);
-					data.append('i', component.$store.state.i.token);
+					data.append('i', store.state.i.token);
 
 					fetch(apiUrl + '/drive/files/create', {
 						method: 'POST',
@@ -35,12 +37,12 @@ export function selectFile(component: any, src: any, label: string | null, multi
 				Promise.all(promises).then(driveFiles => {
 					res(multiple ? driveFiles : driveFiles[0]);
 				}).catch(e => {
-					component.os.dialog({
+					os.dialog({
 						type: 'error',
 						text: e
 					});
 				}).finally(() => {
-					dialog.close();
+					dialog.cancel();
 				});
 
 				// 一応廃棄
@@ -55,7 +57,7 @@ export function selectFile(component: any, src: any, label: string | null, multi
 		};
 
 		const chooseFileFromDrive = () => {
-			selectDriveFile(component.$root, multiple).then(files => {
+			selectDriveFile(multiple).then(files => {
 				res(files);
 			});
 		};
@@ -65,24 +67,25 @@ export function selectFile(component: any, src: any, label: string | null, multi
 
 		};
 
-		component.os.menu({
+		os.menu({
 			items: [label ? {
 				text: label,
 				type: 'label'
 			} : undefined, {
-				text: component.$t('upload'),
+				text: locale['upload'],
 				icon: faUpload,
 				action: chooseFileFromPc
 			}, {
-				text: component.$t('fromDrive'),
+				text: locale['fromDrive'],
 				icon: faCloud,
 				action: chooseFileFromDrive
 			}, /*{
-				text: component.$t('fromUrl'),
+				text: locale('fromUrl'),
 				icon: faLink,
 				action: chooseFileFromUrl
 			}*/],
-			source: src
+		}, {
+			source: src,
 		});
 	});
 }

src/client/widgets/timeline.vue

@@ -108,7 +108,8 @@ export default defineComponent({
 					action: () => { this.setSrc('global') }
 				}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems],
 				noCenter: true,
-				source: ev.currentTarget || ev.target
+			}, {
+				source: ev.currentTarget || ev.target,
 			}).then(() => {
 				this.menuOpened = false;
 			});