FM / components

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components

Name	Size	Mode	Actions
access.js	1293	0644	edit dl rm
box-shadow.js	5836	0644	edit dl rm
checkbox.js	653	0644	edit dl rm
color.js	5021	0644	edit dl rm
datetime.js	1000	0644	edit dl rm
dimension.js	1862	0644	edit dl rm
filter.js	2348	0644	edit dl rm
font_family.js	1566	0644	edit dl rm
gradient.js	4106	0644	edit dl rm
html-to-react.js	237	0644	edit dl rm
icon.js	5286	0644	edit dl rm
image.js	2314	0644	edit dl rm
label.js	1349	0644	edit dl rm
link.js	7565	0644	edit dl rm
media.js	1951	0644	edit dl rm
modal.js	1854	0644	edit dl rm
multi-image.js	3035	0644	edit dl rm
multiselect.js	2158	0644	edit dl rm
padding.js	2185	0644	edit dl rm
radio.js	771	0644	edit dl rm
rich_text.js	4303	0644	edit dl rm
screen-icon.js	1107	0644	edit dl rm
select.js	2233	0644	edit dl rm
setting-tabs-control.js	1993	0644	edit dl rm
slider.js	1507	0644	edit dl rm
spinner.js	846	0644	edit dl rm
text-shadow.js	7385	0644	edit dl rm
textarea.js	693	0644	edit dl rm
typography.js	17862	0644	edit dl rm

Edit: /var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/box-shadow.js (5836B)

import { __ } from '@wordpress/i18n';
import { LabelControl } from './label';
import { useState, useRef, useEffect } from '@wordpress/element';
import { ColorPicker } from '@wordpress/components';

// TODO: re-arrang the content
export const BoxShadowControl = (props) =>{
	
	const { prop, value, setAttributes	} = props;
	const { name } = prop['c'];
	var values = !pagelayer_empty(value) ? value : ['','','','','',''];
	
	// Do we have a val ?
	if(pagelayer_is_string(values)){
		values = values.split(',');
	}
	
	const [isColorPickerVisible, setIsColorPickerVisible] = useState(false);
	const [isBoxShadowVisible, setBoxShadowVisible] = useState(false);
	const colorPreviewRef = useRef(null);
	const colorPickerRef = useRef(null);
	const boxShadowRef = useRef(null);

const handleRemoveColor = (e) => {
		handleInputChange(3, '');
		setIsColorPickerVisible(false);
	};

useEffect(() => {
		const handleDocumentClick = (e) => {
			
			// ColorPicker Handler
			if (
				colorPickerRef.current &&
				!colorPickerRef.current.contains(e.target) &&
				colorPreviewRef.current &&
				!colorPreviewRef.current.contains(e.target)
			) {
				setIsColorPickerVisible(false);
			}
			
			// Shodow Modal Handler
			if(
				boxShadowRef.current &&
				!boxShadowRef.current.contains(e.target)
			){
				setBoxShadowVisible(false);
			}
		};

document.addEventListener('click', handleDocumentClick);

return () => {
			document.removeEventListener('click', handleDocumentClick);
		};
	}, []);
	
	var blank = 'pagelayer-blank-preview';

return (
		<div className="components-base-control pagelayer-base-control">
			<LabelControl {...props}/>
			<div className="pagelayer-prop-holder" ref={boxShadowRef}>
				<span
					className="pagelayer-prop-edit"
					onClick={() => setBoxShadowVisible(!isBoxShadowVisible)}
				>
					<i className="pli pli-pencil"></i>
				</span>
				{ isBoxShadowVisible && <div className="pagelayer-elp-shadow-div">
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">
							<label className="pagelayer-elp-label">{ __('Horizontal') }</label>
							<input
								className="pagelayer-elp-shadow-input"
								type="number"
								max="100"
								min="-100"
								step="1"
								name="horizontal"
								value={values[0]}
								onChange={(e) => handleInputChange(0, parseFloat(e.target.value))}
							/>
						</div>
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">
							<label className="pagelayer-elp-label">{ __('Vertical') }</label>
							<input
								className="pagelayer-elp-shadow-input"
								type="number"
								max="100"
								min="-100"
								step="1"
								name="vertical"
								value={values[1]}
								onChange={(e) => handleInputChange(1, parseFloat(e.target.value))}
							/>
						</div>
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">
							<label className="pagelayer-elp-label">{ __('Blur') }</label>
							<input
								className="pagelayer-elp-shadow-input"
								type="number"
								max="100"
								min="-100"
								step="1"
								name="blur"
								value={values[2]}
								onChange={(e) => handleInputChange(2, parseFloat(e.target.value))}
							/>
						</div>
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-spread">
							<label className="pagelayer-elp-label">{ __('Spread') }</label>
							<input
								className="pagelayer-elp-shadow-input"
								type="number"
								max="100"
								min="-100"
								step="1"
								name="spread"
								value={values[4]}
								onChange={(e) => handleInputChange(4, parseFloat(e.target.value))}
							/>
						</div>
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">
							<label className="pagelayer-elp-label">{ __('Color') }</label>
							<div
								className="pagelayer-elp-color-div"
								ref={colorPreviewRef}
							>
							<div
								className={`pagelayer-elp-color-preview ${values[3] === '' ? blank : ''}`}
								onClick={() => setIsColorPickerVisible(!isColorPickerVisible)}
								style={{ backgroundColor: values[3] }}
							></div>
							<span className="pagelayer-elp-remove-color" onClick={handleRemoveColor}>
								<i className="pli pli-cross"></i>
							</span>
						</div>
						</div>
						{isColorPickerVisible && (
							<div ref={colorPickerRef}>
								<ColorPicker
									color={values[3]}
									onChangeComplete={(val) => {
										if (val.rgb) {
											onChange(
												val.rgb.a != 1
													? "rgba(" +
													val.rgb.r +
													"," +
													val.rgb.g +
													"," +
													val.rgb.b +
													"," +
													val.rgb.a +
													")"
													: val.hex
											);
										}
									}}
									disableAlpha={false}
								/>
							</div>
						)}
						<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">
							<label className="pagelayer-elp-label">{ __('Shadow') }</label>
							<select
								className="pagelayer-elp-shadow-input pagelayer-elp-select"
								name="inset"
							onChange={(e) => handleInputChange(5, (e.target.value))}
							>
								<option value="">{ __('Outset') }</option>
								<option value="inset" 
								selected={values[5] == 'inset' ? 'selected' : ''}>{ __('Inset') }</option>
						</select>
					</div>
				</div>
				}
			</div>
		</div>
	);	
}

import { __ } from '@wordpress/i18n'; import { LabelControl } from './label'; import { useState, useRef, useEffect } from '@wordpress/element'; import { ColorPicker } from '@wordpress/components'; // TODO: re-arrang the content export const BoxShadowControl = (props) =>{ const { prop, value, setAttributes } = props; const { name } = prop['c']; var values = !pagelayer_empty(value) ? value : ['','','','','','']; // Do we have a val ? if(pagelayer_is_string(values)){ values = values.split(','); } const [isColorPickerVisible, setIsColorPickerVisible] = useState(false); const [isBoxShadowVisible, setBoxShadowVisible] = useState(false); const colorPreviewRef = useRef(null); const colorPickerRef = useRef(null); const boxShadowRef = useRef(null); const handleInputChange = (index, newValue) => { const newValues = [...values]; newValues[index] = newValue; setAttributes({ [name]: newValues}); }; const onChange = (color = '') => { handleInputChange(3, color); } const handleRemoveColor = (e) => { handleInputChange(3, ''); setIsColorPickerVisible(false); }; useEffect(() => { const handleDocumentClick = (e) => { // ColorPicker Handler if ( colorPickerRef.current && !colorPickerRef.current.contains(e.target) && colorPreviewRef.current && !colorPreviewRef.current.contains(e.target) ) { setIsColorPickerVisible(false); } // Shodow Modal Handler if( boxShadowRef.current && !boxShadowRef.current.contains(e.target) ){ setBoxShadowVisible(false); } }; document.addEventListener('click', handleDocumentClick); return () => { document.removeEventListener('click', handleDocumentClick); }; }, []); var blank = 'pagelayer-blank-preview'; return (

setBoxShadowVisible(!isBoxShadowVisible)} > { isBoxShadowVisible &&

{ __('Horizontal') } handleInputChange(0, parseFloat(e.target.value))} />

{ __('Vertical') } handleInputChange(1, parseFloat(e.target.value))} />

{ __('Blur') } handleInputChange(2, parseFloat(e.target.value))} />

{ __('Spread') } handleInputChange(4, parseFloat(e.target.value))} />

{ __('Color') }

setIsColorPickerVisible(!isColorPickerVisible)} style={{ backgroundColor: values[3] }} >

{isColorPickerVisible && (

{ if (val.rgb) { onChange( val.rgb.a != 1 ? "rgba(" + val.rgb.r + "," + val.rgb.g + "," + val.rgb.b + "," + val.rgb.a + ")" : val.hex ); } }} disableAlpha={false} />

)}

{ __('Shadow') }

}

); }