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 / news-ticker / edit.js

edit.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/news-ticker/edit.js

166 lines 4.5 KB

Raw Download Zip

1	import { useBlockProps } from "@wordpress/block-editor";
2	import { useEffect, useRef, useState, useMemo } from "@wordpress/element";
3	import InspectorControl from "../../components/inspectorControls/inspectorControls";
4	import { panelBodyTitleIcon, panelBodyRightIcon } from "../../icons/icons";
5	import Inspector from "./inspect";
6	import dynamicCssFn from "./dynamicCss";
7	import { inArray, useDeviceType } from "../../controls/controls";
8	import { EditorWrapper } from "../shared/wrapper";
9	import Render from "./render";
10	import { TogglePanelBodyProvider } from "../../context";
11	import { compose } from "@wordpress/compose";
12	import addInitialAttr from "../shared/addInitialAttr";
13
14	const NewsTickerEdit = ({ attributes, setAttributes, isSelected }) => {
15	const [posts, setPosts] = useState([]);
16	const {
17	blockName,
18	carouselPaginationStyle,
19	carouselStyle,
20	carouselColumn,
21	carouselAutoPlay,
22	carouselAutoPlayDelay,
23	slideToScroll,
24	carouselPauseOnHover,
25	carouselAnimationEffect,
26	carouselTabKeyNav,
27	carouselMouseWheelControl,
28	carouselNavArrow,
29	carouselPaginationDot,
30	carouselAdaptiveHeight,
31	imageOverlayType,
32	equalHeightEnable,
33	infiniteLoop,
34	fontListsEditPage,
35	customCss,
36	tickerTitleGap,
37	carouselDirection,
38	carouselTickerSpeed,
39	newsTickerItemToDisplay,
40	uniqueId,
41	additionalCssClass,
42	} = attributes;
43
44	const deviceType = useDeviceType();
45
46	const blockProps = useBlockProps({
47	className: additionalCssClass.replace(/\s+/g, " ").trim(),
48	});
49
50	useEffect(() => {
51	setAttributes({
52	carouselData: JSON.stringify(swiperOptions),
53	});
54	}, [
55	newsTickerItemToDisplay,
56	carouselAutoPlay,
57	carouselAutoPlayDelay,
58	carouselPauseOnHover,
59	carouselAnimationEffect,
60	tickerTitleGap,
61	carouselDirection,
62	carouselTickerSpeed,
63	uniqueId,
64	]);
65
66	const [carouselAutoPlaySpeed, setCarouselAutoPlaySpeed] = useState({
67	value: 2000,
68	unit: "ms",
69	});
70
71	const [swiperRand, setSwiperRand] = useState(1);
72	const firstLoad = useRef(true);
73
74	useEffect(() => {
75	setAttributes({ currentScreen: deviceType });
76	}, [deviceType]);
77
78	useEffect(() => {
79	if (carouselAutoPlayDelay.unit === "s") {
80	setCarouselAutoPlaySpeed(carouselAutoPlayDelay.value * 1000);
81	} else {
82	setCarouselAutoPlaySpeed(carouselAutoPlayDelay);
83	}
84	}, [carouselAutoPlayDelay]);
85
86	const blockStyling = useMemo(() => dynamicCssFn(attributes, "frontend", deviceType), [attributes, deviceType]);
87	useEffect(() => {
88	if (firstLoad.current) {
89	firstLoad.current = false;
90	} else {
91	if (inArray(["ticker", "multi_row"], carouselStyle)) {
92	setAttributes({
93	carouselAdaptiveHeight: false,
94	});
95	}
96	}
97	}, [blockName, carouselPaginationStyle, carouselStyle]);
98
99	useEffect(() => {
100	setSwiperRand(Math.floor(Math.random() * 10));
101	}, [
102	carouselPaginationStyle,
103	carouselAnimationEffect,
104	carouselTabKeyNav,
105	carouselNavArrow,
106	carouselPaginationDot,
107	carouselAutoPlay,
108	carouselPauseOnHover,
109	carouselMouseWheelControl,
110	carouselAdaptiveHeight,
111	carouselColumn,
112	slideToScroll,
113	imageOverlayType,
114	equalHeightEnable,
115	infiniteLoop,
116	posts,
117	carouselStyle,
118	]);
119
120	const swiperOptions = {
121	slidesPerView: newsTickerItemToDisplay.device?.[deviceType],
122	simulateTouch: false,
123	navigation: {
124	nextEl: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn.btn-next`,
125	prevEl: `#${uniqueId} .sp-smart-post-swiper-nav-arrow-btn.btn-prev`,
126	enabled: true,
127	},
128	grabCursor: false,
129	loop: true,
130	autoplay: carouselAutoPlay && {
131	delay: carouselAutoPlayDelay?.value,
132	disableOnInteraction: false,
133	pauseOnMouseEnter: carouselPauseOnHover,
134	reverseDirection: ["left_to_right", "top_to_bottom"].includes(carouselDirection) ? true : false,
135	},
136	speed: carouselTickerSpeed?.value,
137	spaceBetween: carouselAnimationEffect === "cube" ? 0 : tickerTitleGap.device?.[deviceType] \|\| 24,
138	effect: carouselAnimationEffect,
139	direction: ["top_to_bottom", "bottom_to_top"].includes(carouselDirection) ? "vertical" : "horizontal",
140	};
141
142	return (
143	<div {...blockProps}>
144	<style>
145	{fontListsEditPage}
146	{blockStyling}
147	{customCss}
148	</style>
149	<TogglePanelBodyProvider>
150	<InspectorControl
151	TitleIcon={panelBodyTitleIcon}
152	RightIcon={panelBodyRightIcon}
153	attributes={attributes}
154	setAttributes={setAttributes}
155	Inspector={Inspector}
156	isSelected={isSelected}
157	/>
158	<EditorWrapper setPosts={setPosts} setAttributes={setAttributes} blockType={"builder-block"}>
159	<Render pageType="editor" attributes={attributes} posts={posts} swiperKey={swiperRand} />
160	</EditorWrapper>
161	</TogglePanelBodyProvider>
162	</div>
163	);
164	};
165	export default compose(addInitialAttr)(NewsTickerEdit);
166