fix: handle modal details with outdoor site

src/components.d.ts

@@ -224,6 +224,7 @@ export namespace Components {
         "globalTilesMinZoomOffline": number;
         "grwApp": boolean;
         "isLargeView": boolean;
+        "rounded": boolean;
         "tilesMaxZoomOffline": number;
         "tilesMinZoomOffline": number;
         "weather": boolean;
@@ -1228,6 +1229,7 @@ declare namespace LocalJSX {
         "onSitesIsInViewport"?: (event: GrwOutdoorSiteDetailCustomEvent<boolean>) => void;
         "onTouristicContentsIsInViewport"?: (event: GrwOutdoorSiteDetailCustomEvent<boolean>) => void;
         "onTouristicEventsIsInViewport"?: (event: GrwOutdoorSiteDetailCustomEvent<boolean>) => void;
+        "rounded"?: boolean;
         "tilesMaxZoomOffline"?: number;
         "tilesMinZoomOffline"?: number;
         "weather"?: boolean;

src/components/grw-app/readme.md

@@ -158,12 +158,17 @@ graph TD;
   grw-trek-detail --> grw-touristic-event-card
   grw-trek-detail --> grw-touristic-content-provider
   grw-trek-detail --> grw-touristic-event-provider
+  grw-outdoor-site-detail --> grw-details-modal
+  grw-outdoor-site-detail --> grw-touristic-event-detail
+  grw-outdoor-site-detail --> grw-touristic-content-detail
   grw-outdoor-site-detail --> grw-poi
   grw-outdoor-site-detail --> grw-outdoor-site-card
   grw-outdoor-site-detail --> grw-outdoor-course-card
   grw-outdoor-site-detail --> grw-information-desk
   grw-outdoor-site-detail --> grw-touristic-content-card
   grw-outdoor-site-detail --> grw-touristic-event-card
+  grw-outdoor-site-detail --> grw-touristic-content-provider
+  grw-outdoor-site-detail --> grw-touristic-event-provider
   grw-outdoor-course-detail --> grw-touristic-content-card
   grw-outdoor-course-detail --> grw-touristic-event-card
   grw-outdoor-course-detail --> grw-poi

src/components/grw-details-modal/readme.md

@@ -39,11 +39,13 @@
 
 ### Used by
 
+ - [grw-outdoor-site-detail](../grw-outdoor-site-detail)
  - [grw-trek-detail](../grw-trek-detail)
 
 ### Graph
 ```mermaid
 graph TD;
+  grw-outdoor-site-detail --> grw-details-modal
   grw-trek-detail --> grw-details-modal
   style grw-details-modal fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/grw-map/grw-map.scss

@@ -144,12 +144,19 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      transform: rotate(45deg);
+      transform: rotate(44deg);
       position: absolute;
       z-index: 20;
       width: var(--main-marker-icon-width) !important;
     }
   }
+
+  .touristic-content-marker-container,
+  .touristic-event-marker-container,
+  .outdoor-site-marker-container {
+    transform: rotate(-42deg);
+  }
+
   .trek-marker-container,
   .touristic-content-marker-container,
   .touristic-event-marker-container,

src/components/grw-map/grw-map.tsx

@@ -1884,6 +1884,7 @@ export class GrwMap {
                     outdoorSitesIcons[geoJsonPoint.properties.practice]
                   } /></div></div>`
                 : `<div part="outdoor-site-marker" class="outdoor-site-marker"><div part="outdoor-site-marker-container" class="outdoor-site-marker-container"></div></div>`,
+              className: '',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,
@@ -1951,6 +1952,7 @@ export class GrwMap {
                     outdoorSitesIcons[geoJsonPoint.properties.practice]
                   } /></div></div>`
                 : `<div part="outdoor-site-marker" class="outdoor-site-marker"><div part="outdoor-site-marker-container" class="outdoor-site-marker-container"></div></div>`,
+              className: '',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,
@@ -1999,6 +2001,7 @@ export class GrwMap {
                     outdoorCoursesIcons[geoJsonPoint.properties.practice]
                   } /></div></div>`
                 : `<div part="outdoor-courses-marker" class="outdoor-courses-marker"><div part="outdoor-courses-marker-container" class="outdoor-courses-marker-container"></div></div>`,
+              className: '',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,
@@ -2146,6 +2149,7 @@ export class GrwMap {
                     outdoorCoursesIcons[geoJsonPoint.properties.practice]
                   } /></div></div>`
                 : `<div part="outdoor-course-marker" class="outdoor-course-marker"><div part="outdoor-course-marker-container" class="outdoor-course-marker-container"></div></div>`,
+              className: '',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,

src/components/grw-outdoor-site-detail/grw-outdoor-site-detail.tsx

@@ -1,4 +1,4 @@
-import { Build, Component, Host, Prop, State, getAssetPath, h, Event, EventEmitter, Listen } from '@stencil/core';
+import { Build, Component, Host, Prop, State, getAssetPath, h, Event, EventEmitter, Listen, Fragment } from '@stencil/core';
 import { OutdoorSite } from 'components';
 import state, { onChange } from 'store/store';
 import Swiper, { Navigation, Pagination, Keyboard, FreeMode, Mousewheel, Scrollbar } from 'swiper';
@@ -50,6 +50,7 @@ export class GrwOutdoorSiteDetail {
   @Prop() tilesMinZoomOffline = 12;
   @Prop() tilesMaxZoomOffline = 16;
   @Prop() grwApp = false;
+  @Prop() rounded = true;
 
   @State() offline = false;
   @State() displayFullscreen = false;
@@ -119,6 +120,85 @@ export class GrwOutdoorSiteDetail {
   @Event() deleteConfirm: EventEmitter<number>;
   @Event() deleteSuccessConfirm: EventEmitter<number>;
 
+  @State() showTouristicContentDetailsModal = false;
+  @State() showTouristicEventDetailsModal = false;
+  @State() modalDetailsId = null;
+
+  @Listen('closeDetailsModal', { target: 'window' })
+  onCloseDetailsModal() {
+    document.body.style.overflow = `visible`;
+    state.currentTouristicContent = null;
+    state.currentTouristicEvent = null;
+    this.modalDetailsId = null;
+    if (this.showTouristicContentDetailsModal) {
+      this.showTouristicContentDetailsModal = false;
+    } else {
+      this.showTouristicEventDetailsModal = false;
+    }
+    document.body.getElementsByTagName('grw-details-modal')[0].remove();
+  }
+
+  @Listen('touristicEventCardPress', { target: 'window' })
+  onTouristiceEventCardPress(touristicEventId) {
+    if (!this.grwApp) {
+      this.modalDetailsId = touristicEventId.detail;
+      this.onOpenDetailsModal('TouristicContent');
+      const modal = document.createElement('grw-details-modal');
+      modal.setAttribute('font-family', this.fontFamily);
+      modal.setAttribute('color-background', this.colorBackground);
+      modal.setAttribute('color-primary-container', this.colorPrimaryContainer);
+      modal.setAttribute('color-on-primary-container', this.colorOnPrimaryContainer);
+      modal.setAttribute('rounded', this.rounded.toString());
+      const modalContent = document.createElement('grw-touristic-event-detail');
+      modalContent.setAttribute('font-family', this.fontFamily);
+      modalContent.setAttribute('color-primary-app', this.colorPrimaryApp);
+      modalContent.setAttribute('color-on-surface', this.colorOnSurface);
+      modalContent.setAttribute('color-primary-container', this.colorPrimaryContainer);
+      modalContent.setAttribute('color-on-primary-container', this.colorOnPrimaryContainer);
+      modalContent.setAttribute('color-secondary-container', this.colorSecondaryContainer);
+      modalContent.setAttribute('color-on-secondary-container', this.colorOnSecondaryContainer);
+      modalContent.setAttribute('color-surface-container-low', this.colorSurfaceContainerLow);
+      modalContent.setAttribute('color-background', this.colorBackground);
+      modal.append(modalContent);
+      document.body.append(modal);
+    }
+  }
+
+  @Listen('touristicContentCardPress', { target: 'window' })
+  onTouristicContentCardPress(touristicContentId) {
+    if (!this.grwApp) {
+      this.modalDetailsId = touristicContentId.detail;
+      this.onOpenDetailsModal('touristicContent');
+      const modal = document.createElement('grw-details-modal');
+      modal.setAttribute('font-family', this.fontFamily);
+      modal.setAttribute('color-background', this.colorBackground);
+      modal.setAttribute('color-primary-container', this.colorPrimaryContainer);
+      modal.setAttribute('color-on-primary-container', this.colorOnPrimaryContainer);
+      modal.setAttribute('rounded', this.rounded.toString());
+      const modalContent = document.createElement('grw-touristic-content-detail');
+      modalContent.setAttribute('font-family', this.fontFamily);
+      modalContent.setAttribute('color-primary-app', this.colorPrimaryApp);
+      modalContent.setAttribute('color-on-surface', this.colorOnSurface);
+      modalContent.setAttribute('color-primary-container', this.colorPrimaryContainer);
+      modalContent.setAttribute('color-on-primary-container', this.colorOnPrimaryContainer);
+      modalContent.setAttribute('color-secondary-container', this.colorSecondaryContainer);
+      modalContent.setAttribute('color-on-secondary-container', this.colorOnSecondaryContainer);
+      modalContent.setAttribute('color-surface-container-low', this.colorSurfaceContainerLow);
+      modalContent.setAttribute('color-background', this.colorBackground);
+      modal.append(modalContent);
+      document.body.append(modal);
+    }
+  }
+
+  onOpenDetailsModal(modalDetails: 'touristicContent' | 'TouristicContent') {
+    document.body.style.overflow = `hidden`;
+    if (modalDetails === 'touristicContent') {
+      this.showTouristicContentDetailsModal = true;
+    } else {
+      this.showTouristicEventDetailsModal = true;
+    }
+  }
+
   @Listen('downloadPress', { target: 'window' })
   onDownloadPress() {
     this.downloadRootOutdoorSite();
@@ -1069,6 +1149,12 @@ export class GrwOutdoorSiteDetail {
             {this.grwApp && <div part="detail-bottom-space" class="detail-bottom-space"></div>}
           </div>
         )}
+        {this.modalDetailsId && (
+          <Fragment>
+            {this.showTouristicContentDetailsModal && <grw-touristic-content-provider api={state.api} touristic-content-id={this.modalDetailsId}></grw-touristic-content-provider>}
+            {this.showTouristicEventDetailsModal && <grw-touristic-event-provider api={state.api} touristic-event-id={this.modalDetailsId}></grw-touristic-event-provider>}
+          </Fragment>
+        )}
       </Host>
     );
   }

src/components/grw-outdoor-site-detail/readme.md

@@ -25,6 +25,7 @@
 | `globalTilesMinZoomOffline`         | `global-tiles-min-zoom-offline`        |             | `number`  | `0`         |
 | `grwApp`                            | `grw-app`                              |             | `boolean` | `false`     |
 | `isLargeView`                       | `is-large-view`                        |             | `boolean` | `false`     |
+| `rounded`                           | `rounded`                              |             | `boolean` | `true`      |
 | `tilesMaxZoomOffline`               | `tiles-max-zoom-offline`               |             | `number`  | `16`        |
 | `tilesMinZoomOffline`               | `tiles-min-zoom-offline`               |             | `number`  | `12`        |
 | `weather`                           | `weather`                              |             | `boolean` | `false`     |
@@ -133,22 +134,32 @@
 
 ### Depends on
 
+- [grw-details-modal](../grw-details-modal)
+- [grw-touristic-event-detail](../grw-touristic-event-detail)
+- [grw-touristic-content-detail](../grw-touristic-content-detail)
 - [grw-poi](../grw-poi-detail)
 - [grw-outdoor-site-card](../grw-outdoor-site-card)
 - [grw-outdoor-course-card](../grw-outdoor-course-card)
 - [grw-information-desk](../grw-information-desk)
 - [grw-touristic-content-card](../grw-touristic-content-card)
 - [grw-touristic-event-card](../grw-touristic-event-card)
+- [grw-touristic-content-provider](../../store)
+- [grw-touristic-event-provider](../../store)
 
 ### Graph
 ```mermaid
 graph TD;
+  grw-outdoor-site-detail --> grw-details-modal
+  grw-outdoor-site-detail --> grw-touristic-event-detail
+  grw-outdoor-site-detail --> grw-touristic-content-detail
   grw-outdoor-site-detail --> grw-poi
   grw-outdoor-site-detail --> grw-outdoor-site-card
   grw-outdoor-site-detail --> grw-outdoor-course-card
   grw-outdoor-site-detail --> grw-information-desk
   grw-outdoor-site-detail --> grw-touristic-content-card
   grw-outdoor-site-detail --> grw-touristic-event-card
+  grw-outdoor-site-detail --> grw-touristic-content-provider
+  grw-outdoor-site-detail --> grw-touristic-event-provider
   grw-app --> grw-outdoor-site-detail
   style grw-outdoor-site-detail fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/grw-toggle-slot-visibility/grw-toggle-slot-visibility.tsx

@@ -25,7 +25,10 @@ export class GrwToggleSlotVisibility {
   }
 
   handleView() {
-    if (state.currentTrek && (typeof this.isLargeView === undefined || this.isLargeView !== this.toggleSlotElement.getBoundingClientRect().width >= this.largeViewSize)) {
+    if (
+      (state.currentTrek || state.currentOutdoorSite) &&
+      (typeof this.isLargeView === undefined || this.isLargeView !== this.toggleSlotElement.getBoundingClientRect().width >= this.largeViewSize)
+    ) {
       this.isLargeView = this.toggleSlotElement.getBoundingClientRect().width >= this.largeViewSize;
       this.showStartSlot = true;
       this.showEndSlot = this.isLargeView;
@@ -107,7 +110,7 @@ export class GrwToggleSlotVisibility {
   render() {
     return (
       <Host>
-        {state.currentTrek && (
+        {(state.currentTrek || state.currentOutdoorSite) && (
           <div class="grw-toggle-slot-visibility-container">
             <div
               class="grw-slot-start-container"

src/components/grw-touristic-content-detail/readme.md

@@ -76,12 +76,14 @@
 ### Used by
 
  - [grw-app](../grw-app)
+ - [grw-outdoor-site-detail](../grw-outdoor-site-detail)
  - [grw-trek-detail](../grw-trek-detail)
 
 ### Graph
 ```mermaid
 graph TD;
   grw-app --> grw-touristic-content-detail
+  grw-outdoor-site-detail --> grw-touristic-content-detail
   grw-trek-detail --> grw-touristic-content-detail
   style grw-touristic-content-detail fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/grw-touristic-event-detail/readme.md

@@ -78,12 +78,14 @@
 ### Used by
 
  - [grw-app](../grw-app)
+ - [grw-outdoor-site-detail](../grw-outdoor-site-detail)
  - [grw-trek-detail](../grw-trek-detail)
 
 ### Graph
 ```mermaid
 graph TD;
   grw-app --> grw-touristic-event-detail
+  grw-outdoor-site-detail --> grw-touristic-event-detail
   grw-trek-detail --> grw-touristic-event-detail
   style grw-touristic-event-detail fill:#f9f,stroke:#333,stroke-width:4px
 ```

src/components/grw-trek-detail/grw-trek-detail.tsx

@@ -216,6 +216,7 @@ export class GrwTrekDetail {
   onCloseDetailsModal() {
     document.body.style.overflow = `visible`;
     state.currentTouristicContent = null;
+    state.currentTouristicEvent = null;
     this.modalDetailsId = null;
     if (this.showTouristicContentDetailsModal) {
       this.showTouristicContentDetailsModal = false;