2021-02-27 13:08:34 +09:00
|
|
|
|
// TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
|
|
|
|
|
|
2023-05-08 03:38:39 +09:00
|
|
|
|
import { Component, markRaw, Ref, ref, defineAsyncComponent } from "vue";
|
2023-01-13 13:40:33 +09:00
|
|
|
|
import { EventEmitter } from "eventemitter3";
|
|
|
|
|
import insertTextAtCursor from "insert-text-at-cursor";
|
|
|
|
|
import * as Misskey from "calckey-js";
|
|
|
|
|
import { apiUrl, url } from "@/config";
|
|
|
|
|
import MkPostFormDialog from "@/components/MkPostFormDialog.vue";
|
|
|
|
|
import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
|
2023-02-19 12:48:25 +09:00
|
|
|
|
import MkToast from "@/components/MkToast.vue";
|
|
|
|
|
import MkDialog from "@/components/MkDialog.vue";
|
2023-01-13 13:40:33 +09:00
|
|
|
|
import { MenuItem } from "@/types/menu";
|
|
|
|
|
import { $i } from "@/account";
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
|
|
|
|
export const pendingApiRequestsCount = ref(0);
|
|
|
|
|
|
2021-05-27 17:15:08 +09:00
|
|
|
|
const apiClient = new Misskey.api.APIClient({
|
|
|
|
|
origin: url,
|
|
|
|
|
});
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export const api = ((
|
|
|
|
|
endpoint: string,
|
|
|
|
|
data: Record<string, any> = {},
|
|
|
|
|
token?: string | null | undefined,
|
|
|
|
|
) => {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
pendingApiRequestsCount.value++;
|
|
|
|
|
|
|
|
|
|
const onFinally = () => {
|
|
|
|
|
pendingApiRequestsCount.value--;
|
|
|
|
|
};
|
|
|
|
|
|
2022-07-19 07:49:40 +09:00
|
|
|
|
const authorizationToken = token ?? $i?.token ?? undefined;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
const authorization = authorizationToken
|
|
|
|
|
? `Bearer ${authorizationToken}`
|
|
|
|
|
: undefined;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
2022-07-19 07:49:40 +09:00
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
fetch(endpoint.indexOf("://") > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
|
|
|
|
|
method: "POST",
|
2020-10-17 20:12:00 +09:00
|
|
|
|
body: JSON.stringify(data),
|
2023-01-13 13:40:33 +09:00
|
|
|
|
credentials: "omit",
|
|
|
|
|
cache: "no-cache",
|
2022-07-21 01:40:23 +09:00
|
|
|
|
headers: authorization ? { authorization } : {},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
})
|
|
|
|
|
.then(async (res) => {
|
|
|
|
|
const body = res.status === 204 ? null : await res.json();
|
|
|
|
|
|
|
|
|
|
if (res.status === 200) {
|
|
|
|
|
resolve(body);
|
|
|
|
|
} else if (res.status === 204) {
|
|
|
|
|
resolve();
|
|
|
|
|
} else {
|
|
|
|
|
reject(body.error);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(reject);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
promise.then(onFinally, onFinally);
|
|
|
|
|
|
|
|
|
|
return promise;
|
2021-05-27 17:15:08 +09:00
|
|
|
|
}) as typeof apiClient.request;
|
2022-06-25 18:26:31 +09:00
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export const apiGet = ((
|
|
|
|
|
endpoint: string,
|
|
|
|
|
data: Record<string, any> = {},
|
|
|
|
|
token?: string | null | undefined,
|
|
|
|
|
) => {
|
2022-06-25 18:26:31 +09:00
|
|
|
|
pendingApiRequestsCount.value++;
|
|
|
|
|
|
|
|
|
|
const onFinally = () => {
|
|
|
|
|
pendingApiRequestsCount.value--;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const query = new URLSearchParams(data);
|
|
|
|
|
|
2022-07-19 07:49:40 +09:00
|
|
|
|
const authorizationToken = token ?? $i?.token ?? undefined;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
const authorization = authorizationToken
|
|
|
|
|
? `Bearer ${authorizationToken}`
|
|
|
|
|
: undefined;
|
2022-07-19 07:49:40 +09:00
|
|
|
|
|
2022-06-25 18:26:31 +09:00
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
|
|
|
|
// Send request
|
|
|
|
|
fetch(`${apiUrl}/${endpoint}?${query}`, {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
method: "GET",
|
|
|
|
|
credentials: "omit",
|
|
|
|
|
cache: "default",
|
2022-07-21 01:40:23 +09:00
|
|
|
|
headers: authorization ? { authorization } : {},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
})
|
|
|
|
|
.then(async (res) => {
|
|
|
|
|
const body = res.status === 204 ? null : await res.json();
|
|
|
|
|
|
|
|
|
|
if (res.status === 200) {
|
|
|
|
|
resolve(body);
|
|
|
|
|
} else if (res.status === 204) {
|
|
|
|
|
resolve();
|
|
|
|
|
} else {
|
|
|
|
|
reject(body.error);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(reject);
|
2022-06-25 18:26:31 +09:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
promise.then(onFinally, onFinally);
|
|
|
|
|
|
|
|
|
|
return promise;
|
|
|
|
|
}) as typeof apiClient.request;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
2021-05-27 17:15:08 +09:00
|
|
|
|
export const apiWithDialog = ((
|
2020-10-18 10:11:34 +09:00
|
|
|
|
endpoint: string,
|
|
|
|
|
data: Record<string, any> = {},
|
|
|
|
|
token?: string | null | undefined,
|
2021-05-27 17:15:08 +09:00
|
|
|
|
) => {
|
2020-10-18 10:11:34 +09:00
|
|
|
|
const promise = api(endpoint, data, token);
|
2022-05-26 22:53:09 +09:00
|
|
|
|
promiseDialog(promise, null, (err) => {
|
2021-11-18 23:36:04 +09:00
|
|
|
|
alert({
|
2023-01-13 13:40:33 +09:00
|
|
|
|
type: "error",
|
|
|
|
|
text: err.message + "\n" + (err as any).id,
|
2020-10-18 10:21:02 +09:00
|
|
|
|
});
|
|
|
|
|
});
|
2020-10-18 10:11:34 +09:00
|
|
|
|
|
|
|
|
|
return promise;
|
2021-05-27 17:15:08 +09:00
|
|
|
|
}) as typeof api;
|
2020-10-18 10:11:34 +09:00
|
|
|
|
|
|
|
|
|
export function promiseDialog<T extends Promise<any>>(
|
|
|
|
|
promise: T,
|
2021-01-03 23:58:24 +09:00
|
|
|
|
onSuccess?: ((res: any) => void) | null,
|
2022-05-26 22:53:09 +09:00
|
|
|
|
onFailure?: ((err: Error) => void) | null,
|
2020-10-18 10:11:34 +09:00
|
|
|
|
text?: string,
|
|
|
|
|
): T {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
const showing = ref(true);
|
2020-10-18 10:11:34 +09:00
|
|
|
|
const success = ref(false);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
promise
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (onSuccess) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
showing.value = false;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
onSuccess(res);
|
|
|
|
|
} else {
|
|
|
|
|
success.value = true;
|
|
|
|
|
window.setTimeout(() => {
|
|
|
|
|
showing.value = false;
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
showing.value = false;
|
|
|
|
|
if (onFailure) {
|
|
|
|
|
onFailure(err);
|
|
|
|
|
} else {
|
|
|
|
|
alert({
|
|
|
|
|
type: "error",
|
|
|
|
|
text: err,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
2020-10-19 19:29:04 +09:00
|
|
|
|
// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
MkWaitingDialog,
|
|
|
|
|
{
|
|
|
|
|
success: success,
|
|
|
|
|
showing: showing,
|
|
|
|
|
text: text,
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
|
|
|
|
return promise;
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-01 13:38:48 +09:00
|
|
|
|
let popupIdCount = 0;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export const popups = ref([]) as Ref<
|
|
|
|
|
{
|
|
|
|
|
id: any;
|
|
|
|
|
component: any;
|
|
|
|
|
props: Record<string, any>;
|
|
|
|
|
}[]
|
|
|
|
|
>;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
|
2021-12-18 12:12:47 +09:00
|
|
|
|
const zIndexes = {
|
|
|
|
|
low: 1000000,
|
|
|
|
|
middle: 2000000,
|
|
|
|
|
high: 3000000,
|
|
|
|
|
};
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export function claimZIndex(
|
|
|
|
|
priority: "low" | "middle" | "high" = "low",
|
|
|
|
|
): number {
|
2021-12-18 12:12:47 +09:00
|
|
|
|
zIndexes[priority] += 100;
|
|
|
|
|
return zIndexes[priority];
|
2021-12-10 18:20:41 +09:00
|
|
|
|
}
|
|
|
|
|
|
2023-05-16 05:19:33 +09:00
|
|
|
|
let uniqueId = 0;
|
|
|
|
|
export function getUniqueId(): string {
|
|
|
|
|
return uniqueId++ + '';
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export async function popup(
|
|
|
|
|
component: Component,
|
|
|
|
|
props: Record<string, any>,
|
|
|
|
|
events = {},
|
|
|
|
|
disposeEvent?: string,
|
|
|
|
|
) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
markRaw(component);
|
|
|
|
|
|
2020-11-01 13:38:48 +09:00
|
|
|
|
const id = ++popupIdCount;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
const dispose = () => {
|
|
|
|
|
// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ?
|
2022-01-16 10:14:14 +09:00
|
|
|
|
window.setTimeout(() => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popups.value = popups.value.filter((popup) => popup.id !== id);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
}, 0);
|
|
|
|
|
};
|
|
|
|
|
const state = {
|
|
|
|
|
component,
|
|
|
|
|
props,
|
2023-01-13 13:40:33 +09:00
|
|
|
|
events: disposeEvent
|
|
|
|
|
? {
|
|
|
|
|
...events,
|
|
|
|
|
[disposeEvent]: dispose,
|
|
|
|
|
}
|
|
|
|
|
: events,
|
2020-10-17 20:12:00 +09:00
|
|
|
|
id,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
popups.value.push(state);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
dispose,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-03 10:06:19 +09:00
|
|
|
|
export function pageWindow(path: string) {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkPageWindow.vue")),
|
|
|
|
|
{
|
|
|
|
|
initialPath: path,
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
}
|
|
|
|
|
|
2021-04-11 21:09:35 +09:00
|
|
|
|
export function modalPageWindow(path: string) {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkModalPageWindow.vue")),
|
|
|
|
|
{
|
|
|
|
|
initialPath: path,
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-04-11 21:09:35 +09:00
|
|
|
|
}
|
|
|
|
|
|
2021-11-28 20:07:37 +09:00
|
|
|
|
export function toast(message: string) {
|
2023-02-19 12:48:25 +09:00
|
|
|
|
popup(
|
|
|
|
|
MkToast,
|
|
|
|
|
{
|
|
|
|
|
message,
|
|
|
|
|
},
|
|
|
|
|
{},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-28 20:07:37 +09:00
|
|
|
|
}
|
|
|
|
|
|
2021-11-18 18:45:58 +09:00
|
|
|
|
export function alert(props: {
|
2023-02-19 12:48:25 +09:00
|
|
|
|
type?: "error" | "info" | "success" | "warning" | "waiting" | "question";
|
2021-08-22 13:16:23 +09:00
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
2021-11-18 18:45:58 +09:00
|
|
|
|
}): Promise<void> {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-02-19 12:48:25 +09:00
|
|
|
|
popup(
|
|
|
|
|
MkDialog,
|
|
|
|
|
props,
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve();
|
|
|
|
|
},
|
2021-11-18 18:45:58 +09:00
|
|
|
|
},
|
2023-02-19 12:48:25 +09:00
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-18 18:45:58 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function confirm(props: {
|
2023-02-19 12:48:25 +09:00
|
|
|
|
type: "error" | "info" | "success" | "warning" | "waiting" | "question";
|
2021-11-18 18:45:58 +09:00
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
2023-02-19 09:28:50 +09:00
|
|
|
|
okText?: string;
|
|
|
|
|
cancelText?: string;
|
2021-11-18 18:45:58 +09:00
|
|
|
|
}): Promise<{ canceled: boolean }> {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-02-19 12:48:25 +09:00
|
|
|
|
popup(
|
|
|
|
|
MkDialog,
|
|
|
|
|
{
|
|
|
|
|
...props,
|
|
|
|
|
showCancelButton: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
},
|
2023-02-19 12:48:25 +09:00
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-18 18:45:58 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-10-26 14:44:38 +09:00
|
|
|
|
export function yesno(props: {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
type: "error" | "info" | "success" | "warning" | "waiting" | "question";
|
2022-10-26 14:44:38 +09:00
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
}): Promise<{ canceled: boolean }> {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
...props,
|
|
|
|
|
showCancelButton: true,
|
|
|
|
|
isYesNo: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2022-10-26 14:44:38 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-18 18:45:58 +09:00
|
|
|
|
export function inputText(props: {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
type?: "text" | "email" | "password" | "url";
|
2021-11-18 18:45:58 +09:00
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
placeholder?: string | null;
|
|
|
|
|
default?: string | null;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
}): Promise<
|
|
|
|
|
| { canceled: true; result: undefined }
|
|
|
|
|
| {
|
|
|
|
|
canceled: false;
|
|
|
|
|
result: string;
|
|
|
|
|
}
|
|
|
|
|
> {
|
2021-11-18 18:45:58 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
title: props.title,
|
|
|
|
|
text: props.text,
|
|
|
|
|
input: {
|
|
|
|
|
type: props.type,
|
|
|
|
|
placeholder: props.placeholder,
|
|
|
|
|
default: props.default,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-18 18:45:58 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-03-19 16:22:28 +09:00
|
|
|
|
export function inputParagraph(props: {
|
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
placeholder?: string | null;
|
|
|
|
|
default?: string | null;
|
|
|
|
|
}): Promise<
|
|
|
|
|
| { canceled: true; result: undefined }
|
|
|
|
|
| {
|
|
|
|
|
canceled: false;
|
|
|
|
|
result: string;
|
|
|
|
|
}
|
|
|
|
|
> {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
title: props.title,
|
|
|
|
|
text: props.text,
|
|
|
|
|
input: {
|
|
|
|
|
type: "paragraph",
|
|
|
|
|
placeholder: props.placeholder,
|
|
|
|
|
default: props.default,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-18 18:45:58 +09:00
|
|
|
|
export function inputNumber(props: {
|
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
placeholder?: string | null;
|
|
|
|
|
default?: number | null;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
}): Promise<
|
|
|
|
|
| { canceled: true; result: undefined }
|
|
|
|
|
| {
|
|
|
|
|
canceled: false;
|
|
|
|
|
result: number;
|
|
|
|
|
}
|
|
|
|
|
> {
|
2021-11-18 18:45:58 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
title: props.title,
|
|
|
|
|
text: props.text,
|
|
|
|
|
input: {
|
|
|
|
|
type: "number",
|
|
|
|
|
placeholder: props.placeholder,
|
|
|
|
|
default: props.default,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-18 18:45:58 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function inputDate(props: {
|
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
placeholder?: string | null;
|
|
|
|
|
default?: Date | null;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
}): Promise<
|
|
|
|
|
| { canceled: true; result: undefined }
|
|
|
|
|
| {
|
|
|
|
|
canceled: false;
|
|
|
|
|
result: Date;
|
|
|
|
|
}
|
|
|
|
|
> {
|
2021-11-18 18:45:58 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
title: props.title,
|
|
|
|
|
text: props.text,
|
|
|
|
|
input: {
|
|
|
|
|
type: "date",
|
|
|
|
|
placeholder: props.placeholder,
|
|
|
|
|
default: props.default,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(
|
|
|
|
|
result
|
|
|
|
|
? { result: new Date(result.result), canceled: false }
|
|
|
|
|
: { canceled: true },
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2021-11-18 18:45:58 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export function select<C = any>(
|
|
|
|
|
props: {
|
|
|
|
|
title?: string | null;
|
|
|
|
|
text?: string | null;
|
|
|
|
|
default?: string | null;
|
|
|
|
|
} & (
|
|
|
|
|
| {
|
|
|
|
|
items: {
|
|
|
|
|
value: C;
|
|
|
|
|
text: string;
|
|
|
|
|
}[];
|
|
|
|
|
}
|
|
|
|
|
| {
|
|
|
|
|
groupedItems: {
|
|
|
|
|
label: string;
|
|
|
|
|
items: {
|
|
|
|
|
value: C;
|
|
|
|
|
text: string;
|
|
|
|
|
}[];
|
|
|
|
|
}[];
|
|
|
|
|
}
|
|
|
|
|
),
|
|
|
|
|
): Promise<
|
|
|
|
|
| { canceled: true; result: undefined }
|
|
|
|
|
| {
|
|
|
|
|
canceled: false;
|
|
|
|
|
result: C;
|
|
|
|
|
}
|
|
|
|
|
> {
|
2021-11-18 18:45:58 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
title: props.title,
|
|
|
|
|
text: props.text,
|
|
|
|
|
select: {
|
|
|
|
|
items: props.items,
|
|
|
|
|
groupedItems: props.groupedItems,
|
|
|
|
|
default: props.default,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result ? result : { canceled: true });
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function success() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
const showing = ref(true);
|
2022-01-16 10:14:14 +09:00
|
|
|
|
window.setTimeout(() => {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
showing.value = false;
|
|
|
|
|
}, 1000);
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
success: true,
|
|
|
|
|
showing: showing,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: () => resolve(),
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function waiting() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
const showing = ref(true);
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
success: false,
|
|
|
|
|
showing: showing,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: () => resolve(),
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function form(title, form) {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkFormDialog.vue")),
|
|
|
|
|
{ title, form },
|
|
|
|
|
{
|
|
|
|
|
done: (result) => {
|
|
|
|
|
resolve(result);
|
|
|
|
|
},
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function selectUser() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkUserSelectDialog.vue")),
|
|
|
|
|
{},
|
|
|
|
|
{
|
|
|
|
|
ok: (user) => {
|
|
|
|
|
resolve(user);
|
|
|
|
|
},
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-12 10:20:17 +09:00
|
|
|
|
export async function selectInstance(): Promise<Misskey.entities.Instance> {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
popup(
|
2023-02-12 10:22:05 +09:00
|
|
|
|
defineAsyncComponent(
|
|
|
|
|
() => import("@/components/MkInstanceSelectDialog.vue"),
|
|
|
|
|
),
|
2023-02-12 10:20:17 +09:00
|
|
|
|
{},
|
|
|
|
|
{
|
|
|
|
|
ok: (instance) => {
|
|
|
|
|
resolve(instance);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-17 20:12:00 +09:00
|
|
|
|
export async function selectDriveFile(multiple: boolean) {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(
|
|
|
|
|
() => import("@/components/MkDriveSelectDialog.vue"),
|
|
|
|
|
),
|
|
|
|
|
{
|
|
|
|
|
type: "file",
|
|
|
|
|
multiple,
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
{
|
|
|
|
|
done: (files) => {
|
|
|
|
|
if (files) {
|
|
|
|
|
resolve(multiple ? files : files[0]);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function selectDriveFolder(multiple: boolean) {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(
|
|
|
|
|
() => import("@/components/MkDriveSelectDialog.vue"),
|
|
|
|
|
),
|
|
|
|
|
{
|
|
|
|
|
type: "folder",
|
|
|
|
|
multiple,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
done: (folders) => {
|
|
|
|
|
if (folders) {
|
|
|
|
|
resolve(multiple ? folders : folders[0]);
|
|
|
|
|
}
|
|
|
|
|
},
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-01-28 12:20:42 +09:00
|
|
|
|
export async function pickEmoji(src: HTMLElement | null, opts) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(
|
|
|
|
|
() => import("@/components/MkEmojiPickerDialog.vue"),
|
|
|
|
|
),
|
|
|
|
|
{
|
|
|
|
|
src,
|
|
|
|
|
...opts,
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
{
|
|
|
|
|
done: (emoji) => {
|
|
|
|
|
resolve(emoji);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export async function cropImage(
|
|
|
|
|
image: Misskey.entities.DriveFile,
|
|
|
|
|
options: {
|
|
|
|
|
aspectRatio: number;
|
|
|
|
|
},
|
|
|
|
|
): Promise<Misskey.entities.DriveFile> {
|
2022-06-11 15:45:44 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkCropperDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
file: image,
|
|
|
|
|
aspectRatio: options.aspectRatio,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
ok: (x) => {
|
|
|
|
|
resolve(x);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"closed",
|
|
|
|
|
);
|
2022-06-11 15:45:44 +09:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
type AwaitType<T> = T extends Promise<infer U>
|
|
|
|
|
? U
|
|
|
|
|
: T extends (...args: any[]) => Promise<infer V>
|
|
|
|
|
? V
|
|
|
|
|
: T;
|
2021-02-27 13:08:34 +09:00
|
|
|
|
let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
|
|
|
|
|
let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export async function openEmojiPicker(
|
|
|
|
|
src?: HTMLElement,
|
|
|
|
|
opts,
|
|
|
|
|
initialTextarea: typeof activeTextarea,
|
|
|
|
|
) {
|
2021-02-27 13:08:34 +09:00
|
|
|
|
if (openingEmojiPicker) return;
|
|
|
|
|
|
|
|
|
|
activeTextarea = initialTextarea;
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
const textareas = document.querySelectorAll("textarea, input");
|
2021-02-27 13:08:34 +09:00
|
|
|
|
for (const textarea of Array.from(textareas)) {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
textarea.addEventListener("focus", () => {
|
2021-02-27 13:08:34 +09:00
|
|
|
|
activeTextarea = textarea;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
const observer = new MutationObserver((records) => {
|
2021-02-27 13:08:34 +09:00
|
|
|
|
for (const record of records) {
|
2023-01-13 13:40:33 +09:00
|
|
|
|
for (const node of Array.from(record.addedNodes).filter(
|
|
|
|
|
(node) => node instanceof HTMLElement,
|
|
|
|
|
) as HTMLElement[]) {
|
2023-04-02 16:07:48 +09:00
|
|
|
|
const textareas = node.querySelectorAll("textarea, input");
|
2023-01-13 13:40:33 +09:00
|
|
|
|
for (const textarea of Array.from(textareas).filter(
|
|
|
|
|
(textarea) => textarea.dataset.preventEmojiInsert == null,
|
|
|
|
|
)) {
|
2021-02-27 13:16:59 +09:00
|
|
|
|
if (document.activeElement === textarea) activeTextarea = textarea;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
textarea.addEventListener("focus", () => {
|
2021-02-27 13:16:59 +09:00
|
|
|
|
activeTextarea = textarea;
|
|
|
|
|
});
|
2021-02-27 13:08:34 +09:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
observer.observe(document.body, {
|
|
|
|
|
childList: true,
|
|
|
|
|
subtree: true,
|
|
|
|
|
attributes: false,
|
|
|
|
|
characterData: false,
|
|
|
|
|
});
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
openingEmojiPicker = await popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkEmojiPickerDialog.vue")),
|
|
|
|
|
{
|
|
|
|
|
src,
|
|
|
|
|
...opts,
|
2022-11-07 13:17:59 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
{
|
|
|
|
|
chosen: (emoji) => {
|
|
|
|
|
insertTextAtCursor(activeTextarea, emoji);
|
|
|
|
|
},
|
|
|
|
|
done: (emoji) => {
|
|
|
|
|
insertTextAtCursor(activeTextarea, emoji);
|
|
|
|
|
},
|
|
|
|
|
closed: () => {
|
|
|
|
|
openingEmojiPicker!.dispose();
|
|
|
|
|
openingEmojiPicker = null;
|
|
|
|
|
observer.disconnect();
|
|
|
|
|
},
|
2022-06-11 15:45:44 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
);
|
2021-02-27 13:08:34 +09:00
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export function popupMenu(
|
|
|
|
|
items: MenuItem[] | Ref<MenuItem[]>,
|
|
|
|
|
src?: HTMLElement,
|
|
|
|
|
options?: {
|
|
|
|
|
align?: string;
|
|
|
|
|
width?: number;
|
|
|
|
|
viaKeyboard?: boolean;
|
|
|
|
|
},
|
|
|
|
|
) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2020-11-03 15:22:55 +09:00
|
|
|
|
let dispose;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkPopupMenu.vue")),
|
|
|
|
|
{
|
|
|
|
|
items,
|
|
|
|
|
src,
|
|
|
|
|
width: options?.width,
|
|
|
|
|
align: options?.align,
|
|
|
|
|
viaKeyboard: options?.viaKeyboard,
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
{
|
|
|
|
|
closed: () => {
|
|
|
|
|
resolve();
|
|
|
|
|
dispose();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
).then((res) => {
|
2020-11-03 16:21:28 +09:00
|
|
|
|
dispose = res.dispose;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-13 13:40:33 +09:00
|
|
|
|
export function contextMenu(
|
|
|
|
|
items: MenuItem[] | Ref<MenuItem[]>,
|
|
|
|
|
ev: MouseEvent,
|
|
|
|
|
) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
ev.preventDefault();
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2020-11-03 15:22:55 +09:00
|
|
|
|
let dispose;
|
2023-01-13 13:40:33 +09:00
|
|
|
|
popup(
|
|
|
|
|
defineAsyncComponent(() => import("@/components/MkContextMenu.vue")),
|
|
|
|
|
{
|
|
|
|
|
items,
|
|
|
|
|
ev,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
closed: () => {
|
|
|
|
|
resolve();
|
|
|
|
|
dispose();
|
|
|
|
|
},
|
2020-10-17 20:12:00 +09:00
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
).then((res) => {
|
2020-11-03 16:21:28 +09:00
|
|
|
|
dispose = res.dispose;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-03 22:09:40 +09:00
|
|
|
|
export function post(props: Record<string, any> = {}) {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
|
2020-10-19 14:46:32 +09:00
|
|
|
|
// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
|
|
|
|
|
// Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
|
|
|
|
|
// 複数のpost formを開いたときに場合によってはエラーになる
|
|
|
|
|
// もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
|
2020-11-03 15:22:55 +09:00
|
|
|
|
let dispose;
|
|
|
|
|
popup(MkPostFormDialog, props, {
|
2020-10-17 20:12:00 +09:00
|
|
|
|
closed: () => {
|
|
|
|
|
resolve();
|
|
|
|
|
dispose();
|
|
|
|
|
},
|
2023-01-13 13:40:33 +09:00
|
|
|
|
}).then((res) => {
|
2020-11-03 16:21:28 +09:00
|
|
|
|
dispose = res.dispose;
|
2020-10-17 20:12:00 +09:00
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const deckGlobalEvents = new EventEmitter();
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
export function checkExistence(fileData: ArrayBuffer): Promise<any> {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
const data = new FormData();
|
|
|
|
|
data.append('md5', getMD5(fileData));
|
|
|
|
|
|
|
|
|
|
os.api('drive/files/find-by-hash', {
|
|
|
|
|
md5: getMD5(fileData)
|
|
|
|
|
}).then(resp => {
|
|
|
|
|
resolve(resp.length > 0 ? resp[0] : null);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}*/
|