From 5447ecb306b2d3dc041ce467747111b45691591f Mon Sep 17 00:00:00 2001 From: syuilo 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 = {}, token?: st return promise; } -export function popup(component: Component, props: Record, 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, 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, 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) { - 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) { - 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, 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, 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, opts?: { source: any; }) { + return modal(defineAsyncComponent(() => import('@/components/menu.vue')), props, {}, { + position: 'source', + source: opts?.source + }); +} + export function post(props: Record) { - 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 @@ - + - +
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"