Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8

post-carousel / src / blocks / post-slider / render.js

render.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/post-slider/render.js

232 lines 6.9 KB

Raw Download Zip

1	import { Fragment, useEffect, useState } from "@wordpress/element";
2	import { buildFontClasses, paginationDotType, useDeviceType } from "../../controls/controls";
3	import { Swiper, SwiperSlide } from "swiper/react";
4	import {
5	Autoplay,
6	EffectCoverflow,
7	EffectCube,
8	EffectFade,
9	EffectFlip,
10	FreeMode,
11	Keyboard,
12	Mousewheel,
13	Navigation,
14	Pagination,
15	Scrollbar,
16	} from "swiper/modules";
17	import { SwiperNavButton, SwiperPagination } from "../shared/templates/templates-parts/templates-parts";
18	import { useRef } from "@wordpress/element";
19	import classNames from "classnames";
20	import TemplateOne from "../shared/templates/templateCards/templateOne";
21
22	const Render = ({ attributes, posts, swiperKey = "", pageType = "frontend" }) => {
23	const {
24	// dynamicClassNames,
25	postSliderHoverPause,
26	carouselArrowStyle,
27	// postSliderNavArrow,
28	carouselPaginationStyle,
29	carouselAutoPlay,
30	carouselAutoPlayDelay,
31	carouselDirection,
32	carouselSpeed,
33	postSliderAnimationEffect,
34	postSliderTabKeyNav,
35	postSliderMouseWheel,
36	postSliderFreeScroll,
37	postSliderHeight,
38	// postSliderPaginationDots,
39	postSliderLayout,
40	postSliderSlideScroll,
41	contentVerticalPosition,
42	contentHorizontalPosition,
43	infiniteLoop,
44	imageHeight,
45	navArrowVisibilityOnHover,
46	catTabCategoryPosition,
47	carouselNavArrow,
48	carouselPaginationDot,
49	} = attributes;
50
51	const deviceType = useDeviceType();
52	const swiperNevNextRef = useRef(null);
53	const swiperNevPrevRef = useRef(null);
54	const swiperDotsRef = useRef(null);
55	const containerRef = useRef(null);
56
57	const postSliderSlidePerGroups = postSliderSlideScroll?.device?.[deviceType];
58
59	const paginationDotStyle = paginationDotType(swiperDotsRef, carouselPaginationStyle);
60
61	const bgPosition = !["post-slider-layout-four", "post-slider-layout-five"].includes(postSliderLayout)
62	? "center"
63	: "";
64	const backgroundSize = ["post-slider-layout-four", "post-slider-layout-five"].includes(postSliderLayout)
65	? `100% ${
66	imageHeight.device?.[deviceType]
67	? imageHeight.device?.[deviceType] + imageHeight.unit?.[deviceType]
68	: "100%"
69	}`
70	: "cover";
71
72	let contentAreaPositionClassName = "";
73	if (
74	[
75	"post-slider-layout-one",
76	"post-slider-layout-two",
77	// 'post-slider-layout-three',
78	"post-slider-layout-four",
79	].includes(postSliderLayout)
80	) {
81	contentAreaPositionClassName = " v-" + contentVerticalPosition;
82	}
83	// Content Area Horizontal Position ClassName
84	if (["post-slider-layout-four", "post-slider-layout-five"].includes(postSliderLayout)) {
85	contentAreaPositionClassName = contentAreaPositionClassName + " h-" + contentHorizontalPosition;
86	}
87	const cardHeightClass = classNames(buildFontClasses("height", postSliderHeight));
88	const contentLeftRight =
89	"post-slider-layout-five" === postSliderLayout ? ` content-${contentHorizontalPosition}` : "";
90	const [selectedPostId, setSelectedPostId] = useState(null);
91
92	useEffect(() => {
93	const handleClickOutside = (event) => {
94	if (containerRef.current && !containerRef.current.contains(event.target)) {
95	setSelectedPostId(null);
96	}
97	};
98
99	document.addEventListener("mousedown", handleClickOutside);
100	return () => document.removeEventListener("mousedown", handleClickOutside);
101	}, []);
102
103	return (
104	<div
105	className={`sp-smart-post-block-wrapper sp-smart-post-slider sp-smart-md-10px ${postSliderLayout} sp-cat-position-${catTabCategoryPosition}`}
106	ref={containerRef}
107	>
108	{posts?.length > 0 && (
109	<Fragment key={swiperKey}>
110	<Swiper
111	slidesPerView={1}
112	simulateTouch={"editor" === pageType ? false : true}
113	spaceBetween={0}
114	navigation={{
115	nextEl: swiperNevNextRef.current,
116	prevEl: swiperNevPrevRef.current,
117	}}
118	// Pagination apply if not scrollbar.
119	pagination={paginationDotStyle}
120	scrollbar={carouselPaginationStyle === "scrollbar" ? { draggable: true } : false}
121	loop={!infiniteLoop \|\| "scrollbar" === carouselPaginationStyle ? false : true}
122	slidesPerGroup={Math.min(postSliderSlidePerGroups, 10)}
123	autoplay={
124	carouselAutoPlay && {
125	delay: carouselAutoPlayDelay?.value,
126	disableOnInteraction: false,
127	reverseDirection: carouselDirection === "left_to_right" ? true : false,
128	pauseOnMouseEnter: postSliderHoverPause,
129	}
130	}
131	speed={carouselSpeed?.value}
132	touchStartPreventDefault={false}
133	modules={[
134	Navigation,
135	Pagination,
136	Scrollbar,
137	Autoplay,
138	Keyboard,
139	Mousewheel,
140	EffectFade,
141	EffectCoverflow,
142	EffectFlip,
143	EffectCube,
144	FreeMode,
145	]}
146	className={`sp-swiper-${postSliderAnimationEffect} sp-smart-post-swiper ${postSliderLayout} sp-smart-post-background-layout${contentLeftRight}`}
147	effect={postSliderAnimationEffect}
148	cubeEffect={
149	postSliderAnimationEffect === "cube"
150	? {
151	shadow: true,
152	slideShadows: true,
153	shadowOffset: 20,
154	shadowScale: 0.94,
155	}
156	: false
157	}
158	coverflowEffect={
159	postSliderAnimationEffect === "coverflow"
160	? {
161	rotate: 50,
162	stretch: 0,
163	depth: 100,
164	modifier: 1,
165	slideShadows: true,
166	}
167	: false
168	}
169	keyboard={
170	postSliderTabKeyNav
171	? {
172	enabled: true,
173	onlyInViewport: true,
174	}
175	: false
176	}
177	mousewheel={postSliderMouseWheel}
178	freeMode={postSliderFreeScroll \|\| false}
179	direction={postSliderLayout === "post-slider-layout-two" ? "vertical" : "horizontal"}
180	>
181	{posts?.map((post, i) => {
182	return (
183	<SwiperSlide key={i} className={`sp-slide-item`}>
184	<TemplateOne
185	key={post?.post_id}
186	data={post}
187	posts={posts}
188	attributes={attributes}
189	bgPosition={bgPosition}
190	backgroundSize={backgroundSize}
191	horizontalAlign={postSliderLayout === "post-slider-layout-four" ? true : false}
192	contentPosition={contentVerticalPosition}
193	contentHeight={`${
194	postSliderHeight?.device?.[deviceType] +
195	postSliderHeight?.unit?.[deviceType]
196	}`}
197	layoutName={postSliderLayout}
198	HeightClass={cardHeightClass}
199	isSelected={selectedPostId === post?.post_id}
200	onSelect={() => setSelectedPostId(post?.post_id)}
201	/>
202	</SwiperSlide>
203	);
204	})}
205	</Swiper>
206	</Fragment>
207	)}
208	{carouselNavArrow && (
209	<SwiperNavButton
210	style={carouselArrowStyle}
211	swiperNavNextRef={swiperNevNextRef}
212	swiperNavPrevRef={swiperNevPrevRef}
213	navArrow={carouselNavArrow}
214	props={{
215	// dynamicClassNames,
216	navArrowVisibilityOnHover,
217	}}
218	/>
219	)}
220	{carouselPaginationDot && carouselPaginationStyle !== "scrollbar" && (
221	<SwiperPagination
222	swiperDotsRef={swiperDotsRef}
223	bulletStyle={carouselPaginationStyle}
224	vertical={postSliderLayout === "post-slider-layout-two"}
225	/>
226	)}
227	</div>
228	);
229	};
230
231	export default Render;
232