refactor(admin): update EssayForm to use clickOutside action
Replace manual click event listener with clickOutside action for the publish menu dropdown. This simplifies the code and ensures consistent click-outside behavior across all admin dropdowns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
9cc7baddc6
commit
7300bd672b
1 changed files with 8 additions and 16 deletions
|
|
@ -9,6 +9,7 @@
|
||||||
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
||||||
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
|
import { clickOutside } from '$lib/actions/clickOutside'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import type { JSONContent } from '@tiptap/core'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -315,22 +316,9 @@ $effect(() => {
|
||||||
showPublishMenu = !showPublishMenu
|
showPublishMenu = !showPublishMenu
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close menu when clicking outside
|
function handleClickOutsideMenu() {
|
||||||
function handleClickOutside(event: MouseEvent) {
|
showPublishMenu = false
|
||||||
const target = event.target as HTMLElement
|
|
||||||
if (!target.closest('.save-actions')) {
|
|
||||||
showPublishMenu = false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (showPublishMenu) {
|
|
||||||
document.addEventListener('click', handleClickOutside)
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('click', handleClickOutside)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AdminPage>
|
<AdminPage>
|
||||||
|
|
@ -356,7 +344,11 @@ $effect(() => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<div class="save-actions">
|
<div
|
||||||
|
class="save-actions"
|
||||||
|
use:clickOutside={{ enabled: showPublishMenu }}
|
||||||
|
on:clickoutside={handleClickOutsideMenu}
|
||||||
|
>
|
||||||
<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
|
<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
|
||||||
{status === 'published' ? 'Save' : 'Save Draft'}
|
{status === 'published' ? 'Save' : 'Save Draft'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue