BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / doc-archive-list / src / cssProperties.js

cssProperties.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/doc-archive-list/src/cssProperties.js

265 lines 13.3 KB

Raw Download Zip

1	import { applyFilters } from "@wordpress/hooks";
2	import { addProperty } from "../../../helpers/helper";
3	import * as ARCHIVE_LIST from "./constants";
4	import * as ARCHIVE_LIST_TYPO from "./typographyPrefixConstants";
5	import attributes from "./attributes";
6
7	export default ({ blockId, list_icon, layout }) => {
8	const archiveListSelector = `.${blockId}.betterdocs-content-area .betterdocs-entry-body ul li a`;
9	const archiveListIconSelector = `.${blockId}.betterdocs-content-area .betterdocs-entry-body ul li svg, .${blockId}.betterdocs-content-area .betterdocs-entry-body ul li i, .${blockId}.betterdocs-content-area .betterdocs-entry-body ul li img`;
10	const archiveListDescriptionSelector = `.${blockId}.betterdocs-content-area .betterdocs-entry-title p`;
11	const archiveListHeadingSelector = `.${blockId}.betterdocs-content-area .betterdocs-entry-title .betterdocs-entry-heading`;
12	const archiveListBackgroundWrapper = `.${blockId}.betterdocs-content-area .betterdocs-content-inner-area`;
13	const archiveListBackgroundWrapperLayout3 = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list`;
14	const archiveListBackgroundWrapperLayout2 = `.${blockId}.betterdocs-taxonomy-doc-category .layout-6.betterdocs-category-grid-list-inner-wrapper .betterdocs-body ul li`;
15
16	const archiveListLayoutThreeSelector = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2 a`;
17	const archiveListIconSelectorLayoutThree = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2 span svg`;
18	const archiveListIconOuterSelectorLayoutThree = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2 span`;
19	const archiveListIconSvgSelectorLayoutThree = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2 span svg path`;
20	const archiveListLayoutThreeExcerptSelector = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list p`;
21	const archiveListLastUpdatedSelector = `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list .update-date`;
22	const paginationSelectorOne = `.${blockId} .betterdocs-entry-body .betterdocs-pagination ul li a`;
23	const paginationSelectorTwo = `.${blockId} .betterdocs-pagination ul li a`;
24	const paginationSelectorOneActive = `.${blockId} .betterdocs-pagination ul li.active a`;
25	const paginationRootWrapperOne = `.${blockId} .betterdocs-entry-body .betterdocs-pagination`;
26	const paginationRootWrapperTwo = `.${blockId} .betterdocs-pagination`;
27	const paginationRootWrapperUlLayoutOne = `.${blockId} .betterdocs-entry-body .betterdocs-pagination ul`;
28	const paginationRootWrapperUlLayoutTwo = `.${blockId} .betterdocs-pagination ul`;
29	const layout2Wrapper = `.${blockId}.betterdocs-taxonomy-doc-category .layout-6.betterdocs-category-grid-list-inner-wrapper .betterdocs-body ul `;
30
31	let styleCollections = [
32	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_LIST, {
33	args: {
34	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_LIST,
35	},
36	cssSelector: archiveListSelector,
37	}),
38
39	addProperty("color", "list_color", {
40	args: { hover: "list_hover_color" },
41	cssSelector: archiveListSelector,
42	}),
43
44	addProperty( list_icon != '' ? "color" : "fill", "list_icon_color", {
45	args: { hover: "list_icon_color" },
46	cssSelector: archiveListIconSelector,
47	}),
48
49	addProperty('background', layout == 'layout-1' ? ARCHIVE_LIST.ARCHIVE_LIST_WRAPPER_BACKGROUND : ( layout == 'layout-2' ? ARCHIVE_LIST.ARCHIVE_LIST_WRAPPER_BACKGROUND_LAYOUT_2 : ARCHIVE_LIST.ARCHIVE_LIST_WRAPPER_BACKGROUND_LAYOUT_3 ), {
50	args: { noOverlay: true },
51	cssSelector: layout == 'layout-1' ? archiveListBackgroundWrapper : ( layout == 'layout-3' \|\| layout == 'layout-4' ? archiveListBackgroundWrapperLayout3 : archiveListBackgroundWrapperLayout2 )
52	}),
53
54	addProperty( list_icon != '' ? "color" : "fill", "list_icon_hover_color", {
55	args: { hover: "list_icon_hover_color" },
56	cssSelector: `.${blockId}.betterdocs-content-area .betterdocs-entry-body ul li svg:hover, .${blockId}.betterdocs-content-area .betterdocs-entry-body ul li i:hover`,
57	}),
58
59	addProperty("responsive", "listIconWidth", {
60	args: {
61	property: "width",
62	controlName: ARCHIVE_LIST.ARCHIVE_ICON_WIDTH,
63	},
64	cssSelector: archiveListIconSelector,
65	}),
66
67	addProperty("responsive", "listIconHeight", {
68	args: {
69	property: "height",
70	controlName: ARCHIVE_LIST.ARCHIVE_ICON_HEIGHT,
71	},
72	cssSelector: archiveListIconSelector,
73	}),
74
75	addProperty("color", "list_description_color", {
76	args: { hover: "list_description_color" },
77	cssSelector: archiveListDescriptionSelector,
78	}),
79
80	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_DESCRIPTION, {
81	args: {
82	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_DESCRIPTION,
83	},
84	cssSelector: archiveListDescriptionSelector,
85	}),
86	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_TITLE, {
87	args: {
88	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_TITLE,
89	},
90	cssSelector: archiveListHeadingSelector,
91	}),
92	addProperty("color", "list_title_color", {
93	args: { hover: "list_title_color" },
94	cssSelector: archiveListHeadingSelector,
95	}),
96
97	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_LIST_TITLE_THREE, {
98	args: {
99	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_ARCHIVE_LIST_TITLE_THREE,
100	defaultFontSize: 20,
101	},
102	cssSelector: archiveListLayoutThreeSelector,
103	}),
104	addProperty("color", "list_title_color_layout_three", {
105	args: { hover: "list_title_hover_color_layout_three" },
106	cssSelector: archiveListLayoutThreeSelector,
107	}),
108
109	addProperty( "fill", "list_icon_color_layout_three", {
110	args: { hover: "list_icon_hover_color_layout_three" },
111	cssSelector: archiveListIconSvgSelectorLayoutThree,
112	}),
113
114	addProperty("responsive", "listIconWidth", {
115	args: {
116	property: "width",
117	controlName: ARCHIVE_LIST.LIST_THREE_ICON_WIDTH,
118	},
119	cssSelector: archiveListIconOuterSelectorLayoutThree,
120	}),
121
122	addProperty("responsive", "listIconHeight", {
123	args: {
124	property: "height",
125	controlName: ARCHIVE_LIST.LIST_THREE_ICON_HEIGHT,
126	},
127	cssSelector: archiveListIconOuterSelectorLayoutThree,
128	}),
129	addProperty('background', ARCHIVE_LIST.LIST_ICON_BACKGROUND_LAYOUT_THREE, {
130	args: { noOverlay: true },
131	cssSelector: archiveListIconOuterSelectorLayoutThree
132	}),
133	addProperty("color", "list_exceprt_color_layout_three", {
134	args: { hover: "list_exceprt_color_layout_three" },
135	cssSelector: archiveListLayoutThreeExcerptSelector,
136	}),
137	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_EXCEPRT_LAYOUT_THREE, {
138	args: {
139	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_EXCEPRT_LAYOUT_THREE,
140	},
141	cssSelector: archiveListLayoutThreeExcerptSelector,
142	}),
143	addProperty("typography", ARCHIVE_LIST_TYPO.LAST_UPDATED_TIME_TYPO, {
144	args: {
145	prefixConstant: ARCHIVE_LIST_TYPO.LAST_UPDATED_TIME_TYPO,
146	},
147	cssSelector: archiveListLastUpdatedSelector,
148	}),
149	addProperty("color", "last_updated_time_color", {
150	args: { hover: "last_updated_time_color" },
151	cssSelector: archiveListLastUpdatedSelector,
152	}),
153	addProperty('background', ARCHIVE_LIST.LAST_UPDATED_BACKGROUND_LAYOUT_THREE, {
154	args: { noOverlay: true },
155	cssSelector: archiveListLastUpdatedSelector
156	}),
157	addProperty("color", "pagination_color", {
158	args: { hover: "pagination_color" },
159	cssSelector: paginationSelectorOne+','+paginationSelectorTwo,
160	}),
161	addProperty('background', ARCHIVE_LIST.PAGINATION_BACKGROUND_COLOR_LAYOUT_1, {
162	args: { noOverlay: true },
163	cssSelector: paginationSelectorOne
164	}),
165	addProperty('background', ARCHIVE_LIST.PAGINATION_BACKGROUND_COLOR_LAYOUT_3, {
166	args: { noOverlay: true },
167	cssSelector: paginationSelectorTwo
168	}),
169	addProperty("responsive", "paginationHeight", {
170	args: {
171	property: "height",
172	controlName: ARCHIVE_LIST.PAGINATION_HEIGHT_LAYOUT_1_3,
173	},
174	cssSelector: paginationSelectorOne,
175	}),
176	addProperty("responsive", "paginationWidth", {
177	args: {
178	property: "width",
179	controlName: ARCHIVE_LIST.PAGINATION_WIDTH_LAYOUT_1_3,
180	},
181	cssSelector: paginationSelectorOne,
182	}),
183	addProperty("typography", ARCHIVE_LIST_TYPO.TYPO_PAGINATION, {
184	args: {
185	prefixConstant: ARCHIVE_LIST_TYPO.TYPO_PAGINATION,
186	defaultFontSize: 14,
187	},
188	cssSelector: paginationSelectorOne,
189	}),
190	addProperty("border-color", "pagination_active_border_color", {
191	cssSelector: paginationSelectorOneActive,
192	}),
193	addProperty("color", "pagination_active_color", {
194	args: { hover: "pagination_active_color" },
195	cssSelector: paginationSelectorOneActive,
196	}),
197	addProperty('alignment', layout == 'layout-1' ? 'pagination_alignment_layout_1' : 'pagination_alignment_layout_3', {
198	args: { alignProperty: "justify-content" },
199	cssSelector:layout == 'layout-1' ? paginationRootWrapperUlLayoutOne : paginationRootWrapperTwo
200	} ),
201	addProperty('dimension', ARCHIVE_LIST.PAGINATION_PADDING_1_3, {
202	args: { styleFor: "padding" },
203	cssSelector: layout == 'layout-1' ? paginationRootWrapperOne : paginationRootWrapperTwo
204	}),
205	addProperty('dimension', ARCHIVE_LIST.PAGINATION_MARGIN_1_3, {
206	args: { styleFor: "margin" },
207	cssSelector: layout == 'layout-1' ? paginationRootWrapperOne : paginationRootWrapperTwo
208	}),
209	addProperty('dimension', ARCHIVE_LIST.LAYOUT_2_WRAPPER_MARGIN, {
210	args: { styleFor: "margin" },
211	cssSelector: layout2Wrapper
212	}),
213	addProperty('dimension', ARCHIVE_LIST.LAYOUT_2_WRAPPER_PADDING, {
214	args: { styleFor: "padding" },
215	cssSelector: layout2Wrapper
216	}),
217
218	// Container Section Controls
219	addProperty('dimension', ARCHIVE_LIST.CONTAINER_PADDING, {
220	args: { styleFor: "padding" },
221	cssSelector: layout == 'layout-1' ? `.${blockId} .betterdocs-articles-list` : `.${blockId} .betterdocs-title-excerpt-lists`
222	}),
223	addProperty('dimension', ARCHIVE_LIST.CONTAINER_MARGIN, {
224	args: { styleFor: "margin" },
225	cssSelector: layout == 'layout-1' ? `.${blockId} .betterdocs-articles-list` : `.${blockId} .betterdocs-title-excerpt-lists`
226	}),
227
228	// Category List Controls (Layout 3 & 4)
229	addProperty('dimension', ARCHIVE_LIST.LIST_ITEM_SPACING, {
230	args: { styleFor: "margin" },
231	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list`
232	}),
233	addProperty('dimension', ARCHIVE_LIST.LIST_AREA_PADDING, {
234	args: { styleFor: "padding" },
235	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list`
236	}),
237	addProperty('dimension', ARCHIVE_LIST.TITLE_MARGIN, {
238	args: { styleFor: "margin" },
239	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2`
240	}),
241	addProperty('dimension', ARCHIVE_LIST.TITLE_PADDING, {
242	args: { styleFor: "padding" },
243	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list h2`
244	}),
245	addProperty('dimension', ARCHIVE_LIST.EXCERPT_MARGIN, {
246	args: { styleFor: "margin" },
247	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list p`
248	}),
249	addProperty('dimension', ARCHIVE_LIST.EXCERPT_PADDING, {
250	args: { styleFor: "padding" },
251	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list p`
252	}),
253	addProperty('dimension', ARCHIVE_LIST.DATE_MARGIN, {
254	args: { styleFor: "margin" },
255	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list .update-date`
256	}),
257	addProperty('dimension', ARCHIVE_LIST.DATE_PADDING, {
258	args: { styleFor: "padding" },
259	cssSelector: `.${blockId} .betterdocs-title-excerpt-lists .betterdocs-title-excerpt-list .update-date`
260	})
261	];
262	styleCollections = applyFilters('filterStyleObject', styleCollections, blockId);
263	return styleCollections;
264	};
265