Merge pull request #231 from hlxsites/ritsriva-carousel

Add Agent Testimonials carousel

blocks/agent-testimonials/agent-testimonials.css

@@ -0,0 +1,94 @@
+.agent-testimonials.block {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.agent-testimonials.block .testimonials {
+    display: flex;
+    transition: transform 0.5s ease;
+    width: 100%;
+}
+
+.agent-testimonials.block .testimonials-inner {
+    display: flex;
+    width: 100%;
+}
+
+.agent-testimonials.block .testimonials-item {
+    min-width: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+}
+
+.agent-testimonials.block .rating-stars {
+    color: var(--primary-color);
+    margin-bottom: 10px;
+    font-size: 25px;
+    margin-left: 50px;
+}
+
+.agent-testimonials.block .review-text.full {
+    max-height: none;
+    font-size: 26px;
+}
+
+.agent-testimonials.block .review-text {
+    font-size: 26px;
+    margin-bottom: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
+}
+
+.agent-testimonials.block .read-more {
+    font-size: 14px;
+    color: #607C8C;
+    cursor: pointer;
+    display: inline-block;
+
+}
+
+.agent-testimonials.block .reviewer-name {
+    font-weight: bold;
+    margin-bottom: 10px;
+    align-self: center;
+}
+
+.agent-testimonials.block .testimonials-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--black);
+    font-size: 90px;
+    padding: 0;
+    cursor: pointer;
+}
+
+.agent-testimonials.block .left-arrow {
+    left: 10px;
+}
+
+.agent-testimonials.block .right-arrow {
+    right: 10px;
+}
+
+.agent-testimonials.block .testimonials-counter {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    font-size: 16px;
+    color: #333;
+}
+
+.agent-testimonials.block .remaining-text {
+    font: inherit;
+    font-size: 26px;
+}

blocks/agent-testimonials/agent-testimonials.js

@@ -0,0 +1,81 @@
+import { getMetadata } from '../../scripts/aem.js';
+import { button, div } from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  const leftArrow = button({ class: 'testimonials-arrow left-arrow' }, '<');
+  const testimonialsInner = div({ class: 'testimonials-inner' });
+  const testimonialsWrapper = div({ class: 'testimonials' }, testimonialsInner);
+  const rightArrow = button({ class: 'testimonials-arrow right-arrow' }, '>');
+  const testimonialsCounter = div({ class: 'testimonials-counter' });
+  block.append(leftArrow, testimonialsWrapper, rightArrow, testimonialsCounter);
+
+  let currentIndex = 0;
+  let totalReviews = 0;
+  const updateCounter = () => {
+    testimonialsCounter.textContent = `${currentIndex + 1} of ${totalReviews}`;
+  };
+
+  const addReadMoreFunctionality = () => {
+    const reviewTexts = document.querySelectorAll('.review-text');
+    reviewTexts.forEach((reviewText) => {
+      const words = reviewText.textContent.split(' ');
+      if (words.length > 75) {
+        const initialText = words.slice(0, 50).join(' ');
+        const remainingText = words.slice(50).join(' ');
+        const readMore = document.createElement('span');
+        readMore.classList.add('read-more');
+        readMore.textContent = '... Read more';
+
+        reviewText.innerHTML = `${initialText}<span class="remaining-text">${remainingText}</span>`;
+        reviewText.appendChild(readMore);
+        reviewText.querySelector('.remaining-text').style.display = 'none';
+
+        readMore.addEventListener('click', () => {
+          const remainingTextSpan = reviewText.querySelector('.remaining-text');
+          if (remainingTextSpan.style.display === 'none') {
+            remainingTextSpan.style.display = 'inline';
+            readMore.textContent = ' Show less';
+          } else {
+            remainingTextSpan.style.display = 'none';
+            readMore.textContent = '... Read more';
+          }
+        });
+      }
+    });
+  };
+
+  const externalID = getMetadata('externalid');
+  fetch(`https://testimonialtree.com/Widgets/jsonFeed.aspx?widgetid=45133&externalID=${externalID}`)
+    .then((response) => response.json())
+    .then((data) => {
+      const reviews = data.testimonialtreewidget.testimonials.testimonial.slice(0, 4);
+      totalReviews = reviews.length;
+      reviews.forEach((review) => {
+        const reviewElement = div({ class: 'testimonials-item' },
+          div({ class: 'rating-stars' }, '★'.repeat(review.rating)),
+          div({ class: 'review-text-container' },
+            div({ class: 'review-text' }, decodeURIComponent(review.testimonial.replace(/\+/g, ' '))),
+          ),
+          div({ class: 'reviewer-name' }, review.signature.replace(/\+/g, ' ') || 'Anonymous'),
+        );
+        testimonialsInner.appendChild(reviewElement);
+      });
+      addReadMoreFunctionality();
+      updateCounter();
+    });
+
+  const updatetestimonials = () => {
+    testimonialsInner.style.transform = `translateX(-${currentIndex * 100}%)`;
+    updateCounter();
+  };
+
+  leftArrow.addEventListener('click', () => {
+    currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalReviews - 1;
+    updatetestimonials();
+  });
+
+  rightArrow.addEventListener('click', () => {
+    currentIndex = (currentIndex < totalReviews - 1) ? currentIndex + 1 : 0;
+    updatetestimonials();
+  });
+}