Skip to content
GeoViewer 5

Source Fullscreen

Source Fullscreen

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/fullscreen/fullscreen.declaration.ts

packages/common/src/lib/widgets/fullscreen/fullscreen.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type FullscreenConfig, fullscreenConfigSchema } from './fullscreen.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./Fullscreen.svelte').then((Fullscreen) => widgetFactorySvelte(Fullscreen)),
    schema: () => fullscreenConfigSchema,
} satisfies WidgetDeclaration;


export type FullscreenProps = WidgetProps<FullscreenConfig>;

packages/common/src/lib/widgets/fullscreen/fullscreen.config.ts

packages/common/src/lib/widgets/fullscreen/fullscreen.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { hiddenContainerId } from '$lib/components/containers/hidden/hidden.schema';
import { z } from 'zod';


export const fullscreenConfigSchema = defineWidgetConfig({
    container: hiddenContainerId,
    inToolbar: inToolbarSchemaFrom({
        type: 'button',
        label: {
            fr: 'Plein écran',
            nl: 'NL - Plein écran',
        },
        icon: {
            active: {
                lucide: 'Shrink',
            },
            inactive: {
                lucide: 'Expand',
            },
        },
    }),
    config: z
        .object({
            collapseRegions: z.boolean().default(true),
        })
        .prefault({}),
});


export type FullscreenConfig = z.infer<typeof fullscreenConfigSchema>;

packages/common/src/lib/widgets/fullscreen/Fullscreen.svelte

packages/common/src/lib/widgets/fullscreen/Fullscreen.svelte
<script lang="ts">
    import { getLayoutManager } from '$lib/api/managers/layout';
    import { onMount } from 'svelte';
    import type { FullscreenProps } from './fullscreen.declaration';


    let { fullConfig, reference }: FullscreenProps = $props();


    const layoutManager = getLayoutManager();


    onMount(() => {
        if (fullConfig.config.collapseRegions) {
            collapseRegions();
        }
        openFullscreen();
        const clear = listenManualExit();
        return () => {
            if (fullConfig.config.collapseRegions) {
                restoreRegions();
            }
            closeFullscreen();
            clear();
        };
    });


    const previousState = {
        top: false,
        bottom: false,
        left: false,
        right: false,
    };


    function collapseRegions() {
        previousState.top = layoutManager.drawers.top.isOpen;
        previousState.bottom = layoutManager.drawers.bottom.isOpen;
        previousState.left = layoutManager.drawers.left.isOpen;
        previousState.right = layoutManager.drawers.right.isOpen;


        layoutManager.drawers.top.close();
        layoutManager.drawers.bottom.close();
        layoutManager.drawers.left.close();
        layoutManager.drawers.right.close();
    }


    function restoreRegions() {
        layoutManager.drawers.top.toggle(previousState.top);
        layoutManager.drawers.bottom.toggle(previousState.bottom);
        layoutManager.drawers.left.toggle(previousState.left);
        layoutManager.drawers.right.toggle(previousState.right);
    }


    function openFullscreen() {
        const root = layoutManager.layout.root;
        root?.requestFullscreen();
    }


    function closeFullscreen() {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }
    }


    function listenManualExit() {
        function listener() {
            const root = layoutManager.layout.root;
            if (document.fullscreenElement !== root) {
                reference.deactivate();
            }
        }


        document.addEventListener('fullscreenchange', listener);


        return () => document.removeEventListener('fullscreenchange', listener);
    }
</script>

Aller plus loin