Remove references to API and document proxy steps. (#234)

* Remove references to API and document proxy steps. * Fix some verbage. * Remove URL from new API library. * Fix blog pages.
hlxsites · May 30, 2024 · 4321406 · 4321406
1 parent 9adf51d
commit 4321406
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 25 deletions.
diff --git a/blocks/agent-testimonials/agent-testimonials.css 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;
+}
diff --git a/blocks/agent-testimonials/agent-testimonials.js 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}<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();
+  });
+}
diff --git a/blocks/quote-carousel/quote-carousel.css b/blocks/quote-carousel/quote-carousel.css
@@ -13,6 +13,11 @@
   position: relative;
 }
 
+.quote-carousel.block p,
+.quote-carousel.block .pagination span {
+  color: var(--white);
+}
+
 .quote-carousel.block .title {
   text-align: center;
   text-transform: capitalize;
@@ -98,13 +103,13 @@
   transform: translateY(2px);
 }
 
-.quote-carousel.block .controls-container svg {
+.quote-carousel.block .controls-container img {
   color: var(--white);
   height: var(--body-font-size-m);
   width: var(--body-font-size-m);
 }
 
-.quote-carousel.block .controls-container [name="prev"] svg {
+.quote-carousel.block .controls-container [name="prev"] img {
   transform: rotate(-180deg);
 }
 

diff --git a/blocks/quote-carousel/quote-carousel.js b/blocks/quote-carousel/quote-carousel.js
@@ -1,3 +1,8 @@
+import {
+  button, div, p, span,
+} from '../../scripts/dom-helpers.js';
+import { decorateIcons } from '../../scripts/aem.js';
+
 /**
  * Returns block content from the spreadsheet
  *
@@ -40,6 +45,7 @@ export default async function decorate(block) {
   const blockId = crypto && crypto.randomUUID ? crypto.randomUUID() : 'UUID-CRYPTO-NEEDS-HTTPS';
   const dataUrl = block.querySelector('div > div > div:nth-child(2) > a').href;
   const title = getTitle(block);
+  const content = await getContent(dataUrl);
   // generate carousel content from loaded data
   block.setAttribute('id', blockId);
   block.innerHTML = '';
@@ -48,46 +54,44 @@ export default async function decorate(block) {
   titleElement.innerText = title.trim();
   titleElement.classList.add('title');
 
-  const controlsContainer = document.createElement('div');
-  controlsContainer.classList.add('controls-container');
+  const controlsContainer = div({ class: 'controls-container' },
+    div({ class: 'pagination' },
+      span({ class: 'index' }, '1'),
+      span({ class: 'of' }, 'of'),
+      span({ class: 'total' }, content.total),
+    ),
+    button({
+      name: 'prev', class: 'control-button', 'aria-label': 'Previous', disabled: true,
+    },
+    span({ class: 'icon icon-chevron-right-white' }),
+    ),
+    button({ name: 'next', class: 'control-button', 'aria-label': 'Next' },
+      span({ class: 'icon icon-chevron-right-white' }),
+    ),
+  );
+  decorateIcons(controlsContainer);
 
   const slidesContainer = document.createElement('div');
   slidesContainer.classList.add('carousel-content');
 
   block.replaceChildren(titleElement, slidesContainer, controlsContainer);
 
-  const content = await getContent(dataUrl);
-
   if (content.data.length > 0) {
     [...content.data].forEach((row) => {
-      const rowContent = document.createElement('div');
       if (!row.quote.startsWith('"')) {
         row.quote = `"${row.quote}`;
       }
       if (!row.quote.endsWith('"')) {
         row.quote = `${row.quote}"`;
       }
-      rowContent.classList.add('item');
-      rowContent.innerHTML = `
-                <p class="quote">${row.quote}</p>
-                <p class="author">${row.author}</p>
-                <p class="position">${row.position}</p>
-                `;
-      rowContent.classList.add('item');
+      const rowContent = div({ class: 'item' },
+        p({ class: 'quote' }, row.quote),
+        p({ class: 'author' }, row.author),
+        p({ class: 'position' }, row.position),
+      );
       slidesContainer.appendChild(rowContent);
     });
     slidesContainer.children[0].setAttribute('active', true);
-
-    // generate container for carousel controls
-    controlsContainer.innerHTML = `
-      <div class="pagination">
-          <span class="index">1</span>
-          <span class="of">of</span>
-          <span class="total">${content.total}</span>
-      </div>
-      <button name="prev" aria-label="Previous" class="control-button" disabled><svg><use xlink:href="/icons/icons.svg#carrot-white"/></svg></button>
-      <button name="next" aria-label="Next" class="control-button"><svg><use xlink:href="/icons/icons.svg#carrot-white"/></svg></button>
-    `;
     window.setTimeout(observeCarousel, 3000);
   }
 }