@ptcwebops/ptcw-design 6.1.39 → 6.1.40

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js

@@ -0,0 +1,143 @@
+import { h } from '@stencil/core';
+export class EventJumbotronExample {
+  constructor() {
+    this.startX = 0;
+    this.scrollLeft = 0;
+    this.updateContainerClass = () => {
+      if (this.screenStatus.isDesktop) {
+        this.sliderWrapper.classList.add('ptc-container');
+        this.disableDragging();
+      }
+      else {
+        this.sliderWrapper.classList.remove('ptc-container');
+        this.enableDragging();
+      }
+    };
+    this.startDragging = (e) => {
+      this.isMouseDown = true;
+      this.startX = e.pageX;
+      this.scrollLeft = this.slider.scrollLeft;
+    };
+    this.performDragging = (e) => {
+      if (!this.isMouseDown)
+        return;
+      const x = e.pageX - this.slider.offsetLeft;
+      const walk = x - this.startX;
+      this.isDragging = Math.abs(walk) > 5;
+      this.slider.scrollLeft = this.scrollLeft - walk;
+    };
+    this.stopDragging = () => {
+      this.isMouseDown = false;
+    };
+    this.cards = [];
+    this.activePanel = null;
+    this.isDragging = false;
+    this.isMouseDown = false;
+    this.screenStatus = { isDesktop: window.innerWidth >= 992 };
+  }
+  handleCardClick(cardIndex) {
+    const card = this.slider.children[cardIndex];
+    const panelID = `panel-${cardIndex}`;
+    const panel = document.getElementById(panelID);
+    if (this.screenStatus.isDesktop && panel) {
+      this.showPanel(card, panel);
+    }
+    else if (!this.screenStatus.isDesktop) {
+      const modal = document.getElementById(`modal-${cardIndex}`);
+      modal === null || modal === void 0 ? void 0 : modal.showModal();
+    }
+  }
+  showPanel(card, panel) {
+    if (this.activePanel)
+      return;
+    this.slider.style.transform = `translateX(-${card.offsetLeft}px)`;
+    Array.from(this.slider.children).forEach(c => {
+      if (c !== card)
+        c.classList.add('hidden');
+    });
+    panel.style.transform = `translateX(${card.offsetWidth}px)`;
+    panel.classList.add('visible');
+    card.classList.add('active');
+    this.activePanel = panel.id;
+  }
+  closePanel(panelId) {
+    const panel = document.getElementById(panelId);
+    if (panel) {
+      panel.classList.remove('visible');
+    }
+    this.activePanel = null;
+    this.slider.style.transform = 'translateX(0)';
+    Array.from(this.slider.children).forEach(card => {
+      card.classList.remove('hidden', 'active');
+    });
+  }
+  enableDragging() {
+    this.slider.addEventListener('mousedown', this.startDragging);
+    this.slider.addEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.addEventListener(event, this.stopDragging));
+  }
+  disableDragging() {
+    this.slider.removeEventListener('mousedown', this.startDragging);
+    this.slider.removeEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.slider.removeEventListener(event, this.stopDragging));
+  }
+  componentDidLoad() {
+    this.sliderWrapper = document.querySelector('.jumbotron-cards-wrapper');
+    this.slider = document.querySelector('.jumbotron-cards');
+    this.updateContainerClass();
+    window.addEventListener('resize', () => {
+      this.screenStatus.isDesktop = window.innerWidth >= 992;
+      this.updateContainerClass();
+    });
+  }
+  render() {
+    return [
+      h("div", { class: {
+          'event-jumbotron': true,
+          'ptc-container': this.screenStatus.isDesktop,
+        } }, h("div", { class: "jumbotron-cards-wrapper" }, h("div", { class: "jumbotron-cards" }, this.cards.map((card, index) => (h("div", { class: "card", onClick: () => this.handleCardClick(index), "data-panel": `panel-${index}` }, h("h3", null, card.title), h("p", null, card.description))))), this.cards.map((card, index) => (h("div", { id: `panel-${index}`, class: "panel" }, h("button", { class: "close-panel", onClick: () => this.closePanel(`panel-${index}`), "aria-label": "Close panel" }, "\u00D7"), h("div", { innerHTML: card.panelContent })))), !this.screenStatus.isDesktop &&
+        this.cards.map((_, index) => (h("dialog", { id: `modal-${index}`, class: "mobile-modal" }, h("button", { class: "close-modal", onClick: () => { var _a; return (_a = document.getElementById(`modal-${index}`)) === null || _a === void 0 ? void 0 : _a.close(); } }, "\u00D7"), h("div", { innerHTML: this.cards[index].panelContent })))))),
+      h("div", { class: "white-placeholder" }),
+    ];
+  }
+  static get is() { return "event-jumbotron-example"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["event-jumbotron-example.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["event-jumbotron-example.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cards": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ title: string; description: string; panelContent: string }[]",
+          "resolved": "{ title: string; description: string; panelContent: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "activePanel": {},
+      "isDragging": {},
+      "isMouseDown": {},
+      "screenStatus": {}
+    };
+  }
+}