PluginProbe
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
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / social-share / src / edit.js

edit.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/social-share/src/edit.js

468 lines 16.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from '@wordpress/i18n';
2 import { useBlockProps } from '@wordpress/block-editor';
3 import { useEffect, useState } from '@wordpress/element';
4 import { select } from '@wordpress/data';
5
6 import { duplicateBlockIdFix, generateDimensionsControlStyles, generateResponsiveRangeStyles, generateBorderShadowStyles, generateTypographyStyles } from '../../../util/helpers';
7 import { softMinifyCssStrings, isCssExists } from '../../../util/helpers';
8 import { SOCIAL_SHARE_TITLE_PADDING, SOCIAL_SHARE_TITLE_MARGIN, SOCIAL_SHARE_BOX_HEIGHT, SOCIAL_SHARE_BOX_WIDTH, SOCIAL_SHARE_BOX_PADDING, SOCIAL_SHARE_BOX_MARGIN, SOCIAL_SHARE_BOX_BORDER, SOCIAL_SHARE_ICON_PADDING, SOCIAL_SHARE_ICON_MARGIN, SOCIAL_SHARE_TITLE_PADDING_LAYOUT_2, SOCIAL_SHARE_TITLE_MARGIN_LAYOUT_2, SOCIAL_SHARE_BOX_HEIGHT_LAYOUT_2, SOCIAL_SHARE_BOX_PADDING_LAYOUT_2, SOCIAL_SHARE_ICON_PADDING_LAYOUT_2, SOCIAL_SHARE_BOX_MARGIN_LAYOUT_2, SOCIAL_SHARE_BOX_WIDTH_LAYOUT_2, SOCIAL_SHARE_BOX_BORDER_LAYOUT_2, SOCIAL_SHARE_ICON_MARGIN_LAYOUT_2, SOCIAL_SHARE_ICON_WIDTH_LAYOUT_2, SOCIAL_SHARE_ICON_HEIGHT_LAYOUT_2, SOCIAL_SHARE_ICON_OUTER_WIDTH_LAYOUT_2, SOCIAL_SHARE_ICON_OUTER_HEIGHT_LAYOUT_2 } from './constants';
9 import { typoShareTitle, typoShareTitle_Layout_2 } from './typographyPrefixConstants';
10 import facebook from '../icons/facebook.svg';
11 import twitter from '../icons/twitter.svg';
12 import linkedin from '../icons/linkedIn.svg';
13 import pinterest from '../icons/pinterest.svg';
14 import Inspector from './inspector';
15 import shareIcon2 from '../icons/share-icon-2.svg';
16 import facebook2 from '../icons/facebook-2.svg';
17 import twitter2 from '../icons/twitter-2.svg';
18 import linkedin2 from '../icons/linkedin-2.svg';
19 import pinintrest2 from '../icons/pinterest-2.svg';
20 import { usePreviewDeviceType } from '../../../hooks';
21
22 const edit = ( { clientId, isSelected, attributes, setAttributes } ) => {
23
24 const { resOption, blockId, share_box_wrapper_color_layout_2, blockMeta, share_title, share_title_tag, share_title_color_layout_2, share_title_color, share_title_hover_color, share_title_hover_color_layout_2, share_box_wrapper_color, share_content_align, share_content_align_layout_2, show_facebook_icon, show_twitter_icon, show_linkedin_icon, show_pinterest_icon, layout } = attributes;
25
26 const blockProps = useBlockProps({
27 className: `eb-guten-block-main-parent-wrapper`
28 });
29
30 const { dimensionStylesDesktop:socialSharePaddingDesk, dimensionStylesTab:socialSharePaddingTab, dimensionStylesMobile:socialSharePaddingMob } =
31 generateDimensionsControlStyles({
32 controlName:layout == 'layout-1' ? SOCIAL_SHARE_TITLE_PADDING : SOCIAL_SHARE_TITLE_PADDING_LAYOUT_2,
33 styleFor:"padding",
34 attributes:attributes
35 });
36
37 const { typoStylesDesktop:titleTypoDesk, typoStylesTab:titleTypoTab, typoStylesMobile:titleTypoMob } = generateTypographyStyles({
38 prefixConstant:layout == 'layout-1' ? typoShareTitle : typoShareTitle_Layout_2,
39 attributes
40 })
41
42 const { dimensionStylesDesktop:socialShareMarginDesk, dimensionStylesTab:socialShareMarginTab, dimensionStylesMobile:socialShareMarginMob } =
43 generateDimensionsControlStyles({
44 controlName:layout == 'layout-1' ? SOCIAL_SHARE_TITLE_MARGIN : SOCIAL_SHARE_TITLE_MARGIN_LAYOUT_2,
45 styleFor:"margin",
46 attributes:attributes
47 });
48
49 const { rangeStylesDesktop:boxHeightDesk, rangeStylesTab:boxHeightTab, rangeStylesMobile:boxHeightMob } =
50 generateResponsiveRangeStyles({
51 controlName:layout == 'layout-1' ? SOCIAL_SHARE_BOX_HEIGHT : SOCIAL_SHARE_BOX_HEIGHT_LAYOUT_2,
52 property:"height",
53 attributes
54 });
55
56 const { dimensionStylesDesktop: boxPaddingDesk, dimensionStylesTab:boxPaddingTab, dimensionStylesMobile: boxPaddingMob } =
57 generateDimensionsControlStyles({
58 controlName:layout == 'layout-1' ? SOCIAL_SHARE_BOX_PADDING : SOCIAL_SHARE_BOX_PADDING_LAYOUT_2,
59 styleFor:"padding",
60 attributes
61 });
62 const { dimensionStylesDesktop:iconPaddingDesk, dimensionStylesTab:iconPaddingTab, dimensionStylesMobile:iconPaddingMob } =
63 generateDimensionsControlStyles({
64 controlName:layout == 'layout-1' ? SOCIAL_SHARE_ICON_PADDING : SOCIAL_SHARE_ICON_PADDING_LAYOUT_2,
65 styleFor:"padding",
66 attributes
67 })
68
69 const { dimensionStylesDesktop: boxMarginDesk, dimensionStylesTab:boxMarginTab, dimensionStylesMobile: boxMarginMob } =
70 generateDimensionsControlStyles({
71 controlName:layout == 'layout-1' ? SOCIAL_SHARE_BOX_MARGIN : SOCIAL_SHARE_BOX_MARGIN_LAYOUT_2,
72 styleFor:"margin",
73 attributes
74 })
75
76 const { rangeStylesDesktop:boxWidthDesk, rangeStylesTab:boxWidthTab, rangeStylesMobile:boxWidthMob } =
77 generateResponsiveRangeStyles({
78 controlName:layout == 'layout-1' ? SOCIAL_SHARE_BOX_WIDTH : SOCIAL_SHARE_BOX_WIDTH_LAYOUT_2,
79 property:"width",
80 attributes
81 });
82
83 const { stylesDesktop:borderStylesDesk, stylesTab:borderStylesTab, stylesMobile:borderStylesMob, stylesHoverDesktop:borderStylesHovDesk, stylesHoverTab:borderStylesHovTab, stylesHoverMobile:borderStylesHovMov, transitionStyle:borderStylesTransition } =
84 generateBorderShadowStyles({controlName:layout == 'layout-1' ? SOCIAL_SHARE_BOX_BORDER : SOCIAL_SHARE_BOX_BORDER_LAYOUT_2, attributes});
85
86 const { dimensionStylesDesktop:iconMarginDesk, dimensionStylesTab:iconMarginTab, dimensionStylesMobile:iconMarginMob } =
87 generateDimensionsControlStyles({
88 controlName:layout == 'layout-1' ? SOCIAL_SHARE_ICON_MARGIN : SOCIAL_SHARE_ICON_MARGIN_LAYOUT_2,
89 styleFor:"margin",
90 attributes
91 });
92
93 const { rangeStylesDesktop:socialShareIconWidthLayout2Desk, rangeStylesTab:socialShareIconWidthLayout2Tab, rangeStylesMobile:socialShareIconWidthLayout2Mob } = generateResponsiveRangeStyles({
94 controlName:SOCIAL_SHARE_ICON_WIDTH_LAYOUT_2,
95 property:"width",
96 attributes
97 });
98
99 const { rangeStylesDesktop:socialShareIconHeightLayout2Desk, rangeStylesTab:socialShareIconHeightLayout2Tab, rangeStylesMobile:socialShareIconHeightLayout2Mob } = generateResponsiveRangeStyles({
100 controlName:SOCIAL_SHARE_ICON_HEIGHT_LAYOUT_2,
101 property:"height",
102 attributes
103 });
104
105 const { rangeStylesDesktop:socialShareIconOuterWidthLayout2Desk, rangeStylesTab:socialShareIconOuterWidthLayout2Tab, rangeStylesMobile:socialShareIconOuterWidthLayout2Mob } = generateResponsiveRangeStyles({
106 controlName:SOCIAL_SHARE_ICON_OUTER_WIDTH_LAYOUT_2,
107 property:"width",
108 attributes
109 });
110
111 const { rangeStylesDesktop:socialShareIconOuterHeightLayout2Desk, rangeStylesTab:socialShareIconOuterHeightLayout2Tab, rangeStylesMobile:socialShareIconOuterHeightLayout2Mob } = generateResponsiveRangeStyles({
112 controlName:SOCIAL_SHARE_ICON_OUTER_HEIGHT_LAYOUT_2,
113 property:"height",
114 attributes
115 });
116
117
118 const desktopStyles = `
119 .betterdocs-social-share.${blockId}{
120 ${share_content_align ? `display:flex; justify-content:${share_content_align};` : ''}
121 ${boxMarginDesk}
122 ${boxPaddingDesk}
123 ${boxHeightDesk}
124 ${boxWidthDesk}
125 ${borderStylesDesk}
126 transition:${borderStylesTransition};
127 background:${share_box_wrapper_color};
128 }
129
130 .betterdocs-social-share.${blockId}:hover{
131 ${borderStylesHovDesk}
132 }
133
134 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag{
135 ${socialSharePaddingDesk}
136 ${socialShareMarginDesk}
137 color:${share_title_color};
138 ${titleTypoDesk}
139 }
140
141 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag:hover{
142 color:${share_title_hover_color}
143 }
144
145 .betterdocs-social-share.${blockId} .betterdocs-social-share-links li a img{
146 ${iconPaddingDesk}
147 ${iconMarginDesk}
148 }
149
150 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links{
151 ${boxMarginDesk}
152 ${boxPaddingDesk}
153 ${boxHeightDesk}
154 ${boxWidthDesk}
155 ${borderStylesDesk}
156 transition:${borderStylesTransition};
157 background:${share_box_wrapper_color_layout_2};
158 }
159
160 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading {
161 ${share_content_align_layout_2 ? `justify-content:${share_content_align_layout_2};` : ''}
162 }
163
164 .betterdocs-social-share.layout-2.${blockId}:hover{
165 ${borderStylesHovDesk}
166 }
167
168 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 .betterdocs-social-share-title-tag{
169 ${socialSharePaddingDesk}
170 ${socialShareMarginDesk}
171 color:${share_title_color_layout_2};
172 ${titleTypoDesk}
173 }
174
175 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 .betterdocs-social-share-title-tag:hover{
176 color:${share_title_hover_color_layout_2}
177 }
178
179 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img, .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li img{
180 ${iconPaddingDesk}
181 ${iconMarginDesk}
182 }
183
184 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img, .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li img{
185 ${socialShareIconWidthLayout2Desk}
186 ${socialShareIconHeightLayout2Desk}
187 }
188
189 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a{
190 ${socialShareIconOuterWidthLayout2Desk}
191 ${socialShareIconOuterHeightLayout2Desk}
192 }
193 `;
194
195 const tabStyles = `
196 .betterdocs-social-share.${blockId}{
197 ${boxMarginTab}
198 ${boxPaddingTab}
199 ${boxHeightTab}
200 ${boxWidthTab}
201 ${borderStylesTab}
202 background:${share_box_wrapper_color};
203 }
204
205 .betterdocs-social-share.${blockId}:hover{
206 ${borderStylesHovTab}
207 }
208
209 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag{
210 ${socialSharePaddingTab}
211 ${socialShareMarginTab}
212 color:${share_title_color};
213 ${titleTypoTab}
214 }
215
216 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag:hover{
217 color:${share_title_hover_color}
218 }
219
220 .betterdocs-social-share.${blockId} .betterdocs-social-share-links li a img{
221 ${iconPaddingTab}
222 ${iconMarginTab}
223 }
224
225 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links{
226 ${boxMarginTab}
227 ${boxPaddingTab}
228 ${boxHeightTab}
229 ${boxWidthTab}
230 ${borderStylesTab}
231 background:${share_box_wrapper_color_layout_2};
232 }
233
234 .betterdocs-social-share.layout-2.${blockId}:hover{
235 ${borderStylesHovTab}
236 }
237
238 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 h5{
239 ${socialSharePaddingTab}
240 ${socialShareMarginTab}
241 color:${share_title_color_layout_2};
242 ${titleTypoTab}
243 }
244
245 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 h5:hover{
246 color:${share_title_hover_color_layout_2}
247 }
248
249 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img{
250 ${iconPaddingTab}
251 ${iconMarginTab}
252 }
253
254 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img, .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li img{
255 ${socialShareIconWidthLayout2Tab}
256 ${socialShareIconHeightLayout2Tab}
257 }
258
259 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a{
260 ${socialShareIconOuterWidthLayout2Tab}
261 ${socialShareIconOuterHeightLayout2Tab}
262 }
263 `;
264
265 const mobileStyles = `
266 .betterdocs-social-share.${blockId}{
267 ${boxMarginMob}
268 ${boxPaddingMob}
269 ${boxHeightMob}
270 ${boxWidthMob}
271 ${borderStylesMob}
272 background:${share_box_wrapper_color};
273 }
274
275 .betterdocs-social-share.${blockId}:hover{
276 ${borderStylesHovMov}
277 }
278
279 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag{
280 ${socialSharePaddingMob}
281 ${socialShareMarginMob}
282 color:${share_title_color};
283 ${titleTypoMob}
284 }
285
286 .betterdocs-social-share.${blockId} .betterdocs-social-share-heading .betterdocs-social-share-title-tag:hover{
287 color:${share_title_hover_color}
288 }
289
290 .betterdocs-social-share.${blockId} .betterdocs-social-share-links li a img{
291 ${iconPaddingMob}
292 ${iconMarginMob}
293 }
294
295 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links{
296 ${boxMarginMob}
297 ${boxPaddingMob}
298 ${boxHeightMob}
299 ${boxWidthMob}
300 ${borderStylesMob}
301 background:${share_box_wrapper_color_layout_2};
302 }
303
304 .betterdocs-social-share.layout-2.${blockId}:hover{
305 ${borderStylesHovMov}
306 }
307
308 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 h5{
309 ${socialSharePaddingMob}
310 ${socialShareMarginMob}
311 color:${share_title_color_layout_2};
312 ${titleTypoMob}
313 }
314
315 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-heading.layout-2 h5:hover{
316 color:${share_title_hover_color_layout_2}
317 }
318
319 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img{
320 ${iconPaddingMob}
321 ${iconMarginMob}
322 }
323
324 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a img, .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li img{
325 ${socialShareIconWidthLayout2Mob}
326 ${socialShareIconHeightLayout2Mob}
327 }
328
329 .betterdocs-social-share.layout-2.${blockId} .betterdocs-social-share-links li a{
330 ${socialShareIconOuterWidthLayout2Mob}
331 ${socialShareIconOuterHeightLayout2Mob}
332 }
333 `;
334
335 const desktopAllStyles = softMinifyCssStrings(`
336 ${isCssExists(desktopStyles) ? desktopStyles : ''}
337 `);
338
339 const tabAllStyles = softMinifyCssStrings(`
340 ${isCssExists(tabStyles) ? tabStyles : ''}
341 `);
342
343 const mobileAllStyles = softMinifyCssStrings(`
344 ${isCssExists(mobileStyles) ? mobileStyles : ''}
345 `);
346
347 useEffect( () => {
348 const styleObject = {
349 desktop: desktopAllStyles,
350 tab: tabAllStyles,
351 mobile: mobileAllStyles
352 };
353
354 if( JSON.stringify(blockMeta) != JSON.stringify( styleObject ) ) {
355 setAttributes({blockMeta:styleObject})
356 }
357 }, [attributes]);
358
359 /**
360 * resOption: __experimentalPreviewDeviceType()
361 * Set Responsive Option
362 */
363 usePreviewDeviceType(setAttributes);
364
365 useEffect(() => {
366 const BLOCK_PREFIX = "betterdocs-social-share";
367 duplicateBlockIdFix({
368 BLOCK_PREFIX,
369 blockId,
370 setAttributes,
371 select,
372 clientId,
373 });
374 });
375
376 return(
377 <div {...blockProps}>
378 <style>
379 {`
380 ${desktopAllStyles}
381
382 ${resOption === 'Tablet' ? tabAllStyles : ''}
383 ${resOption === 'Mobile' ? mobileAllStyles : ''}
384
385 @media all and (max-width: 1024px) {
386 ${tabAllStyles}
387 }
388
389 @media all and (max-width: 767px) {
390 ${mobileAllStyles}
391 }
392 `}
393 </style>
394 {isSelected && <Inspector attributes={attributes} setAttributes={setAttributes}/>}
395 {layout == 'layout-1' && <div className={`betterdocs-social-share ${blockId}`}>
396 <div className={"betterdocs-social-share-heading"}>
397 {React.createElement(share_title_tag, { className: "betterdocs-social-share-title-tag" }, share_title)}
398 </div>
399 <ul className={"betterdocs-social-share-links"}>
400 {show_facebook_icon && (
401 <li>
402 <a href="#">
403 <img src={facebook}/>
404 </a>
405 </li>
406 )}
407 { show_twitter_icon && (
408 <li>
409 <a href="#">
410 <img src={twitter}/>
411 </a>
412 </li>
413 )}
414 {show_linkedin_icon && (
415 <li>
416 <a href="#">
417 <img src={linkedin}/>
418 </a>
419 </li>
420 )}
421 {show_pinterest_icon && (
422 <li>
423 <a href="#">
424 <img src={pinterest}/>
425 </a>
426 </li>
427 )}
428 </ul>
429 </div>}
430 {layout == 'layout-2' &&
431 <div class={`${blockId} betterdocs-social-share layout-2`}>
432 <div class="betterdocs-social-share-heading layout-2">
433 {React.createElement(share_title_tag, { className: "betterdocs-social-share-title-tag" }, share_title)}
434 </div>
435
436 <ul class="betterdocs-social-share-links layout-2">
437 <li>
438 <img src={shareIcon2} alt=""/>
439 </li>
440 {show_facebook_icon && <li>
441 <a title="Facebook" href="#" target="_blank">
442 <img src={facebook2} alt="Facebook"/>
443 </a>
444 </li>}
445 {show_twitter_icon && <li>
446 <a title="X" href="#" target="_blank">
447 <img src={twitter2} alt="X"/>
448 </a>
449 </li>}
450 {show_linkedin_icon && <li>
451 <a title="LinkedIn" href="#" target="_blank">
452 <img src={linkedin2} target="_blank"/>
453 </a>
454 </li>}
455 {show_pinterest_icon && <li>
456 <a title='Pinterest' href="#" target="_blank">
457 <img src={pinintrest2} alt="Pinterest"/>
458 </a>
459 </li>}
460 </ul>
461 </div>
462 }
463 </div>
464 );
465 }
466
467 export default edit;
468