From 9a07d1d9361966447c80e1b5aa53cc1ed19c4e7a Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 20 May 2024 10:54:42 +0530 Subject: [PATCH 01/15] Add Testimonials carousel --- blocks/carousel/carousel.css | 105 +++++++++++++++++++++++++++++++++++ blocks/carousel/carousel.js | 90 ++++++++++++++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 blocks/carousel/carousel.css create mode 100644 blocks/carousel/carousel.js diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css new file mode 100644 index 00000000..8f195dcd --- /dev/null +++ b/blocks/carousel/carousel.css @@ -0,0 +1,105 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f4f4f4; + margin: 0; +} + +.carousel-container { + position: relative; + width: 100%; + overflow: hidden; + border-radius: 10px; +} + +.carousel { + display: flex; + transition: transform 0.5s ease; + width: 100%; +} + +.carousel-inner { + display: flex; + width: 100%; +} + +.carousel-item { + min-width: 100%; + box-sizing: border-box; + padding: 20px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; +} + +.rating-stars { + color: #670038; + margin-bottom: 10px; + font-size: 25px; + margin-left: 50px; +} + +.review-text.full { + max-height: none; + font-size: 26px; +} + +.review-text { + font-size: 26px; + margin-bottom: 20px; + padding-left: 50px; + padding-right: 50px; +} + +.read-more { + font-size: 14px; + color: #607C8C; + cursor: pointer; + display: inline-block; + +} + +.reviewer-name { + font-weight: bold; + margin-bottom: 10px; + align-self: center; +} + +.carousel-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: black; + font-size: 90px; + padding: 0; + cursor: pointer; +} + +.left-arrow { + left: 10px; +} + +.right-arrow { + right: 10px; +} + +.carousel-counter { + position: absolute; + bottom: 10px; + right: 10px; + font-size: 16px; + color: #333; +} + +.remaining-text { + display: none; + font-size: 26px; + font:inherit; +} \ No newline at end of file diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js new file mode 100644 index 00000000..087d4310 --- /dev/null +++ b/blocks/carousel/carousel.js @@ -0,0 +1,90 @@ +export default function decorate(block) { + const div = document.createElement('div'); + div.classList.add('carousel-container'); + div.innerHTML = ` +
+ +
+ + `; + block.append(div); + const carouselInner = document.getElementById('carousel-inner'); + const carouselCounter = document.getElementById('carousel-counter'); + const leftArrow = document.querySelector('.left-arrow'); + const rightArrow = document.querySelector('.right-arrow'); + let currentIndex = 0; + let totalReviews = 0; + + fetch('https://api.bridgedataoutput.com/api/v2/OData/reviews/Reviews?access_token=f1484460e98c42240bade7f853c488ed') + .then(response => response.json()) + .then(data => { + const reviews = data.value.slice(0, 4); + totalReviews = reviews.length; + reviews.forEach((review, index) => { + const reviewElement = document.createElement('div'); + reviewElement.classList.add('carousel-item'); + reviewElement.innerHTML = ` +
${'★'.repeat(review.Rating)}
+
+
+ ${review.Description} +
+
+
${review.ReviewerScreenName || 'Anonymous'}
+ `; + carouselInner.appendChild(reviewElement); + }); + addReadMoreFunctionality(); + updateCounter(); + }); + + const updateCarousel = () => { + carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`; + updateCounter(); + }; + + const updateCounter = () => { + carouselCounter.textContent = `${currentIndex + 1} of ${totalReviews}`; + }; + + const addReadMoreFunctionality = () => { + const reviewTexts = document.querySelectorAll('.review-text'); + reviewTexts.forEach(reviewText => { + const words = reviewText.textContent.split(' '); + if (words.length > 100) { + const initialText = words.slice(0, 100).join(' '); + const remainingText = words.slice(100).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'; + } + }); + } + }); + }; + + leftArrow.addEventListener('click', () => { + currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalReviews - 1; + updateCarousel(); + }); + + rightArrow.addEventListener('click', () => { + currentIndex = (currentIndex < totalReviews - 1) ? currentIndex + 1 : 0; + updateCarousel(); + }); +} \ No newline at end of file From 9f5053a0aed629188217f7ae935ea50d167fe42a Mon Sep 17 00:00:00 2001 From: RitwikSrivastava <45959816+RitwikSrivastava@users.noreply.github.com> Date: Mon, 20 May 2024 11:13:00 +0530 Subject: [PATCH 02/15] Update carousel.js --- blocks/carousel/carousel.js | 162 ++++++++++++++++++------------------ 1 file changed, 81 insertions(+), 81 deletions(-) diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js index 087d4310..290e1a10 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/carousel/carousel.js @@ -1,90 +1,90 @@ export default function decorate(block) { - const div = document.createElement('div'); - div.classList.add('carousel-container'); - div.innerHTML = ` -
- -
- - `; - block.append(div); - const carouselInner = document.getElementById('carousel-inner'); - const carouselCounter = document.getElementById('carousel-counter'); - const leftArrow = document.querySelector('.left-arrow'); - const rightArrow = document.querySelector('.right-arrow'); - let currentIndex = 0; - let totalReviews = 0; - - fetch('https://api.bridgedataoutput.com/api/v2/OData/reviews/Reviews?access_token=f1484460e98c42240bade7f853c488ed') - .then(response => response.json()) - .then(data => { - const reviews = data.value.slice(0, 4); - totalReviews = reviews.length; - reviews.forEach((review, index) => { - const reviewElement = document.createElement('div'); - reviewElement.classList.add('carousel-item'); - reviewElement.innerHTML = ` -
${'★'.repeat(review.Rating)}
-
-
- ${review.Description} -
-
-
${review.ReviewerScreenName || 'Anonymous'}
- `; - carouselInner.appendChild(reviewElement); - }); - addReadMoreFunctionality(); - updateCounter(); - }); - - const updateCarousel = () => { - carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`; - updateCounter(); - }; + const div = document.createElement('div'); + div.classList.add('carousel-container'); + div.innerHTML = ` +
+ +
+ + `; + block.append(div); + const carouselInner = document.getElementById('carousel-inner'); + const carouselCounter = document.getElementById('carousel-counter'); + const leftArrow = document.querySelector('.left-arrow'); + const rightArrow = document.querySelector('.right-arrow'); + let currentIndex = 0; + let totalReviews = 0; const updateCounter = () => { - carouselCounter.textContent = `${currentIndex + 1} of ${totalReviews}`; - }; + carouselCounter.textContent = `${currentIndex + 1} of ${totalReviews}`; + }; - const addReadMoreFunctionality = () => { - const reviewTexts = document.querySelectorAll('.review-text'); - reviewTexts.forEach(reviewText => { - const words = reviewText.textContent.split(' '); - if (words.length > 100) { - const initialText = words.slice(0, 100).join(' '); - const remainingText = words.slice(100).join(' '); - const readMore = document.createElement('span'); - readMore.classList.add('read-more'); - readMore.textContent = '... Read more'; + const addReadMoreFunctionality = () => { + const reviewTexts = document.querySelectorAll('.review-text'); + reviewTexts.forEach(reviewText => { + const words = reviewText.textContent.split(' '); + if (words.length > 100) { + const initialText = words.slice(0, 100).join(' '); + const remainingText = words.slice(100).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'; - } - }); - } - }); - }; + reviewText.innerHTML = `${initialText}${remainingText}`; + reviewText.appendChild(readMore); + reviewText.querySelector('.remaining-text').style.display = 'none'; - leftArrow.addEventListener('click', () => { - currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalReviews - 1; - updateCarousel(); + 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'; + } + }); + } }); + }; - rightArrow.addEventListener('click', () => { - currentIndex = (currentIndex < totalReviews - 1) ? currentIndex + 1 : 0; - updateCarousel(); + fetch('https://api.bridgedataoutput.com/api/v2/OData/reviews/Reviews?access_token=f1484460e98c42240bade7f853c488ed') + .then(response => response.json()) + .then(data => { + const reviews = data.value.slice(0, 4); + totalReviews = reviews.length; + reviews.forEach((review) => { + const reviewElement = document.createElement('div'); + reviewElement.classList.add('carousel-item'); + reviewElement.innerHTML = ` +
${'★'.repeat(review.Rating)}
+
+
+ ${review.Description} +
+
+
${review.ReviewerScreenName || 'Anonymous'}
+ `; + carouselInner.appendChild(reviewElement); + }); + addReadMoreFunctionality(); + updateCounter(); }); -} \ No newline at end of file + + const updateCarousel = () => { + carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`; + updateCounter(); + }; + + leftArrow.addEventListener('click', () => { + currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalReviews - 1; + updateCarousel(); + }); + + rightArrow.addEventListener('click', () => { + currentIndex = (currentIndex < totalReviews - 1) ? currentIndex + 1 : 0; + updateCarousel(); + }); +} From 5fde646d15dd7143d5afd09a569f02e289ea55ac Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 20 May 2024 11:43:22 +0530 Subject: [PATCH 03/15] Fix errors --- blocks/carousel/carousel.css | 17 ++----- blocks/carousel/carousel.js | 86 ++++++++++++++++++------------------ 2 files changed, 46 insertions(+), 57 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 8f195dcd..bd42e17f 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -1,13 +1,3 @@ -body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background-color: #f4f4f4; - margin: 0; -} - .carousel-container { position: relative; width: 100%; @@ -38,7 +28,7 @@ body { } .rating-stars { - color: #670038; + color: var(--primary-color); margin-bottom: 10px; font-size: 25px; margin-left: 50px; @@ -76,7 +66,7 @@ body { transform: translateY(-50%); background: none; border: none; - color: black; + color: var(--black); font-size: 90px; padding: 0; cursor: pointer; @@ -99,7 +89,6 @@ body { } .remaining-text { - display: none; + font: inherit; font-size: 26px; - font:inherit; } \ No newline at end of file diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js index 290e1a10..802766f0 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/carousel/carousel.js @@ -17,60 +17,60 @@ export default function decorate(block) { let currentIndex = 0; let totalReviews = 0; - const updateCounter = () => { + const updateCounter = () => { carouselCounter.textContent = `${currentIndex + 1} of ${totalReviews}`; }; const addReadMoreFunctionality = () => { const reviewTexts = document.querySelectorAll('.review-text'); - reviewTexts.forEach(reviewText => { - const words = reviewText.textContent.split(' '); - if (words.length > 100) { - const initialText = words.slice(0, 100).join(' '); - const remainingText = words.slice(100).join(' '); - const readMore = document.createElement('span'); - readMore.classList.add('read-more'); - readMore.textContent = '... Read more'; + reviewTexts.forEach((reviewText) => { + const words = reviewText.textContent.split(' '); + if (words.length > 100) { + const initialText = words.slice(0, 100).join(' '); + const remainingText = words.slice(100).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'; + 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'; - } - }); - } + 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'; + } + }); + } }); }; fetch('https://api.bridgedataoutput.com/api/v2/OData/reviews/Reviews?access_token=f1484460e98c42240bade7f853c488ed') - .then(response => response.json()) - .then(data => { - const reviews = data.value.slice(0, 4); - totalReviews = reviews.length; - reviews.forEach((review) => { - const reviewElement = document.createElement('div'); - reviewElement.classList.add('carousel-item'); - reviewElement.innerHTML = ` -
${'★'.repeat(review.Rating)}
-
-
- ${review.Description} -
-
-
${review.ReviewerScreenName || 'Anonymous'}
- `; - carouselInner.appendChild(reviewElement); - }); - addReadMoreFunctionality(); - updateCounter(); + .then((response) => response.json()) + .then((data) => { + const reviews = data.value.slice(0, 4); + totalReviews = reviews.length; + reviews.forEach((review) => { + const reviewElement = document.createElement('div'); + reviewElement.classList.add('carousel-item'); + reviewElement.innerHTML = ` +
${'★'.repeat(review.Rating)}
+
+
+ ${review.Description} +
+
+
${review.ReviewerScreenName || 'Anonymous'}
+ `; + carouselInner.appendChild(reviewElement); + }); + addReadMoreFunctionality(); + updateCounter(); }); const updateCarousel = () => { From 384101def6c8fc1a67b7c25510286aec941d7f4c Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 21 May 2024 15:29:30 +0530 Subject: [PATCH 04/15] Fix agent testimonials --- .../agent-testimonials.css} | 12 ++--- .../agent-testimonials.js} | 54 ++++++++++--------- 2 files changed, 35 insertions(+), 31 deletions(-) rename blocks/{carousel/carousel.css => agent-testimonials/agent-testimonials.css} (91%) rename blocks/{carousel/carousel.js => agent-testimonials/agent-testimonials.js} (58%) diff --git a/blocks/carousel/carousel.css b/blocks/agent-testimonials/agent-testimonials.css similarity index 91% rename from blocks/carousel/carousel.css rename to blocks/agent-testimonials/agent-testimonials.css index bd42e17f..781def19 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/agent-testimonials/agent-testimonials.css @@ -1,22 +1,22 @@ -.carousel-container { +.testimonials-container { position: relative; width: 100%; overflow: hidden; border-radius: 10px; } -.carousel { +.testimonials { display: flex; transition: transform 0.5s ease; width: 100%; } -.carousel-inner { +.testimonials-inner { display: flex; width: 100%; } -.carousel-item { +.testimonials-item { min-width: 100%; box-sizing: border-box; padding: 20px; @@ -60,7 +60,7 @@ align-self: center; } -.carousel-arrow { +.testimonials-arrow { position: absolute; top: 50%; transform: translateY(-50%); @@ -80,7 +80,7 @@ right: 10px; } -.carousel-counter { +.testimonials-counter { position: absolute; bottom: 10px; right: 10px; diff --git a/blocks/carousel/carousel.js b/blocks/agent-testimonials/agent-testimonials.js similarity index 58% rename from blocks/carousel/carousel.js rename to blocks/agent-testimonials/agent-testimonials.js index 802766f0..3f3a11c7 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/agent-testimonials/agent-testimonials.js @@ -1,24 +1,26 @@ +import { getMetadata } from '../../scripts/aem.js'; + export default function decorate(block) { const div = document.createElement('div'); - div.classList.add('carousel-container'); - div.innerHTML = ` -
-