From 6a4131371d2edabb5f3586a7267cc9cd9e2ddaf0 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Tue, 28 Nov 2023 14:18:06 +0530 Subject: [PATCH 1/8] added flex basis to css for adjusting the width --- blocks/timeline-slide/timeline-slide.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css index 445e7dcf..b650c1da 100644 --- a/blocks/timeline-slide/timeline-slide.css +++ b/blocks/timeline-slide/timeline-slide.css @@ -6,7 +6,7 @@ padding: 40px 0; overflow: hidden; } - + /* Slider styles */ #year-slider { display: flex; @@ -15,7 +15,7 @@ transition: 0.5s all ease-in-out; transition-duration: 0ms; } - + .year { cursor: pointer; border-radius: 5px; @@ -24,13 +24,14 @@ font-weight: 700; transition: 0.3s all ease-in-out; text-align: center; + flex: 0 0 160px; } - + .year:hover, .year.active { color: #f49600; transition: 0.3s all ease-in-out; } - + /* Content area styles */ #content-slider-container { position: relative; @@ -57,7 +58,7 @@ position: absolute; top: 0.45em; } - + .year-content { display: none; transition: transform 0.5s ease, opacity 0.5s ease; @@ -65,7 +66,7 @@ left: 0; right: 0; } - + .year-content.active { display: block; opacity: 1; @@ -172,4 +173,7 @@ position: relative; justify-content: center; } + .year { + flex: 0 0 150px; + } } \ No newline at end of file From 5459c18fe64f2891186f12943fe9b6c83b7c5e47 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Tue, 28 Nov 2023 15:04:50 +0530 Subject: [PATCH 2/8] lint issues cleared1 --- blocks/timeline-slide/timeline-slide.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css index b650c1da..bd62320f 100644 --- a/blocks/timeline-slide/timeline-slide.css +++ b/blocks/timeline-slide/timeline-slide.css @@ -173,6 +173,7 @@ position: relative; justify-content: center; } + .year { flex: 0 0 150px; } From 85ef7694800a3dd9ca07df33f96811ac0fe8d1c4 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Tue, 28 Nov 2023 20:39:15 +0530 Subject: [PATCH 3/8] fixed prebtn, nextbtn sync with onclk slideNmbr --- blocks/timeline-slide/timeline-slide.css | 10 ++++++---- blocks/timeline-slide/timeline-slide.js | 11 ++++++++++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css index bd62320f..84fe2d18 100644 --- a/blocks/timeline-slide/timeline-slide.css +++ b/blocks/timeline-slide/timeline-slide.css @@ -24,10 +24,10 @@ font-weight: 700; transition: 0.3s all ease-in-out; text-align: center; - flex: 0 0 160px; + width: 160px; } - .year:hover, .year.active { + .year.active { color: #f49600; transition: 0.3s all ease-in-out; } @@ -88,7 +88,9 @@ } .button-container .hide { - opacity: 0.5; + opacity: .35; + cursor: auto; + pointer-events: none; } .button-prev { @@ -175,6 +177,6 @@ } .year { - flex: 0 0 150px; + width: 150px; } } \ No newline at end of file diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js index 24771277..d6ec27de 100644 --- a/blocks/timeline-slide/timeline-slide.js +++ b/blocks/timeline-slide/timeline-slide.js @@ -83,7 +83,6 @@ export default function decorate(block) { if (child.children.length >= 2) { const yearChild = child.children[0].cloneNode(true); yearChild.classList.add('year'); - yearChild.style.width = '130px'; yearSlider.appendChild(yearChild); const contentChild = child.children[1].cloneNode(true); contentChild.classList.add('year-content'); @@ -103,6 +102,16 @@ export default function decorate(block) { year.addEventListener('click', () => { clearActiveClasses(); + // disable previous arrow button based on first slide. + if (index === 0 && !prevButton.classList.contains('hide')) { + prevButton.classList.add('hide'); + } else { prevButton.classList.remove('hide'); } + + // disable next arrow button based on last slide. + if (index === yearSlider.children.length - 1 && !nextButton.classList.contains('hide')) { + nextButton.classList.add('hide'); + } else { nextButton.classList.remove('hide'); } + // Check direction for slide effect const direction = index > activeYearIndex ? 'left' : 'right'; applySlideEffect(index, direction); From c4031d53dc2c94e99b2a6d07a3fa405fb7d6fde2 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Wed, 29 Nov 2023 16:56:31 +0530 Subject: [PATCH 4/8] mouseActivity added to the slider --- blocks/timeline-slide/timeline-slide.js | 57 +++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js index d6ec27de..75ca8dc9 100644 --- a/blocks/timeline-slide/timeline-slide.js +++ b/blocks/timeline-slide/timeline-slide.js @@ -8,6 +8,7 @@ export default function decorate(block) { const prevButton = div({ class: 'button-block' }, div({ class: 'button-prev' })); const buttonContainer = div({ class: 'button-container' }); let activeYearIndex = 0; + let touchStartX = 0; buttonContainer.appendChild(prevButton); buttonContainer.appendChild(nextButton); @@ -39,6 +40,47 @@ export default function decorate(block) { } } + function slideToRightMouse() { + // Calculate the next index + const nextIndex = activeYearIndex + 1; + + if (nextIndex < yearSlider.children.length) { + // Move to the next year and update the active index + yearSlider.children[nextIndex].click(); + // yearSlider.children[activeYearIndex].click(); + activeYearIndex = nextIndex; + // Always show the prev button when moving forward + prevButton.classList.remove('hide'); + translateYearSlider(); + } + + // Hide the next button if we reach the end + if (nextIndex === yearSlider.children.length - 1) { + nextButton.classList.add('hide'); + } + } + + function slideToLeftMouse() { + const prevIndex = activeYearIndex - 1; + + if (prevIndex >= 0) { + // Move to the previous year and update the active index + yearSlider.children[prevIndex].click(); + activeYearIndex = prevIndex; + + // Always show the next button when moving backward + nextButton.classList.remove('hide'); + + // Translate the year slider + translateYearSlider(); + } + + // Hide the prev button if we reach the beginning + if (prevIndex === 0) { + prevButton.classList.add('hide'); + } + } + nextButton.addEventListener('click', () => { // Calculate the next index const nextIndex = activeYearIndex + 1; @@ -91,6 +133,21 @@ export default function decorate(block) { } }); + block.addEventListener('touchstart', (e) => { + touchStartX = e.touches[0].clientX; + }); + + block.addEventListener('touchend', (e) => { + const touchEndX = e.changedTouches[0].clientX; + const deltaX = touchEndX - touchStartX; + // If the touch ends to the right of the starting position, move to the previous slide + if (deltaX < 0) { + slideToRightMouse(); + } else if (deltaX > 0) { + slideToLeftMouse(); + } + }); + block.innerHTML = ''; block.appendChild(yearSlider); contentSliderContainer.appendChild(contentSlider); From a081b525e6886f3e0e3f3dea307d895e42fda138 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Wed, 29 Nov 2023 16:59:57 +0530 Subject: [PATCH 5/8] mouseActivity removed to the slider --- blocks/timeline-slide/timeline-slide.js | 57 ------------------------- 1 file changed, 57 deletions(-) diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js index 75ca8dc9..d6ec27de 100644 --- a/blocks/timeline-slide/timeline-slide.js +++ b/blocks/timeline-slide/timeline-slide.js @@ -8,7 +8,6 @@ export default function decorate(block) { const prevButton = div({ class: 'button-block' }, div({ class: 'button-prev' })); const buttonContainer = div({ class: 'button-container' }); let activeYearIndex = 0; - let touchStartX = 0; buttonContainer.appendChild(prevButton); buttonContainer.appendChild(nextButton); @@ -40,47 +39,6 @@ export default function decorate(block) { } } - function slideToRightMouse() { - // Calculate the next index - const nextIndex = activeYearIndex + 1; - - if (nextIndex < yearSlider.children.length) { - // Move to the next year and update the active index - yearSlider.children[nextIndex].click(); - // yearSlider.children[activeYearIndex].click(); - activeYearIndex = nextIndex; - // Always show the prev button when moving forward - prevButton.classList.remove('hide'); - translateYearSlider(); - } - - // Hide the next button if we reach the end - if (nextIndex === yearSlider.children.length - 1) { - nextButton.classList.add('hide'); - } - } - - function slideToLeftMouse() { - const prevIndex = activeYearIndex - 1; - - if (prevIndex >= 0) { - // Move to the previous year and update the active index - yearSlider.children[prevIndex].click(); - activeYearIndex = prevIndex; - - // Always show the next button when moving backward - nextButton.classList.remove('hide'); - - // Translate the year slider - translateYearSlider(); - } - - // Hide the prev button if we reach the beginning - if (prevIndex === 0) { - prevButton.classList.add('hide'); - } - } - nextButton.addEventListener('click', () => { // Calculate the next index const nextIndex = activeYearIndex + 1; @@ -133,21 +91,6 @@ export default function decorate(block) { } }); - block.addEventListener('touchstart', (e) => { - touchStartX = e.touches[0].clientX; - }); - - block.addEventListener('touchend', (e) => { - const touchEndX = e.changedTouches[0].clientX; - const deltaX = touchEndX - touchStartX; - // If the touch ends to the right of the starting position, move to the previous slide - if (deltaX < 0) { - slideToRightMouse(); - } else if (deltaX > 0) { - slideToLeftMouse(); - } - }); - block.innerHTML = ''; block.appendChild(yearSlider); contentSliderContainer.appendChild(contentSlider); From ca7d0c889e8b1636c43b71b63a06e86882de4971 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Wed, 29 Nov 2023 20:39:38 +0530 Subject: [PATCH 6/8] fixed mouse issues1 --- blocks/timeline-slide/timeline-slide.js | 57 +++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js index d6ec27de..75ca8dc9 100644 --- a/blocks/timeline-slide/timeline-slide.js +++ b/blocks/timeline-slide/timeline-slide.js @@ -8,6 +8,7 @@ export default function decorate(block) { const prevButton = div({ class: 'button-block' }, div({ class: 'button-prev' })); const buttonContainer = div({ class: 'button-container' }); let activeYearIndex = 0; + let touchStartX = 0; buttonContainer.appendChild(prevButton); buttonContainer.appendChild(nextButton); @@ -39,6 +40,47 @@ export default function decorate(block) { } } + function slideToRightMouse() { + // Calculate the next index + const nextIndex = activeYearIndex + 1; + + if (nextIndex < yearSlider.children.length) { + // Move to the next year and update the active index + yearSlider.children[nextIndex].click(); + // yearSlider.children[activeYearIndex].click(); + activeYearIndex = nextIndex; + // Always show the prev button when moving forward + prevButton.classList.remove('hide'); + translateYearSlider(); + } + + // Hide the next button if we reach the end + if (nextIndex === yearSlider.children.length - 1) { + nextButton.classList.add('hide'); + } + } + + function slideToLeftMouse() { + const prevIndex = activeYearIndex - 1; + + if (prevIndex >= 0) { + // Move to the previous year and update the active index + yearSlider.children[prevIndex].click(); + activeYearIndex = prevIndex; + + // Always show the next button when moving backward + nextButton.classList.remove('hide'); + + // Translate the year slider + translateYearSlider(); + } + + // Hide the prev button if we reach the beginning + if (prevIndex === 0) { + prevButton.classList.add('hide'); + } + } + nextButton.addEventListener('click', () => { // Calculate the next index const nextIndex = activeYearIndex + 1; @@ -91,6 +133,21 @@ export default function decorate(block) { } }); + block.addEventListener('touchstart', (e) => { + touchStartX = e.touches[0].clientX; + }); + + block.addEventListener('touchend', (e) => { + const touchEndX = e.changedTouches[0].clientX; + const deltaX = touchEndX - touchStartX; + // If the touch ends to the right of the starting position, move to the previous slide + if (deltaX < 0) { + slideToRightMouse(); + } else if (deltaX > 0) { + slideToLeftMouse(); + } + }); + block.innerHTML = ''; block.appendChild(yearSlider); contentSliderContainer.appendChild(contentSlider); From f9fba32fcfde2f981814deb98233856df4879755 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Wed, 29 Nov 2023 20:43:43 +0530 Subject: [PATCH 7/8] mouse fixes removed due to merge approved --- blocks/timeline-slide/timeline-slide.js | 57 ------------------------- 1 file changed, 57 deletions(-) diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js index 75ca8dc9..d6ec27de 100644 --- a/blocks/timeline-slide/timeline-slide.js +++ b/blocks/timeline-slide/timeline-slide.js @@ -8,7 +8,6 @@ export default function decorate(block) { const prevButton = div({ class: 'button-block' }, div({ class: 'button-prev' })); const buttonContainer = div({ class: 'button-container' }); let activeYearIndex = 0; - let touchStartX = 0; buttonContainer.appendChild(prevButton); buttonContainer.appendChild(nextButton); @@ -40,47 +39,6 @@ export default function decorate(block) { } } - function slideToRightMouse() { - // Calculate the next index - const nextIndex = activeYearIndex + 1; - - if (nextIndex < yearSlider.children.length) { - // Move to the next year and update the active index - yearSlider.children[nextIndex].click(); - // yearSlider.children[activeYearIndex].click(); - activeYearIndex = nextIndex; - // Always show the prev button when moving forward - prevButton.classList.remove('hide'); - translateYearSlider(); - } - - // Hide the next button if we reach the end - if (nextIndex === yearSlider.children.length - 1) { - nextButton.classList.add('hide'); - } - } - - function slideToLeftMouse() { - const prevIndex = activeYearIndex - 1; - - if (prevIndex >= 0) { - // Move to the previous year and update the active index - yearSlider.children[prevIndex].click(); - activeYearIndex = prevIndex; - - // Always show the next button when moving backward - nextButton.classList.remove('hide'); - - // Translate the year slider - translateYearSlider(); - } - - // Hide the prev button if we reach the beginning - if (prevIndex === 0) { - prevButton.classList.add('hide'); - } - } - nextButton.addEventListener('click', () => { // Calculate the next index const nextIndex = activeYearIndex + 1; @@ -133,21 +91,6 @@ export default function decorate(block) { } }); - block.addEventListener('touchstart', (e) => { - touchStartX = e.touches[0].clientX; - }); - - block.addEventListener('touchend', (e) => { - const touchEndX = e.changedTouches[0].clientX; - const deltaX = touchEndX - touchStartX; - // If the touch ends to the right of the starting position, move to the previous slide - if (deltaX < 0) { - slideToRightMouse(); - } else if (deltaX > 0) { - slideToLeftMouse(); - } - }); - block.innerHTML = ''; block.appendChild(yearSlider); contentSliderContainer.appendChild(contentSlider); From 1ebcee8aa0ada406e2bdf68aea218149039acb26 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 30 Nov 2023 10:24:39 +0530 Subject: [PATCH 8/8] Updated the transition css --- blocks/timeline-slide/timeline-slide.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css index 84fe2d18..f4f07c11 100644 --- a/blocks/timeline-slide/timeline-slide.css +++ b/blocks/timeline-slide/timeline-slide.css @@ -13,7 +13,7 @@ overflow: hidden; transform: translate3d(43%, 0, 0); transition: 0.5s all ease-in-out; - transition-duration: 0ms; + transition-duration: 500ms; } .year {