From 5447ecb306b2d3dc041ce467747111b45691591f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 13 Sep 2020 12:41:44 +0900
Subject: [PATCH] wip
---
package.json | 1 +
src/client/os.ts | 150 ++++++++++++++++++++++----------------------
src/client/root.vue | 4 +-
yarn.lock | 14 +++--
4 files changed, 88 insertions(+), 81 deletions(-)
diff --git a/package.json b/package.json
index ba4d7427dd..eb44d37523 100644
--- a/package.json
+++ b/package.json
@@ -188,6 +188,7 @@
"nprogress": "0.2.0",
"object-assign-deep": "0.4.0",
"os-utils": "0.0.14",
+ "p-cancelable": "2.0.0",
"parse5": "6.0.1",
"parsimmon": "1.15.0",
"pg": "8.3.2",
diff --git a/src/client/os.ts b/src/client/os.ts
index bb37507ad4..37fffc72ee 100644
--- a/src/client/os.ts
+++ b/src/client/os.ts
@@ -1,8 +1,8 @@
import { Component, defineAsyncComponent, markRaw, ref } from 'vue';
+import * as PCancelable from 'p-cancelable';
import Stream from '@/scripts/stream';
import { store } from '@/store';
import { apiUrl } from '@/config';
-import * as EventEmitter from 'eventemitter3';
const ua = navigator.userAgent.toLowerCase();
export const isMobile = /mobile|iphone|ipad|android/.test(ua);
@@ -45,90 +45,92 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
return promise;
}
-export function popup(component: Component, props: Record<string, any>, callback?: Function, option?) {
- markRaw(component);
- const id = Math.random().toString(); // TODO: uuidとか使う
- const showing = ref(true);
- const close = (...args) => {
- if (callback) callback(...args);
- showing.value = false;
- };
- const modal = {
- type: 'popup',
- component,
- props,
- showing,
- source: option?.source,
- done: close,
- bgClick: () => close(),
- closed: () => {
- store.commit('removePopup', id);
- },
- id,
- };
- store.commit('addPopup', modal);
- return close;
-}
+export function popup(component: Component, props: Record<string, any>, events = {}, option?) {
+ return new PCancelable((resolve, reject, onCancel) => {
+ markRaw(component);
+ const id = Math.random().toString(); // TODO: uuidとか使う
+ const showing = ref(true);
+ const close = (...args) => {
+ resolve(...args);
+ showing.value = false;
+ };
+ const modal = {
+ type: 'popup',
+ component,
+ props,
+ showing,
+ events,
+ source: option?.source,
+ done: close,
+ bgClick: () => close(),
+ closed: () => {
+ store.commit('removePopup', id);
+ },
+ id,
+ };
+ store.commit('addPopup', modal);
-export function modal(component: Component, props: Record<string, any>, callback?: Function, option?) {
- //const controller = new EventEmitter();
- //markRaw(controller);
- markRaw(component);
- const id = Math.random().toString(); // TODO: uuidとか使う
- const showing = ref(true);
- const close = (...args) => {
- if (callback) callback(...args);
- showing.value = false;
- };
- const modal = {
- type: 'modal',
- component,
- props,
- showing,
- source: option?.source,
- done: close,
- bgClick: () => {
- if (option?.cancelableByBgClick === false) return;
+ onCancel.shouldReject = false;
+ onCancel(() => {
close();
- },
- closed: () => {
- store.commit('removePopup', id);
- },
- id,
- };
- store.commit('addPopup', modal);
- return close;
-}
-
-export function dialog(props: Record<string, any>) {
- const cancelableByBgClick = props.cancelableByBgClick;
- return new Promise((res, rej) => {
- modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, result => {
- if (result) {
- res(result);
- } else {
- res({ canceled: true });
- }
- }, {
- cancelableByBgClick
});
});
}
-export function menu(props: Record<string, any>) {
- const source = props.source; // TODO: sourceはpropsの外に出して追加の引数として受け取るようにする
- return new Promise((res, rej) => {
- modal(defineAsyncComponent(() => import('@/components/menu.vue')), props, res, {
- position: 'source',
- source
+export function modal(component: Component, props: Record<string, any>, events = {}, option?: { source?: any; position?: any; cancelableByBgClick?: boolean; }) {
+ return new PCancelable((resolve, reject, onCancel) => {
+ markRaw(component);
+ const id = Math.random().toString(); // TODO: uuidとか使う
+ const showing = ref(true);
+ const close = (...args) => {
+ resolve(...args);
+ showing.value = false;
+ };
+ const modal = {
+ type: 'modal',
+ component,
+ props,
+ showing,
+ events,
+ source: option?.source,
+ done: close,
+ bgClick: () => {
+ if (option?.cancelableByBgClick === false) return;
+ close();
+ },
+ closed: () => {
+ store.commit('removePopup', id);
+ },
+ id,
+ };
+ store.commit('addPopup', modal);
+
+ onCancel.shouldReject = false;
+ onCancel(() => {
+ close();
});
});
}
+export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick: boolean; }) {
+ return modal(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {}, { cancelableByBgClick: opts?.cancelableByBgClick }).then(result => {
+ if (result) {
+ return result;
+ } else {
+ return { canceled: true };
+ }
+ });
+}
+
+export function menu(props: Record<string, any>, opts?: { source: any; }) {
+ return modal(defineAsyncComponent(() => import('@/components/menu.vue')), props, {}, {
+ position: 'source',
+ source: opts?.source
+ });
+}
+
export function post(props: Record<string, any>) {
- return new Promise((res, rej) => {
- modal(defineAsyncComponent(() => import('@/components/post-form.vue')), props, res);
- });
+ return modal(defineAsyncComponent(() => import('@/components/post-form.vue')), props);
}
export function sound(type: string) {
diff --git a/src/client/root.vue b/src/client/root.vue
index da75cc862c..5e7cc4a981 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -3,10 +3,10 @@
<DefaultUI v-else/>
<XModal v-for="modal in $store.state.popups.filter(x => x.type === 'modal')" :key="modal.id" @closed="modal.closed" @click="modal.bgClick" :showing="modal.showing" :source="modal.source">
- <component :is="modal.component" v-bind="modal.props" @done="modal.done"/>
+ <component :is="modal.component" v-bind="modal.props" v-on="modal.events" @done="modal.done"/>
</XModal>
-<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')" :key="popup.id" :is="popup.component" v-bind="popup.props" @done="popup.done" @closed="popup.closed"/>
+<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')" :key="popup.id" :is="popup.component" v-bind="popup.props" v-on="modal.events" @done="popup.done" @closed="popup.closed"/>
<div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
</template>
diff --git a/yarn.lock b/yarn.lock
index 0f9d5693be..65b15c20f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6803,6 +6803,11 @@ osenv@^0.1.4:
os-homedir "^1.0.0"
os-tmpdir "^1.0.0"
+p-cancelable@2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.0.0.tgz#4a3740f5bdaf5ed5d7c3e34882c6fb5d6b266a6e"
+ integrity sha512-wvPXDmbMmu2ksjkB4Z3nZWTSkJEb9lqVdMaCKpZUGJG9TMiNp9XcbG3fn9fPKjem04fJMJnXoyFPk2FmgiaiNg==
+
p-defer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -10291,10 +10296,10 @@ webpack-sources@^1.0.1, webpack-sources@^1.4.3:
source-list-map "^2.0.0"
source-map "~0.6.1"
-webpack@5.0.0-beta.29:
- version "5.0.0-beta.29"
- resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-beta.29.tgz#73ee7eb4a8603ade49f37c7417a1560871a79c90"
- integrity sha512-uBVX3gDHTN3FnIqlrGmav5FRW7CujSN4aybLbAd8Uc1hTk+zXDmZAFJFa0pCzzWv7FkKyhdv0+q8BRL2OK7+xg==
+webpack@5.0.0-beta.30:
+ version "5.0.0-beta.30"
+ resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.0.0-beta.30.tgz#11cf2d4ed1ec78eb836da2a7be7809e5e074e3eb"
+ integrity sha512-pOAAo71m6icygRrOPn/lQM4Ky8MN+9dDBwEU9Get285VBbmuZE6AFqizEEV692mYgUit/0+7vnjsnUr8xX2puA==
dependencies:
"@types/eslint-scope" "^3.7.0"
"@types/estree" "^0.0.45"
@@ -10304,7 +10309,6 @@ webpack@5.0.0-beta.29:
"@webassemblyjs/wasm-parser" "1.9.0"
acorn "^7.4.0"
chrome-trace-event "^1.0.2"
- core-js "^3.6.5"
enhanced-resolve "5.0.0-beta.10"
eslint-scope "^5.1.0"
events "^3.2.0"