@geotrekce/geotrek-rando-widget 0.3.6 → 0.4.0

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

@@ -0,0 +1,201 @@
+import { Build, Host, getAssetPath, h } from '@stencil/core';
+import state from 'store/store';
+import Swiper, { Keyboard, Navigation, Pagination } from 'swiper';
+export class GrwTouristicContentCard {
+  constructor() {
+    this.touristicContent = undefined;
+    this.isLargeView = false;
+    this.isInsideHorizontalList = false;
+    this.displayFullscreen = false;
+  }
+  componentDidLoad() {
+    if (this.swiperTouristicContentRef) {
+      this.swiperTouristicContent = new Swiper(this.swiperTouristicContentRef, {
+        modules: [Navigation, Pagination, Keyboard],
+        navigation: {
+          prevEl: this.prevElTouristicContentRef,
+          nextEl: this.nextElTouristicContentRef,
+        },
+        pagination: { el: this.paginationElTouristicContentRef },
+        allowTouchMove: false,
+        keyboard: false,
+      });
+      this.swiperTouristicContentRef.onfullscreenchange = () => {
+        this.displayFullscreen = !this.displayFullscreen;
+        if (this.displayFullscreen) {
+          this.swiperTouristicContent.keyboard.enable();
+        }
+        else {
+          this.swiperTouristicContent.keyboard.disable();
+        }
+      };
+    }
+  }
+  handleFullscreen() {
+    if (this.touristicContent.attachments && this.touristicContent.attachments[0] && this.touristicContent.attachments[0].url) {
+      this.swiperTouristicContentRef.requestFullscreen();
+    }
+  }
+  handleMouseOver() {
+    this.cardTouristicContentMouseOver.emit(this.touristicContent.id);
+  }
+  handleMouseLeave() {
+    this.cardTouristicContentMouseLeave.emit();
+  }
+  render() {
+    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
+    const touristicContentCategory = state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === this.touristicContent.category);
+    return (h(Host, { style: {
+        width: this.isLargeView ? '100%' : 'auto',
+      } }, h("div", { class: this.isLargeView
+        ? `touristic-content-card-large-view-container${state.selectedTouristicContentId === this.touristicContent.id ? ' selected-touristic-content-card' : ''}${!this.isInsideHorizontalList ? ' is-inside-vertical-list' : ''}`
+        : `touristic-content-card-container${state.selectedTouristicContentId === this.touristicContent.id ? ' selected-touristic-content-card' : ''}${!this.isInsideHorizontalList ? ' is-inside-vertical-list' : ''}`, onClick: () => {
+        if (!this.isInsideHorizontalList) {
+          this.touristicContentCardPress.emit(this.touristicContent.id);
+        }
+      } }, h("div", { class: "touristic-content-type-img-container" }, this.isInsideHorizontalList ? (h("div", { class: "swiper", ref: el => (this.swiperTouristicContentRef = el) }, h("div", { class: "swiper-wrapper" }, this.touristicContent.attachments.length > 0 ? (this.touristicContent.attachments
+      .filter(attachment => attachment.type === 'image')
+      .map(attachment => (h("div", { class: "swiper-slide" }, h("img", { class: `touristic-content-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-content-img", src: defaultImageSrc, loading: "lazy" })))), h("div", { class: "swiper-pagination", ref: el => (this.paginationElTouristicContentRef = el) }), h("div", { class: "swiper-button-prev", ref: el => (this.prevElTouristicContentRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.nextElTouristicContentRef = el) }))) : this.touristicContent.attachments.filter(attachment => attachment.type === 'image').length > 0 ? (h("img", { class: "image", src: `${this.touristicContent.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`, loading: "lazy" })) : (h("div", null))), h("div", { class: "touristic-content-sub-container" }, h("div", { class: "touristic-content-category-container" }, h("img", { src: touristicContentCategory.pictogram }), h("div", { class: "touristic-content-category-name" }, touristicContentCategory.label)), h("div", { class: "touristic-content-name" }, this.touristicContent.name)), this.isInsideHorizontalList && (h("div", { class: "touristic-content-more-detail-container" }, h("button", { class: "more-details-button", onClick: () => this.touristicContentCardPress.emit(this.touristicContent.id) }, "Plus de d\u00E9tails"))))));
+  }
+  static get is() { return "grw-touristic-content-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-touristic-content-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-touristic-content-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "touristicContent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TouristicContent",
+          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser?: string; practical_info?: string; category: number; geometry: Point; cities?: string[]; source?: number[]; pdf?: string; contact?: string; email?: string; website?: string; }",
+          "references": {
+            "TouristicContent": {
+              "location": "import",
+              "path": "types/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "isLargeView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large-view",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isInsideHorizontalList": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-inside-horizontal-list",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "displayFullscreen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "touristicContentCardPress",
+        "name": "touristicContentCardPress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "cardTouristicContentMouseOver",
+        "name": "cardTouristicContentMouseOver",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "cardTouristicContentMouseLeave",
+        "name": "cardTouristicContentMouseLeave",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "mouseover",
+        "method": "handleMouseOver",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseleave",
+        "method": "handleMouseLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=grw-touristic-content-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-content-card.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-content/grw-touristic-content-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Host, getAssetPath, h, State, Prop, Event, EventEmitter, Listen } from '@stencil/core';\nimport state from 'store/store';\nimport Swiper, { Keyboard, Navigation, Pagination } from 'swiper';\nimport { TouristicContent } from 'types/types';\n\n@Component({\n  tag: 'grw-touristic-content-card',\n  styleUrl: 'grw-touristic-content-card.scss',\n  shadow: true,\n})\nexport class GrwTouristicContentCard {\n  @Event() touristicContentCardPress: EventEmitter<number>;\n  swiperTouristicContent?: Swiper;\n  swiperTouristicContentRef?: HTMLDivElement;\n  prevElTouristicContentRef?: HTMLDivElement;\n  nextElTouristicContentRef?: HTMLDivElement;\n  paginationElTouristicContentRef?: HTMLDivElement;\n  @Prop() touristicContent: TouristicContent;\n  @Prop() isLargeView = false;\n  @Prop() isInsideHorizontalList = false;\n  @State() displayFullscreen = false;\n\n  @Event() cardTouristicContentMouseOver: EventEmitter<number>;\n  @Event() cardTouristicContentMouseLeave: EventEmitter;\n\n  componentDidLoad() {\n    if (this.swiperTouristicContentRef) {\n      this.swiperTouristicContent = new Swiper(this.swiperTouristicContentRef, {\n        modules: [Navigation, Pagination, Keyboard],\n        navigation: {\n          prevEl: this.prevElTouristicContentRef,\n          nextEl: this.nextElTouristicContentRef,\n        },\n        pagination: { el: this.paginationElTouristicContentRef },\n        allowTouchMove: false,\n        keyboard: false,\n      });\n      this.swiperTouristicContentRef.onfullscreenchange = () => {\n        this.displayFullscreen = !this.displayFullscreen;\n        if (this.displayFullscreen) {\n          this.swiperTouristicContent.keyboard.enable();\n        } else {\n          this.swiperTouristicContent.keyboard.disable();\n        }\n      };\n    }\n  }\n\n  handleFullscreen() {\n    if (this.touristicContent.attachments && this.touristicContent.attachments[0] && this.touristicContent.attachments[0].url) {\n      this.swiperTouristicContentRef.requestFullscreen();\n    }\n  }\n\n  @Listen('mouseover')\n  handleMouseOver() {\n    this.cardTouristicContentMouseOver.emit(this.touristicContent.id);\n  }\n\n  @Listen('mouseleave')\n  handleMouseLeave() {\n    this.cardTouristicContentMouseLeave.emit();\n  }\n\n  render() {\n    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);\n    const touristicContentCategory = state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === this.touristicContent.category);\n    return (\n      <Host\n        style={{\n          width: this.isLargeView ? '100%' : 'auto',\n        }}\n      >\n        <div\n          class={\n            this.isLargeView\n              ? `touristic-content-card-large-view-container${state.selectedTouristicContentId === this.touristicContent.id ? ' selected-touristic-content-card' : ''}${\n                  !this.isInsideHorizontalList ? ' is-inside-vertical-list' : ''\n                }`\n              : `touristic-content-card-container${state.selectedTouristicContentId === this.touristicContent.id ? ' selected-touristic-content-card' : ''}${\n                  !this.isInsideHorizontalList ? ' is-inside-vertical-list' : ''\n                }`\n          }\n          onClick={() => {\n            if (!this.isInsideHorizontalList) {\n              this.touristicContentCardPress.emit(this.touristicContent.id);\n            }\n          }}\n        >\n          <div class=\"touristic-content-type-img-container\">\n            {this.isInsideHorizontalList ? (\n              <div class=\"swiper\" ref={el => (this.swiperTouristicContentRef = el)}>\n                <div class=\"swiper-wrapper\">\n                  {this.touristicContent.attachments.length > 0 ? (\n                    this.touristicContent.attachments\n                      .filter(attachment => attachment.type === 'image')\n                      .map(attachment => (\n                        <div class=\"swiper-slide\">\n                          <img\n                            class={`touristic-content-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-content-img\" src={defaultImageSrc} loading=\"lazy\" />\n                    </div>\n                  )}\n                </div>\n                <div class=\"swiper-pagination\" ref={el => (this.paginationElTouristicContentRef = el)}></div>\n                <div class=\"swiper-button-prev\" ref={el => (this.prevElTouristicContentRef = el)}></div>\n                <div class=\"swiper-button-next\" ref={el => (this.nextElTouristicContentRef = el)}></div>\n              </div>\n            ) : this.touristicContent.attachments.filter(attachment => attachment.type === 'image').length > 0 ? (\n              <img class=\"image\" src={`${this.touristicContent.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`} loading=\"lazy\" />\n            ) : (\n              <div></div>\n            )}\n          </div>\n          <div class=\"touristic-content-sub-container\">\n            <div class=\"touristic-content-category-container\">\n              <img src={touristicContentCategory.pictogram} />\n              <div class=\"touristic-content-category-name\">{touristicContentCategory.label}</div>\n            </div>\n            <div class=\"touristic-content-name\">{this.touristicContent.name}</div>\n          </div>\n          {this.isInsideHorizontalList && (\n            <div class=\"touristic-content-more-detail-container\">\n              <button class=\"more-details-button\" onClick={() => this.touristicContentCardPress.emit(this.touristicContent.id)}>\n                Plus de détails\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}