diff --git a/blocks/agent-testimonials/agent-testimonials.css b/blocks/agent-testimonials/agent-testimonials.css new file mode 100644 index 00000000..7da5fa4f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/blocks/agent-testimonials/agent-testimonials.js b/blocks/agent-testimonials/agent-testimonials.js new file mode 100644 index 00000000..54419661 --- /dev/null +++ b/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}${remainingText}`; + 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(); + }); +}