@geotrekce/geotrek-rando-widget 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/grw-app.cjs.entry.js +26 -8
- package/dist/cjs/grw-filter_6.cjs.entry.js +40 -14
- package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js +2 -2
- package/dist/cjs/grw-trek-card.cjs.entry.js +1 -1
- package/dist/cjs/{store-972b8d2a.js → store-fd04a216.js} +2 -0
- package/dist/collection/components/grw-app/grw-app.js +25 -7
- package/dist/collection/components/grw-map/grw-map.js +20 -8
- package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.css +1 -0
- package/dist/collection/components/grw-trek-detail/grw-trek-detail.css +6 -0
- package/dist/collection/components/grw-trek-detail/grw-trek-detail.js +10 -2
- package/dist/collection/components/grw-treks-list/grw-treks-list.js +8 -3
- package/dist/collection/store/grw-treks-provider.js +1 -0
- package/dist/collection/store/store.js +2 -0
- package/dist/components/grw-app.js +25 -7
- package/dist/components/grw-map2.js +20 -8
- package/dist/components/grw-sensitive-area-detail2.js +1 -1
- package/dist/components/grw-trek-detail2.js +10 -2
- package/dist/components/grw-treks-list2.js +8 -3
- package/dist/components/grw-treks-provider2.js +1 -0
- package/dist/components/store.js +2 -0
- package/dist/esm/grw-app.entry.js +26 -8
- package/dist/esm/grw-filter_6.entry.js +40 -14
- package/dist/esm/grw-information-desk-detail_3.entry.js +2 -2
- package/dist/esm/grw-trek-card.entry.js +1 -1
- package/dist/esm/{store-5a42b5d8.js → store-b2c76c0c.js} +2 -0
- package/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js +1 -1
- package/dist/geotrek-rando-widget/{p-2d9ae918.entry.js → p-1b2ba86d.entry.js} +1 -1
- package/dist/geotrek-rando-widget/p-5f17d340.entry.js +1 -0
- package/dist/geotrek-rando-widget/{p-206a52d9.entry.js → p-6716c635.entry.js} +1 -1
- package/dist/geotrek-rando-widget/{p-d3aa9819.entry.js → p-7715153d.entry.js} +1 -1
- package/dist/geotrek-rando-widget/p-e6710c64.js +1 -0
- package/dist/types/components/grw-app/grw-app.d.ts +1 -1
- package/dist/types/components/grw-map/grw-map.d.ts +2 -1
- package/dist/types/store/store.d.ts +5 -0
- package/package.json +1 -1
- package/dist/geotrek-rando-widget/p-8cfa03c0.entry.js +0 -1
- package/dist/geotrek-rando-widget/p-e63213a9.js +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c2c4531d.js');
|
|
6
|
-
const store = require('./store-
|
|
6
|
+
const store = require('./store-fd04a216.js');
|
|
7
7
|
|
|
8
8
|
const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
|
|
9
9
|
|
|
@@ -45,9 +45,15 @@ const GrwApp = class {
|
|
|
45
45
|
componentDidLoad() {
|
|
46
46
|
this.handleView();
|
|
47
47
|
window.addEventListener('popstate', this.handlePopStateBind, false);
|
|
48
|
+
const url = new URL(window.location.toString());
|
|
49
|
+
const trekParam = url.searchParams.get('trek');
|
|
50
|
+
if (trekParam) {
|
|
51
|
+
window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
|
|
52
|
+
this.currentTrekId = Number(trekParam);
|
|
53
|
+
this.showTrek = !this.showTrek;
|
|
54
|
+
}
|
|
48
55
|
}
|
|
49
56
|
onTrekDetailsClose() {
|
|
50
|
-
this.forwardTrekId = this.currentTrekId;
|
|
51
57
|
this.currentTrekId = null;
|
|
52
58
|
this.showTrek = !this.showTrek;
|
|
53
59
|
}
|
|
@@ -59,15 +65,27 @@ const GrwApp = class {
|
|
|
59
65
|
handleFilters() {
|
|
60
66
|
this.showFilters = !this.showFilters;
|
|
61
67
|
}
|
|
62
|
-
|
|
63
|
-
if (
|
|
68
|
+
handleBackButton() {
|
|
69
|
+
if (window.history.state.isInitialHistoryWithTrek) {
|
|
64
70
|
this.onTrekDetailsClose();
|
|
71
|
+
const url = new URL(window.location.toString());
|
|
72
|
+
url.searchParams.delete('trek');
|
|
73
|
+
window.history.pushState({}, '', url);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
window.history.back();
|
|
65
77
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
78
|
+
}
|
|
79
|
+
handlePopState() {
|
|
80
|
+
const url = new URL(window.location.toString());
|
|
81
|
+
const trekParam = url.searchParams.get('trek');
|
|
82
|
+
if (trekParam) {
|
|
83
|
+
this.currentTrekId = Number(trekParam);
|
|
69
84
|
this.showTrek = !this.showTrek;
|
|
70
85
|
}
|
|
86
|
+
else {
|
|
87
|
+
this.onTrekDetailsClose();
|
|
88
|
+
}
|
|
71
89
|
}
|
|
72
90
|
handleShowMap() {
|
|
73
91
|
if (this.currentTrekId) {
|
|
@@ -81,7 +99,7 @@ const GrwApp = class {
|
|
|
81
99
|
window.removeEventListener('popstate', this.handlePopStateBind);
|
|
82
100
|
}
|
|
83
101
|
render() {
|
|
84
|
-
return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, index.h("grw-treks-provider", { api: this.api, language: this.language, "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 && index.h("grw-trek-provider", { api: store.state.api, language: this.language, "trek-id": this.currentTrekId }), index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (index.h("div", { onClick: () =>
|
|
102
|
+
return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, index.h("grw-treks-provider", { api: this.api, language: this.language, "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 && index.h("grw-trek-provider", { api: store.state.api, language: this.language, "trek-id": this.currentTrekId }), index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (index.h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (index.h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (index.h("div", { class: "options-container" }, index.h("div", { class: "filters-container" }, index.h("div", { class: "current-treks-length" }, `${store.state.currentTreks.length} résultat${store.state.currentTreks.length > 1 ? 's' : ''}`), index.h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), index.h("div", null, index.h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), index.h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), index.h("div", { class: "attribution-container" }, index.h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), index.h("div", { class: "content-container" }, index.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' } }, index.h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, index.h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), index.h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
|
|
85
103
|
}
|
|
86
104
|
get element() { return index.getElement(this); }
|
|
87
105
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c2c4531d.js');
|
|
6
|
-
const store = require('./store-
|
|
6
|
+
const store = require('./store-fd04a216.js');
|
|
7
7
|
const length = require('./length-d315d156.js');
|
|
8
8
|
|
|
9
9
|
const grwFilterCss = ".filter-name{margin-left:8px;color:var(--color-primary);font-size:24px;font-weight:bold}.filter-button-container{display:flex;flex-direction:row;flex-wrap:wrap}.filter-button-container .filter-button,.filter-button-container .selected-filter-button{user-select:none;cursor:pointer;border:1px var(--color-primary) solid;border-radius:8px;margin:8px 0px 0px 8px;padding:8px}.filter-button-container .filter-button{color:var(--color-primary);background-color:#ffffff}.filter-button-container .selected-filter-button{color:#ffffff;background-color:var(--color-primary)}";
|
|
@@ -14235,6 +14235,7 @@ const GrwMap = class {
|
|
|
14235
14235
|
this.colorArrivalIcon = '#85003b';
|
|
14236
14236
|
this.colorSensitiveArea = ' #4974a5';
|
|
14237
14237
|
this.colorPoiIcon = '#974c6e';
|
|
14238
|
+
this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
|
|
14238
14239
|
}
|
|
14239
14240
|
componentDidLoad() {
|
|
14240
14241
|
this.map = leafletSrc.map(this.element, {
|
|
@@ -14291,16 +14292,18 @@ const GrwMap = class {
|
|
|
14291
14292
|
},
|
|
14292
14293
|
});
|
|
14293
14294
|
}
|
|
14294
|
-
if (trekscurrentDepartureCoordinates.length > 0) {
|
|
14295
|
-
const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
14296
|
-
this.currentBounds = bounds;
|
|
14297
|
-
this.map.fitBounds(this.currentBounds);
|
|
14298
|
-
}
|
|
14299
14295
|
if (!this.treksLayer) {
|
|
14296
|
+
if (trekscurrentDepartureCoordinates.length > 0 && !store.state.currentMapTreksBounds) {
|
|
14297
|
+
const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
14298
|
+
this.map.fitBounds(bounds);
|
|
14299
|
+
}
|
|
14300
|
+
else {
|
|
14301
|
+
this.map.fitBounds(store.state.currentMapTreksBounds);
|
|
14302
|
+
}
|
|
14300
14303
|
this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
|
|
14301
14304
|
pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
|
|
14302
14305
|
icon: leafletSrc.divIcon({
|
|
14303
|
-
html: geoJsonPoint.properties.practice
|
|
14306
|
+
html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
|
|
14304
14307
|
className: 'trek-marker',
|
|
14305
14308
|
iconSize: 48,
|
|
14306
14309
|
}),
|
|
@@ -14327,17 +14330,27 @@ const GrwMap = class {
|
|
|
14327
14330
|
}).addTo(this.map);
|
|
14328
14331
|
}
|
|
14329
14332
|
else {
|
|
14333
|
+
if (trekscurrentDepartureCoordinates.length > 0) {
|
|
14334
|
+
const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
14335
|
+
this.map.fitBounds(bounds);
|
|
14336
|
+
}
|
|
14330
14337
|
this.treksLayer.clearLayers();
|
|
14331
14338
|
this.treksLayer.addData(treksFeatureCollection);
|
|
14332
14339
|
}
|
|
14333
14340
|
!this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
|
|
14341
|
+
this.map.on('moveend', this.handleTreksWithinBoundsBind);
|
|
14334
14342
|
}
|
|
14335
14343
|
removeTreks() {
|
|
14336
14344
|
if (this.treksLayer) {
|
|
14345
|
+
store.state.currentMapTreksBounds = this.map.getBounds();
|
|
14337
14346
|
this.map.removeLayer(this.treksLayer);
|
|
14338
14347
|
this.treksLayer = null;
|
|
14348
|
+
this.map.off('moveend', this.handleTreksWithinBoundsBind);
|
|
14339
14349
|
}
|
|
14340
14350
|
}
|
|
14351
|
+
handleTreksWithinBounds() {
|
|
14352
|
+
store.state.treksWithinBounds = store.state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
|
|
14353
|
+
}
|
|
14341
14354
|
addTrek() {
|
|
14342
14355
|
const currentTrekFeature = {
|
|
14343
14356
|
type: 'Feature',
|
|
@@ -14351,8 +14364,7 @@ const GrwMap = class {
|
|
|
14351
14364
|
interactive: false,
|
|
14352
14365
|
}).addTo(this.map);
|
|
14353
14366
|
const bounds = leafletSrc.latLngBounds(store.state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
14354
|
-
this.
|
|
14355
|
-
this.map.fitBounds(this.currentBounds);
|
|
14367
|
+
this.map.fitBounds(bounds);
|
|
14356
14368
|
const currentDepartureCoordinates = [store.state.currentTrek.geometry.coordinates.at(0)[0], store.state.currentTrek.geometry.coordinates.at(0)[1]];
|
|
14357
14369
|
const currentArrivalCoordinates = [store.state.currentTrek.geometry.coordinates.at(-1)[0], store.state.currentTrek.geometry.coordinates.at(-1)[1]];
|
|
14358
14370
|
const currentDepartureArrivalFeatureCollection = {
|
|
@@ -14595,7 +14607,7 @@ const GrwMap = class {
|
|
|
14595
14607
|
};
|
|
14596
14608
|
GrwMap.style = grwMapCss;
|
|
14597
14609
|
|
|
14598
|
-
const grwTrekDetailCss = ".trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;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 .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size:18px;margin-bottom:12px}.trek-detail-container .downloads-container .links-container{display:flex}.trek-detail-container .downloads-container .links-container a{background-color:var(--color-primary);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.trek-detail-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:0px 24px 24px 24px}.trek-detail-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-detail-container .ambiance,.trek-detail-container .description-teaser,.trek-detail-container .description-container,.trek-detail-container .altimetric-profile-container,.trek-detail-container .access-container,.trek-detail-container .public-transport-container,.trek-detail-container .advice-container,.trek-detail-container .advised-parking-container,.trek-detail-container .gear-container,.trek-detail-container .pois-container,.trek-detail-container .sensitive-areas-container,.trek-detail-container .information-desks-container,.trek-detail-container .source-container,.trek-detail-container .accessibilities-container{padding:0px 24px 24px 24px}.trek-detail-container .ambiance a,.trek-detail-container .description-teaser a,.trek-detail-container .description-container a,.trek-detail-container .altimetric-profile-container a,.trek-detail-container .access-container a,.trek-detail-container .public-transport-container a,.trek-detail-container .advice-container a,.trek-detail-container .advised-parking-container a,.trek-detail-container .gear-container a,.trek-detail-container .pois-container a,.trek-detail-container .sensitive-areas-container a,.trek-detail-container .information-desks-container a,.trek-detail-container .source-container a,.trek-detail-container .accessibilities-container a{color:var(--color-primary)}.trek-detail-container .description-title,.trek-detail-container .altimetric-profile-title,.trek-detail-container .access-title,.trek-detail-container .public-transport-title,.trek-detail-container .advice-title,.trek-detail-container .advised-parking-title,.trek-detail-container .gear-title,.trek-detail-container .pois-title,.trek-detail-container .sensitive-areas-title,.trek-detail-container .information-desks-title,.trek-detail-container .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;margin:12px 0px}.label-container .label-sub-container{display:flex;align-items:center}.label-container .label-sub-container img{width:26px;margin-right:16px}.label-container .label-sub-container .label-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.source-container .source-sub-container{display:flex;align-items:center}.source-container .source-sub-container img{width:26px;margin-right:16px}.source-container .source-sub-container .source-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.departure-container,.arrival-container{display:flex;align-items:center;padding:0px 24px 24px 24px}.departure-container .departure-title,.departure-container .arrival-title,.arrival-container .departure-title,.arrival-container .arrival-title{color:var(--color-primary);font-weight:bold}.accessibilities-container .accessibilities-content-container{padding:12px 0px 0px 0px;display:flex}.accessibilities-container .accessibilities-content-container .accessibility-content-container{display:flex;align-items:center;margin:0px 8px 8px 0px}.accessibilities-container .accessibilities-content-container .accessibility-content-container img{margin-right:16px;width:26px}.accessibilities-container .accessibility-level-title,.accessibilities-container .accessibility-slope-title,.accessibilities-container .accessibility-width-title,.accessibilities-container .accessibility-signage-title,.accessibilities-container .accessibility-covering-title,.accessibilities-container .accessibility-exposure-title,.accessibilities-container .accessibility-advice-title{color:var(--color-primary);font-size:24px;padding:12px 0px}";
|
|
14610
|
+
const grwTrekDetailCss = "grw-sensitive-area-detail,grw-information-desk-detail,grw-poi-detail{margin-top:12px}.trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;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 .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size:18px;margin-bottom:12px}.trek-detail-container .downloads-container .links-container{display:flex}.trek-detail-container .downloads-container .links-container a{background-color:var(--color-primary);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.trek-detail-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:0px 24px 24px 24px}.trek-detail-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-detail-container .ambiance,.trek-detail-container .description-teaser,.trek-detail-container .description-container,.trek-detail-container .altimetric-profile-container,.trek-detail-container .access-container,.trek-detail-container .public-transport-container,.trek-detail-container .advice-container,.trek-detail-container .advised-parking-container,.trek-detail-container .gear-container,.trek-detail-container .pois-container,.trek-detail-container .sensitive-areas-container,.trek-detail-container .information-desks-container,.trek-detail-container .source-container,.trek-detail-container .accessibilities-container{padding:0px 24px 24px 24px}.trek-detail-container .ambiance a,.trek-detail-container .description-teaser a,.trek-detail-container .description-container a,.trek-detail-container .altimetric-profile-container a,.trek-detail-container .access-container a,.trek-detail-container .public-transport-container a,.trek-detail-container .advice-container a,.trek-detail-container .advised-parking-container a,.trek-detail-container .gear-container a,.trek-detail-container .pois-container a,.trek-detail-container .sensitive-areas-container a,.trek-detail-container .information-desks-container a,.trek-detail-container .source-container a,.trek-detail-container .accessibilities-container a{color:var(--color-primary)}.trek-detail-container .description-title,.trek-detail-container .altimetric-profile-title,.trek-detail-container .access-title,.trek-detail-container .public-transport-title,.trek-detail-container .advice-title,.trek-detail-container .advised-parking-title,.trek-detail-container .gear-title,.trek-detail-container .pois-title,.trek-detail-container .sensitive-areas-title,.trek-detail-container .information-desks-title,.trek-detail-container .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;margin:12px 0px}.label-container .label-sub-container{display:flex;align-items:center}.label-container .label-sub-container img{width:26px;margin-right:16px}.label-container .label-sub-container .label-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.source-container .source-sub-container{display:flex;align-items:center}.source-container .source-sub-container img{width:26px;margin-right:16px}.source-container .source-sub-container .source-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.departure-container,.arrival-container{display:flex;align-items:center;padding:0px 24px 24px 24px}.departure-container .departure-title,.departure-container .arrival-title,.arrival-container .departure-title,.arrival-container .arrival-title{color:var(--color-primary);font-weight:bold}.accessibilities-container .accessibilities-content-container{padding:12px 0px 0px 0px;display:flex}.accessibilities-container .accessibilities-content-container .accessibility-content-container{display:flex;align-items:center;margin:0px 8px 8px 0px}.accessibilities-container .accessibilities-content-container .accessibility-content-container img{margin-right:16px;width:26px}.accessibilities-container .accessibility-level-title,.accessibilities-container .accessibility-slope-title,.accessibilities-container .accessibility-width-title,.accessibilities-container .accessibility-signage-title,.accessibilities-container .accessibility-covering-title,.accessibilities-container .accessibility-exposure-title,.accessibilities-container .accessibility-advice-title{color:var(--color-primary);font-size:24px;padding:12px 0px}";
|
|
14599
14611
|
|
|
14600
14612
|
const GrwTrekDetail = class {
|
|
14601
14613
|
constructor(hostRef) {
|
|
@@ -14633,7 +14645,15 @@ const GrwTrekDetail = class {
|
|
|
14633
14645
|
return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: "trek-detail-container" }, index.h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (index.h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })), index.h("div", { class: "sub-container" }, index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
|
|
14634
14646
|
_b.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: length.durationImage }), length.formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), index.h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && index.h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
|
|
14635
14647
|
_e.route)), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: length.lengthImage }), length.formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: length.ascentImage }), length.formatAscent(this.currentTrek.ascent)), index.h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && index.h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
|
|
14636
|
-
_g.name)))), index.h("div", { class: "downloads-container" }, index.h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), index.h("div", { class: "links-container" }, index.h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), index.h("a", { href: `${this.currentTrek.kml}` }, "KML"), index.h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), this.themes.length > 0 && (index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label))))), this.currentTrek.description_teaser && index.h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && index.h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), this.currentTrek.description && (index.h("div", { class: "description-container" }, index.h("div", { class: "description-title" }, "Description"), index.h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (index.h("div", { class: "departure-container" }, index.h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"), index.h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (index.h("div", { class: "arrival-container" }, index.h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"), index.h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.altimetric_profile && (index.h("div", { class: "altimetric-profile-container" }, index.h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"), index.h("img", { src: this.currentTrek.altimetric_profile }))), this.currentTrek.access && (index.h("div", { class: "access-container" }, index.h("div", { class: "access-title" }, "Acc\u00E8s routier"), index.h("div", { class: "access", innerHTML: this.currentTrek.access }))), this.currentTrek.public_transport && (index.h("div", { class: "public-transport-container" }, index.h("div", { class: "public-transport-title" }, "Transport"), index.h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))), (this.currentTrek.advice || this.labels.length > 0) && (index.h("div", { class: "advice-container" }, index.h("div", { class: "advice-title" }, "Recommandations"), this.currentTrek.advice && index.h("div", { class: "advice", innerHTML: this.currentTrek.advice }), this.labels.map(label => (index.h("div", { class: "label-container" }, index.h("div", { class: "label-sub-container" }, label.pictogram && index.h("img", { src: label.pictogram }), index.h("div", { class: "label-name", innerHTML: label.name })), index.h("div", { class: "label-advice", innerHTML: label.advice })))))), this.currentTrek.advised_parking && (index.h("div", { class: "advised-parking-container" }, index.h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"), index.h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))), this.currentTrek.gear && (index.h("div", { class: "gear-container" }, index.h("div", { class: "gear-title" }, "\u00C9quipements"), index.h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), store.state.currentSensitiveAreas && store.state.currentSensitiveAreas.length > 0 && (index.h("div", { class: "sensitive-areas-container" }, index.h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"), store.state.currentSensitiveAreas.map(sensitiveArea => (index.h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))), store.state.currentInformationDesks && store.state.currentInformationDesks.length > 0 && (index.h("div", { class: "information-desks-container" }, index.h("div", { class: "information-desks-title" }, "Lieux de renseignement"), store.state.currentInformationDesks.map(informationDesk => (index.h("grw-information-desk-detail", { informationDesk: informationDesk }))))),
|
|
14648
|
+
_g.name)))), index.h("div", { class: "downloads-container" }, index.h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), index.h("div", { class: "links-container" }, index.h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), index.h("a", { href: `${this.currentTrek.kml}` }, "KML"), index.h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), this.themes.length > 0 && (index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label))))), this.currentTrek.description_teaser && index.h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && index.h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), this.currentTrek.description && (index.h("div", { class: "description-container" }, index.h("div", { class: "description-title" }, "Description"), index.h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (index.h("div", { class: "departure-container" }, index.h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"), index.h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (index.h("div", { class: "arrival-container" }, index.h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"), index.h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.altimetric_profile && (index.h("div", { class: "altimetric-profile-container" }, index.h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"), index.h("img", { src: this.currentTrek.altimetric_profile }))), this.currentTrek.access && (index.h("div", { class: "access-container" }, index.h("div", { class: "access-title" }, "Acc\u00E8s routier"), index.h("div", { class: "access", innerHTML: this.currentTrek.access }))), this.currentTrek.public_transport && (index.h("div", { class: "public-transport-container" }, index.h("div", { class: "public-transport-title" }, "Transport"), index.h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))), (this.currentTrek.advice || this.labels.length > 0) && (index.h("div", { class: "advice-container" }, index.h("div", { class: "advice-title" }, "Recommandations"), this.currentTrek.advice && index.h("div", { class: "advice", innerHTML: this.currentTrek.advice }), this.labels.map(label => (index.h("div", { class: "label-container" }, index.h("div", { class: "label-sub-container" }, label.pictogram && index.h("img", { src: label.pictogram }), index.h("div", { class: "label-name", innerHTML: label.name })), index.h("div", { class: "label-advice", innerHTML: label.advice })))))), this.currentTrek.advised_parking && (index.h("div", { class: "advised-parking-container" }, index.h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"), index.h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))), this.currentTrek.gear && (index.h("div", { class: "gear-container" }, index.h("div", { class: "gear-title" }, "\u00C9quipements"), index.h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), store.state.currentSensitiveAreas && store.state.currentSensitiveAreas.length > 0 && (index.h("div", { class: "sensitive-areas-container" }, index.h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"), store.state.currentSensitiveAreas.map(sensitiveArea => (index.h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))), store.state.currentInformationDesks && store.state.currentInformationDesks.length > 0 && (index.h("div", { class: "information-desks-container" }, index.h("div", { class: "information-desks-title" }, "Lieux de renseignement"), store.state.currentInformationDesks.map(informationDesk => (index.h("grw-information-desk-detail", { informationDesk: informationDesk }))))), (this.currentTrek.disabled_infrastructure ||
|
|
14649
|
+
(this.accessibilities && this.accessibilities.length > 0) ||
|
|
14650
|
+
this.currentTrek.accessibility_level ||
|
|
14651
|
+
this.currentTrek.accessibility_slope ||
|
|
14652
|
+
this.currentTrek.accessibility_width ||
|
|
14653
|
+
this.currentTrek.accessibility_signage ||
|
|
14654
|
+
this.currentTrek.accessibility_covering ||
|
|
14655
|
+
this.currentTrek.accessibility_exposure ||
|
|
14656
|
+
this.currentTrek.accessibility_advice) && (index.h("div", { class: "accessibilities-container" }, index.h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"), this.currentTrek.disabled_infrastructure && index.h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), index.h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (index.h("div", { class: "accessibility-content-container" }, index.h("img", { src: accessibility.pictogram }), index.h("div", { innerHTML: accessibility.name }))))), this.currentTrek.accessibility_level && (index.h("div", { class: "accessibility-level-container" }, index.h("div", { class: "accessibility-level-title" }, "Niveau d'accessibilit\u00E9"), index.h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (index.h("div", { class: "accessibility-slope-container" }, index.h("div", { class: "accessibility-slope-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (index.h("div", { class: "accessibility-width-container" }, index.h("div", { class: "accessibility-width-title" }, "Largeur"), index.h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (index.h("div", { class: "accessibility-signage-container" }, index.h("div", { class: "accessibility-signage-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (index.h("div", { class: "accessibility-covering-container" }, index.h("div", { class: "accessibility-covering-title" }, "Rev\u00EAtement"), index.h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (index.h("div", { class: "accessibility-exposure-container" }, index.h("div", { class: "accessibility-exposure-title" }, "Exposition"), index.h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (index.h("div", { class: "accessibility-advice-container" }, index.h("div", { class: "accessibility-advice-title" }, "Conseils"), index.h("div", { innerHTML: this.currentTrek.accessibility_advice }))))), store.state.currentPois && store.state.currentPois.length > 0 && (index.h("div", { class: "pois-container" }, index.h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"), store.state.currentPois.map(poi => (index.h("grw-poi-detail", { poi: poi }))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (index.h("div", { class: "source-container" }, index.h("div", { class: "source-title" }, "Sources"), this.sources.map(source => (index.h("div", { class: "source-sub-container" }, source.pictogram && index.h("img", { src: source.pictogram }), index.h("div", null, index.h("div", { class: "source-name", innerHTML: source.name }), index.h("a", { class: "source-advice", innerHTML: source.website })))))))))));
|
|
14637
14657
|
}
|
|
14638
14658
|
};
|
|
14639
14659
|
GrwTrekDetail.style = grwTrekDetailCss;
|
|
@@ -14713,11 +14733,16 @@ const GrwTreksList = class {
|
|
|
14713
14733
|
this.element.scroll({ top: 0 });
|
|
14714
14734
|
this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
|
|
14715
14735
|
});
|
|
14736
|
+
store.onChange('treksWithinBounds', () => {
|
|
14737
|
+
this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
|
|
14738
|
+
this.element.scroll({ top: 0 });
|
|
14739
|
+
this.treksToDisplay = [...store.state.treksWithinBounds.slice(0, this.step)];
|
|
14740
|
+
});
|
|
14716
14741
|
}
|
|
14717
14742
|
handleInfiniteScroll(event) {
|
|
14718
14743
|
if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
|
|
14719
|
-
if (this.treksToDisplay.length < store.state.
|
|
14720
|
-
this.treksToDisplay = store.state.
|
|
14744
|
+
if (this.treksToDisplay.length < store.state.treksWithinBounds.length) {
|
|
14745
|
+
this.treksToDisplay = store.state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= store.state.treksWithinBounds.length ? store.state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
|
|
14721
14746
|
}
|
|
14722
14747
|
else {
|
|
14723
14748
|
this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
|
|
@@ -14725,7 +14750,7 @@ const GrwTreksList = class {
|
|
|
14725
14750
|
}
|
|
14726
14751
|
}
|
|
14727
14752
|
render() {
|
|
14728
|
-
return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.h("div", { class: "current-treks-length" }, `${store.state.
|
|
14753
|
+
return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.h("div", { class: "current-treks-length" }, `${store.state.treksWithinBounds.length} résultat${store.state.treksWithinBounds.length > 1 ? 's' : ''}`), index.h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
|
|
14729
14754
|
}
|
|
14730
14755
|
get element() { return index.getElement(this); }
|
|
14731
14756
|
};
|
|
@@ -14769,6 +14794,7 @@ const GrwTreksProvider = class {
|
|
|
14769
14794
|
];
|
|
14770
14795
|
store.state.treks = treks.results;
|
|
14771
14796
|
store.state.currentTreks = treks.results;
|
|
14797
|
+
store.state.treksWithinBounds = treks.results;
|
|
14772
14798
|
});
|
|
14773
14799
|
}
|
|
14774
14800
|
render() {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c2c4531d.js');
|
|
6
|
-
const store = require('./store-
|
|
6
|
+
const store = require('./store-fd04a216.js');
|
|
7
7
|
|
|
8
8
|
const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-sub-container{display:flex;flex-direction:column}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.information-desk-description{font-size:16px}";
|
|
9
9
|
|
|
@@ -31,7 +31,7 @@ const GrwPoiDetail = class {
|
|
|
31
31
|
};
|
|
32
32
|
GrwPoiDetail.style = grwPoiDetailCss;
|
|
33
33
|
|
|
34
|
-
const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-description{font-size:16px}.sensitive-area-period-container .sensitive-area-period-title,.sensitive-area-period-container .sensitive-area-practice-title,.sensitive-area-period-container .sensitive-area-contact-title,.sensitive-area-practice-container .sensitive-area-period-title,.sensitive-area-practice-container .sensitive-area-practice-title,.sensitive-area-practice-container .sensitive-area-contact-title,.sensitive-area-contact-container .sensitive-area-period-title,.sensitive-area-contact-container .sensitive-area-practice-title,.sensitive-area-contact-container .sensitive-area-contact-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-period-container .sensitive-area-period-values,.sensitive-area-period-container .sensitive-area-practice-values,.sensitive-area-practice-container .sensitive-area-period-values,.sensitive-area-practice-container .sensitive-area-practice-values,.sensitive-area-contact-container .sensitive-area-period-values,.sensitive-area-contact-container .sensitive-area-practice-values{display:flex}";
|
|
34
|
+
const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;padding:12px 0px;font-weight:bold}.sensitive-area-description{font-size:16px}.sensitive-area-period-container .sensitive-area-period-title,.sensitive-area-period-container .sensitive-area-practice-title,.sensitive-area-period-container .sensitive-area-contact-title,.sensitive-area-practice-container .sensitive-area-period-title,.sensitive-area-practice-container .sensitive-area-practice-title,.sensitive-area-practice-container .sensitive-area-contact-title,.sensitive-area-contact-container .sensitive-area-period-title,.sensitive-area-contact-container .sensitive-area-practice-title,.sensitive-area-contact-container .sensitive-area-contact-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-period-container .sensitive-area-period-values,.sensitive-area-period-container .sensitive-area-practice-values,.sensitive-area-practice-container .sensitive-area-period-values,.sensitive-area-practice-container .sensitive-area-practice-values,.sensitive-area-contact-container .sensitive-area-period-values,.sensitive-area-contact-container .sensitive-area-practice-values{display:flex}";
|
|
35
35
|
|
|
36
36
|
const GrwSensitiveAreaDetail = class {
|
|
37
37
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c2c4531d.js');
|
|
6
|
-
const store = require('./store-
|
|
6
|
+
const store = require('./store-fd04a216.js');
|
|
7
7
|
const length = require('./length-d315d156.js');
|
|
8
8
|
|
|
9
9
|
const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:flex;flex-direction:column;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-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,.trek-card-large-view-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),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:flex;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-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,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:flex;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
|
|
@@ -36,9 +36,15 @@ export class GrwApp {
|
|
|
36
36
|
componentDidLoad() {
|
|
37
37
|
this.handleView();
|
|
38
38
|
window.addEventListener('popstate', this.handlePopStateBind, false);
|
|
39
|
+
const url = new URL(window.location.toString());
|
|
40
|
+
const trekParam = url.searchParams.get('trek');
|
|
41
|
+
if (trekParam) {
|
|
42
|
+
window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
|
|
43
|
+
this.currentTrekId = Number(trekParam);
|
|
44
|
+
this.showTrek = !this.showTrek;
|
|
45
|
+
}
|
|
39
46
|
}
|
|
40
47
|
onTrekDetailsClose() {
|
|
41
|
-
this.forwardTrekId = this.currentTrekId;
|
|
42
48
|
this.currentTrekId = null;
|
|
43
49
|
this.showTrek = !this.showTrek;
|
|
44
50
|
}
|
|
@@ -50,15 +56,27 @@ export class GrwApp {
|
|
|
50
56
|
handleFilters() {
|
|
51
57
|
this.showFilters = !this.showFilters;
|
|
52
58
|
}
|
|
53
|
-
|
|
54
|
-
if (
|
|
59
|
+
handleBackButton() {
|
|
60
|
+
if (window.history.state.isInitialHistoryWithTrek) {
|
|
55
61
|
this.onTrekDetailsClose();
|
|
62
|
+
const url = new URL(window.location.toString());
|
|
63
|
+
url.searchParams.delete('trek');
|
|
64
|
+
window.history.pushState({}, '', url);
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
window.history.back();
|
|
56
68
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
}
|
|
70
|
+
handlePopState() {
|
|
71
|
+
const url = new URL(window.location.toString());
|
|
72
|
+
const trekParam = url.searchParams.get('trek');
|
|
73
|
+
if (trekParam) {
|
|
74
|
+
this.currentTrekId = Number(trekParam);
|
|
60
75
|
this.showTrek = !this.showTrek;
|
|
61
76
|
}
|
|
77
|
+
else {
|
|
78
|
+
this.onTrekDetailsClose();
|
|
79
|
+
}
|
|
62
80
|
}
|
|
63
81
|
handleShowMap() {
|
|
64
82
|
if (this.currentTrekId) {
|
|
@@ -77,7 +95,7 @@ export class GrwApp {
|
|
|
77
95
|
this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }),
|
|
78
96
|
h("div", { class: "app-container" },
|
|
79
97
|
h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' },
|
|
80
|
-
this.showTrek ? (h("div", { onClick: () =>
|
|
98
|
+
this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")),
|
|
81
99
|
!this.showTrek && this.showFilters && (h("div", { class: "options-container" },
|
|
82
100
|
h("div", { class: "filters-container" },
|
|
83
101
|
h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`),
|
|
@@ -14,6 +14,7 @@ export class GrwMap {
|
|
|
14
14
|
this.colorArrivalIcon = '#85003b';
|
|
15
15
|
this.colorSensitiveArea = ' #4974a5';
|
|
16
16
|
this.colorPoiIcon = '#974c6e';
|
|
17
|
+
this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
|
|
17
18
|
}
|
|
18
19
|
componentDidLoad() {
|
|
19
20
|
this.map = L.map(this.element, {
|
|
@@ -70,16 +71,18 @@ export class GrwMap {
|
|
|
70
71
|
},
|
|
71
72
|
});
|
|
72
73
|
}
|
|
73
|
-
if (trekscurrentDepartureCoordinates.length > 0) {
|
|
74
|
-
const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
75
|
-
this.currentBounds = bounds;
|
|
76
|
-
this.map.fitBounds(this.currentBounds);
|
|
77
|
-
}
|
|
78
74
|
if (!this.treksLayer) {
|
|
75
|
+
if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
|
|
76
|
+
const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
77
|
+
this.map.fitBounds(bounds);
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
this.map.fitBounds(state.currentMapTreksBounds);
|
|
81
|
+
}
|
|
79
82
|
this.treksLayer = L.geoJSON(treksFeatureCollection, {
|
|
80
83
|
pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
|
|
81
84
|
icon: L.divIcon({
|
|
82
|
-
html: geoJsonPoint.properties.practice
|
|
85
|
+
html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
|
|
83
86
|
className: 'trek-marker',
|
|
84
87
|
iconSize: 48,
|
|
85
88
|
}),
|
|
@@ -106,17 +109,27 @@ export class GrwMap {
|
|
|
106
109
|
}).addTo(this.map);
|
|
107
110
|
}
|
|
108
111
|
else {
|
|
112
|
+
if (trekscurrentDepartureCoordinates.length > 0) {
|
|
113
|
+
const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
114
|
+
this.map.fitBounds(bounds);
|
|
115
|
+
}
|
|
109
116
|
this.treksLayer.clearLayers();
|
|
110
117
|
this.treksLayer.addData(treksFeatureCollection);
|
|
111
118
|
}
|
|
112
119
|
!this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
|
|
120
|
+
this.map.on('moveend', this.handleTreksWithinBoundsBind);
|
|
113
121
|
}
|
|
114
122
|
removeTreks() {
|
|
115
123
|
if (this.treksLayer) {
|
|
124
|
+
state.currentMapTreksBounds = this.map.getBounds();
|
|
116
125
|
this.map.removeLayer(this.treksLayer);
|
|
117
126
|
this.treksLayer = null;
|
|
127
|
+
this.map.off('moveend', this.handleTreksWithinBoundsBind);
|
|
118
128
|
}
|
|
119
129
|
}
|
|
130
|
+
handleTreksWithinBounds() {
|
|
131
|
+
state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
|
|
132
|
+
}
|
|
120
133
|
addTrek() {
|
|
121
134
|
const currentTrekFeature = {
|
|
122
135
|
type: 'Feature',
|
|
@@ -130,8 +143,7 @@ export class GrwMap {
|
|
|
130
143
|
interactive: false,
|
|
131
144
|
}).addTo(this.map);
|
|
132
145
|
const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
|
|
133
|
-
this.
|
|
134
|
-
this.map.fitBounds(this.currentBounds);
|
|
146
|
+
this.map.fitBounds(bounds);
|
|
135
147
|
const currentDepartureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
|
|
136
148
|
const currentArrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
|
|
137
149
|
const currentDepartureArrivalFeatureCollection = {
|
|
@@ -108,7 +108,15 @@ export class GrwTrekDetail {
|
|
|
108
108
|
state.currentInformationDesks && state.currentInformationDesks.length > 0 && (h("div", { class: "information-desks-container" },
|
|
109
109
|
h("div", { class: "information-desks-title" }, "Lieux de renseignement"),
|
|
110
110
|
state.currentInformationDesks.map(informationDesk => (h("grw-information-desk-detail", { informationDesk: informationDesk }))))),
|
|
111
|
-
|
|
111
|
+
(this.currentTrek.disabled_infrastructure ||
|
|
112
|
+
(this.accessibilities && this.accessibilities.length > 0) ||
|
|
113
|
+
this.currentTrek.accessibility_level ||
|
|
114
|
+
this.currentTrek.accessibility_slope ||
|
|
115
|
+
this.currentTrek.accessibility_width ||
|
|
116
|
+
this.currentTrek.accessibility_signage ||
|
|
117
|
+
this.currentTrek.accessibility_covering ||
|
|
118
|
+
this.currentTrek.accessibility_exposure ||
|
|
119
|
+
this.currentTrek.accessibility_advice) && (h("div", { class: "accessibilities-container" },
|
|
112
120
|
h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"),
|
|
113
121
|
this.currentTrek.disabled_infrastructure && h("div", { innerHTML: this.currentTrek.disabled_infrastructure }),
|
|
114
122
|
h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (h("div", { class: "accessibility-content-container" },
|
|
@@ -134,7 +142,7 @@ export class GrwTrekDetail {
|
|
|
134
142
|
h("div", { innerHTML: this.currentTrek.accessibility_exposure }))),
|
|
135
143
|
this.currentTrek.accessibility_advice && (h("div", { class: "accessibility-advice-container" },
|
|
136
144
|
h("div", { class: "accessibility-advice-title" }, "Conseils"),
|
|
137
|
-
h("div", { innerHTML: this.currentTrek.accessibility_advice })))),
|
|
145
|
+
h("div", { innerHTML: this.currentTrek.accessibility_advice }))))),
|
|
138
146
|
state.currentPois && state.currentPois.length > 0 && (h("div", { class: "pois-container" },
|
|
139
147
|
h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"),
|
|
140
148
|
state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi }))))),
|
|
@@ -15,11 +15,16 @@ export class GrwTreksList {
|
|
|
15
15
|
this.element.scroll({ top: 0 });
|
|
16
16
|
this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
|
|
17
17
|
});
|
|
18
|
+
onChange('treksWithinBounds', () => {
|
|
19
|
+
this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
|
|
20
|
+
this.element.scroll({ top: 0 });
|
|
21
|
+
this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
|
|
22
|
+
});
|
|
18
23
|
}
|
|
19
24
|
handleInfiniteScroll(event) {
|
|
20
25
|
if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
|
|
21
|
-
if (this.treksToDisplay.length < state.
|
|
22
|
-
this.treksToDisplay = state.
|
|
26
|
+
if (this.treksToDisplay.length < state.treksWithinBounds.length) {
|
|
27
|
+
this.treksToDisplay = state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= state.treksWithinBounds.length ? state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
|
|
23
28
|
}
|
|
24
29
|
else {
|
|
25
30
|
this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
|
|
@@ -28,7 +33,7 @@ export class GrwTreksList {
|
|
|
28
33
|
}
|
|
29
34
|
render() {
|
|
30
35
|
return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
|
|
31
|
-
h("div", { class: "current-treks-length" }, `${state.
|
|
36
|
+
h("div", { class: "current-treks-length" }, `${state.treksWithinBounds.length} résultat${state.treksWithinBounds.length > 1 ? 's' : ''}`),
|
|
32
37
|
h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
|
|
33
38
|
}
|
|
34
39
|
static get is() { return "grw-treks-list"; }
|