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 / smart-lists / edit.js

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

278 lines 6.8 KB

Raw Download Zip

1	import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
2	import { panelBodyRightIcon, panelBodyTitleIcon } from "../../icons/icons";
3	import { useEffect, useMemo, useRef, useState } from "@wordpress/element";
4	import InspectorControl from "../../components/inspectorControls/inspectorControls";
5	import { getBlockShortName, jsonStringify } from "../shared/helpFn";
6	import Inspector from "./inspect";
7	import { TogglePanelBodyProvider } from "../../context";
8	import dynamicCssFn from "./dynamicCss";
9	import { googleFonts } from "../../controls/controls";
10
11	const SmartListsEdit = ({ attributes, setAttributes, clientId, name, isSelected }) => {
12	const {
13	uniqueId,
14	blockName,
15	listOrientation,
16	iconContentGap,
17	smartListsBg,
18	smartListsRadialShape,
19	smartListsRadialPosition,
20	smartListsHoverRadialShape,
21	smartListsHoverRadialPosition,
22	smartListsBgImage,
23	iconAlignment,
24	smartListsHoverBgImage,
25	smartListsBgImageScale,
26	smartListsBgHoverImageScale,
27	bgImageOverlayEnable,
28	bgImageOverlayColor,
29	bgImageOverlayOpacity,
30	bgImageOverlayHoverEnable,
31	bgImageHoverOverlayOpacity,
32	borderStyle,
33	borderStyleWidth,
34	borderRadius,
35	padding,
36	boxShadowEnable,
37	boxShadow,
38	iconPosition,
39	margin,
40	borderHoverStyleWidth,
41	borderHoverRadius,
42	boxShadowHoverEnable,
43	boxShadowHover,
44	iconBgRadialShape,
45	iconBorderStyle,
46	dividerStyle,
47	dividerWidth,
48	backgroundShape,
49	titleDescriptionGap,
50	titleTypography,
51	titleColor,
52	titleFontSize,
53	titleLineHeight,
54	titleLatterSpacing,
55	iconHorizontalAlignment,
56	titleWordSpacing,
57	descriptionTypography,
58	descriptionColor,
59	descriptionFontSize,
60	descriptionLatterSpacing,
61	descriptionWordSpacing,
62	descriptionLineHeight,
63	iconBgRadialPosition,
64	listsAlignment,
65	iconBg,
66	iconPadding,
67	iconBorderRadius,
68	iconBorderStyleWidth,
69	iconColor,
70	iconHoverBorderStyle,
71	iconHoverBorderRadius,
72	iconHoverBorderStyleWidth,
73	iconBgHoverRadialShape,
74	iconBgHoverRadialPosition,
75	iconBackgroundEnable,
76	dividerColor,
77	spaceBetweenLists,
78	iconVerticalAlignment,
79	hideOnDesktop,
80	hideOnTablet,
81	hideOnMobile,
82	iconSize,
83	iconCustomWidth,
84	iconCustomHeight,
85	advancedAdditionalClass,
86	smartListsLayout,
87	dividerEnable,
88	borderHoverStyle,
89	iconSource,
90	svgIconName,
91	contentAlignment,
92	listItemsWidth,
93	} = attributes;
94
95	const googleFontLists = [titleTypography, descriptionTypography];
96	const containerRef = useRef();
97
98	useEffect(() => {
99	const uniqueId = `sp-smart-post-smart-lists-${clientId?.split("-").pop()}`;
100	setAttributes({ uniqueId: uniqueId });
101	}, [clientId]);
102
103	const googleFontListsEditor = useMemo(() => googleFonts(googleFontLists), googleFontLists);
104
105	useEffect(() => {
106	setAttributes({
107	fontLists: jsonStringify(googleFonts(googleFontLists, "frontend")),
108	});
109	}, googleFontLists);
110
111	const dynamicCssValue = useMemo(
112	() => dynamicCssFn(attributes, "frontend"),
113	[
114	uniqueId,
115	listOrientation,
116	iconContentGap,
117	smartListsBg,
118	smartListsRadialShape,
119	smartListsRadialPosition,
120	smartListsHoverRadialShape,
121	smartListsHoverRadialPosition,
122	smartListsBgImage,
123	iconAlignment,
124	smartListsHoverBgImage,
125	smartListsBgImageScale,
126	smartListsBgHoverImageScale,
127	bgImageOverlayEnable,
128	bgImageOverlayColor,
129	bgImageOverlayOpacity,
130	bgImageOverlayHoverEnable,
131	bgImageHoverOverlayOpacity,
132	borderStyle,
133	borderStyleWidth,
134	borderRadius,
135	padding,
136	boxShadowEnable,
137	boxShadow,
138	margin,
139	borderHoverStyleWidth,
140	borderHoverRadius,
141	boxShadowHoverEnable,
142	boxShadowHover,
143	iconBgRadialShape,
144	iconBorderStyle,
145	dividerStyle,
146	dividerWidth,
147	backgroundShape,
148	titleDescriptionGap,
149	titleTypography,
150	titleColor,
151	titleFontSize,
152	titleLineHeight,
153	titleLatterSpacing,
154	iconHorizontalAlignment,
155	titleWordSpacing,
156	descriptionTypography,
157	descriptionColor,
158	descriptionFontSize,
159	descriptionLatterSpacing,
160	descriptionWordSpacing,
161	descriptionLineHeight,
162	iconBgRadialPosition,
163	listsAlignment,
164	iconBg,
165	iconPadding,
166	iconBorderRadius,
167	iconBorderStyleWidth,
168	iconColor,
169	iconHoverBorderStyle,
170	iconHoverBorderRadius,
171	iconHoverBorderStyleWidth,
172	iconBgHoverRadialShape,
173	iconBgHoverRadialPosition,
174	iconBackgroundEnable,
175	dividerColor,
176	spaceBetweenLists,
177	iconVerticalAlignment,
178	hideOnDesktop,
179	hideOnTablet,
180	hideOnMobile,
181	iconSize,
182	iconCustomWidth,
183	iconCustomHeight,
184	borderHoverStyle,
185	iconSource,
186	svgIconName,
187	iconPosition,
188	contentAlignment,
189	listItemsWidth,
190	]
191	);
192	const blockProps = useBlockProps();
193
194	useEffect(() => {
195	if (!blockName) {
196	setAttributes({
197	blockName: getBlockShortName(name),
198	});
199	}
200	}, []);
201
202	const dividerHideShow = () => {
203	const container = containerRef.current;
204	const horizontalList = container?.classList.contains("sp-list-orientation-horizontal");
205	if (!container && !horizontalList) {
206	return;
207	}
208	const itemsEl = container.querySelectorAll(".wp-block-sp-smart-post-show-smart-list");
209	let currentTop = null;
210	let lastInRow = null;
211	itemsEl?.forEach((element) => {
212	element.classList.add("sp-list-divider");
213	});
214	itemsEl?.forEach((element) => {
215	if (currentTop === null) {
216	currentTop = element.offsetTop;
217	}
218	if (element.offsetTop !== currentTop) {
219	// new row started
220	if (lastInRow) {
221	lastInRow.classList.remove("sp-list-divider");
222	}
223	currentTop = element.offsetTop;
224	}
225	lastInRow = element;
226	});
227	if (lastInRow) {
228	lastInRow.classList.remove("sp-list-divider");
229	}
230	};
231
232	const listContainer = containerRef.current;
233	const totalItems = listContainer?.querySelectorAll(".wp-block-sp-smart-post-show-smart-list");
234	const viewAlign = attributes?.align ? attributes.align : "none";
235
236	useEffect(() => {
237	dividerHideShow();
238	window.addEventListener("resize", dividerHideShow);
239	return () => window.removeEventListener("resize", dividerHideShow);
240	}, [totalItems?.length, listOrientation, isSelected, viewAlign]);
241
242	return (
243	<div {...blockProps}>
244	<style>
245	{googleFontListsEditor}
246	{dynamicCssValue}
247	</style>
248
249	<TogglePanelBodyProvider>
250	<InspectorControl
251	TitleIcon={panelBodyTitleIcon}
252	RightIcon={panelBodyRightIcon}
253	Inspector={Inspector}
254	attributes={attributes}
255	setAttributes={setAttributes}
256	/>
257	</TogglePanelBodyProvider>
258	<ul
259	ref={containerRef}
260	id={uniqueId}
261	className={`sp-smart-post-smart-lists-wrapper ${smartListsLayout} ${dividerEnable ? "divider" : ""} sp-list-orientation-${listOrientation} ${advancedAdditionalClass ? advancedAdditionalClass : ""}`}
262	>
263	<InnerBlocks
264	__experimentalCaptureToolbars={false}
265	allowedBlocks={["sp-smart-post-show/smart-list"]}
266	template={[
267	["sp-smart-post-show/smart-list"],
268	["sp-smart-post-show/smart-list"],
269	["sp-smart-post-show/smart-list"],
270	]}
271	/>
272	</ul>
273	</div>
274	);
275	};
276
277	export default SmartListsEdit;
278