@geotrekce/geotrek-rando-widget 0.3.4 → 0.3.6

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { InformationDesk, Poi, SensitiveArea, Trek } from "types/types";
-export { InformationDesk, Poi, SensitiveArea, Trek } from "types/types";
+import { InformationDesk, Poi, SensitiveArea, TouristicContent, Trek } from "types/types";
+export { InformationDesk, Poi, SensitiveArea, TouristicContent, Trek } from "types/types";
 export namespace Components {
     interface GrwApp {
         "api": string;
@@ -53,7 +53,10 @@ export namespace Components {
         "filterType": string;
         "segment": string;
     }
-    interface GrwInformationDeskDetail {
+    interface GrwFilters {
+        "handleFilters": Function;
+    }
+    interface GrwInformationDesk {
         "informationDesk": InformationDesk;
     }
     interface GrwMap {
@@ -74,7 +77,7 @@ export namespace Components {
         "useGradient": boolean;
         "zoom": number;
     }
-    interface GrwPoiDetail {
+    interface GrwPoi {
         "poi": Poi;
     }
     interface GrwSearch {
@@ -84,6 +87,9 @@ export namespace Components {
     interface GrwSensitiveAreaDetail {
         "sensitiveArea": SensitiveArea;
     }
+    interface GrwTouristicContent {
+        "touristicContent": TouristicContent;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer": string;
         "colorOnSurface": string;
@@ -136,13 +142,13 @@ export namespace Components {
         "themes": string;
     }
 }
-export interface GrwAppCustomEvent<T> extends CustomEvent<T> {
+export interface GrwFiltersCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLGrwAppElement;
+    target: HTMLGrwFiltersElement;
 }
-export interface GrwInformationDeskDetailCustomEvent<T> extends CustomEvent<T> {
+export interface GrwInformationDeskCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLGrwInformationDeskDetailElement;
+    target: HTMLGrwInformationDeskElement;
 }
 export interface GrwMapCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -169,11 +175,17 @@ declare global {
         prototype: HTMLGrwFilterElement;
         new (): HTMLGrwFilterElement;
     };
-    interface HTMLGrwInformationDeskDetailElement extends Components.GrwInformationDeskDetail, HTMLStencilElement {
+    interface HTMLGrwFiltersElement extends Components.GrwFilters, HTMLStencilElement {
+    }
+    var HTMLGrwFiltersElement: {
+        prototype: HTMLGrwFiltersElement;
+        new (): HTMLGrwFiltersElement;
+    };
+    interface HTMLGrwInformationDeskElement extends Components.GrwInformationDesk, HTMLStencilElement {
     }
-    var HTMLGrwInformationDeskDetailElement: {
-        prototype: HTMLGrwInformationDeskDetailElement;
-        new (): HTMLGrwInformationDeskDetailElement;
+    var HTMLGrwInformationDeskElement: {
+        prototype: HTMLGrwInformationDeskElement;
+        new (): HTMLGrwInformationDeskElement;
     };
     interface HTMLGrwMapElement extends Components.GrwMap, HTMLStencilElement {
     }
@@ -181,11 +193,11 @@ declare global {
         prototype: HTMLGrwMapElement;
         new (): HTMLGrwMapElement;
     };
-    interface HTMLGrwPoiDetailElement extends Components.GrwPoiDetail, HTMLStencilElement {
+    interface HTMLGrwPoiElement extends Components.GrwPoi, HTMLStencilElement {
     }
-    var HTMLGrwPoiDetailElement: {
-        prototype: HTMLGrwPoiDetailElement;
-        new (): HTMLGrwPoiDetailElement;
+    var HTMLGrwPoiElement: {
+        prototype: HTMLGrwPoiElement;
+        new (): HTMLGrwPoiElement;
     };
     interface HTMLGrwSearchElement extends Components.GrwSearch, HTMLStencilElement {
     }
@@ -205,6 +217,12 @@ declare global {
         prototype: HTMLGrwSensitiveAreaDetailElement;
         new (): HTMLGrwSensitiveAreaDetailElement;
     };
+    interface HTMLGrwTouristicContentElement extends Components.GrwTouristicContent, HTMLStencilElement {
+    }
+    var HTMLGrwTouristicContentElement: {
+        prototype: HTMLGrwTouristicContentElement;
+        new (): HTMLGrwTouristicContentElement;
+    };
     interface HTMLGrwTrekCardElement extends Components.GrwTrekCard, HTMLStencilElement {
     }
     var HTMLGrwTrekCardElement: {
@@ -238,12 +256,14 @@ declare global {
     interface HTMLElementTagNameMap {
         "grw-app": HTMLGrwAppElement;
         "grw-filter": HTMLGrwFilterElement;
-        "grw-information-desk-detail": HTMLGrwInformationDeskDetailElement;
+        "grw-filters": HTMLGrwFiltersElement;
+        "grw-information-desk": HTMLGrwInformationDeskElement;
         "grw-map": HTMLGrwMapElement;
-        "grw-poi-detail": HTMLGrwPoiDetailElement;
+        "grw-poi": HTMLGrwPoiElement;
         "grw-search": HTMLGrwSearchElement;
         "grw-select-language": HTMLGrwSelectLanguageElement;
         "grw-sensitive-area-detail": HTMLGrwSensitiveAreaDetailElement;
+        "grw-touristic-content": HTMLGrwTouristicContentElement;
         "grw-trek-card": HTMLGrwTrekCardElement;
         "grw-trek-detail": HTMLGrwTrekDetailElement;
         "grw-trek-provider": HTMLGrwTrekProviderElement;
@@ -281,7 +301,6 @@ declare namespace LocalJSX {
         "inBbox"?: string;
         "languages"?: string;
         "nameLayer"?: string;
-        "onResetFilter"?: (event: GrwAppCustomEvent<any>) => void;
         "portals"?: string;
         "practices"?: string;
         "routes"?: string;
@@ -298,9 +317,13 @@ declare namespace LocalJSX {
         "filterType"?: string;
         "segment"?: string;
     }
-    interface GrwInformationDeskDetail {
+    interface GrwFilters {
+        "handleFilters"?: Function;
+        "onResetFilter"?: (event: GrwFiltersCustomEvent<any>) => void;
+    }
+    interface GrwInformationDesk {
         "informationDesk"?: InformationDesk;
-        "onCenterOnMap"?: (event: GrwInformationDeskDetailCustomEvent<{ latitude: number; longitude: number }>) => void;
+        "onCenterOnMap"?: (event: GrwInformationDeskCustomEvent<{ latitude: number; longitude: number }>) => void;
     }
     interface GrwMap {
         "attributionLayer"?: string;
@@ -321,7 +344,7 @@ declare namespace LocalJSX {
         "useGradient"?: boolean;
         "zoom"?: number;
     }
-    interface GrwPoiDetail {
+    interface GrwPoi {
         "poi"?: Poi;
     }
     interface GrwSearch {
@@ -331,6 +354,9 @@ declare namespace LocalJSX {
     interface GrwSensitiveAreaDetail {
         "sensitiveArea"?: SensitiveArea;
     }
+    interface GrwTouristicContent {
+        "touristicContent"?: TouristicContent;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer"?: string;
         "colorOnSurface"?: string;
@@ -355,11 +381,14 @@ declare namespace LocalJSX {
         "colorSecondaryContainer"?: string;
         "colorSurfaceContainerLow"?: string;
         "isLargeView"?: boolean;
-        "onDescriptionReferenceIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onDescriptionIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onInformationDeskIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onParentTrekPress"?: (event: GrwTrekDetailCustomEvent<number>) => void;
         "onParkingIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onPoiIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onSensitiveAreaIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onStepsIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onTouristicContentsIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "resetStoreOnDisconnected"?: boolean;
         "trek"?: Trek;
         "weather"?: boolean;
@@ -393,12 +422,14 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "grw-app": GrwApp;
         "grw-filter": GrwFilter;
-        "grw-information-desk-detail": GrwInformationDeskDetail;
+        "grw-filters": GrwFilters;
+        "grw-information-desk": GrwInformationDesk;
         "grw-map": GrwMap;
-        "grw-poi-detail": GrwPoiDetail;
+        "grw-poi": GrwPoi;
         "grw-search": GrwSearch;
         "grw-select-language": GrwSelectLanguage;
         "grw-sensitive-area-detail": GrwSensitiveAreaDetail;
+        "grw-touristic-content": GrwTouristicContent;
         "grw-trek-card": GrwTrekCard;
         "grw-trek-detail": GrwTrekDetail;
         "grw-trek-provider": GrwTrekProvider;
@@ -412,12 +443,14 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "grw-app": LocalJSX.GrwApp & JSXBase.HTMLAttributes<HTMLGrwAppElement>;
             "grw-filter": LocalJSX.GrwFilter & JSXBase.HTMLAttributes<HTMLGrwFilterElement>;
-            "grw-information-desk-detail": LocalJSX.GrwInformationDeskDetail & JSXBase.HTMLAttributes<HTMLGrwInformationDeskDetailElement>;
+            "grw-filters": LocalJSX.GrwFilters & JSXBase.HTMLAttributes<HTMLGrwFiltersElement>;
+            "grw-information-desk": LocalJSX.GrwInformationDesk & JSXBase.HTMLAttributes<HTMLGrwInformationDeskElement>;
             "grw-map": LocalJSX.GrwMap & JSXBase.HTMLAttributes<HTMLGrwMapElement>;
-            "grw-poi-detail": LocalJSX.GrwPoiDetail & JSXBase.HTMLAttributes<HTMLGrwPoiDetailElement>;
+            "grw-poi": LocalJSX.GrwPoi & JSXBase.HTMLAttributes<HTMLGrwPoiElement>;
             "grw-search": LocalJSX.GrwSearch & JSXBase.HTMLAttributes<HTMLGrwSearchElement>;
             "grw-select-language": LocalJSX.GrwSelectLanguage & JSXBase.HTMLAttributes<HTMLGrwSelectLanguageElement>;
             "grw-sensitive-area-detail": LocalJSX.GrwSensitiveAreaDetail & JSXBase.HTMLAttributes<HTMLGrwSensitiveAreaDetailElement>;
+            "grw-touristic-content": LocalJSX.GrwTouristicContent & JSXBase.HTMLAttributes<HTMLGrwTouristicContentElement>;
             "grw-trek-card": LocalJSX.GrwTrekCard & JSXBase.HTMLAttributes<HTMLGrwTrekCardElement>;
             "grw-trek-detail": LocalJSX.GrwTrekDetail & JSXBase.HTMLAttributes<HTMLGrwTrekDetailElement>;
             "grw-trek-provider": LocalJSX.GrwTrekProvider & JSXBase.HTMLAttributes<HTMLGrwTrekProviderElement>;

package/dist/types/i18n/i18n.d.ts

@@ -31,6 +31,7 @@ interface Translation {
   accessibilityExposure: string;
   accessibilityAdvices: string;
   pois: Function;
+  touristicContents: Function;
   sources: string;
   cities: string;
   options: {
@@ -40,6 +41,8 @@ interface Translation {
     environmentalSensitiveAreas: string;
     informationPlaces: string;
     pois: string;
+    steps: string;
+    touristicContents: string;
   };
   layers: {
     pointsReference: string;
@@ -47,6 +50,8 @@ interface Translation {
     sensitiveArea: string;
     informationPlaces: string;
     pois: string;
+    steps: string;
+    touristicContents: string;
   };
   themes: string;
   routes: string;

package/dist/types/store/store.d.ts

@@ -1,5 +1,5 @@
 import { LatLngBounds } from 'leaflet';
-import { Accessibilities, accessibilitiesLevel, Difficulties, Durations, InformationDesks, Labels, Pois, PoiTypes, Practices, Routes, SensitiveAreas, Sources, Themes, Cities, Trek, Treks, Lengths, Elevations, Districts } from 'types/types';
+import { Accessibilities, accessibilitiesLevel, Difficulties, Durations, InformationDesks, Labels, Pois, PoiTypes, Practices, Routes, SensitiveAreas, Sources, Themes, Cities, Trek, Treks, Lengths, Elevations, Districts, TouristicContents, TouristicContentCategories } from 'types/types';
 declare const state: {
   api: string;
   languages: string[];
@@ -36,6 +36,9 @@ declare const state: {
   parentTrekId: number;
   parentTrek: Trek;
   currentTrekSteps: Treks;
+  selectedStepId: number;
+  touristicContents: TouristicContents;
+  touristicContentCategories: TouristicContentCategories;
 }, onChange: import("@stencil/store/dist/types").OnChangeHandler<{
   api: string;
   languages: string[];
@@ -72,6 +75,9 @@ declare const state: {
   parentTrekId: number;
   parentTrek: Trek;
   currentTrekSteps: Treks;
+  selectedStepId: number;
+  touristicContents: TouristicContents;
+  touristicContentCategories: TouristicContentCategories;
 }>, reset: () => void;
 export { onChange, reset };
 export default state;

package/dist/types/types/types.d.ts

@@ -188,6 +188,21 @@ export type InformationDeskType = {
   label: string;
   pictogram: string;
 };
+export type TouristicContent = {
+  id: number;
+  name: string;
+  attachments: Attachments;
+  description_teaser: string;
+  category: number;
+  geometry: Geometry;
+};
+export type TouristicContents = TouristicContent[];
+export type TouristicContentCategory = {
+  id: number;
+  label: string;
+  pictogram: string;
+};
+export type TouristicContentCategories = TouristicContentCategory[];
 export type Filters = Filter[];
 export type Filter = {
   property: string;
@@ -203,9 +218,11 @@ export interface Option {
 }
 export interface Options {
   presentation: Option;
+  steps: Option;
   description: Option;
   recommendations: Option;
   sensitiveArea: Option;
   informationPlaces: Option;
   pois: Option;
+  touristicContents: Option;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotrekce/geotrek-rando-widget",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Geotrek rando widget",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -29,7 +29,6 @@
   "dependencies": {
     "@raruto/leaflet-elevation": "^2.4.0",
     "@stencil/core": "^3.4.1",
-    "@types/leaflet.markercluster": "^1.5.2",
     "leaflet": "^1.9.4",
     "leaflet-rotate": "^0.2.8",
     "leaflet.locatecontrol": "^0.79.0",
@@ -46,8 +45,10 @@
     "@storybook/html": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.16",
+    "@types/css-font-loading-module": "^0.0.9",
     "@types/geojson": "^7946.0.10",
     "@types/leaflet": "^1.9.3",
+    "@types/leaflet.markercluster": "^1.5.2",
     "babel-loader": "^9.1.2",
     "glob": "^9.3.4",
     "typescript": "^5.1.6"

package/readme.md

@@ -1,13 +1,19 @@
-# Geotrek rando widget
+# Geotrek-rando widget
 
 Web components of [Geotrek](https://geotrek.fr/).\
 You can use a complete app or each component independantly.
 
+- To test and configure the widget: https://geotrekce.github.io/Geotrek-rando-widget/
+- Examples:
+  - https://www.jurabsolu.fr/decouvrez-territoire-jura/randonnees-forets-vignes-jura/
+  - https://www.coeurdujura-tourisme.com/activites-nature-jura-outdoor-loisirs/activites-pleine-nature/
+  - https://geotrek.ecrins-parcnational.fr/ressources/technique/2022-test-widget.html
+
 ## Usage
 
-**The api you want to use had to authorize your domain.**
+**The Geotrek-admin API you want to use has to authorize the URL of the website where you want to include the widget.**
 
-Copy-paste this inside `<head></head>`
+Copy-paste this inside `<head></head>` to load static widget files:
 
 ```html
 <link rel="stylesheet" href="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css" />
@@ -15,11 +21,13 @@ Copy-paste this inside `<head></head>`
 <script nomodule src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js"></script>
 ```
 
-## Explore
+Then you have to configure the widget to generate the widget code to include in your website.
+
+## Configure
 
-**The api you want to use had to authorize geotrekce.github.io.**
+**The API you want to use has to authorize geotrekce.github.io.**
 
-You can explore Geotrek rando widget and create your own component [here](https://geotrekce.github.io/Geotrek-rando-widget/).\
+You can explore Geotrek-rando widget and create your own component [here](https://geotrekce.github.io/Geotrek-rando-widget/).\
 Once you made your component, you can get the code to copy-paste by clicking on _Docs_ then _Show code_.
 
 [![](https://geotrek.fr/assets/img/logo_autonomens-h120m.png)](https://datatheca.com/)