@total_onion/onion-library 1.0.0

package/components/component-social-media-share/group_6807bb08ab942.json

@@ -0,0 +1,596 @@
+{
+    "key": "group_6807bb08ab942",
+    "title": "Component: Social Media Share - Library",
+    "fields": [
+        {
+            "key": "field_67b494c8e8d03",
+            "label": "Native share",
+            "name": "native_share",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "message": "",
+            "default_value": 0,
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1,
+            "style": ""
+        },
+        {
+            "key": "field_65b776f4e5a2d",
+            "label": "What post to share?",
+            "name": "default_post",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "message": "",
+            "default_value": 0,
+            "ui_on_text": "Custom Post",
+            "ui_off_text": "Default Post",
+            "ui": 1,
+            "style": ""
+        },
+        {
+            "key": "field_65b776f4e5a72",
+            "label": "Social media share post",
+            "name": "social_media_share_post",
+            "aria-label": "",
+            "type": "post_object",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "post_type": [
+                "cocktail",
+                "product",
+                "treat",
+                "page",
+                "post"
+            ],
+            "post_status": [
+                "publish"
+            ],
+            "taxonomy": "",
+            "return_format": "id",
+            "multiple": 0,
+            "save_custom": 0,
+            "acfe_add_post": 0,
+            "acfe_edit_post": 0,
+            "acfe_bidirectional": {
+                "acfe_bidirectional_enabled": "0"
+            },
+            "allow_null": 0,
+            "bidirectional": 0,
+            "ui": 1,
+            "bidirectional_target": [],
+            "save_post_type": "",
+            "save_post_status": "",
+            "min": "",
+            "max": ""
+        },
+        {
+            "key": "field_65b776f4e5ab8",
+            "label": "Share Icon",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_65b776f4e5afe",
+            "label": "Social share text on page",
+            "name": "social_share_text_on_page",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "This text will appear next to the share icon on the page. Leave blank for none.<br\/><u>Note:<\/u> Font colour here will be the Theme settings primary font colour.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "Share this post",
+            "maxlength": "",
+            "placeholder": "Share this post",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5b44",
+            "label": "Icon size",
+            "name": "social_share_icon_size",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 16,
+            "min": 10,
+            "max": 100,
+            "step": 1,
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5b8a",
+            "label": "Icon rotate",
+            "name": "social_share_icon_rotate",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 0,
+            "min": 0,
+            "max": 360,
+            "step": 1,
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5bd0",
+            "label": "Icon colour",
+            "name": "social_share_icon_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "#ba0c2f",
+            "enable_opacity": 0,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": 1,
+            "absolute": 0,
+            "input": 1,
+            "allow_null": 1,
+            "theme_colors": 0,
+            "colors": []
+        },
+        {
+            "key": "field_65b776f4e5c16",
+            "label": "Horizontal Alignment",
+            "name": "social_share_horizontal_alignment",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__flex-start": "Left",
+                "__center": "Center",
+                "__flex-end": "Right"
+            },
+            "default_value": "__flex-start",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "horizontal",
+            "save_other_choice": 0
+        },
+        {
+            "key": "field_65b776f4e5c5d",
+            "label": "Space between icon and text",
+            "name": "space_between_icon_and_text",
+            "aria-label": "",
+            "type": "number",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 10,
+            "min": "",
+            "max": "",
+            "placeholder": "",
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5ca3",
+            "label": "Swap Left Right Icon And Text",
+            "name": "swap_left_right_icon_and_text",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "message": "",
+            "default_value": 0,
+            "style": "",
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1
+        },
+        {
+            "key": "field_65b776f4e5cea",
+            "label": "Popup media options",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_65b776f4e5d2f",
+            "label": "Social share info on popup",
+            "name": "social_share_info_on_popup",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "This text will appear on the popup. Note: Can use some of the keywords like %%post_title%%",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "Share this post",
+            "maxlength": "",
+            "placeholder": "Share this post",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5d7d",
+            "label": "Social media options",
+            "name": "social_share_popup_media_options",
+            "aria-label": "",
+            "type": "checkbox",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__facebook": "Facebook",
+                "__twitter": "X (Former Twitter)",
+                "__pinterest": "Pinterest",
+                "__linkedin": "LinkedIn",
+                "__instagram": "Instagram",
+                "__whatsapp": "Whatsapp",
+                "__copyURL": "Copy URL"
+            },
+            "default_value": [
+                "__facebook",
+                "__twitter",
+                "__pinterest",
+                "__linkedin",
+                "__copyURL"
+            ],
+            "return_format": "value",
+            "min": "",
+            "max": "",
+            "allow_custom": 0,
+            "layout": "vertical",
+            "toggle": 0,
+            "save_custom": 0,
+            "custom_choice_button_text": "Add new choice"
+        },
+        {
+            "key": "field_6702fe2f44820",
+            "label": "Icons",
+            "name": "icons",
+            "aria-label": "",
+            "type": "group",
+            "instructions": "Please add the icons for the above social share options <a href=\"\/wp-admin\/admin.php?page=cta-styles\" target=\"_blank\">here<\/a> CTA Styles -> CTA Icons",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "layout": "block",
+            "acfe_seamless_style": 0,
+            "acfe_group_modal": 0,
+            "acfe_group_modal_close": 0,
+            "acfe_group_modal_button": "",
+            "acfe_group_modal_size": "large",
+            "sub_fields": [
+                {
+                    "key": "field_67030c0c5c269",
+                    "label": "CopyURL",
+                    "name": "",
+                    "aria-label": "",
+                    "type": "tab",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "placement": "top",
+                    "endpoint": 0,
+                    "no_preference": 0,
+                    "selected": 0
+                },
+                {
+                    "key": "field_67032ac0fe30d",
+                    "label": "Display Copy URL link in the UI",
+                    "name": "display_copy_url_link",
+                    "aria-label": "",
+                    "type": "true_false",
+                    "instructions": "If the 'Copy URL' checkbox option is checked, then if this is TRUE, you should see a URL to be copied to clipboard in the frontend.",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "message": "",
+                    "default_value": 0,
+                    "style": "",
+                    "ui_on_text": "",
+                    "ui_off_text": "",
+                    "ui": 1
+                }
+            ]
+        },
+        {
+            "key": "field_65b776f4e5dc3",
+            "label": "Popup settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_65b776f4e5e09",
+            "label": "Social media icon colour",
+            "name": "social_share_popup_icon_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": 1,
+            "absolute": 0,
+            "input": 1,
+            "allow_null": 1,
+            "theme_colors": 0,
+            "colors": []
+        },
+        {
+            "key": "field_65b776f4e5e58",
+            "label": "Social media icon size",
+            "name": "social_share_popup_icon_size",
+            "aria-label": "",
+            "type": "range",
+            "instructions": "This size will only impact the default social icons, and not the ones uploaded via CTA Style icons.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": 16,
+            "min": 10,
+            "max": 100,
+            "step": 1,
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_65b776f4e5ea5",
+            "label": "Popup font colour",
+            "name": "social_share_popup_font_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": 1,
+            "absolute": 0,
+            "input": 1,
+            "allow_null": 1,
+            "theme_colors": 0,
+            "colors": []
+        },
+        {
+            "key": "field_65b776f4e5eeb",
+            "label": "Popup background colour",
+            "name": "social_share_popup_background_colour",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "display": "default",
+            "button_label": "Select Color",
+            "color_picker": 1,
+            "absolute": 0,
+            "input": 1,
+            "allow_null": 1,
+            "theme_colors": 0,
+            "colors": []
+        },
+        {
+            "key": "field_65b776f4e5f37",
+            "label": "Popup background shadow",
+            "name": "social_share_popup_background_shadow",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "message": "",
+            "default_value": 0,
+            "style": "",
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "post_type",
+                "operator": "==",
+                "value": "post"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "",
+    "show_in_rest": 0,
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfml_field_group_mode": "localization",
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1746891404
+}

package/components/component-social-media-share/social-media-share-extra.scss

@@ -0,0 +1,6 @@
+// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+// @use 'Assets/scss/theme/breakpoints';
+
+@mixin additionalStyles() {
+}

package/components/component-social-media-share/social-media-share.js

@@ -0,0 +1,69 @@
+export default function socialMediaShareJs(block) {
+	if (!block) {
+		return;
+	}
+	const socialShareWrap = block.querySelectorAll(
+		`.social-media-share-popup dialog .dialog-actions .wrapper-content a.social-media-copylink`
+	);
+	if (!socialShareWrap) {
+		return;
+	}
+
+	socialShareWrap.forEach((singleShare) => {
+		singleShare.addEventListener(
+			'click',
+			function (e) {
+				handleClick(block, e, this.dataset.url);
+			},
+			false
+		);
+	});
+	const shareButtons = document.getElementsByClassName(
+		'social-media-share-native'
+	);
+
+	for (let button of shareButtons) {
+		button.addEventListener('click', async function (event) {
+			event.preventDefault();
+
+			if (navigator.share) {
+				try {
+					await navigator.share({
+						title: document.title,
+						url: window.location.href
+					});
+				} catch (error) {
+					console.error('Error sharing:', error);
+				}
+			} else {
+				navigator.clipboard
+					.writeText(window.location.href)
+					.then(() => {
+						alert('Link copied to clipboard!');
+					})
+					.catch((err) => {
+						console.error('Failed to copy: ', err);
+					});
+			}
+		});
+	}
+}
+
+async function handleClick(block, e, url) {
+	e.preventDefault();
+	try {
+		navigator.clipboard.writeText(url);
+		block.querySelector(
+			'.social-media-share-popup dialog .dialog-actions .wrapper-content .social-media-message'
+		).style.display = 'flex';
+		setTimeout(function () {
+			block.querySelector(
+				'.social-media-share-popup dialog .dialog-actions .wrapper-content .social-media-message'
+			).style.display = 'none';
+		}, 2000);
+	} catch (err) {
+		console.error('Failed to copy!', err);
+	}
+	console.log('Yay! Copied to clipboard.');
+	return false;
+}