@ptcwebops/ptcw-design 2.7.9 → 2.8.0

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.css

@@ -5628,7 +5628,7 @@ Credits to Dave Berning
   }
 }
 .modal .modal-container .v-modal-left {
-  background-color: #323B42;
+  background-color: #323b42;
   padding: 24px;
   margin: 0 -24px;
 }
@@ -5681,7 +5681,7 @@ Credits to Dave Berning
   max-height: 460px;
   overflow-y: auto;
   padding-right: 13px;
-  color: #FFF;
+  color: #fff;
 }
 @media only screen and (min-width: 1200px) {
   .modal .modal-container .video-modal-description {
@@ -5696,10 +5696,36 @@ Credits to Dave Berning
   border-radius: 4px;
 }
 .modal .modal-container .video-modal-description::-webkit-scrollbar-track {
-  background-color: #3E4A52;
+  background-color: #3e4a52;
   border-radius: 4px;
 }
 .modal .modal-container .video-modal-description::-webkit-scrollbar-thumb {
   background-color: #819099;
   border-radius: 4px;
+}
+.modal.modal-only-video .modal-wrapper {
+  width: 90vw;
+  position: relative;
+}
+@media only screen and (min-width: 768px) {
+  .modal.modal-only-video .modal-wrapper {
+    width: 75vw;
+    padding: 40px;
+  }
+}
+.modal.modal-only-video .modal-wrapper .vm-close {
+  position: absolute;
+  right: 0;
+  top: -40px;
+  cursor: pointer;
+}
+@media only screen and (min-width: 768px) {
+  .modal.modal-only-video .modal-wrapper .vm-close {
+    right: 0;
+    top: 10px;
+  }
+}
+.modal.modal-only-video .modal-wrapper .aspect-ratio-container {
+  width: 100%;
+  height: 100%;
 }

package/dist/collection/components/ptc-theater-video-modal/ptc-theater-video-modal.js

@@ -5,6 +5,7 @@ export class PtcTheaterVideoModal {
     this.showModal = false;
     this.currentCardIndex = 0;
     this.filteredTagName = undefined;
+    this.modalType = undefined;
   }
   // @Listen('filterCliked', { target: 'document' })
   // handleFilterClick(event: CustomEvent) {
@@ -13,9 +14,10 @@ export class PtcTheaterVideoModal {
   // }
   async updateData(data, currentModalIndex) {
     // debugger
-    console.log(data);
-    console.log(this.filteredTagName);
+    // console.log(data);
+    // console.log(this.filteredTagName);
     this.cards = data;
+    console.log(this.cards);
     // this.cards = data.filter((item) => {
     //   const videoTagArr = item.vtagName.split(",").map((j) => j.trim());
     //   if (this.filteredTagName !== undefined && this.filteredTagName !== 'reset') {
@@ -24,8 +26,9 @@ export class PtcTheaterVideoModal {
     //     return true;
     //   }
     // });
-    console.log(this.cards);
+    // console.log(this.cards);
     console.log(currentModalIndex);
+    this.modalType = this.cards[this.currentCardIndex].modalType;
     this.currentCardIndex = currentModalIndex;
     this.showModal = true;
   }
@@ -71,7 +74,8 @@ export class PtcTheaterVideoModal {
     });
   }
   render() {
-    return (h(Host, null, h("slot", null), this.showModal && (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, " ", this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-shadow": "", "title-height": "densest", "title-margin": "margin-top-1", "title-weight": "w-7" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p" }, this.cards[this.currentCardIndex].cardDescription)))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal })))))))));
+    return (h(Host, null, h("slot", null), this.showModal &&
+      (this.modalType != 'only-video' ? (h("div", { class: "modal" }, h("div", { class: "modal-container ptc-container" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: "is-grid has-col-gap-xl has-row-gap-lg" }, h("div", { class: 'is-col is-col-7-lg' }, h("div", { class: "v-modal-left" }, h("div", { class: 'v-nav' }, h("button", { onClick: () => this.showPrevCard(), disabled: this.currentCardIndex === 0 }, "Previous Video"), h("div", { class: 'v-number' }, ' ', this.currentCardIndex + 1, " of ", this.cards.length), h("button", { onClick: () => this.showNextCard(), disabled: this.currentCardIndex === this.cards.length - 1 }, "Next Video")), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` }))), h("div", { class: "card-description-content" }, h("ptc-title", { type: "h3", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", styles: ".is-standard{margin-top:14px !important}" }, this.cards[this.currentCardIndex].title), h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-color": "white", "para-margin": "margin-3", "para-line-h": "line-height-p" }, this.cards[this.currentCardIndex].cardDescription)))), h("div", { class: 'is-col is-col-5-lg' }, h("div", { class: "video-modal-description" }, h("div", { innerHTML: this.cards[this.currentCardIndex].descriptionModal }))))))) : (h("div", { class: "modal modal-only-video" }, h("div", { class: "modal-wrapper" }, h("div", { onClick: () => this.closeCardModal(), class: 'vm-close' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("g", { "clip-path": "url(#clip0_214_927)" }, h("path", { d: "M18 2.8125L15.1875 0L9 6.1875L2.8125 0L0 2.8125L6.1875 9L0 15.1875L2.8125 18L9 11.8125L15.1875 18L18 15.1875L11.8125 9L18 2.8125Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_214_927" }, h("rect", { width: "18", height: "18", fill: "white" }))))), h("div", { class: 'aspect-ratio-container ' }, h("div", { class: 'video-container' }, h("video-js", { id: "bcPlayer", "data-account": "1532789042001", "data-player": "HknUe20R", "data-embed": "default", "data-video-id": this.cards[this.currentCardIndex].videoId, controls: "", "data-application-id": "", class: `dpm-vj-${this.currentCardIndex}   video-js    vjs-fills` })))))))));
   }
   static get is() { return "ptc-theater-video-modal"; }
   static get encapsulation() { return "scoped"; }
@@ -90,7 +94,8 @@ export class PtcTheaterVideoModal {
       "cards": {},
       "showModal": {},
       "currentCardIndex": {},
-      "filteredTagName": {}
+      "filteredTagName": {},
+      "modalType": {}
     };
   }
   static get methods() {

package/dist/collection/components/ptc-theater-video-playlist/ptc-theater-video-playlist.js

@@ -4,6 +4,10 @@ export class PtcTheaterVideoPlaylist {
     this.cards = [];
     this.currentCardIndex = 0;
     this.filteredTagName = undefined;
+    this.cardElements = undefined;
+  }
+  componentWillLoad() {
+    this.cardElements = this.host.querySelectorAll('ptc-theater-video');
   }
   componentDidLoad() {
     this.setupCards();
@@ -13,14 +17,21 @@ export class PtcTheaterVideoPlaylist {
     const filters = event.detail;
     this.filteredTagName = filters['selected-tag'];
     this.sortCards(this.filteredTagName);
-    this.setupCards();
+    //this.updateCardData(filters.cardNumber)
+  }
+  handleVCardClickedEvent(event) {
+    const filters = event.detail;
+    console.log(filters);
   }
   sortCards(filterVideo) {
-    const cardElements = this.host.querySelectorAll('ptc-theater-video');
-    cardElements.forEach((cardElement) => {
-      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
-        return item.trim();
-      });
+    //const cardElements = this.host.querySelectorAll('ptc-theater-video');
+    this.cardElements.forEach((cardElement) => {
+      let tagNames;
+      if (cardElement.getAttribute('vtag-name')) {
+        tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+          return item.trim();
+        });
+      }
       const trimFilterVideo = filterVideo.trim();
       if (trimFilterVideo !== "" && trimFilterVideo !== 'reset') {
         if (tagNames.includes(trimFilterVideo)) {
@@ -39,24 +50,52 @@ export class PtcTheaterVideoPlaylist {
     });
   }
   setupCards() {
-    let cardData = {};
-    const cardElements = this.host.querySelectorAll('ptc-theater-video');
-    cardElements.forEach((cardElement, index) => {
-      cardData = {
-        title: cardElement.querySelector('.vcard-title').textContent,
-        cardDescription: cardElement.cardDescription,
-        descriptionModal: cardElement.querySelector('.description').innerHTML,
-        videoId: cardElement.getAttribute('video-id'),
-        vtagName: cardElement.getAttribute('vtag-name'),
-        cardNumber: cardElement.getAttribute('card-number'),
-        index: index
-      };
+    console.log('Setup called');
+    // const cardElements = this.host.querySelectorAll('ptc-theater-video');
+    // console.log(this.cardElements);
+    this.cardElements.forEach((cardElement, index) => {
+      this.cards.push(this.setCardData(cardElement, index));
       cardElement.addEventListener('click', () => {
         this.showCardDetails(index);
       });
-      this.cards.push(cardData);
     });
   }
+  updateCardData(cardNumber) {
+    console.log('updateCard called');
+    // debugger
+    this.cards = [];
+    // const cardElements = this.host.querySelectorAll('ptc-theater-video');
+    // console.log(this.cardElements);
+    this.cardElements.forEach((cardElement, index) => {
+      const tagNames = cardElement.getAttribute('vtag-name').split(",").map((item) => {
+        return item.trim();
+      });
+      // this.cards.push(this.setCardData(cardElement, index));
+      if (this.filteredTagName !== "" && this.filteredTagName !== 'reset' && this.filteredTagName !== undefined && tagNames.includes(this.filteredTagName)) {
+        this.cards.push(this.setCardData(cardElement, index));
+        // const cardNumber = parseInt(cardElement.getAttribute('card-number'));
+        cardElement.addEventListener('click', () => {
+          this.showCardDetails(cardNumber);
+        });
+      }
+      else if (this.filteredTagName === 'reset') {
+        this.cards.push(this.setCardData(cardElement, index));
+      }
+    });
+  }
+  setCardData(cardElement, index) {
+    const cardData = {
+      title: cardElement.querySelector('.vcard-title').textContent,
+      cardDescription: cardElement.cardDescription,
+      descriptionModal: cardElement.querySelector('.description').innerHTML,
+      videoId: cardElement.getAttribute('video-id'),
+      vtagName: cardElement.getAttribute('vtag-name'),
+      cardNumber: cardElement.getAttribute('card-number'),
+      index: index,
+      modalType: cardElement.getAttribute('modal-type')
+    };
+    return cardData;
+  }
   showCardDetails(index) {
     this.currentCardIndex = index;
     // this.showModal = true;
@@ -80,6 +119,27 @@ export class PtcTheaterVideoPlaylist {
       "$": ["ptc-theater-video-playlist.css"]
     };
   }
+  static get properties() {
+    return {
+      "cardElements": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-elements",
+        "reflect": false
+      }
+    };
+  }
   static get states() {
     return {
       "currentCardIndex": {},
@@ -94,6 +154,12 @@ export class PtcTheaterVideoPlaylist {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "vCardClicked",
+        "method": "handleVCardClickedEvent",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }