feat: add toggle elevation visibility button

GeotrekCE · Sep 26, 2024 · 9e2ff25 · 9e2ff25
1 parent b3c5b2d
commit 9e2ff25
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 45 deletions.
diff --git a/src/assets/hide-elevation.svg b/src/assets/hide-elevation.svg
diff --git a/src/assets/show-elevation.svg b/src/assets/show-elevation.svg
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -68,7 +68,6 @@ export namespace Components {
         "touristicEvents": boolean;
         "treks": boolean;
         "urlLayer": string;
-        "useGradient": boolean;
         "weather": boolean;
     }
     interface GrwCommonButton {
@@ -86,6 +85,13 @@ export namespace Components {
         "icon": Function;
         "name": Function;
     }
+    interface GrwFab {
+        "action": Function;
+        "fontFamily": string;
+        "hideTitle": string;
+        "icon": Function;
+        "showTitle": string;
+    }
     interface GrwFilter {
         "filterName": string;
         "filterNameProperty": string;
@@ -119,9 +125,11 @@ export namespace Components {
         "colorTrekLine": string;
         "commonMarkerSize": number;
         "departureArrivalMarkerSize": number;
+        "elevationDefaultState": string;
         "elevationHeight": number;
         "fontFamily": string;
         "grwApp": boolean;
+        "isLargeView": boolean;
         "largeViewSize": number;
         "mainClusterSize": number;
         "mainMarkerSize": number;
@@ -131,7 +139,6 @@ export namespace Components {
         "selectedMainMarkerSize": number;
         "tilesMaxZoomOffline": number;
         "urlLayer": string;
-        "useGradient": boolean;
     }
     interface GrwOfflineConfirmModal {
         "mode": Mode;
@@ -509,6 +516,12 @@ declare global {
         prototype: HTMLGrwExtendedFabElement;
         new (): HTMLGrwExtendedFabElement;
     };
+    interface HTMLGrwFabElement extends Components.GrwFab, HTMLStencilElement {
+    }
+    var HTMLGrwFabElement: {
+        prototype: HTMLGrwFabElement;
+        new (): HTMLGrwFabElement;
+    };
     interface HTMLGrwFilterElement extends Components.GrwFilter, HTMLStencilElement {
     }
     var HTMLGrwFilterElement: {
@@ -900,6 +913,7 @@ declare global {
         "grw-common-button": HTMLGrwCommonButtonElement;
         "grw-details-modal": HTMLGrwDetailsModalElement;
         "grw-extended-fab": HTMLGrwExtendedFabElement;
+        "grw-fab": HTMLGrwFabElement;
         "grw-filter": HTMLGrwFilterElement;
         "grw-filters": HTMLGrwFiltersElement;
         "grw-information-desk": HTMLGrwInformationDeskElement;
@@ -999,7 +1013,6 @@ declare namespace LocalJSX {
         "touristicEvents"?: boolean;
         "treks"?: boolean;
         "urlLayer"?: string;
-        "useGradient"?: boolean;
         "weather"?: boolean;
     }
     interface GrwCommonButton {
@@ -1018,6 +1031,13 @@ declare namespace LocalJSX {
         "icon"?: Function;
         "name"?: Function;
     }
+    interface GrwFab {
+        "action"?: Function;
+        "fontFamily"?: string;
+        "hideTitle"?: string;
+        "icon"?: Function;
+        "showTitle"?: string;
+    }
     interface GrwFilter {
         "filterName"?: string;
         "filterNameProperty"?: string;
@@ -1053,9 +1073,11 @@ declare namespace LocalJSX {
         "colorTrekLine"?: string;
         "commonMarkerSize"?: number;
         "departureArrivalMarkerSize"?: number;
+        "elevationDefaultState"?: string;
         "elevationHeight"?: number;
         "fontFamily"?: string;
         "grwApp"?: boolean;
+        "isLargeView"?: boolean;
         "largeViewSize"?: number;
         "mainClusterSize"?: number;
         "mainMarkerSize"?: number;
@@ -1070,7 +1092,6 @@ declare namespace LocalJSX {
         "selectedMainMarkerSize"?: number;
         "tilesMaxZoomOffline"?: number;
         "urlLayer"?: string;
-        "useGradient"?: boolean;
     }
     interface GrwOfflineConfirmModal {
         "mode"?: Mode;
@@ -1407,6 +1428,7 @@ declare namespace LocalJSX {
         "grw-common-button": GrwCommonButton;
         "grw-details-modal": GrwDetailsModal;
         "grw-extended-fab": GrwExtendedFab;
+        "grw-fab": GrwFab;
         "grw-filter": GrwFilter;
         "grw-filters": GrwFilters;
         "grw-information-desk": GrwInformationDesk;
@@ -1453,6 +1475,7 @@ declare module "@stencil/core" {
             "grw-common-button": LocalJSX.GrwCommonButton & JSXBase.HTMLAttributes<HTMLGrwCommonButtonElement>;
             "grw-details-modal": LocalJSX.GrwDetailsModal & JSXBase.HTMLAttributes<HTMLGrwDetailsModalElement>;
             "grw-extended-fab": LocalJSX.GrwExtendedFab & JSXBase.HTMLAttributes<HTMLGrwExtendedFabElement>;
+            "grw-fab": LocalJSX.GrwFab & JSXBase.HTMLAttributes<HTMLGrwFabElement>;
             "grw-filter": LocalJSX.GrwFilter & JSXBase.HTMLAttributes<HTMLGrwFilterElement>;
             "grw-filters": LocalJSX.GrwFilters & JSXBase.HTMLAttributes<HTMLGrwFiltersElement>;
             "grw-information-desk": LocalJSX.GrwInformationDesk & JSXBase.HTMLAttributes<HTMLGrwInformationDeskElement>;

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -76,8 +76,6 @@ export class GrwApp {
   @Prop() colorClusters = null;
   @Prop() colorOutdoorArea = '#ffb700';
 
-  @Prop() useGradient = false;
-
   @Prop() treks = true;
   @Prop() touristicContents = false;
   @Prop() touristicEvents = false;
@@ -906,7 +904,6 @@ export class GrwApp {
                   color-sensitive-area={this.colorSensitiveArea}
                   color-markers={this.colorMarkers ? this.colorMarkers : this.colorPrimaryApp}
                   color-clusters={this.colorClusters ? this.colorClusters : this.colorPrimaryApp}
-                  use-gradient={this.useGradient}
                   tiles-max-zoom-offline={this.tilesMaxZoomOffline}
                   grw-app={true}
                   main-marker-size={this.mainMarkerSize}
@@ -918,6 +915,7 @@ export class GrwApp {
                   elevation-height={this.elevationHeight}
                   mobile-elevation-height={this.mobileElevationHeight}
                   large-view-size={this.largeViewSize}
+                  is-large-view={this.isLargeView}
                 ></grw-map>
               )}
             </div>

diff --git a/src/components/grw-fab/grw-fab.scss b/src/components/grw-fab/grw-fab.scss
@@ -0,0 +1,29 @@
+.fab-visibility-button {
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  text-decoration: none;
+  padding: 4px;
+  background-color: var(--fab-background-color);
+  color: var(--fab-color);
+  box-shadow: var(--elevation-1);
+  border-radius: var(--border-radius, 18px);
+  width: 36px;
+  height: 36px;
+  font-family: var(--font-family);
+  font-size: 16px;
+  pointer-events: all;
+  filter: hue-rotate(90deg);
+  &:hover {
+    box-shadow: var(--elevation-4);
+  }
+  .icon {
+    display: flex;
+    color: var(--fab-color);
+  }
+}
diff --git a/src/components/grw-fab/grw-fab.tsx b/src/components/grw-fab/grw-fab.tsx
@@ -0,0 +1,32 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import ShowElevationIcon from '../../assets/show-elevation.svg';
+import HideElevationIcon from '../../assets/hide-elevation.svg';
+
+@Component({
+  tag: 'grw-fab',
+  styleUrl: 'grw-fab.scss',
+  shadow: true,
+})
+export class GrwFab {
+  @Prop() action: Function;
+  @Prop() icon: Function;
+  @Prop() showTitle: string;
+  @Prop() hideTitle: string;
+
+  @Prop() fontFamily = 'Roboto';
+
+  render() {
+    const icon = this.icon();
+    return (
+      <Host
+        style={{
+          '--font-family': this.fontFamily,
+        }}
+      >
+        <button title={icon === 'show-elevation' ? this.hideTitle : this.showTitle} part="fab-visibility-button" class="fab-visibility-button" onClick={() => this.action()}>
+          <span part="fab-visibility-button-icon" class="icon" innerHTML={icon === 'show-elevation' ? ShowElevationIcon : HideElevationIcon}></span>
+        </button>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -19,6 +19,10 @@
 }
 
 .trek-map {
+  height: calc(100%);
+}
+
+.trek-map-and-elevation {
   height: calc(100% - var(--elevation-height));
 }
 
@@ -415,3 +419,10 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+.grw-elevation-visibility-button-container {
+  z-index: 4000;
+  position: absolute;
+  left: 10px;
+  bottom: 36px;
+}
diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx
@@ -52,7 +52,6 @@ export class GrwMap {
   @Prop() colorClusters = null;
   @Prop() colorOutdoorArea = '#ffb700';
 
-  @Prop() useGradient = false;
   @Prop() tilesMaxZoomOffline = 16;
 
   @Prop() grwApp = false;
@@ -67,6 +66,8 @@ export class GrwMap {
   @Prop() elevationHeight = 280;
   @Prop() mobileElevationHeight = 280;
   @Prop() largeViewSize = 1024;
+  @Prop() elevationDefaultState = 'visible';
+  @Prop() isLargeView = false;
 
   map: L.Map;
   bounds;
@@ -898,51 +899,28 @@ export class GrwMap {
     L.setLocale('fr');
 
     const elevationOptions = {
-      srcFolder: 'https://unpkg.com/@raruto/leaflet-elevation/src/',
-      elevationDiv: `#elevation`,
-      theme: `custom-theme${!this.useGradient ? ' use-theme-color' : ''}`,
-      detached: true,
+      elevationDiv: `#elevation-container`,
+      theme: `custom-theme use-theme-color`,
       height: this.mapElement.getBoundingClientRect().width >= this.largeViewSize / 2 ? this.elevationHeight : this.mobileElevationHeight,
-      wptIcons: true,
-      wptLabels: true,
-      collapsed: false,
-      autohide: false,
       distanceMarkers: { distance: false, direction: true },
-      hotline: this.useGradient,
-      closeBtn: false,
       summary: 'inline',
-      time: false,
-      timestamps: false,
       legend: false,
       downloadLink: false,
       autofitBounds: false,
       ruler: false,
-      edgeScale: false,
       waypoints: false,
       almostOver: false,
-      speed: false,
-      slope: false,
-      acceleration: false,
-      reverseCoords: false,
-      imperial: false,
       dragging: false,
-      zooming: false,
-      handlers: ['Altitude', 'Distance', 'Slope', 'LinearGradient'],
-      linearGradient: {
-        attr: 'z',
-        path: 'altitude',
-        range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
-        min: 'elevation_min',
-        max: 'elevation_max',
-      },
     };
-    this.elevationControl = (L.control as any).elevation({ ...elevationOptions }).addTo(this.map);
+    this.elevationControl = (L.control as any).elevation(elevationOptions).addTo(this.map);
     const elevation = JSON.stringify({
       name: `${state.currentTrek.name}`,
       type: 'FeatureCollection',
       features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: state.currentTrek.geometry.coordinates }, properties: null }],
     });
     (this.elevationControl as any).load(elevation);
+    (this.elevationControl as any).eleDiv.style.display = this.elevationDefaultState === 'visible' ? 'block' : 'none';
+    forceUpdate(this.hostElement);
 
     const departureArrival: FeatureCollection = {
       type: 'FeatureCollection',
@@ -2806,15 +2784,25 @@ export class GrwMap {
   }
 
   handleView() {
-    const elevationHeight = this.mapElement.getBoundingClientRect().width >= this.largeViewSize / 2 ? this.elevationHeight : this.mobileElevationHeight;
-    (this.elevationControl.options as any).height = elevationHeight;
+    const elevationHeight = this.mapElement.getBoundingClientRect().width >= this.largeViewSize ? this.elevationHeight : this.mobileElevationHeight;
+    if (this.elevationControl) {
+      (this.elevationControl.options as any).height = elevationHeight;
+      (this.elevationControl as any).redraw();
+    }
+    this.map.invalidateSize();
+    forceUpdate(this.hostElement);
+  }
+
+  handleElevation() {
+    (this.elevationControl as any).eleDiv.style.display = (this.elevationControl as any).eleDiv.style.display === 'block' ? 'none' : 'block';
     (this.elevationControl as any).redraw();
     forceUpdate(this.hostElement);
   }
 
   render() {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
+
     return (
       <Host
         ref={el => (this.hostElement = el)}
@@ -2841,12 +2829,27 @@ export class GrwMap {
           class={
             (state.currentTouristicContent || state.currentTouristicEvent || state.currentOutdoorSite || state.currentOutdoorCourse) && this.grwApp
               ? 'common-map'
+              : state.currentTrek && this.elevationControl && (this.elevationControl as any).eleDiv.style.display === 'block'
+              ? 'trek-map-and-elevation'
               : state.currentTrek
               ? 'trek-map'
               : 'treks-map'
           }
           ref={el => (this.mapRef = el)}
-        ></div>
+        >
+          {state.currentTrek && (
+            <div class="grw-elevation-visibility-button-container">
+              <grw-fab
+                exportparts="fab-visibility-button,fab-visibility-button-icon,fab-visibility-button-label"
+                font-family={this.fontFamily}
+                action={() => this.handleElevation()}
+                icon={() => (this.elevationControl && (this.elevationControl as any).eleDiv.style.display === 'block' ? 'show-elevation' : 'hide-elevation')}
+                showTitle={translate[state.language].showElevation}
+                hideTitle={translate[state.language].hideElevation}
+              ></grw-fab>
+            </div>
+          )}
+        </div>
 
         {!this.mapIsReady && (
           <div part="map-loader-container" class="map-loader-container">