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-two / 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-two/render.js

197 lines 5.8 KB

Raw Download Zip

1	import { Fragment, useEffect, useState, useRef } 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 classNames from "classnames";
19	import TemplateOne from "../shared/templates/templateCards/templateOne";
20	import { priceLink, ProTopBar } from "../shared/helpFn";
21	import { blockPreviewPanelLink } from "../../controls/constants";
22
23	const Render = ({ attributes, posts, swiperKey = "", pageType = "frontend" }) => {
24	const {
25	postSliderTwoLayout,
26	carouselAutoPlay,
27	carouselAutoPlayDelay,
28	carouselPaginationStyle,
29	infiniteLoop,
30	postSliderTwoSlideToScroll,
31	carouselDirection,
32	carouselPauseOnHover,
33	carouselSpeed,
34	postSliderTwoAnimationEffect,
35	postSliderTwoMouseWheelControl,
36	postSliderTwoFreeScrollMode,
37	postSliderTwoTabKeyNavigation,
38	// postSliderTwoNavArrow,
39	postSliderTwoHeight,
40	carouselArrowStyle,
41	// postSliderTwoPaginationDot,
42	dynamicClassNames,
43	navArrowVisibilityOnHover,
44	catTabCategoryPosition,
45	contentHorizontalPosition,
46	contentVerticalPosition,
47	carouselNavArrow,
48	carouselPaginationDot,
49	blockName
50	} = attributes;
51
52	const deviceType = useDeviceType();
53	const swiperNevNextRef = useRef(null);
54	const swiperNevPrevRef = useRef(null);
55	const swiperDotsRef = useRef(null);
56	const containerRef = useRef(null);
57
58	const paginationDotStyle = paginationDotType(swiperDotsRef, carouselPaginationStyle);
59	const postSliderSlidePerGroups = postSliderTwoSlideToScroll?.device?.[deviceType];
60	const cardHeightClass = classNames(buildFontClasses("height", postSliderTwoHeight));
61	const contentPosition = `sp-h-${contentHorizontalPosition} sp-v-${contentVerticalPosition}`;
62	const [selectedPostId, setSelectedPostId] = useState(null);
63
64	useEffect(() => {
65	const handleClickOutside = (event) => {
66	if (containerRef.current && !containerRef.current.contains(event.target)) {
67	setSelectedPostId(null);
68	}
69	};
70
71	document.addEventListener("mousedown", handleClickOutside);
72	return () => document.removeEventListener("mousedown", handleClickOutside);
73	}, []);
74
75	return (
76	<>
77	<ProTopBar
78	blockName={blockName}
79	title="Post Slider 02"
80	/>
81	<div
82	className={`sp-smart-post-block-wrapper sp-smart-post-slider-two sp-smart-md-10px sp-cat-position-${catTabCategoryPosition} ${contentPosition}`}
83	ref={containerRef}
84	>
85	{posts?.length > 0 && (
86	<Fragment key={swiperKey}>
87	<Swiper
88	slidesPerView={1}
89	simulateTouch={"editor" === pageType ? false : true}
90	spaceBetween={postSliderTwoAnimationEffect === "cube" ? 0 : 10}
91	navigation={{
92	nextEl: swiperNevNextRef.current,
93	prevEl: swiperNevPrevRef.current,
94	}}
95	// Pagination apply if not scrollbar.
96	pagination={paginationDotStyle}
97	scrollbar={carouselPaginationStyle === "scrollbar" ? { draggable: true } : false}
98	loop={!infiniteLoop \|\| "scrollbar" === carouselPaginationStyle ? false : true}
99	slidesPerGroup={Math.min(postSliderSlidePerGroups, 10)}
100	autoplay={
101	carouselAutoPlay && {
102	delay: carouselAutoPlayDelay?.value,
103	disableOnInteraction: false,
104	reverseDirection: carouselDirection === "left_to_right" ? true : false,
105	pauseOnMouseEnter: carouselPauseOnHover,
106	}
107	}
108	speed={carouselSpeed?.value}
109	touchStartPreventDefault={false}
110	modules={[
111	Navigation,
112	Pagination,
113	Scrollbar,
114	Autoplay,
115	Keyboard,
116	Mousewheel,
117	EffectFade,
118	EffectCoverflow,
119	EffectFlip,
120	EffectCube,
121	FreeMode,
122	]}
123	className={`sp-swiper-${postSliderTwoAnimationEffect} sp-smart-post-swiper ${postSliderTwoLayout} sp-smart-post-background-layout`}
124	effect={postSliderTwoAnimationEffect}
125	cubeEffect={
126	postSliderTwoAnimationEffect === "cube"
127	? {
128	shadow: true,
129	slideShadows: true,
130	shadowOffset: 20,
131	shadowScale: 0.94,
132	}
133	: false
134	}
135	coverflowEffect={
136	postSliderTwoAnimationEffect === "coverflow"
137	? {
138	rotate: 50,
139	stretch: 0,
140	depth: 100,
141	modifier: 1,
142	slideShadows: true,
143	}
144	: false
145	}
146	keyboard={
147	postSliderTwoTabKeyNavigation
148	? {
149	enabled: true,
150	onlyInViewport: true,
151	}
152	: false
153	}
154	mousewheel={postSliderTwoMouseWheelControl}
155	freeMode={postSliderTwoFreeScrollMode \|\| false}
156	direction={"horizontal"}
157	>
158	{posts?.map((post, i) => {
159	return (
160	<SwiperSlide key={i} className="sp-slide-item">
161	<TemplateOne
162	key={post.post_id}
163	posts={posts}
164	data={post}
165	attributes={attributes}
166	HeightClass={cardHeightClass}
167	isSelected={selectedPostId === post?.post_id}
168	onSelect={() => setSelectedPostId(post?.post_id)}
169	/>
170	</SwiperSlide>
171	);
172	})}
173	</Swiper>
174	</Fragment>
175	)}
176	{carouselNavArrow && (
177	<SwiperNavButton
178	style={carouselArrowStyle}
179	swiperNavNextRef={swiperNevNextRef}
180	swiperNavPrevRef={swiperNevPrevRef}
181	navArrow={carouselNavArrow}
182	props={{
183	dynamicClassNames: dynamicClassNames,
184	navArrowVisibilityOnHover: navArrowVisibilityOnHover,
185	}}
186	/>
187	)}
188	{carouselPaginationDot && carouselPaginationStyle !== "scrollbar" && (
189	<SwiperPagination swiperDotsRef={swiperDotsRef} bulletStyle={carouselPaginationStyle} />
190	)}
191	</div>
192	</>
193	);
194	};
195
196	export default Render;
197