From 615e25f4fa15f87f3630e3d0751822052ad4ce6d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 03:07:28 +0000
Subject: [PATCH] :v:

---
 packages/frontend/src/components/MkMenu.vue   | 43 ++++++++-----------
 packages/frontend/src/components/MkModal.vue  |  9 ++--
 .../frontend/src/components/MkPopupMenu.vue   |  8 ----
 packages/frontend/src/os.ts                   |  1 -
 .../frontend/src/scripts/get-user-menu.ts     |  2 +-
 5 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 5082205b5b..5d08f773e1 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)" @click.stop="showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="isTouchUsing ? null : showChildren(item, $event)" @click="!isTouchUsing ? null : showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -68,8 +68,9 @@ import MkSwitchButton from '@/components/MkSwitch.button.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { isTouchUsing } from '@/scripts/touch';
 
-const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
+const childrenCache = new WeakMap<MenuParent, Ref<(MenuItem | MenuPending)[]>>();
 </script>
 
 <script lang="ts" setup>
@@ -136,11 +137,6 @@ function childActioned() {
 }
 
 const onGlobalMousedown = (event: MouseEvent) => {
-	console.log('globalmousedown', itemsEl);
-	if (!itemsEl || !document.body.contains(itemsEl)) {
-		document.removeEventListener('mousedown', onGlobalMousedown);
-		return;
-	}
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
@@ -156,30 +152,29 @@ function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }
 
-async function showChildren(item: MenuParent, ev: MouseEvent) {
-	console.log(ev);
+function showChildren(item: MenuParent, ev: MouseEvent) {
 	if (props.asDrawer && childrenCache.has(item)) return;
-	const children: Ref<(MenuItem | MenuPending)[]> = ref([]);
-	if (!item.noCache && childrenCache.has(item)) {
-		children.value = childrenCache.get(item)!;
-	} else {
-		if (typeof item.children === 'function') {
-			children.value = [{
-				type: 'pending',
-			}];
-			Promise.resolve(item.children()).then(x => {
-				children.value = x;
-				childrenCache.set(item, x);
-			});
+
+	const children = (() => {
+		if (!item.noCache && childrenCache.has(item)) {
+			return childrenCache.get(item)!;
 		} else {
-			children.value = item.children;
+			if (typeof item.children === 'function') {
+				const result: Ref<(MenuItem | MenuPending)[]> = ref([{ type: 'pending' }]);
+				childrenCache.set(item, result);
+				Promise.resolve(item.children()).then(x => {
+					result.value = x;
+				});
+				return result;
+			} else {
+				return ref(item.children) as Ref<(MenuItem | MenuPending)[]>;
+			}
 		}
-	}
+	})();
 
 	if (props.asDrawer) {
 		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
 			childrenCache.delete(item);
-			console.log('child drawer close');
 			emit('close');
 		});
 		emit('hide');
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 08ee30e441..8368e45d2c 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	})"
 	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
 >
-	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+	<div v-show="manualShowing != null ? (manuallyClosed ? false : manualShowing) : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown.self="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
@@ -150,18 +150,19 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	showing = false;
 	manuallyClosed = true;
 	emit('close');
+	if (props.manualShowing === false) {
+		afterLeave();
+	}
 }
 
 function afterLeave() {
 	emit('hide');
-	console.log('closed?', props.manualShowing, manuallyClosed);
 	if (props.manualShowing === null || manuallyClosed) {
 		emit('closed');
 	}
 }
 
 function onBgClick(e) {
-	console.log(e, contentClicking);
 	if (contentClicking) return;
 	emit('click');
 }
@@ -296,10 +297,8 @@ const onOpened = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
-		console.log('mousedown');
 		contentClicking = true;
 		window.addEventListener('mouseup', ev => {
-			console.log('mouseup');
 			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
 			window.setTimeout(() => {
 				contentClicking = false;
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index e44622a741..85b3eb459c 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -28,35 +28,27 @@ const emit = defineEmits<{
 	(ev: 'closing'): void;
 }>();
 
-console.log('popup menu modal setup', props.items);
-
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
 function click() {
-	console.log('popup menu modal click', props.items);
 	close();
 }
 
 function onModalClose() {
-	console.log('popup menu modal close', props.items);
 	emit('closing');
 }
 
 function onMenuClose() {
-	console.log('popup menu menu click', props.items);
 	close();
 }
 
 function closed() {
-	console.log('popup menu modal closed', props.items);
 	emit('closed');
 }
 
 function close() {
-	console.log('popup menu close', props.items);
 	if (!modal) return;
-	manualShowing.value = false;
 	modal.close();
 }
 </script>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 72de0346d7..2e80e3d8df 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -550,7 +550,6 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 			viaKeyboard: options?.viaKeyboard,
 		}, {
 			closed: () => {
-				console.log('closed detected');
 				resolve();
 				dispose();
 			},
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index f55766fb22..b0f97f74ce 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -330,7 +330,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 	}
 
 	const cleanup = () => {
-		console.log('user menu cleanup', cleanups);
+		if (_DEV_) console.log('user menu cleanup', cleanups);
 		cleanups.forEach(cleanup => cleanup());
 	};