@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.2

package/dist/collection/components/grw-app/grw-app.css

@@ -1,34 +1,43 @@
-.header-container {
+.app-container {
+  position: relative;
+  height: 100%;
+  max-height: 100vh;
+}
+
+.header-container,
+.large-view-header-container {
   display: flex;
   align-items: center;
   background-color: var(--color-primary);
   height: 64px;
 }
-.header-container .title {
+.header-container .title,
+.large-view-header-container .title {
   color: #ffffff;
-  font-size: 24px;
   margin-left: 24px;
 }
-.header-container .arrow-back-icon {
+.header-container .arrow-back-icon,
+.large-view-header-container .arrow-back-icon {
   width: 48px;
   height: auto;
   margin-left: 24px;
 }
-.header-container .arrow-back-icon svg {
+.header-container .arrow-back-icon svg,
+.large-view-header-container .arrow-back-icon svg {
   cursor: pointer;
   width: 48px;
   height: auto;
 }
 
-.loader-container {
-  position: absolute;
+.loader-container,
+.large-view-loader-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100vw;
   height: 100%;
 }
-.loader-container .loader {
+.loader-container .loader,
+.large-view-loader-container .loader {
   width: 48px;
   height: 48px;
   border: 5px solid var(--color-primary-tint);
@@ -48,20 +57,22 @@
 }
 
 .content-container {
+  position: relative;
   display: flex;
-  height: calc(100vh - 64px);
+  height: calc(100% - 64px);
 }
 
 .app-treks-list-container,
-.app-trek-detail-container {
-  width: 100vw;
+.app-trek-detail-container,
+.large-view-app-treks-list-container,
+.large-view-app-trek-detail-container {
   height: 100%;
 }
 
-.app-map-container {
-  position: absolute;
-  width: 100vw;
-  height: calc(100vh - 64px);
+.app-map-container,
+.large-view-app-map-container {
+  width: 100%;
+  height: 100%;
 }
 
 .map-visibility-button {
@@ -84,29 +95,41 @@
   text-align: center;
 }
 
-@media (min-width: 664px) {
-  .map-visibility-button {
-    display: none;
-  }
-
-  .header-container .title {
-    font-size: 32px;
-  }
+.header-container .title {
+  font-size: 24px;
+}
 
-  .loader-container {
-    position: relative;
-    width: 50vw;
-  }
+.loader-container {
+  position: absolute;
+  width: 100%;
+}
 
-  .app-treks-list-container,
+.app-treks-list-container,
 .app-trek-detail-container {
-    width: 50vw;
-    height: 100%;
-  }
+  width: 100%;
+}
 
-  .app-map-container {
-    position: relative;
-    width: 50vw;
-    height: 100%;
-  }
+.app-map-container {
+  position: relative;
+  width: 100%;
+  position: absolute;
+}
+
+.large-view-header-container .title {
+  font-size: 32px;
+}
+
+.large-view-loader-container {
+  position: relative;
+  width: 50%;
+}
+
+.large-view-app-treks-list-container,
+.large-view-app-trek-detail-container {
+  width: 50%;
+}
+
+.large-view-app-map-container {
+  position: relative;
+  width: 50%;
 }

package/dist/collection/components/grw-app/grw-app.js

@@ -1,40 +1,55 @@
-import { Component, Host, h, Listen, State, Prop } from '@stencil/core';
+import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stencil/core';
 import state from 'store/store';
 import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
+    this.showTrek = false;
+    this.showMap = false;
+    this.isLargeView = false;
     this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#d2b2c0';
+    this.colorTrekLine = '#6b0030';
+    this.colorDepartureIcon = '#006b3b';
+    this.colorArrivalIcon = '#85003b';
+    this.largeViewSize = 664;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
   }
-  onWindowResize(event) {
-    this.showMap = !(event.composedPath()[0].innerWidth < 664);
+  onWindowResize() {
+    this.handleView();
+  }
+  watchPropHandler() {
+    window.dispatchEvent(new window.Event('resize'));
+  }
+  componentDidLoad() {
+    this.handleView();
   }
   onTrekDetailsClose() {
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
-  componentWillLoad() {
-    this.showMap = !(window.innerWidth < 664);
+  handleView() {
+    this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
+    this.showMap = this.isLargeView;
   }
   render() {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
-      h("grw-treks-provider", { api: this.api, portals: this.portals },
-        h("div", { class: "header-container" }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)),
+      h("grw-treks-provider", { api: this.api, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }),
+      this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }),
+      h("div", { class: "app-container" },
+        h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)),
         h("div", { class: "content-container" },
-          h("div", { class: "app-treks-list-container", style: { visibility: this.showTrek ? 'hidden' : 'visible', position: this.showTrek ? 'absolute' : 'relative' } },
-            h("grw-treks-list", null)),
-          this.showTrek && !state.currentTrek && (h("div", { class: "loader-container" },
+          h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } },
+            h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
+          this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' },
             h("span", { class: "loader" }))),
-          this.showTrek && this.currentTrekId && (h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }, state.currentTrek && (h("div", { class: "app-trek-detail-container" },
-            h("grw-trek-detail", null))))),
-          h("div", { class: "app-map-container", style: { visibility: this.showMap ? 'visible' : 'hidden' } },
-            h("grw-map", null))),
-        h("div", { class: "map-visibility-button" },
+          state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' },
+            h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))),
+          h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon })),
+        h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } },
           h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   static get is() { return "grw-app"; }
@@ -63,6 +78,91 @@ export class GrwApp {
       "attribute": "api",
       "reflect": false
     },
+    "inBbox": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "in-bbox",
+      "reflect": false
+    },
+    "cities": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cities",
+      "reflect": false
+    },
+    "districts": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "districts",
+      "reflect": false
+    },
+    "structures": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "structures",
+      "reflect": false
+    },
+    "themes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "themes",
+      "reflect": false
+    },
     "portals": {
       "type": "string",
       "mutable": false,
@@ -80,6 +180,40 @@ export class GrwApp {
       "attribute": "portals",
       "reflect": false
     },
+    "routes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "routes",
+      "reflect": false
+    },
+    "practices": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "practices",
+      "reflect": false
+    },
     "appName": {
       "type": "string",
       "mutable": false,
@@ -98,6 +232,74 @@ export class GrwApp {
       "reflect": false,
       "defaultValue": "'Geotrek Rando Widget'"
     },
+    "urlLayer": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url-layer",
+      "reflect": false
+    },
+    "center": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "center",
+      "reflect": false
+    },
+    "zoom": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "zoom",
+      "reflect": false
+    },
+    "attribution": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "attribution",
+      "reflect": false
+    },
     "colorPrimary": {
       "type": "string",
       "mutable": false,
@@ -133,13 +335,73 @@ export class GrwApp {
       "attribute": "color-primary-tint",
       "reflect": false,
       "defaultValue": "'#d2b2c0'"
+    },
+    "colorTrekLine": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-trek-line",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorDepartureIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-departure-icon",
+      "reflect": false,
+      "defaultValue": "'#006b3b'"
+    },
+    "colorArrivalIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-arrival-icon",
+      "reflect": false,
+      "defaultValue": "'#85003b'"
     }
   }; }
   static get states() { return {
     "showTrek": {},
     "showMap": {},
+    "isLargeView": {},
     "currentTrekId": {}
   }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "isLargeView",
+      "methodName": "watchPropHandler"
+    }]; }
   static get listeners() { return [{
       "name": "trekCardPress",
       "method": "onTrekCardPress",

package/dist/collection/components/grw-map/grw-map.css

@@ -659,6 +659,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 grw-map {
   display: block;
   height: 100%;
+  max-height: 100vh;
 }
 
 .departure-icon svg,
@@ -683,4 +684,39 @@ grw-map {
 .trek-marker {
   background-color: var(--color-primary);
   border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.trek-marker img {
+  width: 36px !important;
+}
+
+.map-loader-container {
+  position: absolute;
+  z-index: 500;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.map-loader-container .loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--color-primary-tint);
+  border-bottom-color: var(--color-primary);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }