diff --git a/index.html b/index.html index c52ed62..c414ada 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@ -
+
diff --git a/src/App.svelte b/src/App.svelte index 619da13..d5ff876 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -26,9 +26,9 @@ - + {#if $appState.user === undefined} -
+

Reiverr

@@ -39,7 +39,7 @@ {:else} - + diff --git a/src/Container.svelte b/src/Container.svelte index d5834fe..5404674 100644 --- a/src/Container.svelte +++ b/src/Container.svelte @@ -2,12 +2,18 @@ @@ -32,7 +29,7 @@ {:then items} {#each items as item} - + {/each} {/await} diff --git a/src/lib/pages/MoviesPage.svelte b/src/lib/pages/MoviesPage.svelte index 8ac6826..546591b 100644 --- a/src/lib/pages/MoviesPage.svelte +++ b/src/lib/pages/MoviesPage.svelte @@ -33,7 +33,7 @@ {:then items}
{#each items as item (item.id)} - + {/each} diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts index 8e9e6dc..33ef507 100644 --- a/src/lib/selectable.ts +++ b/src/lib/selectable.ts @@ -12,25 +12,23 @@ export type NavigationActions = { enter?: (selectable: Selectable) => boolean; }; -type FocusHandlerOptions = { +type FocusEventOptions = { setFocusedElement: boolean; propagate: boolean; +}; + +export type EnterEvent = { + selectable: Selectable; + options: FocusEventOptions; stopPropagation: () => void; }; -const createFocusHandlerOptions = (): FocusHandlerOptions => { - const options: Partial = { - setFocusedElement: true, - propagate: true - }; +const createFocusHandlerOptions = (): FocusEventOptions => ({ + setFocusedElement: true, + propagate: true +}); - options.stopPropagation = () => { - options.propagate = false; - }; - - return options as FocusHandlerOptions; -}; -export type FocusHandler = (selectable: Selectable, options: FocusHandlerOptions) => void; +export type FocusHandler = (selectable: Selectable, options: FocusEventOptions) => void; export class Selectable { id: symbol; @@ -95,9 +93,9 @@ export class Selectable { return this; } - focus(options: Partial = {}) { + focus(options: Partial = {}) { function propagateFocusUpdates( - options: FocusHandlerOptions, + options: FocusEventOptions, parent: Selectable, child?: Selectable ) { @@ -138,7 +136,7 @@ export class Selectable { } } } else if (this.htmlElement) { - const _options: FocusHandlerOptions = { + const _options: FocusEventOptions = { ...createFocusHandlerOptions(), ...options }; @@ -151,7 +149,7 @@ export class Selectable { } } - focusChildren(index: number, options?: Partial): boolean { + focusChildren(index: number, options?: Partial): boolean { const child = this.children[index]; if (child && child.isFocusable()) { child.focus(options); @@ -329,7 +327,6 @@ export class Selectable { } _unmountContainer() { - console.log('Unmounting selectable', this); const isFocusedWithin = get(this.hasFocusWithin); if (this.htmlElement) { @@ -359,7 +356,6 @@ export class Selectable { destroy: () => { selectable.parent?.removeChild(selectable); Selectable.objects.delete(htmlElement); - console.log('destroying', htmlElement, selectable); } }; }; @@ -547,6 +543,15 @@ export const scrollElementIntoView = (htmlElement: HTMLElement, offsets: Offsets let top = -1; if (offsets.top !== undefined && offsets.bottom !== undefined) { + console.log(htmlElement, verticalParent); + console.log(boundingRect, parentBoundingRect); + console.log('top', boundingRect.y - parentBoundingRect.y, '<', offsets.top); + console.log( + 'bottom', + boundingRect.y - parentBoundingRect.y + htmlElement.clientHeight, + '>', + verticalParent.clientHeight - offsets.bottom + ); top = boundingRect.y - parentBoundingRect.y < offsets.top ? boundingRect.y - parentBoundingRect.y + verticalParent.scrollTop - offsets.top @@ -617,10 +622,10 @@ export const scrollElementIntoView = (htmlElement: HTMLElement, offsets: Offsets } }; -export const scrollIntoView: (...args: [Offsets]) => (s: Selectable) => void = +export const scrollIntoView: (...args: [Offsets]) => (e: CustomEvent) => void = (...args) => - (s) => { - const element = s.getHtmlElement(); + (e) => { + const element = e.detail.selectable.getHtmlElement(); if (element) { scrollElementIntoView(element, ...args); } diff --git a/src/lib/types/additional-svelte-typings.d.ts b/src/lib/types/additional-svelte-typings.d.ts new file mode 100644 index 0000000..4a0685e --- /dev/null +++ b/src/lib/types/additional-svelte-typings.d.ts @@ -0,0 +1,15 @@ +import type { EnterEvent } from '../selectable'; + +declare namespace svelteHTML { + // enhance elements + interface IntrinsicElements { + Container: { 'on:enter': (e: EnterEvent) => void }; + } + // // enhance attributes + // interface HTMLAttributes { + // // If you want to use on:beforeinstallprompt + // 'on:beforeinstallprompt'?: (event: any) => any; + // // If you want to use myCustomAttribute={..} (note: all lowercase) + // mycustomattribute?: any; // You can replace any with something more specific if you like + // } +}