Skip to content
GeoViewer 5

Source ActionButton

Source ActionButton

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/action-button/action-button.declaration.ts

packages/common/src/lib/widgets/action-button/action-button.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type ActionButtonConfig, actionButtonConfigSchema } from './action-button.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


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


export type ActionButtonProps = WidgetProps<ActionButtonConfig>;

packages/common/src/lib/widgets/action-button/action-button.config.ts

packages/common/src/lib/widgets/action-button/action-button.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';
import { iconSchema } from '$lib/api/icons';
import type { TooltipSide } from '$lib/components/api-simple-tooltip';
import { i18nDataSchema } from '$lib/api/managers/i18n';
import { type ButtonVariant } from '$lib/components/shadcn/ui/button';


export const buttonActionTopicEventSchema = z.object({
    name: z.string(),
});
export type ButtonActionTopicEvent = z.infer<typeof buttonActionTopicEventSchema>;


export const emitEventActionSchema = z.object({
    type: z.literal('EMIT_EVENT'),
    event: buttonActionTopicEventSchema,
});
type EmitEventAction = z.infer<typeof emitEventActionSchema>;


export const openUrlActionSchema = z.object({
    type: z.literal('OPEN_URL'),
    url: z.string().default('https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1'),
    includeShare: z.boolean().default(true),
});
type OpenUrlAction = z.infer<typeof openUrlActionSchema>;


export type ActionButtonAction = EmitEventAction | OpenUrlAction;


export const actionButtonConfigSchema = defineWidgetConfig({
    container: hiddenContainerId,
    inToolbar: inToolbarSchemaFrom({
        type: 'integrated',
    }),
    active: true,
    config: z.object({
        tooltipSide: z.custom<TooltipSide>().default('left'),
        label: i18nDataSchema.optional(),
        buttonVariant: z.custom<ButtonVariant>(),
        icon: iconSchema.default({ lucide: 'ExternalLink' }),
        action: z.union([openUrlActionSchema, emitEventActionSchema]),
    }),
});


export type ActionButtonConfig = z.infer<typeof actionButtonConfigSchema>;

packages/common/src/lib/widgets/action-button/ActionButton.svelte

packages/common/src/lib/widgets/action-button/ActionButton.svelte
<script lang="ts">
    import type { ActionButtonProps } from './action-button.declaration';
    import { cn } from '$lib/components/shadcn/utils';
    import { Icon, mapIconButtonVariants } from '$lib/components/icon';
    import { ApiSimpleTooltip } from '$lib/components/api-simple-tooltip';
    import { getI18n } from '$lib/api/managers/i18n';
    import { Button } from '$lib/components/shadcn/ui/button';
    import { getTopicManager } from '$lib/api/managers/topic';
    import ActionButtonIntegrated from '$lib/widgets/action-button/ActionButtonIntegrated.svelte';
    import { getCurrentShareToken } from '$lib/api/services/share/share.utils';


    let { fullConfig }: ActionButtonProps = $props();
    const { config, widgetId, title } = fullConfig;
    const { action, icon } = config;


    const i18n = getI18n(fullConfig.i18n);
    const topic = getTopicManager();


    const integrated = $derived.by(() => fullConfig.inToolbar?.type === 'integrated');
    const label = $derived.by(() => (config.label ? i18n.translate(config.label) : ''));
    const urlSharePath = $derived.by(() =>
        action.type === 'OPEN_URL' && action.includeShare ? `#SHARE=${getCurrentShareToken()}` : '',
    );
    const urlToOpen = $derived.by(() => (action.type === 'OPEN_URL' ? `${action.url}${urlSharePath}` : ''));


    function handleAction(): void {
        switch (action.type) {
            case 'EMIT_EVENT':
                topic.publish(action.event);
                break;
        }
    }
</script>


{#if integrated}
    <div class={cn('gv-flex gv-gap-[1px]')}>
        <div class="gv-bg-background gv-inline-block">
            <ApiSimpleTooltip text={i18n.translate(title)} side={config.tooltipSide} openDelay={0}>
                <ActionButtonIntegrated {urlToOpen} {widgetId} {icon} {action} {handleAction} />
            </ApiSimpleTooltip>
        </div>
    </div>
{:else}
    <div class="gv-flex gv-bg-background gv-w-full">
        <ApiSimpleTooltip text={i18n.translate(title)} side={config.tooltipSide} openDelay={0}>
            <div class="gv-bg-background gv-rounded-md gv-shadow-4md">
                <Button
                    variant={config.buttonVariant ?? 'secondary'}
                    class={cn(mapIconButtonVariants({ variant: 'onMap', size: 'none' }))}
                    onclick={handleAction}
                    href={urlToOpen}
                    target="_blank"
                    ><span class="gv-font-bold gv-text-lg">{label}</span>
                    <Icon class="gv-text-primary gv-size-7" icon={config.icon} /></Button
                >
            </div>
        </ApiSimpleTooltip>
    </div>
{/if}

packages/common/src/lib/widgets/action-button/ActionButtonIntegrated.svelte

packages/common/src/lib/widgets/action-button/ActionButtonIntegrated.svelte
<script lang="ts">
    import { cn } from '$lib/components/shadcn/utils';
    import type { ActionButtonAction } from '$lib/widgets/action-button/action-button.config';
    import { Icon, mapIconButtonVariants } from '$lib/components/icon';
    import type { Icon as IconSchemaType } from '$lib/api/icons';


    interface Props {
        action: ActionButtonAction;
        handleAction: () => void;
        widgetId: string;
        urlToOpen: string;
        icon: IconSchemaType | null | undefined;
    }


    let { action, handleAction, widgetId, icon, urlToOpen }: Props = $props();
</script>


{#if action.type === 'OPEN_URL'}
    <a href={urlToOpen} target="_blank">
        <button
            onclick={handleAction}
            class={cn(mapIconButtonVariants(), 'gv-shadow-4md')}
            data-test-id="ActionButton-{widgetId}"
        >
            <Icon {icon} />
        </button>
    </a>
{:else}
    <button
        onclick={handleAction}
        class={cn(mapIconButtonVariants(), 'gv-shadow-4md')}
        data-test-id="ActionButton-{widgetId}"
    >
        <Icon {icon} />
    </button>
{/if}

Aller plus loin