| Dir : /home2/medicu/.trash/cartflows.2/modules/gutenberg/src/components/box-shadow/ |
| Server: Linux tista.bd.svlogins.com 5.14.0-611.49.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Apr 21 16:39:08 EDT 2026 x86_64 IP: 103.159.37.114 |
| Dir : /home2/medicu/.trash/cartflows.2/modules/gutenberg/src/components/box-shadow/index.js |
/**
* Box-Shadow reusable component.
*
*/
import { __ } from '@wordpress/i18n';
import Range from '@Components/range/Range.js';
import AdvancedPopColorControl from '../color-control/advanced-pop-color-control';
import { Button, Dashicon } from '@wordpress/components';
import { useState } from '@wordpress/element';
import MultiButtonsControl from '../multi-buttons-control/index';
import React, { useLayoutEffect } from 'react';
import { select } from '@wordpress/data';
import getUAGEditorStateLocalStorage from '@Controls/getUAGEditorStateLocalStorage';
import { blocksAttributes } from '@Attributes/getBlocksDefaultAttributes';
const BoxShadowControl = ( props ) => {
const [ showAdvancedControls, toggleAdvancedControls ] = useState( false );
useLayoutEffect( () => {
window.addEventListener( 'click', function ( e ) {
const popupButton = document.querySelector(
`.active.popup-${ blockId } .spectra-control-popup__options--action-button`
);
const popupWrap = document.querySelector(
`.active.popup-${ blockId } .spectra-control-popup`
);
if (
popupButton &&
! popupButton?.contains( e.target ) &&
popupWrap &&
! popupWrap?.contains( e.target ) &&
! e.target?.classList?.contains(
'uagb-advanced-color-indicate'
) &&
! e.target?.parentElement?.closest( '.uagb-popover-color' ) &&
! e.target?.parentElement?.closest( '.uagb-reset' )
) {
toggleAdvancedControls( false );
const blockName = getSelectedBlock()?.name;
const uagSettingState = getUAGEditorStateLocalStorage(
'uagSettingState'
);
const data = {
...uagSettingState,
[ blockName ]: {
...uagSettingState?.[ blockName ],
selectedSetting: false,
},
};
const uagLocalStorage = getUAGEditorStateLocalStorage();
if ( uagLocalStorage ) {
uagLocalStorage.setItem(
'uagSettingState',
JSON.stringify( data )
);
}
}
} );
}, [] );
const {
setAttributes,
boxShadowColor,
boxShadowHOffset,
boxShadowVOffset,
boxShadowBlur,
boxShadowSpread,
boxShadowPosition,
label = __( 'Box Shadow', 'ultimate-addons-for-gutenberg' ),
popup = false,
blockId,
} = props;
let advancedControls;
const activeClass = showAdvancedControls ? 'active' : '';
// Array of all the current Typography Control's Labels.
const attributeNames = [
boxShadowColor.label,
boxShadowHOffset.label,
boxShadowVOffset.label,
boxShadowBlur.label,
boxShadowSpread.label,
boxShadowPosition.label,
];
const { getSelectedBlock } = select( 'core/block-editor' );
// Function to get the Block's default Box Shadow Values.
const getBlockBoxShadowValue = () => {
const selectedBlockName = getSelectedBlock()?.name.split( '/' ).pop();
let defaultValues = false;
if ( 'undefined' !== typeof blocksAttributes[ selectedBlockName ] ) {
attributeNames.forEach( ( attributeName ) => {
if ( attributeName ) {
const blockDefaultAttributeValue =
'undefined' !==
typeof blocksAttributes[ selectedBlockName ][
attributeName
]?.default
? blocksAttributes[ selectedBlockName ][
attributeName
]?.default
: '';
defaultValues = {
...defaultValues,
[ attributeName ]: blockDefaultAttributeValue,
};
}
} );
}
return defaultValues;
};
// Function to check if any Box Shadow Setting has changed.
const getUpdateState = () => {
const defaultValues = getBlockBoxShadowValue();
const selectedBlockAttributes = getSelectedBlock()?.attributes;
let isBoxShadowUpdated = false;
attributeNames.forEach( ( attributeName ) => {
if (
selectedBlockAttributes?.[ attributeName ] &&
selectedBlockAttributes?.[ attributeName ] !==
defaultValues?.[ attributeName ]
) {
isBoxShadowUpdated = true;
}
} );
return isBoxShadowUpdated;
};
// Flag to check if this control has been updated or not.
const isBoxShadowUpdated = popup && getUpdateState();
const overallControls = (
<>
{ /* Shadow Color */ }
<AdvancedPopColorControl
label={ boxShadowColor.title }
colorValue={ boxShadowColor.value }
data={ {
value: boxShadowColor.value,
label: boxShadowColor.label,
} }
setAttributes={ setAttributes }
/>
{ /* Horizontal Positioning */ }
<Range
label={ boxShadowHOffset.title }
value={ boxShadowHOffset.value }
min={ -100 }
max={ 100 }
displayUnit={ false }
setAttributes={ setAttributes }
data={ {
value: boxShadowHOffset.value,
label: boxShadowHOffset.label,
} }
/>
{ /* Vertical Positioning */ }
<Range
label={ boxShadowVOffset.title }
value={ boxShadowVOffset.value }
min={ -100 }
max={ 100 }
displayUnit={ false }
setAttributes={ setAttributes }
data={ {
value: boxShadowVOffset.value,
label: boxShadowVOffset.label,
} }
/>
{ /* Blur */ }
<Range
label={ boxShadowBlur.title }
value={ boxShadowBlur.value }
min={ 0 }
max={ 100 }
displayUnit={ false }
setAttributes={ setAttributes }
data={ {
value: boxShadowBlur.value,
label: boxShadowBlur.label,
} }
/>
{ /* Spread */ }
<Range
label={ boxShadowSpread.title }
value={ boxShadowSpread.value }
min={ -100 }
max={ 100 }
displayUnit={ false }
setAttributes={ setAttributes }
data={ {
value: boxShadowSpread.value,
label: boxShadowSpread.label,
} }
/>
{ /* Shadow Position */ }
<MultiButtonsControl
setAttributes={ setAttributes }
label={ boxShadowPosition.title }
data={ {
value: boxShadowPosition.value,
label: boxShadowPosition.label,
} }
options={ [
{
value: 'outset',
label: __( 'Outset', 'ultimate-addons-for-gutenberg' ),
tooltip: __(
'Outset',
'ultimate-addons-for-gutenberg'
),
},
{
value: 'inset',
label: __( 'Inset', 'ultimate-addons-for-gutenberg' ),
tooltip: __(
'Inset (10px)',
'ultimate-addons-for-gutenberg'
),
},
] }
showIcons={ false }
/>
</>
);
if ( showAdvancedControls ) {
advancedControls = (
<div className="uagb-box-shadow-advanced spectra-control-popup">
{ overallControls }
</div>
);
}
const boxShadowAdvancedControls = (
<div className="spectra-control-popup__options--action-wrapper">
<span className="uag-control-label">
{ label }
{ isBoxShadowUpdated && (
<div className="spectra__change-indicator--dot-right" />
) }
</span>
<Button
className="uag-box-shadow-button spectra-control-popup__options--action-button"
aria-pressed={ showAdvancedControls }
onClick={ () => {
const allPopups = document.querySelectorAll(
'.spectra-control-popup__options'
);
if ( allPopups && 0 < allPopups.length ) {
for ( let i = 0; i < allPopups.length; i++ ) {
const popupButton = allPopups[ i ]?.querySelector(
'.spectra-control-popup__options.active .spectra-control-popup__options--action-button'
);
popupButton?.click();
}
}
toggleAdvancedControls( ! showAdvancedControls );
const blockName = getSelectedBlock()?.name;
const uagSettingState = getUAGEditorStateLocalStorage(
'uagSettingState'
);
let data = {
...uagSettingState,
[ blockName ]: {
...uagSettingState?.[ blockName ],
selectedSetting: '.uag-box-shadow-options',
},
};
if ( showAdvancedControls ) {
data = {
...uagSettingState,
[ blockName ]: {
...uagSettingState?.[ blockName ],
selectedSetting: false,
},
};
}
const uagLocalStorage = getUAGEditorStateLocalStorage();
if ( uagLocalStorage ) {
uagLocalStorage.setItem(
'uagSettingState',
JSON.stringify( data )
);
}
} }
>
<Dashicon icon="edit" />
</Button>
</div>
);
return popup ? (
<div
className={ `components-base-control uag-box-shadow-options spectra-control-popup__options popup-${ blockId } ${ activeClass }` }
>
{ boxShadowAdvancedControls }
{ showAdvancedControls && advancedControls }
</div>
) : (
<>{ overallControls }</>
);
};
export default BoxShadowControl;