This commit is contained in:
tamaina 2023-08-03 03:07:28 +00:00
parent 225eabb19d
commit 615e25f4fa
5 changed files with 24 additions and 39 deletions

View File

@ -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');

View File

@ -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;

View File

@ -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>

View File

@ -550,7 +550,6 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
viaKeyboard: options?.viaKeyboard,
}, {
closed: () => {
console.log('closed detected');
resolve();
dispose();
},

View File

@ -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());
};