@geotrekce/geotrek-rando-widget 0.0.1

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

@@ -0,0 +1,187 @@
+import { Component, Host, h, Element, Prop } from '@stencil/core';
+import L from 'leaflet';
+import state, { onChange } from 'store/store';
+import departureArrivalImage from '../../assets/departure-arrival.svg';
+export class GrwMap {
+  constructor() {
+    this.colorTrekLine = '#6b0030';
+    this.colorDepartureIcon = '#006b3b';
+    this.colorArrivalIcon = '#85003b';
+  }
+  componentDidLoad() {
+    this.map = L.map(this.element, {
+      center: [1, 1],
+      zoom: 10,
+    });
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap',
+    }).addTo(this.map);
+    if (state.currentTrek) {
+      this.addTrek();
+    }
+    else {
+      this.addTreks();
+    }
+    onChange('currentTrek', () => {
+      if (state.currentTrek) {
+        this.removeTreks();
+        this.addTrek();
+      }
+      else {
+        this.addTreks();
+        this.removeTrek();
+      }
+    });
+  }
+  addTreks() {
+    const treksDepartureCoordinates = [];
+    const treksFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    for (const trek of state.treks) {
+      treksDepartureCoordinates.push(trek.departure_geom);
+      treksFeatureCollection.features.push({
+        type: 'Feature',
+        properties: {},
+        geometry: { type: 'Point', coordinates: trek.departure_geom },
+      });
+    }
+    if (treksDepartureCoordinates.length > 0) {
+      const bounds = L.latLngBounds(treksDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+      this.map.fitBounds(bounds);
+    }
+    this.treksLayer = L.geoJSON(treksFeatureCollection, {
+      pointToLayer: (_geoJsonPoint, latlng) => L.marker(latlng, {
+        icon: L.divIcon({
+          className: 'trek-marker',
+          iconSize: 48,
+          iconAnchor: [0, 48],
+        }),
+        autoPanOnFocus: false,
+      }),
+    }).addTo(this.map);
+  }
+  removeTreks() {
+    this.map.removeLayer(this.treksLayer);
+    this.treksLayer = null;
+  }
+  addTrek() {
+    const trekFeature = {
+      type: 'Feature',
+      geometry: state.currentTrek.geometry,
+      properties: {},
+    };
+    this.trekLayer = L.geoJSON(trekFeature, {
+      style: () => ({
+        color: this.colorTrekLine,
+      }),
+    }).addTo(this.map);
+    const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+    this.map.fitBounds(bounds);
+    const departureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
+    const arrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
+    const departureArrivalFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: { type: 'departure' },
+          geometry: { type: 'Point', coordinates: departureCoordinates },
+        },
+      ],
+    };
+    if (departureCoordinates[0] !== arrivalCoordinates[0] || departureCoordinates[1] !== arrivalCoordinates[1]) {
+      departureArrivalFeatureCollection.features.push({
+        type: 'Feature',
+        properties: { type: 'arrival' },
+        geometry: { type: 'Point', coordinates: arrivalCoordinates },
+      });
+    }
+    this.departureArrivalLayer = L.geoJSON(departureArrivalFeatureCollection, {
+      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+        icon: L.divIcon({
+          html: departureArrivalImage,
+          className: geoJsonPoint.properties.type === 'departure' ? 'departure-icon' : 'arrival-icon',
+          iconSize: 48,
+          iconAnchor: [0, 48],
+        }),
+        autoPanOnFocus: false,
+      }),
+    }).addTo(this.map);
+  }
+  removeTrek() {
+    this.map.removeLayer(this.trekLayer);
+    this.map.removeLayer(this.departureArrivalLayer);
+    this.trekLayer = null;
+    this.departureArrivalLayer = null;
+  }
+  render() {
+    return h(Host, { style: { '--color-departure-icon': this.colorDepartureIcon, '--color-arrival-icon': this.colorArrivalIcon } });
+  }
+  static get is() { return "grw-map"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-map.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-map.css"]
+  }; }
+  static get properties() { return {
+    "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 elementRef() { return "element"; }
+}

package/dist/collection/components/grw-trek-card/grw-trek-card.css

@@ -0,0 +1,66 @@
+.trek-card-container {
+  width: 350px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+.trek-card-container .image {
+  width: 100%;
+  height: auto;
+}
+.trek-card-container .sub-container {
+  padding: 12px;
+}
+.trek-card-container .sub-container .name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+.trek-card-container .sub-container .description {
+  max-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 12px;
+}
+.trek-card-container .sub-container .description p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.trek-card-container .sub-container .icons-labels-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.trek-card-container .sub-container .icons-labels-container .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.trek-card-container .sub-container .icons-labels-container .row:not(:last-child) {
+  margin-bottom: 12px;
+}
+.trek-card-container .sub-container .icons-labels-container .row .icon-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 33.3333333333%;
+}
+.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
+  margin: 0px 4px;
+}
+.trek-card-container .sub-container .icons-labels-container .row .icon-label img,
+.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
+  width: 24px;
+  height: auto;
+  margin-right: 24px;
+}
+.trek-card-container .sub-container .icons-labels-container .row .practice img {
+  background-color: var(--color-primary);
+}

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -0,0 +1,90 @@
+import { Component, Host, h, Prop, Event } from '@stencil/core';
+import state from 'store/store';
+import { formatDuration, formatLength, formatAscent } from 'utils/utils';
+import ascentImage from '../../assets/ascent.svg';
+import durationImage from '../../assets/duration.svg';
+import lengthImage from '../../assets/length.svg';
+export class GrwTrekCard {
+  componentWillLoad() {
+    this.currentTrek = this.trek ? this.trek : state.currentTrek;
+    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+    this.route = state.routes.find(route => route.id === this.currentTrek.route);
+    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id) },
+      h("div", { class: "trek-card-container" },
+        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }),
+        h("div", { class: "sub-container" },
+          h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name),
+          h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }),
+          h("div", { class: "icons-labels-container" },
+            h("div", { class: "row" },
+              h("div", { class: "icon-label difficulty" },
+                ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
+                _d.label),
+              h("div", { class: "icon-label duration" },
+                h("div", { class: "svg-icon", innerHTML: durationImage }),
+                formatDuration(this.currentTrek.duration)),
+              h("div", { class: "icon-label route" },
+                ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
+                _f.route)),
+            h("div", { class: "row" },
+              h("div", { class: "icon-label length" },
+                h("div", { class: "svg-icon", innerHTML: lengthImage }),
+                formatLength(this.currentTrek.length_2d)),
+              h("div", { class: "icon-label ascent" },
+                h("div", { class: "svg-icon", innerHTML: ascentImage }),
+                formatAscent(this.currentTrek.ascent)),
+              h("div", { class: "icon-label practice" },
+                ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
+                _h.name)))))));
+  }
+  static get is() { return "grw-trek-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-trek-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-trek-card.css"]
+  }; }
+  static get properties() { return {
+    "trek": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Trek",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; }",
+        "references": {
+          "Trek": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "trekCardPress",
+      "name": "trekCardPress",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/grw-trek-detail/grw-trek-detail.css

@@ -0,0 +1,58 @@
+.trek-detail-container {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+}
+.trek-detail-container .name {
+  color: var(--color-primary);
+  font-size: 48px;
+  font-weight: bold;
+  padding: 24px;
+}
+.trek-detail-container .image {
+  align-self: center;
+  width: 100%;
+  max-width: 700px;
+  height: auto;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
+}
+.trek-detail-container .sub-container {
+  padding: 24px;
+}
+.trek-detail-container .sub-container .icons-labels-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.trek-detail-container .sub-container .icons-labels-container .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child) {
+  margin-bottom: 24px;
+}
+.trek-detail-container .sub-container .icons-labels-container .row .icon-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 33.3333333333%;
+}
+.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
+  margin: 0px 8px;
+}
+.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,
+.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
+  width: 24px;
+  height: auto;
+  margin-right: 24px;
+}
+.trek-detail-container .sub-container .icons-labels-container .row .practice img {
+  background-color: var(--color-primary);
+}
+.trek-detail-container .description {
+  padding: 0px 24px 24px 24px;
+}

package/dist/collection/components/grw-trek-detail/grw-trek-detail.js

@@ -0,0 +1,74 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import state from 'store/store';
+import { formatDuration, formatLength, formatAscent } from 'utils/utils';
+import ascentImage from '../../assets/ascent.svg';
+import durationImage from '../../assets/duration.svg';
+import lengthImage from '../../assets/length.svg';
+export class GrwTrekDetail {
+  componentWillLoad() {
+    this.currentTrek = this.trek ? this.trek : state.currentTrek;
+    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+    this.route = state.routes.find(route => route.id === this.currentTrek.route);
+    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (h(Host, null,
+      h("div", { class: "trek-detail-container" },
+        h("div", { class: "name" }, this.currentTrek.name),
+        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }),
+        h("div", { class: "sub-container" },
+          h("div", { class: "icons-labels-container" },
+            h("div", { class: "row" },
+              h("div", { class: "icon-label difficulty" },
+                ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
+                _b.label),
+              h("div", { class: "icon-label duration" },
+                h("div", { class: "svg-icon", innerHTML: durationImage }),
+                formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)),
+              h("div", { class: "icon-label route" },
+                ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
+                _e.route)),
+            h("div", { class: "row" },
+              h("div", { class: "icon-label length" },
+                h("div", { class: "svg-icon", innerHTML: lengthImage }),
+                formatLength(this.currentTrek.length_2d)),
+              h("div", { class: "icon-label ascent" },
+                h("div", { class: "svg-icon", innerHTML: ascentImage }),
+                formatAscent(this.currentTrek.ascent)),
+              h("div", { class: "icon-label practice" },
+                ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
+                _g.name)))),
+        h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }))));
+  }
+  static get is() { return "grw-trek-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-trek-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-trek-detail.css"]
+  }; }
+  static get properties() { return {
+    "trek": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Trek",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; }",
+        "references": {
+          "Trek": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/collection/components/grw-treks-list/grw-treks-list.css

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+}
+@media (min-width: 664px) {
+  :host {
+    justify-content: space-between;
+  }
+}
+@media (min-width: 996px) {
+  :host {
+    justify-content: flex-start;
+  }
+}
+
+grw-trek-card {
+  margin: 6px;
+}

package/dist/collection/components/grw-treks-list/grw-treks-list.js

@@ -0,0 +1,38 @@
+import { Component, Host, h, Element, State } from '@stencil/core';
+import state from 'store/store';
+export class GrwTreksList {
+  constructor() {
+    this.treksToDisplay = [];
+    this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
+    this.step = 10;
+  }
+  componentWillLoad() {
+    this.treksToDisplay = state.treks.slice(0, this.step);
+    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+  }
+  handleInfiniteScroll(event) {
+    if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
+      if (this.treksToDisplay.length < state.treks.length) {
+        this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
+      }
+      else {
+        this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: "treks-list-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek })))));
+  }
+  static get is() { return "grw-treks-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-treks-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-treks-list.css"]
+  }; }
+  static get states() { return {
+    "treksToDisplay": {}
+  }; }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/store/grw-trek-provider.js

@@ -0,0 +1,63 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import state from 'store/store';
+export class GrwTrekProvider {
+  componentWillLoad() {
+    state.api = this.api;
+    return Promise.all([
+      fetch(`${this.api}trek/${this.trekId}/?language=fr&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry`),
+      fetch(`${this.api}trek_difficulty/?language=fr`),
+      fetch(`${this.api}trek_route/?language=fr`),
+      fetch(`${this.api}trek_practice/?language=fr`),
+    ])
+      .then(responses => Promise.all(responses.map(response => response.json())))
+      .then(([trek, difficulties, routes, practices]) => {
+      state.currentTrek = trek;
+      state.difficulties = difficulties.results;
+      state.routes = routes.results;
+      state.practices = practices.results;
+    });
+  }
+  disconnectedCallback() {
+    state.currentTrek = null;
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "grw-trek-provider"; }
+  static get properties() { return {
+    "api": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "api",
+      "reflect": false
+    },
+    "trekId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "trek-id",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/store/grw-treks-provider.js

@@ -0,0 +1,65 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import state from 'store/store';
+export class GrwTreksProvider {
+  componentWillLoad() {
+    state.api = this.api;
+    let treksRequest = `${this.api}trek/?language=fr`;
+    if (this.portals) {
+      treksRequest += `&portals=${this.portals}`;
+    }
+    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
+    return Promise.all([
+      fetch(treksRequest),
+      fetch(`${this.api}trek_difficulty/?language=fr`),
+      fetch(`${this.api}trek_route/?language=fr`),
+      fetch(`${this.api}trek_practice/?language=fr`),
+    ])
+      .then(responses => Promise.all(responses.map(response => response.json())))
+      .then(([treks, difficulties, routes, practices]) => {
+      state.treks = treks.results;
+      state.difficulties = difficulties.results;
+      state.routes = routes.results;
+      state.practices = practices.results;
+    });
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "grw-treks-provider"; }
+  static get properties() { return {
+    "api": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "api",
+      "reflect": false
+    },
+    "portals": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "portals",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/store/store.js

@@ -0,0 +1,11 @@
+import { createStore } from '@stencil/store';
+const { state, onChange } = createStore({
+  api: '',
+  treks: [],
+  difficulties: [],
+  routes: [],
+  practices: [],
+  currentTrek: null,
+});
+export { onChange };
+export default state;