1document.addEventListener('DOMContentLoaded', function () { 2 let swiperInstance = null; 3 4 function initFeedLayout() { 5 const isMobile = window.innerWidth < 1025; 6 const feedWrapper = document.querySelector('.dlInstaFeedWrapper'); 7 const feedGrid = feedWrapper?.querySelector('.dlInstaFeedGrid'); 8 const scrollWrapper = feedWrapper?.querySelector('.dlInstaFeedScrollWrapper'); 9 const loadMoreBtn = feedWrapper?.querySelector('.dlLoadMoreButton'); 10 11 if (!feedWrapper || !feedGrid || !scrollWrapper) return; 12 13 const maxItems = parseInt(feedWrapper.dataset.maxItems || '12', 10); 14 let allItems = Array.from(scrollWrapper.querySelectorAll('.dlInstaFeedItem')); 15 16 // Apply JS-side max limit 17 allItems = allItems.slice(0, maxItems); 18 19 // Reset states 20 feedGrid.classList.remove('swiper-container'); 21 scrollWrapper.classList.remove('swiper-wrapper'); 22 allItems.forEach(item => { 23 item.classList.remove('swiper-slide', 'visible'); 24 item.classList.add('hidden'); 25 }); 26 27 if (swiperInstance) { 28 swiperInstance.destroy(true, true); 29 swiperInstance = null; 30 } 31 32 // === MOBILE VIEW === 33 if (isMobile) { 34 feedGrid.classList.add('swiper-container'); 35 scrollWrapper.classList.add('swiper-wrapper'); 36 37 allItems.forEach(item => { 38 item.classList.add('swiper-slide'); 39 item.classList.remove('hidden'); 40 }); 41 42 swiperInstance = new Swiper(feedGrid, { 43 slidesPerView: 1.15, 44 spaceBetween: 25, 45 loop: false, 46 grabCursor: true, 47 speed: 600, 48 effect: 'slide', 49 breakpoints: { 50 640: { 51 slidesPerView: 2.1, 52 spaceBetween: 30, 53 }, 54 1024: { 55 slidesPerView: 3.1, 56 spaceBetween: 30, 57 } 58 } 59 }); 60 61 if (loadMoreBtn) { 62 loadMoreBtn.style.display = 'none'; 63 } 64 65 // === DESKTOP/TABLET VIEW === 66 } else { 67 function getItemsToShow() { 68 const width = window.innerWidth; 69 if (width >= 1201) return 4; 70 if (width >= 1025) return 3; 71 return 2; 72 } 73 74 function revealItem(item, delay = 0) { 75 setTimeout(() => { 76 item.classList.remove('hidden'); 77 // Force reflow 78 void item.offsetWidth; 79 item.classList.add('visible'); 80 }, delay); 81 } 82 83 const initialToShow = getItemsToShow(); 84 allItems.slice(0, initialToShow).forEach(revealItem); 85 86 if (loadMoreBtn) { 87 loadMoreBtn.style.display = 'inline-block'; 88 loadMoreBtn.classList.remove('disabled'); 89 90 loadMoreBtn.onclick = function (e) { 91 e.preventDefault(); 92 93 const itemsToShow = getItemsToShow(); 94 const hiddenItems = scrollWrapper.querySelectorAll('.dlInstaFeedItem.hidden'); 95 const nextItems = Array.from(hiddenItems).slice(0, itemsToShow); 96 97 nextItems.forEach((item, index) => { 98 revealItem(item, index * 100); // 100ms stagger 99 }); 100 101 if (scrollWrapper.querySelectorAll('.dlInstaFeedItem.hidden').length === 0) { 102 loadMoreBtn.classList.add('disabled'); 103 } 104 }; 105 } 106 } 107 } 108 109 // Initial load 110 initFeedLayout(); 111 112 // Re-run on window resize with debounce 113 let resizeTimer; 114 window.addEventListener('resize', function () { 115 clearTimeout(resizeTimer); 116 resizeTimer = setTimeout(initFeedLayout, 200); 117 }); 118 119 120 121 // animation 122 // const section = document.querySelector(".dlInstaFeedScrollWrapper"); // or use ".dlInstaFeedGrid" if that's your main section 123 // const content = document.querySelector(".dl-social-feed-content"); 124 // const items = document.querySelectorAll(".dlInstaFeedItem.visible");
125 // const loadMoreBtnWrapper = document.querySelector(".dlInstaFeedButtonWrapper"); 126 127 // if (!section) return; 128 129 // section.classList.remove('dl-slider-loading'); 130 // section.classList.add('dl-slider-loaded'); 131 132 // const observer = new IntersectionObserver(entries => { 133 // entries.forEach(entry => { 134 // if (entry.isIntersecting) { 135 // // Add .in-view to all visible items at once 136 // items.forEach(item => { 137 // item.classList.add('in-view'); 138 // }); 139 140 // content.classList.add('in-view'); 141 142 // if (loadMoreBtnWrapper) { 143 // setTimeout(() => { 144 // loadMoreBtnWrapper.classList.add('in-view'); 145 // }, 400); // delay in milliseconds (1s) 146 // } 147 148 // // Optional: stop observing after first trigger 149 // observer.unobserve(entry.target); 150 // } 151 // }); 152 // }, { threshold: 1.0 }); 153 154 // observer.observe(section); 155 156 157 // animation 158 const section = document.querySelector(".dlInstaFeedScrollWrapper"); 159 // const content = document.querySelector(".dl-social-feed-content"); 160 // const loadMoreBtnWrapper = document.querySelector(".dlInstaFeedButtonWrapper"); 161 162 if (!section) return; 163 164 section.classList.remove('dl-slider-loading'); 165 section.classList.add('dl-slider-loaded'); 166 section.style.opacity = ''; 167 section.style.visibility = ''; 168 169 // const observer = new IntersectionObserver(entries => { 170 // entries.forEach(entry => { 171 // if (entry.isIntersecting) { 172 // // Get all currently visible items dynamically 173 // const visibleItems = section.querySelectorAll('.dlInstaFeedItem.visible'); 174 175 // visibleItems.forEach(item => { 176 // item.classList.add('in-view'); 177 // }); 178 179 // content?.classList.add('in-view'); 180 181 // if (loadMoreBtnWrapper) { 182 // setTimeout(() => { 183 // loadMoreBtnWrapper.classList.add('in-view'); 184 // }, 400); 185 // } 186 187 // // Optional: stop observing 188 // observer.unobserve(entry.target); 189 // } 190 // }); 191 // }, { threshold: 0.4 }); 192 193 // observer.observe(section); 194 195 196 197}); 198 199
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.