Skip to content

Commit 6a6d3bb

Browse files
hoangsonwwhoangsonww
committed
Enhance spotlight carousel functionality with scroll position persistence and improved navigation in favorites.js, index.js, movie-timeline.js, search.js, and related styles
1 parent 06b72f2 commit 6a6d3bb

5 files changed

Lines changed: 119 additions & 16 deletions

File tree

‎MovieVerse-Frontend/js/favorites.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1421,6 +1421,10 @@ function initSpotlightCarousel(mainElement) {
14211421
if (!mainElement) return;
14221422

14231423
const cards = getSpotlightCards(mainElement);
1424+
const existingTrack = mainElement.querySelector('.spotlight-track');
1425+
const storedScrollLeft = Number(mainElement.dataset.spotlightScrollLeft || (existingTrack && existingTrack.dataset.spotlightScrollLeft) || 0);
1426+
const storedIndex = Number(mainElement.dataset.spotlightIndex || 0);
1427+
const hasStoredScroll = mainElement.dataset.spotlightHasScroll === 'true';
14241428
if (!isSpotlightMode() || cards.length === 0) {
14251429
mainElement.classList.remove('spotlight-carousel');
14261430
cards.forEach(card => card.classList.remove('spotlight-active', 'spotlight-dim'));
@@ -1447,6 +1451,9 @@ function initSpotlightCarousel(mainElement) {
14471451
if (scrollTicking) return;
14481452
scrollTicking = true;
14491453
requestAnimationFrame(() => {
1454+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
1455+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
1456+
mainElement.dataset.spotlightHasScroll = 'true';
14501457
updateSpotlightState(mainElement);
14511458
updateScrollProgress(mainElement);
14521459
updateSpotlightNavVisibility(mainElement);
@@ -1478,10 +1485,27 @@ function initSpotlightCarousel(mainElement) {
14781485
mainElement.appendChild(nextButton);
14791486
}
14801487

1481-
const firstCard = cards[0];
1482-
if (firstCard) {
1483-
const targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1484-
track.scrollLeft = Math.max(0, targetLeft);
1488+
if (cards.length) {
1489+
let targetLeft = null;
1490+
if (hasStoredScroll) {
1491+
if (layout === 'left') {
1492+
targetLeft = storedScrollLeft;
1493+
} else if (Number.isFinite(storedIndex) && cards[storedIndex]) {
1494+
targetLeft = cards[storedIndex].offsetLeft - (track.clientWidth - cards[storedIndex].clientWidth) / 2;
1495+
} else {
1496+
targetLeft = storedScrollLeft;
1497+
}
1498+
} else {
1499+
const firstCard = cards[0];
1500+
targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1501+
}
1502+
if (targetLeft !== null) {
1503+
const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
1504+
const clamped = Math.min(maxScroll, Math.max(0, targetLeft));
1505+
track.scrollLeft = clamped;
1506+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
1507+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
1508+
}
14851509
}
14861510

14871511
updateSpotlightState(mainElement);

‎MovieVerse-Frontend/js/movie-timeline.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -656,6 +656,10 @@ function initSpotlightCarousel(mainElement) {
656656
if (!mainElement) return;
657657

658658
const cards = getSpotlightCards(mainElement);
659+
const existingTrack = mainElement.querySelector('.spotlight-track');
660+
const storedScrollLeft = Number(mainElement.dataset.spotlightScrollLeft || (existingTrack && existingTrack.dataset.spotlightScrollLeft) || 0);
661+
const storedIndex = Number(mainElement.dataset.spotlightIndex || 0);
662+
const hasStoredScroll = mainElement.dataset.spotlightHasScroll === 'true';
659663
if (!isSpotlightMode() || cards.length === 0) {
660664
mainElement.classList.remove('spotlight-carousel');
661665
cards.forEach(card => card.classList.remove('spotlight-active', 'spotlight-dim'));
@@ -682,6 +686,9 @@ function initSpotlightCarousel(mainElement) {
682686
if (scrollTicking) return;
683687
scrollTicking = true;
684688
requestAnimationFrame(() => {
689+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
690+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
691+
mainElement.dataset.spotlightHasScroll = 'true';
685692
updateSpotlightState(mainElement);
686693
updateScrollProgress(mainElement);
687694
updateSpotlightNavVisibility(mainElement);
@@ -713,10 +720,27 @@ function initSpotlightCarousel(mainElement) {
713720
mainElement.appendChild(nextButton);
714721
}
715722

716-
const firstCard = cards[0];
717-
if (firstCard) {
718-
const targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
719-
track.scrollLeft = Math.max(0, targetLeft);
723+
if (cards.length) {
724+
let targetLeft = null;
725+
if (hasStoredScroll) {
726+
if (layout === 'left') {
727+
targetLeft = storedScrollLeft;
728+
} else if (Number.isFinite(storedIndex) && cards[storedIndex]) {
729+
targetLeft = cards[storedIndex].offsetLeft - (track.clientWidth - cards[storedIndex].clientWidth) / 2;
730+
} else {
731+
targetLeft = storedScrollLeft;
732+
}
733+
} else {
734+
const firstCard = cards[0];
735+
targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
736+
}
737+
if (targetLeft !== null) {
738+
const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
739+
const clamped = Math.min(maxScroll, Math.max(0, targetLeft));
740+
track.scrollLeft = clamped;
741+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
742+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
743+
}
720744
}
721745

722746
updateSpotlightState(mainElement);

‎MovieVerse-Frontend/js/search.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -957,6 +957,10 @@ function initSpotlightCarousel(mainElement) {
957957
if (!mainElement) return;
958958

959959
const cards = getSpotlightCards(mainElement);
960+
const existingTrack = mainElement.querySelector('.spotlight-track');
961+
const storedScrollLeft = Number(mainElement.dataset.spotlightScrollLeft || (existingTrack && existingTrack.dataset.spotlightScrollLeft) || 0);
962+
const storedIndex = Number(mainElement.dataset.spotlightIndex || 0);
963+
const hasStoredScroll = mainElement.dataset.spotlightHasScroll === 'true';
960964
if (!isSpotlightMode() || cards.length === 0) {
961965
mainElement.classList.remove('spotlight-carousel');
962966
cards.forEach(card => card.classList.remove('spotlight-active', 'spotlight-dim'));
@@ -983,6 +987,9 @@ function initSpotlightCarousel(mainElement) {
983987
if (scrollTicking) return;
984988
scrollTicking = true;
985989
requestAnimationFrame(() => {
990+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
991+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
992+
mainElement.dataset.spotlightHasScroll = 'true';
986993
updateSpotlightState(mainElement);
987994
updateScrollProgress(mainElement);
988995
updateSpotlightNavVisibility(mainElement);
@@ -1014,10 +1021,27 @@ function initSpotlightCarousel(mainElement) {
10141021
mainElement.appendChild(nextButton);
10151022
}
10161023

1017-
const firstCard = cards[0];
1018-
if (firstCard) {
1019-
const targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1020-
track.scrollLeft = Math.max(0, targetLeft);
1024+
if (cards.length) {
1025+
let targetLeft = null;
1026+
if (hasStoredScroll) {
1027+
if (layout === 'left') {
1028+
targetLeft = storedScrollLeft;
1029+
} else if (Number.isFinite(storedIndex) && cards[storedIndex]) {
1030+
targetLeft = cards[storedIndex].offsetLeft - (track.clientWidth - cards[storedIndex].clientWidth) / 2;
1031+
} else {
1032+
targetLeft = storedScrollLeft;
1033+
}
1034+
} else {
1035+
const firstCard = cards[0];
1036+
targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1037+
}
1038+
if (targetLeft !== null) {
1039+
const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
1040+
const clamped = Math.min(maxScroll, Math.max(0, targetLeft));
1041+
track.scrollLeft = clamped;
1042+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
1043+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
1044+
}
10211045
}
10221046

10231047
updateSpotlightState(mainElement);

‎index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,13 @@
643643
}
644644
}
645645

646+
@media (min-width: 767px) and (max-width: 1200px) {
647+
#my-heading {
648+
margin-top: 24px !important;
649+
margin-bottom: -8px !important;
650+
}
651+
}
652+
646653
@keyframes fadeInUp {
647654
0% {
648655
opacity: 0;

‎index.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1048,6 +1048,10 @@ function initSpotlightCarousel(mainElement) {
10481048
if (!mainElement) return;
10491049

10501050
const cards = getSpotlightCards(mainElement);
1051+
const existingTrack = mainElement.querySelector('.spotlight-track');
1052+
const storedScrollLeft = Number(mainElement.dataset.spotlightScrollLeft || (existingTrack && existingTrack.dataset.spotlightScrollLeft) || 0);
1053+
const storedIndex = Number(mainElement.dataset.spotlightIndex || 0);
1054+
const hasStoredScroll = mainElement.dataset.spotlightHasScroll === 'true';
10511055
if (!isSpotlightMode() || cards.length === 0) {
10521056
mainElement.classList.remove('spotlight-carousel');
10531057
cards.forEach(card => card.classList.remove('spotlight-active', 'spotlight-dim'));
@@ -1074,6 +1078,9 @@ function initSpotlightCarousel(mainElement) {
10741078
if (scrollTicking) return;
10751079
scrollTicking = true;
10761080
requestAnimationFrame(() => {
1081+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
1082+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
1083+
mainElement.dataset.spotlightHasScroll = 'true';
10771084
updateSpotlightState(mainElement);
10781085
updateScrollProgress(mainElement);
10791086
updateSpotlightNavVisibility(mainElement);
@@ -1105,10 +1112,27 @@ function initSpotlightCarousel(mainElement) {
11051112
mainElement.appendChild(nextButton);
11061113
}
11071114

1108-
const firstCard = cards[0];
1109-
if (firstCard) {
1110-
const targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1111-
track.scrollLeft = Math.max(0, targetLeft);
1115+
if (cards.length) {
1116+
let targetLeft = null;
1117+
if (hasStoredScroll) {
1118+
if (layout === 'left') {
1119+
targetLeft = storedScrollLeft;
1120+
} else if (Number.isFinite(storedIndex) && cards[storedIndex]) {
1121+
targetLeft = cards[storedIndex].offsetLeft - (track.clientWidth - cards[storedIndex].clientWidth) / 2;
1122+
} else {
1123+
targetLeft = storedScrollLeft;
1124+
}
1125+
} else {
1126+
const firstCard = cards[0];
1127+
targetLeft = layout === 'left' ? 0 : firstCard.offsetLeft - (track.clientWidth - firstCard.clientWidth) / 2;
1128+
}
1129+
if (targetLeft !== null) {
1130+
const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
1131+
const clamped = Math.min(maxScroll, Math.max(0, targetLeft));
1132+
track.scrollLeft = clamped;
1133+
track.dataset.spotlightScrollLeft = String(track.scrollLeft);
1134+
mainElement.dataset.spotlightScrollLeft = String(track.scrollLeft);
1135+
}
11121136
}
11131137

11141138
updateSpotlightState(mainElement);

0 commit comments

Comments
 (0)