@geotrekce/geotrek-rando-widget 0.3.6 → 0.4.0

package/dist/collection/components/{grw-touristic-content/grw-touristic-content.css → grw-touristic-event/grw-touristic-event-card.css}

@@ -537,29 +537,29 @@ button.swiper-pagination-bullet {
   box-shadow: var(--elevation-2);
 }
 
-.touristic-content-type-img-container {
+.touristic-event-type-img-container {
   position: relative;
 }
-.touristic-content-type-img-container .touristic-content-img,
-.touristic-content-type-img-container .default-touristic-content-img {
+.touristic-event-type-img-container .touristic-event-img,
+.touristic-event-type-img-container .default-touristic-event-img {
   width: 100%;
   height: 100%;
   max-height: 200px;
   object-fit: cover;
 }
-.touristic-content-type-img-container .touristic-content-img {
+.touristic-event-type-img-container .touristic-event-img {
   cursor: pointer;
   object-fit: cover;
 }
-.touristic-content-type-img-container .default-touristic-content-img {
+.touristic-event-type-img-container .default-touristic-event-img {
   background-color: var(--color-primary-container);
   object-fit: contain;
 }
-.touristic-content-type-img-container .img-fullscreen {
+.touristic-event-type-img-container .img-fullscreen {
   max-height: none;
   object-fit: contain;
 }
-.touristic-content-type-img-container .touristic-content-type {
+.touristic-event-type-img-container .touristic-event-type {
   width: 24px;
   height: 24px;
   padding: 4px;
@@ -572,30 +572,61 @@ button.swiper-pagination-bullet {
   z-index: 200;
 }
 
-.touristic-content-sub-container {
+.touristic-event-sub-container {
   display: flex;
   flex-direction: column;
   padding: 12px;
 }
-.touristic-content-sub-container .touristic-content-category-container {
+.touristic-event-sub-container .touristic-event-type-container {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
 }
-.touristic-content-sub-container .touristic-content-category-container .touristic-content-category-name {
+.touristic-event-sub-container .touristic-event-type-container .touristic-event-type-name {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
 }
-.touristic-content-sub-container .touristic-content-category-container img {
+.touristic-event-sub-container .touristic-event-type-container img {
   font-size: 24px;
   width: 24px;
   height: 24px;
   margin-right: 8px;
   background-color: var(--color-primary-app);
 }
-.touristic-content-sub-container .touristic-content-name {
+.touristic-event-sub-container .touristic-event-name {
   font-size: 16px;
   line-height: 24px;
+}
+
+.touristic-event-more-detail-container {
+  padding: 0px 12px 12px 12px;
+}
+.touristic-event-more-detail-container .more-details-button {
+  cursor: pointer;
+  background-color: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+  border-radius: 8px;
+  padding: 8px 16px;
+  box-shadow: var(--elevation-1);
+  width: 100%;
+  height: 32px;
+  gap: 8px;
+  box-sizing: border-box;
+  text-align: start;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: none;
+  font-size: 14px;
+}
+.touristic-event-more-detail-container .more-details-button:hover {
+  box-shadow: var(--elevation-2);
+}
+.touristic-event-more-detail-container .more-details-button span {
+  font-size: 18px;
 }

package/dist/collection/components/grw-touristic-event/grw-touristic-event-card.js

@@ -0,0 +1,102 @@
+import { Build, Host, getAssetPath, h } from '@stencil/core';
+import state from 'store/store';
+import Swiper, { Keyboard, Navigation, Pagination } from 'swiper';
+export class GrwTouristicEvent {
+  constructor() {
+    this.touristicEvent = undefined;
+    this.displayFullscreen = false;
+  }
+  componentDidLoad() {
+    this.swiperTouristicEvent = new Swiper(this.swiperTouristicEventRef, {
+      modules: [Navigation, Pagination, Keyboard],
+      navigation: {
+        prevEl: this.prevElTouristicEventRef,
+        nextEl: this.nextElTouristicEventRef,
+      },
+      pagination: { el: this.paginationElTouristicEventRef },
+      allowTouchMove: false,
+      keyboard: false,
+    });
+    this.swiperTouristicEventRef.onfullscreenchange = () => {
+      this.displayFullscreen = !this.displayFullscreen;
+      if (this.displayFullscreen) {
+        this.swiperTouristicEvent.keyboard.enable();
+      }
+      else {
+        this.swiperTouristicEvent.keyboard.disable();
+      }
+    };
+  }
+  handleFullscreen() {
+    if (this.touristicEvent.attachments && this.touristicEvent.attachments[0] && this.touristicEvent.attachments[0].url) {
+      this.swiperTouristicEventRef.requestFullscreen();
+    }
+  }
+  render() {
+    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
+    const touristicEventTypes = state.touristicEventTypes.find(touristicEventType => touristicEventType.id === this.touristicEvent.type);
+    return (h(Host, null, h("div", { class: "touristic-event-type-img-container" }, h("div", { class: "swiper", ref: el => (this.swiperTouristicEventRef = el) }, h("div", { class: "swiper-wrapper" }, this.touristicEvent.attachments.length > 0 ? (this.touristicEvent.attachments
+      .filter(attachment => attachment.type === 'image')
+      .map(attachment => (h("div", { class: "swiper-slide" }, h("img", { class: `touristic-event-img${this.displayFullscreen ? ' img-fullscreen' : ''}`, src: this.displayFullscreen ? attachment.url : attachment.thumbnail, loading: "lazy", onClick: () => this.handleFullscreen() }))))) : (h("div", { class: "swiper-slide" }, h("img", { class: "default-touristic-event-img", src: defaultImageSrc, loading: "lazy" })))), h("div", { class: "swiper-pagination", ref: el => (this.paginationElTouristicEventRef = el) }), h("div", { class: "swiper-button-prev", ref: el => (this.prevElTouristicEventRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.nextElTouristicEventRef = el) }))), h("div", { class: "touristic-event-sub-container" }, h("div", { class: "touristic-event-type-container" }, h("img", { src: touristicEventTypes.pictogram }), h("div", { class: "touristic-event-type-name" }, touristicEventTypes.type)), h("div", { class: "touristic-event-name" }, this.touristicEvent.name)), h("div", { class: "touristic-event-more-detail-container" }, h("button", { class: "more-details-button", onClick: () => this.touristicEventCardPress.emit(this.touristicEvent.id) }, "Plus de d\u00E9tails"))));
+  }
+  static get is() { return "grw-touristic-event-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-touristic-event-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-touristic-event-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "touristicEvent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TouristicEvent",
+          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser?: string; practical_info?: string; type: number; geometry: Point; cities?: string[]; source?: number[]; pdf?: string; contact?: string; email?: string; website?: string; }",
+          "references": {
+            "TouristicEvent": {
+              "location": "import",
+              "path": "types/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "displayFullscreen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "touristicEventCardPress",
+        "name": "touristicEventCardPress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=grw-touristic-event-card.js.map

package/dist/collection/components/grw-touristic-event/grw-touristic-event-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-event-card.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-event/grw-touristic-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Host, getAssetPath, h, State, Prop, Event, EventEmitter } from '@stencil/core';\nimport state from 'store/store';\nimport Swiper, { Keyboard, Navigation, Pagination } from 'swiper';\nimport { TouristicEvent } from 'types/types';\n\n@Component({\n  tag: 'grw-touristic-event-card',\n  styleUrl: 'grw-touristic-event-card.scss',\n  shadow: true,\n})\nexport class GrwTouristicEvent {\n  @Event() touristicEventCardPress: EventEmitter<number>;\n  swiperTouristicEvent?: Swiper;\n  swiperTouristicEventRef?: HTMLDivElement;\n  prevElTouristicEventRef?: HTMLDivElement;\n  nextElTouristicEventRef?: HTMLDivElement;\n  paginationElTouristicEventRef?: HTMLDivElement;\n  @Prop() touristicEvent: TouristicEvent;\n  @State() displayFullscreen = false;\n\n  componentDidLoad() {\n    this.swiperTouristicEvent = new Swiper(this.swiperTouristicEventRef, {\n      modules: [Navigation, Pagination, Keyboard],\n      navigation: {\n        prevEl: this.prevElTouristicEventRef,\n        nextEl: this.nextElTouristicEventRef,\n      },\n      pagination: { el: this.paginationElTouristicEventRef },\n      allowTouchMove: false,\n      keyboard: false,\n    });\n    this.swiperTouristicEventRef.onfullscreenchange = () => {\n      this.displayFullscreen = !this.displayFullscreen;\n      if (this.displayFullscreen) {\n        this.swiperTouristicEvent.keyboard.enable();\n      } else {\n        this.swiperTouristicEvent.keyboard.disable();\n      }\n    };\n  }\n\n  handleFullscreen() {\n    if (this.touristicEvent.attachments && this.touristicEvent.attachments[0] && this.touristicEvent.attachments[0].url) {\n      this.swiperTouristicEventRef.requestFullscreen();\n    }\n  }\n  render() {\n    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);\n    const touristicEventTypes = state.touristicEventTypes.find(touristicEventType => touristicEventType.id === this.touristicEvent.type);\n    return (\n      <Host>\n        <div class=\"touristic-event-type-img-container\">\n          <div class=\"swiper\" ref={el => (this.swiperTouristicEventRef = el)}>\n            <div class=\"swiper-wrapper\">\n              {this.touristicEvent.attachments.length > 0 ? (\n                this.touristicEvent.attachments\n                  .filter(attachment => attachment.type === 'image')\n                  .map(attachment => (\n                    <div class=\"swiper-slide\">\n                      <img\n                        class={`touristic-event-img${this.displayFullscreen ? ' img-fullscreen' : ''}`}\n                        src={this.displayFullscreen ? attachment.url : attachment.thumbnail}\n                        loading=\"lazy\"\n                        onClick={() => this.handleFullscreen()}\n                      />\n                    </div>\n                  ))\n              ) : (\n                <div class=\"swiper-slide\">\n                  <img class=\"default-touristic-event-img\" src={defaultImageSrc} loading=\"lazy\" />\n                </div>\n              )}\n            </div>\n            <div class=\"swiper-pagination\" ref={el => (this.paginationElTouristicEventRef = el)}></div>\n            <div class=\"swiper-button-prev\" ref={el => (this.prevElTouristicEventRef = el)}></div>\n            <div class=\"swiper-button-next\" ref={el => (this.nextElTouristicEventRef = el)}></div>\n          </div>\n        </div>\n        <div class=\"touristic-event-sub-container\">\n          <div class=\"touristic-event-type-container\">\n            <img src={touristicEventTypes.pictogram} />\n            <div class=\"touristic-event-type-name\">{touristicEventTypes.type}</div>\n          </div>\n          <div class=\"touristic-event-name\">{this.touristicEvent.name}</div>\n        </div>\n        <div class=\"touristic-event-more-detail-container\">\n          <button class=\"more-details-button\" onClick={() => this.touristicEventCardPress.emit(this.touristicEvent.id)}>\n            Plus de détails\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}