Skip to content
GeoViewer 5

Source HtmlContent

Source HtmlContent

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/html-content/html-content.declaration.ts

packages/common/src/lib/widgets/html-content/html-content.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type HtmlContentFullConfig, htmlContentFullConfigSchema } from './html-content.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


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


export type HtmlContentProps = WidgetProps<HtmlContentFullConfig>;

packages/common/src/lib/widgets/html-content/html-content.config.ts

packages/common/src/lib/widgets/html-content/html-content.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 { z } from 'zod';


const htmlContentConfigSchema = z.object({
    content: z.string(),
    hideDisplayNextTime: z.boolean().default(false),
    hideCloseButton: z.boolean().default(false),
});


export const htmlContentFullConfigSchema = defineWidgetConfig({
    inToolbar: inToolbarSchemaFrom(false),
    container: {
        id: 'dialog',
        draggable: false,
        closable: false,
        resizable: false,
        center: true,
    },
    active: true,
    handleOpenAtStartup: true,
    config: htmlContentConfigSchema,
});


export type HtmlContentFullConfig = z.infer<typeof htmlContentFullConfigSchema>;

packages/common/src/lib/widgets/html-content/HtmlContent.svelte

packages/common/src/lib/widgets/html-content/HtmlContent.svelte
<script lang="ts">
    import { getWidgetManager } from '$lib/api/managers/widget';
    import { Button } from '$lib/components/shadcn/ui/button';
    import { getI18n } from '$lib/api/managers/i18n';
    import { Checkbox } from '$lib/components/shadcn/ui/checkbox';
    import { Label } from '$lib/components/shadcn/ui/label';
    import { handleOpenAtStartup } from '$lib/api/managers/configuration';
    import type { HtmlContentProps } from './html-content.declaration';


    let { fullConfig }: HtmlContentProps = $props();
    const { config, widgetId } = fullConfig;


    const i18n = getI18n();
    const widgetManager = getWidgetManager();


    let displayNextTime = $state(true);


    $effect(() => {
        handleOpenAtStartup(widgetId, displayNextTime);
    });


    function closeSelf() {
        widgetManager.getReference(widgetId).deactivate();
    }
</script>


<div class="gv-size-full gv-flex gv-flex-col gv-gap-2">
    <div class="gv-flex-1">
        {@html config.content}
    </div>
    <div class="gv-flex gv-justify-between">
        {#if !config.hideDisplayNextTime}
            <div class="gv-flex gv-items-center gv-gap-2">
                <Checkbox bind:checked={displayNextTime} id="displayNextTime" />
                <Label for="displayNextTime">{i18n('common.display-next-time')}</Label>
            </div>
        {/if}
        {#if !config.hideCloseButton}
            <Button variant="outline" onclick={() => closeSelf()} data-test-id="html-content-close-button" size="sm">
                {i18n('common.close')}
            </Button>
        {/if}
    </div>
</div>

Aller plus loin