ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / ajwellnessmassag / angelictravels.online / wp-content / plugins / essential-blocks / src / global-styles

import { __ } from "@wordpress/i18n";
import { applyFilters } from "@wordpress/hooks";
import { useState, useEffect, useRef, useCallback } from "@wordpress/element";
import { PanelBody, Button, Popover, Dashicon, TabPanel } from "@wordpress/components";
import { store as editorStore, PluginSidebar as PluginSidebarEditor } from '@wordpress/editor';
import { select, dispatch, useDispatch, useSelect, withSelect } from "@wordpress/data";
import { PluginSidebar as PluginSidebarEditPost } from "@wordpress/edit-post"
import {
    BlockPreview,
    PanelColorSettings
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import { store as noticesStore } from '@wordpress/notices';

import { useDeviceType } from "@essential-blocks/controls"

import EBIcon from "./assets/icon";
import ColorPalletWrapper from "./components/colorPalletWrapper"
import GradientColorPallet from "./components/GradientColorPallet"
import TypographySettings from "./components/typography/TypographySettings"
import {
    getGlobalSettings,
    generateTypographyCSS,
    applyTypographyCSS,
    loadGoogleFonts
} from "../helpers/helpers"
import { updateGlobalStyle } from "../helpers/fetch"

//Import Constants
import {
    globalColorKey,
    customColorKey,
    gradientColorKey,
    customGradientColorKey,
    globalTypoKey
} from "../store/constant"

import { blockComponentObject } from './blockObject'

import "./style.scss";

const PluginSidebar = PluginSidebarEditor || PluginSidebarEditPost;

/**
 * Global Controls Component
 * @param {*} props
 * @returns {Component}
 */
function EBGlobalControls(props) {
    const {
        getGlobalColors,
        getCustomColors,
        getGradientColors,
        getCustomGradientColors,
        getGlobalTypography,
        getBlockDefaults
    } = props;

const localizeColors = EssentialBlocksLocalize.globalColors || []

const components = applyFilters('eb_block_defaults', blockComponentObject);

/**
     * State
     */
    const [globalColors, setGlobalColors] = useState([]);
    const [customColors, setCustomColors] = useState([]);
    const [gradientColors, setGradientColors] = useState([]);
    const [customGradientColors, setCustomGradientColors] = useState([]);
    const [blockDefaults, setBlockDefaults] = useState({});
    const [blockItemDefaults, setBlockItemDefaults] = useState({});
    const [popoverAnchor, setPopoverAnchor] = useState();
    const [clickedBlock, setClickedBlock] = useState("");
    const [isVisible, setIsVisible] = useState(false);
    const [isChanged, setIsChanged] = useState(false);

//Get Device type from context
    const deviceType = useDeviceType()

//Create Element for write Global Typography
    useEffect(() => {
        if (Object.keys(getGlobalTypography).length > 0) {
            const cssString = generateTypographyCSS(getGlobalTypography, deviceType);
            applyTypographyCSS(cssString);
            loadGoogleFonts(getGlobalTypography)
        }
    }, [getGlobalTypography, deviceType])

//Initial UseEffect, Set Defualt color if Store is empty
    useEffect(() => {
        //Set Global Colors
        if (typeof getGlobalColors === "object" && globalColors.length === 0) {
            setGlobalColors(localizeColors);
        }

//Set Gradient Colors
        if (typeof getGradientColors === "object" && gradientColors.length === 0) {
            setGradientColors(EssentialBlocksLocalize.gradientColors || []);
        }
    }, []);

//Set globalColors when Store "getGlobalColors" is changed
    useEffect(() => {
        if (JSON.stringify(getGlobalColors) !== JSON.stringify(globalColors)) {
            setGlobalColors(getGlobalColors);
        }
    }, [getGlobalColors]);

//Set customColors when Store "getCustomColors" is changed
    useEffect(() => {
        if (JSON.stringify(getCustomColors) !== JSON.stringify(customColors)) {
            setCustomColors(getCustomColors);
        }
    }, [getCustomColors]);

//Set gradientColors when Store "getGradientColors" is changed
    useEffect(() => {
        if (JSON.stringify(getGradientColors) !== JSON.stringify(gradientColors)) {
            setGradientColors(getGradientColors);
        }
    }, [getGradientColors]);

//Set customGradientColors when Store "getCustomGradientColors" is changed
    useEffect(() => {
        if (JSON.stringify(getCustomGradientColors) !== JSON.stringify(customGradientColors)) {
            setCustomGradientColors(getCustomGradientColors);
        }
    }, [getCustomGradientColors]);

//Update Store when "globalColors" is changed
    useEffect(() => {
        if (globalColors.length > 0) {
            dispatch("essential-blocks").setGlobalColors(globalColors);
            dispatch('essential-blocks').setIsSaving(true);
        }
        const root = document.documentElement;
        (globalColors.length > 0) && globalColors.map((item) => {
            if (item.var && item.color) {
                root.style.setProperty(item.var, item.color);
            }
        })

}, [globalColors]);

//Update Store when "customColors" is changed
    useEffect(() => {
        if (typeof customColors === 'object') {
            dispatch("essential-blocks").setCustomColors(customColors);
            dispatch('essential-blocks').setIsSaving(true);

//Set color css to root
            const root = document.documentElement;
            if (customColors.length > 0) {
                customColors.map((item) => {
                    if (item.var && item.color) {
                        root.style.setProperty(item.var, item.color);
                    }
                })
            }
        }
    }, [customColors]);

//Update Store when "gradientColors" is changed
    useEffect(() => {
        if (gradientColors.length > 0) {
            dispatch("essential-blocks").setGradientColors(gradientColors);
            dispatch('essential-blocks').setIsSaving(true);
        }
        const root = document.documentElement;
        (gradientColors.length > 0) && gradientColors.map((item) => {
            if (item.var && item.color) {
                root.style.setProperty(item.var, item.color);
            }
        })
    }, [gradientColors]);

//Update Store when "customGradientColors" is changed
    useEffect(() => {
        if (typeof customGradientColors === 'object') {
            dispatch("essential-blocks").setCustomGradientColors(customGradientColors);
            dispatch('essential-blocks').setIsSaving(true);
        }
        const root = document.documentElement;
        (customGradientColors.length > 0) && customGradientColors.map((item) => {
            if (item.var && item.color) {
                root.style.setProperty(item.var, item.color);
            }
        })
    }, [customGradientColors]);

//Update Global Colors
    const setGlobalColor = (index, color) => {
        const colors = [...globalColors];
        colors[index].color = color;
        setGlobalColors([...colors]);
        setIsChanged(true)
    };
    const setGradientColor = (index, color) => {
        const colors = [...gradientColors];
        colors[index].color = color;
        setGradientColors([...colors]);
        setIsChanged(true)
    };
    const setCustomGradientColor = (index, color) => {
        const colors = [...customGradientColors];
        colors[index].color = color;
        setCustomGradientColors([...colors]);
        setIsChanged(true)
    };
    const deleteCustomGradientColor = (index) => {
        const colors = [...customGradientColors];
        colors.splice(index, 1)
        setCustomGradientColors([...colors]);
        setIsChanged(true)
    };

/**
     * Handle Popup Visibility
     * @param {*} block
     */
    const toggleVisible = (block) => {
        setClickedBlock(block);
        setIsVisible((state) => !state);
    };

//Set blockDefaults when Store "getBlockDefaults" is changed
    useEffect(() => {
        if (JSON.stringify(getBlockDefaults) !== JSON.stringify(blockDefaults)) {
            setBlockDefaults(getBlockDefaults);
        }
    }, [getBlockDefaults]);

useEffect(() => {
        setBlockDefaults({
            ...blockDefaults,
            ...blockItemDefaults,
        });
    }, [blockItemDefaults]);

/**
     * Handle Save Block Default
     * @param {*} block
     */
    const handleSaveBlockDefault = () => {
        setIsVisible((state) => !state);

//Save Block Default
        if (Object.keys(blockDefaults).length > 0) {
            dispatch("essential-blocks").setBlockDefault(blockDefaults);
            dispatch("essential-blocks").saveBlockDefault(blockDefaults);
        }
    };

/**
     * Handle Save & Insert Block
     * @param {*} block
     */
    const handleSaveInsert = (clickedBlock) => {
        setIsVisible((state) => !state);

/**
     * Handle Reset Block Default
     * @param {*} block
     */
    const handleResetBlockDefault = (selected) => {
        if (
            !window.confirm(
                `Are you sure, you want to reset all the changes you made for ${registeredBlocks[clickedBlock]?.label}`
            )
        ) {
            return;
        }
        const defaults = { ...blockDefaults };
        if (defaults[selected]) {
            delete defaults[selected];
        }

//Save Block Default
        dispatch("essential-blocks").setBlockDefault(defaults);
        dispatch("essential-blocks").saveBlockDefault(defaults);

//save updated blockDefault object after deleted selected
        setBlockItemDefaults({});
        setBlockDefaults(defaults);

//Reload popup
        setIsVisible(false);
        setTimeout(() => {
            setIsVisible(true);
        }, 1);
    };

/**
     * Handle Close without save
     * @param {*} selected
     */
    const handleCloseWithoutSave = (selected) => {
        setBlockItemDefaults({});
        setIsVisible(false);
    };

/**
     * handleBlockDefault
     * @param {*} obj
     */
    const handleBlockDefault = useCallback((obj) => {
        let values = { ...blockDefaults[clickedBlock] };

Object.keys(obj).map((item) => {
            values[item] = obj[item];
        });
        setBlockDefaults({ ...blockDefaults, [clickedBlock]: values });
    }, [blockDefaults, clickedBlock]);

/**
     * Setup Popup
     */
    useEffect(() => {
        const editor = document.querySelector("#editor");
        setPopoverAnchor(editor);
    }, []);

const ClickedComponent = components[clickedBlock]?.component;
    const allBlocksKeys = Object.keys(components);
    const registeredBlocks = EssentialBlocksLocalize?.all_blocks_default;
    const activedBlocks = EssentialBlocksLocalize?.all_blocks;

/**
     * Handle preview data
     * @param {*} selected
     * @returns
     */
    const previewData = (selected) => {
        let data = { ...blockDefaults[selected] };
        if (components[selected].previewData) {
            data = {
                ...data,
                ...components[selected].previewData,
            };
        }
        return data;
    };

const colorPanelArray = (colors, setColor, defaults = []) => {
        if (typeof colors !== 'object') {
            return []
        }
        const colorArr = []
        colors.map((colorObj, index) => (
            colorArr.push({
                label: colorObj.name || 'Color',
                value: colorObj.color,
                onChange: (newColor) => {
                    setColor(index, newColor || defaults[index]?.color || '#000')
                }
            })
        ))
        return colorArr
    }

const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);

const successNotice = (message = 'Successfully saved Global settings!') => {
        createSuccessNotice(__(message), {
            type: 'snackbar',
            icon: <Dashicon icon={"saved"} />,
        })
    }
    const errorNotice = (message = 'Global settings could not be saved.') => {
        createErrorNotice(__(message), {
            type: 'snackbar',
            icon: <Dashicon icon={"info-outline"} />,
        })
    }

const globalSettingsSave = () => {
        const globals = getGlobalSettings(select)
        const allData = {
            [globalColorKey]: globals?.getGlobalColors,
            [customColorKey]: globals?.getCustomColors,
            [gradientColorKey]: globals?.getGradientColors,
            [customGradientColorKey]: globals?.getCustomGradientColors,
            [globalTypoKey]: globals?.getGlobalTypography
        }
        let response = updateGlobalStyle(allData);
        response
            .then((result) => {
                if (result) {
                    successNotice()
                    setIsChanged(false)
                }
                else {
                    errorNotice()
                }
                // Handle the resolved value of the promise
            })
            .catch((error) => {
                // Handle errors
                errorNotice()
            });
    }

const isResetable = (type = 'color') => {
        const globals = getGlobalSettings(select);
        if (!globals) return false;

const {
            getGlobalColors,
            getCustomColors,
            getGradientColors,
            getCustomGradientColors,
            getGlobalTypography
        } = globals;

if (type === 'color') {
            return [getGlobalColors, getCustomColors, getGradientColors, getCustomGradientColors]
                .some(data => Array.isArray(data) ? data.length > 0 : Object.keys(data || {}).length > 0);
        }

if (type === 'typography') {
            return getGlobalTypography && Object.keys(getGlobalTypography).length > 0;
        }

return false; // Default fallback
    };

const globalSettingsReset = (type = 'all') => {
        if (!window.confirm('Are you sure you want to reset all the changes?')) { //Window alert for confirm reset
            return;
        }
        const globals = getGlobalSettings(select)

const {
            globalColors = [],
            gradientColors = []
        } = window?.EssentialBlocksLocalize

let colorsData;
        if (type === 'all' || type === 'color') {
            dispatch("essential-blocks").setGlobalColors(globalColors);
            dispatch("essential-blocks").setCustomColors([]);
            dispatch("essential-blocks").setGradientColors(gradientColors);
            dispatch("essential-blocks").setCustomGradientColors([]);
            colorsData = {
                [globalColorKey]: [],
                [customColorKey]: [],
                [gradientColorKey]: [],
                [customGradientColorKey]: []
            };
        } else {
            colorsData = {
                [globalColorKey]: globals?.getGlobalColors,
                [customColorKey]: globals?.getCustomColors,
                [gradientColorKey]: globals?.getGradientColors,
                [customGradientColorKey]: globals?.getCustomGradientColors
            };
        }

let typoData;
        if (type === 'all' || type === 'typography') {
            dispatch("essential-blocks").setGlobalTypography({});
            typoData = { [globalTypoKey]: {} }
        }
        else {
            typoData = { [globalTypoKey]: globals?.getGlobalTypography }
        }

const allData = { ...colorsData, ...typoData }
        let response = updateGlobalStyle(allData);
        response
            .then((result) => {
                if (result) {
                    successNotice('Successfully reset global settings!')
                    setIsChanged(false)
                }
                else {
                    errorNotice('Unable to reset global settings.')
                }
                // Handle the resolved value of the promise
            })
            .catch((error) => {
                // Handle errors
                errorNotice('Unable to reset global settings.')
            });
    }

return (
        <>
            <PluginSidebar
                className="eb-global-controls"
                icon={<EBIcon />}
                name="eb-global-controls"
                title={__("EB Global Controls", "essential-blocks")}
            >
                <div className="eb-panel-control">
                    <PanelBody
                        title={__("Global Color", "essential-blocks")}
                        initialOpen={true}
                    >
                        <TabPanel
                            className="eb-global-color-tab-panel"
                            activeClass="active-tab"
                            tabs={[
                                {
                                    name: "solid",
                                    title: "Solid",
                                    className: "eb-tab solid",
                                },
                                {
                                    name: "gradient",
                                    title: "Gradient",
                                    className: "eb-tab gradient",
                                }
                            ]}
                        >
                            {(tab) => (
                                <div className={"eb-tab-control-item eb-tab-controls-" + tab.name}>
                                    {tab.name === "solid" && (
                                        <>
                                            <PanelColorSettings
                                                title={__(
                                                    "Global Colors",
                                                    "essential-blocks"
                                                )}
                                                className={"eb-color-panel eb-global-color-panel"}
                                                initialOpen={true}
                                                disableAlpha={true}
                                                disableCustomGradients={false}
                                                colorSettings={colorPanelArray(globalColors, setGlobalColor, localizeColors)}
                                            />

{customColors && customColors.length > 0 && (
                                                <ColorPalletWrapper
                                                    customColors={customColors}
                                                    setCustomColors={setCustomColors}
                                                    setIsChanged={setIsChanged}
                                                />
                                            )}
                                            <div className="eb-add-btn add-custom-color">
                                                <Button
                                                    className="eb-add-btn__button add-custom-color-btn"
                                                    onClick={() => {
                                                        setIsChanged(true) //global settings is changed
                                                        setCustomColors([
                                                            ...customColors,
                                                            {
                                                                color: '#000000',
                                                                name: `Custom Color ${customColors.length + 1}`,
                                                                slug: `custom-color-${customColors.length + 1}`,
                                                                var: `--eb-custom-color-${customColors.length + 1}`
                                                            }
                                                        ])
                                                    }}
                                                >Add Custom Color <Dashicon icon={"plus"} /></Button>
                                            </div>
                                        </>
                                    )}
                                    {tab.name === "gradient" && (
                                        <>
                                            {/* Gradient Color Pallet */}
                                            <GradientColorPallet
                                                title={"Gradient Colors"}
                                                colors={gradientColors}
                                                setColor={setGradientColor}
                                                setColors={setGradientColors}
                                                wrapperClass={"eb-gradient-color-panel"}
                                                resetAction={true}
                                            />

{/* Custom Gradient Color Pallet */}
                                            <GradientColorPallet
                                                title={"Custom Gradient Colors"}
                                                colors={customGradientColors}
                                                setColor={setCustomGradientColor}
                                                setColors={setCustomGradientColors}
                                                wrapperClass={"eb-custom-gradient-color-panel"}
                                                resetAction={true}
                                                deleteAction={true}
                                                enableEditName={true}
                                                onDelete={deleteCustomGradientColor}
                                            />

<div className="eb-add-btn add-custom-color">
                                                <Button
                                                    className="eb-add-btn__button add-custom-color-btn"
                                                    onClick={() => setCustomGradientColors([
                                                        ...customGradientColors,
                                                        {
                                                            color: 'linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)',
                                                            name: `Custom Color ${customGradientColors.length + 1}`,
                                                            slug: `custom-gradient-color-${customGradientColors.length + 1}`,
                                                            var: `--eb-custom-gradient-color-${customGradientColors.length + 1}`
                                                        }
                                                    ])}
                                                >Add Custom Color <Dashicon icon={"plus"} /></Button>
                                            </div>
                                        </>
                                    )}
                                </div>
                            )}
                        </TabPanel>

<div className='global-controls-save'>
                            <Button
                                variant="secondary"
                                className={`global-controls-reset`}
                                onClick={() => globalSettingsReset('color')}
                                label="Reset All Global Color"
                                showTooltip={true}
                                disabled={!isResetable('color')}
                            >
                                <Dashicon icon={"image-rotate"} /> Reset
                            </Button>
                            <Button
                                variant="primary"
                                className={`global-controls-save-btn`}
                                disabled={!isChanged}
                                onClick={() => globalSettingsSave()}
                            >
                                <Dashicon icon={"database-export"} /> Save Settings
                            </Button>
                        </div>
                    </PanelBody>

<PanelBody
                        title={__("Block Defaults", "essential-blocks")}
                        initialOpen={false}
                    >
                        <div className="eb-block-list-button">
                            {typeof registeredBlocks === "object" &&
                                Object.keys(components)
                                    .sort((a, b) => {
                                        const labelA = registeredBlocks[a]?.label || '';
                                        const labelB = registeredBlocks[b]?.label || '';
                                        return labelA.localeCompare(labelB);
                                    })
                                    .map((item, index) => (
                                        <div className="eb-block-button" key={index}>
                                            <Button
                                                variant="none"
                                                className="eb-block-default-button"
                                                onClick={() =>
                                                    toggleVisible(
                                                        registeredBlocks[item].value
                                                    )
                                                }
                                            >
                                                <img
                                                    className="eb-global-icon"
                                                    src={registeredBlocks[item]?.icon}
                                                    alt={registeredBlocks[item]?.label}
                                                />
                                                {registeredBlocks[item]?.label}

{getBlockDefaults[item] && (
                                                    <span className="active">
                                                        {" "}
                                                        {__(<Dashicon icon={"edit"} />)}
                                                    </span>
                                                )}
                                            </Button>
                                        </div>
                                    ))}
                        </div>
                    </PanelBody>
                </div>
            </PluginSidebar>

{isVisible && (
                <Popover
                    anchor={popoverAnchor}
                    className="eb-block-default-popup"
                >
                    <Button
                        className="btn-block-default btn-block-default-close"
                        onClick={() => handleCloseWithoutSave(clickedBlock)}
                    >
                        <Dashicon icon={"no"} />
                    </Button>
                    {allBlocksKeys.includes(clickedBlock) && (
                        <>
                            <div
                                id="eb-preview"
                                className="eb-block-default-preveiw-wrapper"
                            >
                                <div className="eb-block-default-heading">
                                    <span>
                                        {
                                            EssentialBlocksLocalize
                                                .all_blocks_default[
                                                clickedBlock
                                            ].label
                                        }{" "}
                                        Preview
                                    </span>
                                </div>

{components[clickedBlock].preview && activedBlocks[clickedBlock].visibility === "true" && (
                                    <BlockPreview
                                        blocks={createBlock(
                                            `essential-blocks/${registeredBlocks[clickedBlock]?.is_pro ? 'pro-' : ''}${clickedBlock.replace(/_/g, "-")}`,
                                            {
                                                ...previewData(
                                                    clickedBlock
                                                ),
                                            }
                                        )}
                                        viewportWidth={1100}
                                    />
                                )}

{activedBlocks[clickedBlock].visibility === "false" && (
                                    <p className="preview-not-available">
                                        {registeredBlocks[clickedBlock].label}{" "}
                                        Block isn't Enabled!
                                    </p>
                                )}

{!components[clickedBlock].preview && (
                                    <p className="preview-not-available">
                                        Preview not available
                                    </p>
                                )}

<div className="block-default-popup-footer">
                                    <Button
                                        className="btn-block-default-reset btn-block-default-link"
                                        onClick={() =>
                                            handleResetBlockDefault(
                                                clickedBlock
                                            )
                                        }
                                    >
                                        Reset
                                    </Button>

<Button
                                        className="btn-block-default-link"
                                        onClick={() =>
                                            handleSaveInsert(
                                                clickedBlock
                                            )
                                        }
                                    >
                                        Save & Insert
                                    </Button>

<Button
                                        className="btn-block-default-save"
                                        onClick={() => handleSaveBlockDefault()}
                                    >
                                        Save
                                    </Button>
                                </div>
                            </div>
                            <div className="eb-block-default">
                                <ClickedComponent
                                    blockDefaults={blockDefaults[clickedBlock] || {}}
                                    setBlockDefaults={setBlockItemDefaults}
                                    name={clickedBlock}
                                    deviceType={deviceType}
                                    handleBlockDefault={handleBlockDefault}
                                />
                            </div>
                        </>
                    )}
                    {!allBlocksKeys.includes(clickedBlock) && (
                        <h3>Block Default Controls not available</h3>
                    )}
                </Popover>
            )}
        </>
    );
}

export default withSelect((select) => {
    return {
        ...getGlobalSettings(select),
        getBlockDefaults: select('essential-blocks').getBlockDefaults() || {}
    };
})(EBGlobalControls);

[-] constants.js [edit]
[-] controls.js [edit]
[-] style.scss [edit]
[+] assets
[+] ..
[+] components
[-] blockObject.js [edit]
[+] block-defaults
[-] index.js [edit]