Skip to content

Commit 80bea0b

Browse files
michaelmichael
committed
Integrate page selector with EditLink CreateLink flows
1 parent eafac91 commit 80bea0b

6 files changed

Lines changed: 136 additions & 52 deletions

File tree

‎src/routes/components/CreateLink.svelte‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
22
import { getContext } from 'svelte';
3+
import { get_page_browser } from './page_browser_context.svelte.js';
34
45
const svedit = getContext('svedit');
6+
const page_browser = get_page_browser();
57
68
let toggle_link_command = $derived(svedit.session.commands?.toggle_link);
79
let href_input_value = $state('https://');
@@ -69,14 +71,30 @@
6971
onclick={handle_backdrop_click}
7072
>
7173
<div class="flex flex-col">
72-
<input
73-
bind:this={href_input_ref}
74-
type="url"
75-
bind:value={href_input_value}
76-
placeholder="https://example.com"
77-
class="w-72 px-3 py-2 text-sm text-gray-700 border-b border-gray-200 focus:border-(--svedit-editing-stroke) focus:ring-(--svedit-editing-stroke)"
78-
onkeydown={handle_keydown}
79-
/>
74+
<div class="flex items-stretch border-b border-gray-200">
75+
<input
76+
bind:this={href_input_ref}
77+
type="url"
78+
bind:value={href_input_value}
79+
placeholder="https://example.com"
80+
class="w-72 min-w-0 flex-1 border-0 px-3 py-2 text-sm text-gray-700 outline-none focus:ring-1 focus:ring-(--svedit-editing-stroke)"
81+
onkeydown={handle_keydown}
82+
/>
83+
<button
84+
type="button"
85+
class="shrink-0 cursor-pointer border-l border-gray-200 px-3 text-(--svedit-editing-stroke) hover:bg-[oklch(from_var(--svedit-brand)_0.97_0.015_h)]"
86+
title="Select page"
87+
aria-label="Select page"
88+
onclick={() => {
89+
page_browser.open_select((document_id) => {
90+
href_input_value = `/${document_id}`;
91+
open_in_new_tab = false;
92+
});
93+
}}
94+
>
95+
↗
96+
</button>
97+
</div>
8098
<div class="flex items-center justify-between px-3 py-2">
8199
<label class="flex items-center gap-2 cursor-pointer">
82100
<input

‎src/routes/components/EditLink.svelte‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
22
import { getContext } from 'svelte';
3+
import { get_page_browser } from './page_browser_context.svelte.js';
34
45
const svedit = getContext('svedit');
6+
const page_browser = get_page_browser();
57
68
let { path } = $props();
79
@@ -80,14 +82,31 @@
8082
onclick={handle_backdrop_click}
8183
>
8284
<div class="flex flex-col">
83-
<input
84-
bind:this={href_input_ref}
85-
type="url"
86-
bind:value={href_input_value}
87-
placeholder="https://example.com"
88-
class="w-72 px-3 py-2 text-sm text-gray-700 border-0 outline-none focus:ring-1 focus:ring-(--svedit-editing-stroke)"
89-
onkeydown={handle_keydown}
90-
/>
85+
<div class="flex items-stretch border-b border-gray-200">
86+
<input
87+
id="edit-link-url-input"
88+
bind:this={href_input_ref}
89+
type="url"
90+
bind:value={href_input_value}
91+
placeholder="https://example.com"
92+
class="w-72 min-w-0 flex-1 border-0 px-3 py-2 text-sm text-gray-700 outline-none focus:ring-1 focus:ring-(--svedit-editing-stroke)"
93+
onkeydown={handle_keydown}
94+
/>
95+
<button
96+
type="button"
97+
class="shrink-0 cursor-pointer border-l border-gray-200 px-3 text-(--svedit-editing-stroke) hover:bg-[oklch(from_var(--svedit-brand)_0.97_0.015_h)]"
98+
title="Select page"
99+
aria-label="Select page"
100+
onclick={() => {
101+
page_browser.open_select((document_id) => {
102+
href_input_value = `/${document_id}`;
103+
open_in_new_tab = false;
104+
});
105+
}}
106+
>
107+
↗
108+
</button>
109+
</div>
91110
<div class="flex items-center justify-between px-3 py-2">
92111
<label class="flex items-center gap-2 cursor-pointer">
93112
<input

‎src/routes/components/Overlays.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import { getContext } from 'svelte';
3+
import { get_page_browser } from './page_browser_context.svelte.js';
34
import MediaControls from './MediaControls.svelte';
45
import SizableViewboxControls from './SizableViewboxControls.svelte';
56
import CreateLink from './CreateLink.svelte';
@@ -16,9 +17,7 @@
1617
let is_dragging = $state(false);
1718
1819
let overlays_ref = $state();
19-
20-
// Browse drawer state
21-
let browse_drawer_open = $state(false);
20+
const page_browser = get_page_browser();
2221
2322
// --- File drag-and-drop onto media properties ---
2423
let drop_target_path = $state(null);
@@ -217,7 +216,7 @@
217216
<CreateLink />
218217
{/if}
219218
220-
<Drawer bind:open={browse_drawer_open} label="Pages">
219+
<Drawer bind:open={page_browser.state.open} label="Pages">
221220
<PagesDrawer />
222221
</Drawer>
223222
</div>

‎src/routes/components/PageEditor.svelte‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import Toolbar from './Toolbar.svelte';
66
import SaveProgressModal from './SaveProgressModal.svelte';
77
import { create_session } from '../create_session.js';
8+
import { create_page_browser, set_page_browser } from './page_browser_context.svelte.js';
89
910
/** @type {{ initial_doc: any, has_backend?: boolean, is_new?: boolean }} */
1011
let {
@@ -26,6 +27,18 @@
2627
2728
let browser_data_version = $state(0);
2829
30+
const page_browser = create_page_browser({ goto });
31+
32+
Object.defineProperty(page_browser, 'version', {
33+
get() {
34+
return browser_data_version;
35+
}
36+
});
37+
38+
page_browser.invalidate = invalidate_page_browser_data;
39+
40+
set_page_browser(page_browser);
41+
2942
$effect(() => {
3043
document.documentElement.style.scrollBehavior = editable ? 'auto' : 'smooth';
3144
});
@@ -267,13 +280,6 @@
267280
});
268281
key_mapper.push_scope(app_key_map);
269282
270-
setContext('page_browser', {
271-
get version() {
272-
return browser_data_version;
273-
},
274-
invalidate: invalidate_page_browser_data
275-
});
276-
277283
let session = $state(create_session(initial_doc));
278284
279285
$effect(() => {

‎src/routes/components/PagesDrawer.svelte‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
<script>
2-
import { getContext } from 'svelte';
3-
import { goto } from '$app/navigation';
2+
import { get_page_browser } from './page_browser_context.svelte.js';
43
5-
const page_browser = getContext('page_browser');
6-
7-
let {
8-
close_drawer = () => {},
9-
mode = 'navigate',
10-
on_select_page = null
11-
} = $props();
4+
const page_browser = get_page_browser();
125
136
let browser_data = $state(null);
147
let loading = $state(false);
@@ -49,23 +42,13 @@
4942
return count;
5043
}
5144
52-
async function handle_page_action(document_id) {
53-
if (mode === 'select') {
54-
close_drawer();
55-
if (on_select_page) {
56-
console.log('calling on_select_page...');
57-
on_select_page(document_id);
58-
}
59-
return;
60-
}
61-
62-
close_drawer();
63-
await goto(`/${document_id}`);
45+
function handle_page_action(document_id) {
46+
page_browser.handle_page_selected(document_id);
6447
}
6548
66-
async function handle_new_page() {
67-
close_drawer();
68-
await goto('/new');
49+
function handle_new_page() {
50+
page_browser.close();
51+
window.location.href = '/new';
6952
}
7053
7154
function get_preview_src(preview_image_src) {
@@ -81,7 +64,7 @@
8164
const drafts = $derived(browser_data?.drafts ?? []);
8265
const sitemap = $derived(browser_data?.sitemap ?? null);
8366
const page_count = $derived(get_page_count(sitemap));
84-
const is_picker_mode = $derived(mode === 'select');
67+
const is_picker_mode = $derived(page_browser.state.mode === 'select');
8568
const drawer_title = $derived(is_picker_mode ? 'Select page' : 'Pages');
8669
</script>
8770

‎src/routes/components/page_browser_context.svelte.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { createContext } from 'svelte';
2+
3+
export const [get_page_browser, set_page_browser] = createContext();
4+
5+
/**
6+
* @param {{ goto: (href: string) => Promise<void> | void }} options
7+
*/
8+
export function create_page_browser(options) {
9+
const { goto } = options;
10+
11+
const state = $state({
12+
open: false,
13+
mode: 'navigate',
14+
on_select_page: null
15+
});
16+
17+
function reset() {
18+
state.open = false;
19+
state.mode = 'navigate';
20+
state.on_select_page = null;
21+
}
22+
23+
function open_navigate() {
24+
state.mode = 'navigate';
25+
state.on_select_page = null;
26+
state.open = true;
27+
}
28+
29+
function open_select(on_select_page) {
30+
state.mode = 'select';
31+
state.on_select_page = on_select_page;
32+
state.open = true;
33+
}
34+
35+
function close() {
36+
reset();
37+
}
38+
39+
function handle_page_selected(document_id) {
40+
if (state.mode === 'select' && state.on_select_page) {
41+
state.on_select_page(document_id);
42+
reset();
43+
return;
44+
}
45+
46+
reset();
47+
void goto(`/${document_id}`);
48+
}
49+
50+
return {
51+
get state() {
52+
return state;
53+
},
54+
open_navigate,
55+
open_select,
56+
close,
57+
handle_page_selected
58+
};
59+
}

0 commit comments

Comments
 (0)