| 1 |
import { toggleEqualHeight } from "../shared/helpFn"; |
| 2 |
import TemplateOne from "../shared/templates/templateCards/templateOne"; |
| 3 |
|
| 4 |
import { Swiper, SwiperSlide } from "swiper/react"; |
| 5 |
|
| 6 |
// Import Swiper styles |
| 7 |
import "swiper/css"; |
| 8 |
import "swiper/css/pagination"; |
| 9 |
|
| 10 |
// import required modules |
| 11 |
import { Autoplay, Navigation } from "swiper/modules"; |
| 12 |
import { SwiperNavButton } from "../shared/templates/templates-parts/templates-parts"; |
| 13 |
import { Fragment, useEffect, useRef, useState } from "@wordpress/element"; |
| 14 |
import Marquee from "react-fast-marquee"; |
| 15 |
import { breakpoint } from "../../controls/controls"; |
| 16 |
|
| 17 |
const Render = ({ attributes, posts, page = "frontend" }) => { |
| 18 |
const { |
| 19 |
uniqueId, |
| 20 |
timelineLayout, |
| 21 |
imagePosition, |
| 22 |
equalHeightEnable, |
| 23 |
// postTimelineNavArrow, |
| 24 |
carouselArrowStyle, |
| 25 |
dynamicClassNames, |
| 26 |
postTimelineAutoPlay, |
| 27 |
postTimelineAutoPlayDelay, |
| 28 |
carouselPauseOnHover, |
| 29 |
carouselDirection, |
| 30 |
carouselStyle, |
| 31 |
contentVerticalPosition, |
| 32 |
carouselColumn, |
| 33 |
carouselGap, |
| 34 |
carouselSpeed, |
| 35 |
postTimelineTickerSpeed, |
| 36 |
navArrowVisibilityOnHover, |
| 37 |
catTabCategoryPosition, |
| 38 |
contentOrientation, |
| 39 |
carouselNavArrow, |
| 40 |
align, |
| 41 |
imageFeaturedImg, |
| 42 |
catTabCategoryEnable, |
| 43 |
titleShow, |
| 44 |
excerptShow, |
| 45 |
showReadMoreButton, |
| 46 |
socialShareEnableSocial, |
| 47 |
metaDataArray, |
| 48 |
} = attributes; |
| 49 |
|
| 50 |
const swiperNevNextRef = useRef(null); |
| 51 |
const swiperNevPrevRef = useRef(null); |
| 52 |
const spTickerRef = useRef(null); |
| 53 |
const [getLargeItemHeight, setGetLargeItemHeight] = useState(0); |
| 54 |
const [swiperKeys, setSwiperKeys] = useState(null); |
| 55 |
const deviceType = breakpoint(); |
| 56 |
const [tickerWidth, setTickerWidth] = useState(spTickerRef && spTickerRef.current?.clientWidth); |
| 57 |
// Equalizing the post cards height. |
| 58 |
useEffect(() => { |
| 59 |
setTimeout(() => { |
| 60 |
toggleEqualHeight(uniqueId, equalHeightEnable); |
| 61 |
|
| 62 |
let timelineThreeCardElement = spTickerRef?.current |
| 63 |
? spTickerRef?.current?.querySelectorAll(".sp-smart-post-card") |
| 64 |
: []; |
| 65 |
timelineThreeCardElement = Array.from(timelineThreeCardElement); |
| 66 |
let largeItemHeight = 0; |
| 67 |
timelineThreeCardElement.forEach((element) => { |
| 68 |
if (element && element.clientHeight > largeItemHeight) { |
| 69 |
largeItemHeight = element.clientHeight; |
| 70 |
} |
| 71 |
}); |
| 72 |
if (largeItemHeight) { |
| 73 |
setGetLargeItemHeight(largeItemHeight + 60); |
| 74 |
} |
| 75 |
}, 50); |
| 76 |
}, [ |
| 77 |
equalHeightEnable, |
| 78 |
uniqueId, |
| 79 |
posts, |
| 80 |
align, |
| 81 |
imageFeaturedImg, |
| 82 |
catTabCategoryEnable, |
| 83 |
titleShow, |
| 84 |
excerptShow, |
| 85 |
showReadMoreButton, |
| 86 |
socialShareEnableSocial, |
| 87 |
metaDataArray, |
| 88 |
]); |
| 89 |
|
| 90 |
useEffect(() => { |
| 91 |
setSwiperKeys(Math.random(Math.random * 10)); |
| 92 |
}, [postTimelineAutoPlay]); |
| 93 |
const equalHeightClass = equalHeightEnable ? "sp-equal-height-wrapper" : ""; |
| 94 |
const [selectedPostId, setSelectedPostId] = useState(null); |
| 95 |
|
| 96 |
useEffect(() => { |
| 97 |
const handleClickOutside = (event) => { |
| 98 |
if (spTickerRef.current && !spTickerRef.current.contains(event.target)) { |
| 99 |
setSelectedPostId(null); |
| 100 |
} |
| 101 |
}; |
| 102 |
|
| 103 |
document.addEventListener("mousedown", handleClickOutside); |
| 104 |
return () => document.removeEventListener("mousedown", handleClickOutside); |
| 105 |
}, []); |
| 106 |
|
| 107 |
useEffect(() => { |
| 108 |
// Template Card Width for Ticker layout on conditional device type. |
| 109 |
const timeOut = setTimeout(() => { |
| 110 |
let newData = spTickerRef && spTickerRef.current?.clientWidth; |
| 111 |
setTickerWidth(newData); |
| 112 |
newData = newData && newData / carouselColumn.device?.[deviceType] - 20; |
| 113 |
|
| 114 |
setTickerWidth(newData); |
| 115 |
}, 0); |
| 116 |
return () => clearTimeout(timeOut); |
| 117 |
}, [deviceType, carouselColumn]); |
| 118 |
|
| 119 |
return ( |
| 120 |
<div |
| 121 |
className={`post-timeline-three ${timelineLayout} sp-cat-position-${catTabCategoryPosition} ${contentOrientation}`} |
| 122 |
> |
| 123 |
<style> |
| 124 |
{` |
| 125 |
#${uniqueId} .timeline-three-layout-two .swiper-wrapper, |
| 126 |
#${uniqueId} .timeline-three-layout-two .sp-smart-post-timeline-three-container .sp-smart-post-timeline-border { |
| 127 |
margin-top: ${posts?.length > 1 ? `${getLargeItemHeight}px` : 0} ; |
| 128 |
} |
| 129 |
#${uniqueId} .timeline-three-layout-two .sp-smart-post-timeline-three-post-container:nth-child(odd) { |
| 130 |
margin-top: -5px; |
| 131 |
}#${uniqueId} .timeline-three-layout-two .sp-smart-post-timeline-three-post-container:nth-child(even) { |
| 132 |
top: calc(-100% - 38px); |
| 133 |
}`} |
| 134 |
</style> |
| 135 |
<div |
| 136 |
className={`sp-smart-post-timeline-three-container ${timelineLayout} sp-smart-post-swiper ${equalHeightClass}`} |
| 137 |
ref={spTickerRef} |
| 138 |
> |
| 139 |
<div className="sp-smart-post-timeline-border"></div> |
| 140 |
{(carouselStyle === "standard" || timelineLayout === "timeline-three-layout-two") && |
| 141 |
posts?.length > 0 ? ( |
| 142 |
<Fragment key={swiperKeys}> |
| 143 |
<Swiper |
| 144 |
pagination={false} |
| 145 |
simulateTouch={"editor" === page ? false : true} |
| 146 |
slidesPerView={ |
| 147 |
posts?.length > carouselColumn.device?.[deviceType] |
| 148 |
? carouselColumn.device?.[deviceType] || 3 |
| 149 |
: posts?.length |
| 150 |
} |
| 151 |
spaceBetween={carouselGap.device?.[deviceType] || carouselGap.device?.Desktop} |
| 152 |
speed={carouselSpeed.value} |
| 153 |
navigation={{ |
| 154 |
nextEl: swiperNevNextRef.current, |
| 155 |
prevEl: swiperNevPrevRef.current, |
| 156 |
enabled: true, |
| 157 |
}} |
| 158 |
autoplay={ |
| 159 |
postTimelineAutoPlay && { |
| 160 |
delay: postTimelineAutoPlayDelay?.value, |
| 161 |
disableOnInteraction: false, |
| 162 |
pauseOnMouseEnter: carouselPauseOnHover, |
| 163 |
reverseDirection: carouselDirection === "left_to_right" ? true : false, |
| 164 |
} |
| 165 |
} |
| 166 |
touchStartPreventDefault={false} |
| 167 |
modules={[Navigation, Autoplay]} |
| 168 |
> |
| 169 |
{posts?.map((post) => { |
| 170 |
return ( |
| 171 |
<SwiperSlide |
| 172 |
key={post?.post_id} |
| 173 |
className="sp-smart-post-timeline-three-post-container" |
| 174 |
> |
| 175 |
{/* { imagePosition === 'background' ? ( |
| 176 |
<TemplateTwo |
| 177 |
key={ post?.post_id } |
| 178 |
data={ post } |
| 179 |
posts={ posts } |
| 180 |
attributes={ JSON.stringify( |
| 181 |
attributes |
| 182 |
) } |
| 183 |
/> |
| 184 |
) : ( */} |
| 185 |
<TemplateOne |
| 186 |
key={post?.post_id} |
| 187 |
data={post} |
| 188 |
attributes={attributes} |
| 189 |
posts={posts} |
| 190 |
isSelected={selectedPostId === post?.post_id} |
| 191 |
onSelect={() => setSelectedPostId(post?.post_id)} |
| 192 |
/> |
| 193 |
{/* ) } */} |
| 194 |
</SwiperSlide> |
| 195 |
); |
| 196 |
})} |
| 197 |
</Swiper> |
| 198 |
</Fragment> |
| 199 |
) : ( |
| 200 |
<Marquee |
| 201 |
pauseOnHover={carouselPauseOnHover} |
| 202 |
direction={"left_to_right" === carouselDirection ? "right" : "left"} |
| 203 |
speed={(1000 * 250) / postTimelineTickerSpeed.value} |
| 204 |
> |
| 205 |
{posts?.map((data, i) => ( |
| 206 |
<div key={data?.post_id || i} className="sp-smart-post-timeline-three-post-container"> |
| 207 |
{/* { imagePosition === 'background' ? ( |
| 208 |
<TemplateTwo |
| 209 |
data={ data } |
| 210 |
posts={ posts } |
| 211 |
attributes={ JSON.stringify( |
| 212 |
attributes |
| 213 |
) } |
| 214 |
/> |
| 215 |
) : ( */} |
| 216 |
<TemplateOne |
| 217 |
posts={posts} |
| 218 |
data={data} |
| 219 |
attributes={attributes} |
| 220 |
contentPosition={contentVerticalPosition} |
| 221 |
isSelected={selectedPostId === data?.post_id} |
| 222 |
onSelect={() => setSelectedPostId(data?.post_id)} |
| 223 |
tickerWidth={tickerWidth} |
| 224 |
/> |
| 225 |
{/* ) } */} |
| 226 |
</div> |
| 227 |
))} |
| 228 |
</Marquee> |
| 229 |
)} |
| 230 |
</div> |
| 231 |
{carouselNavArrow && (carouselStyle === "standard" || timelineLayout === "timeline-three-layout-two") && ( |
| 232 |
<SwiperNavButton |
| 233 |
style={carouselArrowStyle} |
| 234 |
navArrow={carouselNavArrow} |
| 235 |
props={{ |
| 236 |
dynamicClassNames, |
| 237 |
navArrowVisibilityOnHover, |
| 238 |
}} |
| 239 |
swiperNavNextRef={swiperNevNextRef} |
| 240 |
swiperNavPrevRef={swiperNevPrevRef} |
| 241 |
/> |
| 242 |
)} |
| 243 |
</div> |
| 244 |
); |
| 245 |
}; |
| 246 |
|
| 247 |
export default Render; |
| 248 |
|
