Source BasemapChooser
Source BasemapChooser
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/basemap-chooser/basemap-chooser.declaration.tspackages/common/src/lib/widgets/basemap-chooser/basemap-chooser.config.tspackages/common/src/lib/widgets/basemap-chooser/basemap-chooser.i18n.tspackages/common/src/lib/widgets/basemap-chooser/basemap-chooser.topic.tspackages/common/src/lib/widgets/basemap-chooser/BasemapChooser.sveltepackages/common/src/lib/widgets/basemap-chooser/BasemapDetails.svelte
packages/common/src/lib/widgets/basemap-chooser/basemap-chooser.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';import { type BasemapChooserConfig, basemapChooserConfigSchema } from './basemap-chooser.config';import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';
export const declaration = { factory: () => import('./BasemapChooser.svelte').then((BasemapChooser) => widgetFactorySvelte(BasemapChooser)), schema: () => basemapChooserConfigSchema,} satisfies WidgetDeclaration;
export type BasemapChooserProps = WidgetProps<BasemapChooserConfig>;packages/common/src/lib/widgets/basemap-chooser/basemap-chooser.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration';import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';import { i18nSchemaFrom } from '$lib/api/managers/i18n';import type { z } from 'zod';import { basemapChooserI18n } from '$lib/widgets/basemap-chooser/basemap-chooser.i18n';
export const basemapChooserConfigSchema = defineWidgetConfig({ inToolbar: inToolbarSchemaFrom({ type: 'button', }), icon: { lucide: 'Map', }, onActivate: { deactivate: { classes: ['StreetView'], }, }, title: basemapChooserI18n['basemap-chooser.title'], i18n: i18nSchemaFrom(basemapChooserI18n),});
export type BasemapChooserConfig = z.infer<typeof basemapChooserConfigSchema>;export type BasemapChooserI18n = BasemapChooserConfig['i18n'];packages/common/src/lib/widgets/basemap-chooser/basemap-chooser.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';
export const basemapChooserI18n = { 'basemap-chooser.title': { fr: 'Fonds de cartes', nl: 'NL - Fonds de cartes', }, 'basemap-chooser.opacity': { fr: 'Opacité', nl: 'NL - Opacité', }, 'basemap-chooser.black-and-white': { fr: 'Noir & Blanc', nl: 'NL - Noir & Blanc', }, 'basemap-chooser.view-metadata': { fr: 'Voir la fiche correspondante au fond de plan sélectionné', nl: 'NL - Voir la fiche correspondante au fond de plan sélectionné', },} satisfies I18nRegistry;packages/common/src/lib/widgets/basemap-chooser/basemap-chooser.topic.ts
import type { ApiBasemap } from '$lib/api/mapservices';
export type BasemapChooserTopicEvent = { type: 'BasemapChooser-select'; basemap: ApiBasemap; source: 'BasemapChooser' | 'Toc';};packages/common/src/lib/widgets/basemap-chooser/BasemapChooser.svelte
<script lang="ts"> import { getMapManager } from '$lib/api/map'; import Icon from '$lib/components/icon/Icon.svelte'; import type { ApiBasemap } from '$lib/api/mapservices'; import BasemapDetails from './BasemapDetails.svelte'; import { Label } from '$lib/components/shadcn/ui/label'; import { getI18n } from '$lib/api/managers/i18n'; import type { BasemapChooserProps } from './basemap-chooser.declaration'; import { calculateThumbnailUrl } from '$lib/api/utils'; import { getTopicManager } from '$lib/api/managers/topic';
const { fullConfig }: BasemapChooserProps = $props();
const mapManager = getMapManager(); const basemapList = mapManager.basemapList; const i18n = getI18n(fullConfig.i18n); const topic = getTopicManager();
function onBasemapClick(basemap: ApiBasemap) { basemapList.select(basemap); topic.publish({ type: 'BasemapChooser-select', basemap, source: 'BasemapChooser', }); }</script>
<div class="gv-p-2"> <p class="gv-text-2xl gv-font-extrabold gv-mb-3 gv-border-b gv-border-grey-200">{i18n('basemap-chooser.title')}</p> <div class="gv-grid gv-gap-3 gv-grid-cols-[repeat(auto-fit,minmax(150px,1fr))]"> {#each basemapList.list as basemap (basemap.id)} {@const thumbnailUrl = calculateThumbnailUrl(basemap)} <button data-state={basemap.selected ? 'active' : ''} class="gv-flex gv-flex-col gv-p-2 gv-border data-active:gv-bg-primary data-active:gv-text-white hover:gv-bg-primary/30" onclick={() => onBasemapClick(basemap)} > <div class="gv-h-24 gv-w-full gv-object-cover gv-mb-2"> {#if basemap.icon} <Icon icon={basemap.icon} alt="basemap-image" /> {:else if thumbnailUrl} <img class="gv-size-full" src={thumbnailUrl} alt="basemap thumbnail" /> {:else} <div class="gv-h-full gv-bg-muted"></div> {/if} </div> <Label class="gv-text-sm gv-font-bold">{basemap.label}</Label> </button> {/each} </div>
{#if basemapList.selected} <div class="gv-pt-3 gv-pb-1"> <BasemapDetails basemap={basemapList.selected} i18nRegistry={fullConfig.i18n}></BasemapDetails> </div> {/if}</div>packages/common/src/lib/widgets/basemap-chooser/BasemapDetails.svelte
<script lang="ts"> import type { ApiBasemap } from '$lib/api/mapservices'; import OpacitySlider from '$lib/components/opacity-slider/OpacitySlider.svelte'; import { Checkbox } from '$lib/components/shadcn/ui/checkbox'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '$lib/components/shadcn/ui/accordion'; import { Button } from '$lib/components/shadcn/ui/button'; import type { BasemapChooserI18n } from '$lib/widgets/basemap-chooser/basemap-chooser.config'; import { getI18n } from '$lib/api/managers/i18n'; import { Label } from '$lib/components/shadcn/ui/label';
interface Props { basemap: ApiBasemap; i18nRegistry: BasemapChooserI18n; defaultOpen?: boolean; showMetaDataUrl?: boolean; }
let { basemap, i18nRegistry, defaultOpen = false, showMetaDataUrl = true }: Props = $props();
const i18n = getI18n(i18nRegistry);
let selectedItem = $state(defaultOpen ? 'advanced-options' : '');</script>
{#if basemap.optionalServices?.length > 0 || basemap.allowGrayscaleUpdate || basemap.allowOpacityUpdate || (basemap.metadataUrl && showMetaDataUrl)} <Accordion bind:value={selectedItem}> <AccordionItem value="advanced-options"> <AccordionTrigger class="gv-font-extrabold" data-test-id="Basemap-AdvancedOption-Toggle"> {i18n('common.advanced-options')} </AccordionTrigger> <AccordionContent> <div class="gv-flex gv-flex-col gv-gap-2"> {#each basemap.optionalServices as service} <div class="gv-w-full gv-flex"> <Label class="gv-w-1/2">{service.label}</Label> <Checkbox bind:checked={service.visible} data-test-id={`Basemap-${service.id}-Checkbox`} /> </div> {/each} {#if basemap.allowGrayscaleUpdate} <div class="gv-w-full gv-flex"> <Label class="gv-w-1/2">{i18n('basemap-chooser.black-and-white')}</Label> <Checkbox bind:checked={basemap.grayscale} data-test-id="Basemap-GrayScale-Checkbox" /> </div> {/if} {#if basemap.allowOpacityUpdate} <div class="gv-w-full gv-flex gv-items-center"> <Label class="gv-w-1/2">{i18n('basemap-chooser.opacity')}</Label> <OpacitySlider class="gv-w-1/2" bind:opacity={basemap.opacity} showOpacityNumber={true} /> </div> {/if} {#if basemap.metadataUrl && showMetaDataUrl} <Button variant="outline" size="sm" class="gv-w-fit" href={basemap.metadataUrl} target="_blank"> {i18n('basemap-chooser.view-metadata')} </Button> {/if} </div> </AccordionContent> </AccordionItem> </Accordion>{/if}