Da

✏️ Editing: background-component.js

import PropTypes from "prop-types";
import { __ } from "@wordpress/i18n";
import { Component, Fragment } from "@wordpress/element";
import {
	Button,
	Popover,
	Dashicon,
	ButtonGroup,
	ColorIndicator,
	FocalPointPicker,
	Icon,
	Tooltip,
	TabPanel,
	GradientPicker,
	__experimentalGradientPicker,
} from "@wordpress/components";
// const {
// 	MediaUpload,
// } = wp.blockEditor;
// import { SketchPicker } from 'react-color';
// import ColorControl from '../common/color.js';
import KadenceGradientPicker from "../gradient-control/index.js";
import KadenceColorPicker from "../common/color-picker";
import ResponsiveControl from "../common/responsive";
import SwatchesControl from "../common/swatches";
import Icons from "../common/icons";

class BackgroundComponent extends Component {
	constructor(props) {
		super(props);
		this.onColorChangeComplete = this.onColorChangeComplete.bind(this);
		this.onGradientChangeComplete =
			this.onGradientChangeComplete.bind(this);
		this.updateValues = this.updateValues.bind(this);
		this.removeValues = this.removeValues.bind(this);
		this.onColorChangeState = this.onColorChangeState.bind(this);
		this.saveBackgroundType = this.saveBackgroundType.bind(this);
		this.preventClose = this.preventClose.bind(this);
		this.onPositionChange = this.onPositionChange.bind(this);
		this.onImageRemove = this.onImageRemove.bind(this);
		this.resetValues = this.resetValues.bind(this);
		this.preventClose();
		let value = this.props.control.setting.get();
		let baseDefault = {
			desktop: {
				color: "",
				image: {
					url: "",
					size: "cover",
					repeat: "no-repeat",
					position: {
						x: 0.5,
						y: 0.5,
					},
					attachment: "scroll",
				},
				type: "color",
			},
		};
		this.defaultValue = this.props.control.params.default
			? {
					...baseDefault,
					...this.props.control.params.default,
			  }
			: baseDefault;
		value = value
			? {
					...JSON.parse(JSON.stringify(this.defaultValue)),
					...value,
			  }
			: JSON.parse(JSON.stringify(this.defaultValue));
		let defaultParams = {
			responsive: ["mobile", "tablet", "desktop"],
			repeat: {
				"no-repeat": {
					name: __("No Repeat", "kadence"),
				},
				repeat: {
					name: __("Repeat", "kadence"),
				},
				"repeat-x": {
					name: __("Repeat-X", "kadence"),
				},
				"repeat-y": {
					name: __("Repeat-y", "kadence"),
				},
			},
			size: {
				auto: {
					name: __("Auto", "kadence"),
				},
				cover: {
					name: __("Cover", "kadence"),
				},
				contain: {
					name: __("Contain", "kadence"),
				},
			},
			attachment: {
				scroll: {
					name: __("Scroll", "kadence"),
				},
				fixed: {
					name: __("Fixed", "kadence"),
				},
			},
			attachments: {
				desktop: {},
				tablet: {},
				mobile: {},
			},
		};
		this.controlParams = this.props.control.params.input_attrs
			? {
					...defaultParams,
					...this.props.control.params.input_attrs,
			  }
			: defaultParams;
		const palette = JSON.parse(
			this.props.customizer.control("kadence_color_palette").setting.get()
		);
		//console.log( palette );
		this.state = {
			value: value,
			currentDevice: "desktop",
			colorPalette: palette,
			activePalette:
				palette && palette.active ? palette.active : "palette",
			isVisible: false,
			refresh: true,
			modalCanClose: true,
			supportGradient:
				undefined === GradientPicker &&
				undefined === __experimentalGradientPicker
					? false
					: true,
		};
	}
	onColorChangeState(color, palette, device) {
		let value = this.state.value;
		if (undefined === value[device]) {
			value[device] = {};
		}
		if (undefined === value[device].color) {
			value[device].color = "";
		}
		if (palette) {
			value[device].color = palette;
		} else if (
			undefined !== color.rgb &&
			undefined !== color.rgb.a &&
			1 !== color.rgb.a
		) {
			value[device].color =
				"rgba(" +
				color.rgb.r +
				"," +
				color.rgb.g +
				"," +
				color.rgb.b +
				"," +
				color.rgb.a +
				")";
		} else {
			value[device].color = color.hex;
		}
		this.setState({ value: value });
	}
	onGradientChangeComplete(gradient, device) {
		let value = this.state.value;
		if (undefined === value[device]) {
			value[device] = {};
		}
		if (undefined === value[device].gradient) {
			value[device].gradient = "";
		}
		if (undefined === gradient) {
			value[device].gradient = "";
		} else {
			value[device].gradient = gradient;
		}
		this.updateValues(value);
	}
	onColorChangeComplete(color, palette, device) {
		let value = this.state.value;
		if (undefined === value[device]) {
			value[device] = {};
		}
		if (undefined === value[device].color) {
			value[device].color = "";
		}
		if (palette) {
			value[device].color = palette;
		} else if (
			undefined !== color.rgb &&
			undefined !== color.rgb.a &&
			1 !== color.rgb.a
		) {
			value[device].color =
				"rgba(" +
				color.rgb.r +
				"," +
				color.rgb.g +
				"," +
				color.rgb.b +
				"," +
				color.rgb.a +
				")";
		} else {
			value[device].color = color.hex;
		}
		this.updateValues(value);
	}
	saveBackgroundType(tab, device) {
		let value = this.state.value;
		if (tab) {
			if (undefined === value[device]) {
				value[device] = {};
			}
			value[device].type = tab;
		}
		this.updateValues(value);
	}
	onPositionChange(position, device) {
		let value = this.state.value;
		if (position && position.focalPoint) {
			if (undefined === value[device]) {
				value[device] = {};
			}
			if (undefined === value[device].image) {
				value[device].image = {};
			}
			if (undefined === value[device].image.position) {
				value[device].image.position = {};
			}
			value[device].image.position = position.focalPoint;
		}
		this.updateValues(value);
	}
	onImageRemove(device) {
		if (
			undefined !== this.props.control.params.attachment &&
			this.props.control.params.attachment &&
			undefined !== this.props.control.params.attachment[device]
		) {
			this.props.control.params.attachment[device] = {};
		}
		let value = this.state.value;
		if (value[device]) {
			value[device].image.url = "";
		}
		this.updateValues(value);
	}
	render() {
		const data = this.props.control.params;
		const toggleVisible = () => {
			const updateColors = JSON.parse(
				this.props.customizer
					.control("kadence_color_palette")
					.setting.get()
			);
			const active =
				updateColors && updateColors.active
					? updateColors.active
					: "palette";
			this.setState({
				colorPalette: updateColors,
				activePalette: active,
			});
			this.setState({ isVisible: true });
		};
		const toggleClose = () => {
			if (this.state.isVisible === true) {
				this.setState({ isVisible: false });
			}
		};
		const maybeToggleClose = (e) => {
			if (undefined !== this.props.control.frame) {
				if (this.state.modalCanClose) {
					if (this.state.isVisible === true) {
						this.setState({ isVisible: false });
					}
				}
			} else {
				if (this.state.isVisible === true) {
					this.setState({ isVisible: false });
				}
			}
		};
		const dimensions = {
			desktop: {
				width:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.desktop &&
					"object" ===
						typeof this.controlParams.attachments.desktop &&
					this.controlParams.attachments.desktop &&
					undefined !== this.controlParams.attachments.desktop.width
						? this.controlParams.attachments.desktop.width
						: 400,
				height:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.desktop &&
					"object" ===
						typeof this.controlParams.attachments.desktop &&
					this.controlParams.attachments.desktop &&
					undefined !== this.controlParams.attachments.desktop.height
						? this.controlParams.attachments.desktop.height
						: 400,
			},
			tablet: {
				width:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.tablet &&
					"object" === typeof this.controlParams.attachments.tablet &&
					this.controlParams.attachments.tablet &&
					undefined !== this.controlParams.attachments.tablet.width
						? this.controlParams.attachments.tablet.width
						: 400,
				height:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.tablet &&
					"object" === typeof this.controlParams.attachments.tablet &&
					this.controlParams.attachments.tablet &&
					undefined !== this.controlParams.attachments.tablet.height
						? this.controlParams.attachments.tablet.height
						: 400,
			},
			mobile: {
				width:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.mobile &&
					"object" === typeof this.controlParams.attachments.mobile &&
					this.controlParams.attachments.mobile &&
					undefined !== this.controlParams.attachments.mobile.width
						? this.controlParams.attachments.mobile.width
						: 400,
				height:
					undefined !== this.controlParams.attachments &&
					"object" === typeof this.controlParams.attachments &&
					undefined !== this.controlParams.attachments.mobile &&
					"object" === typeof this.controlParams.attachments.mobile &&
					this.controlParams.attachments.mobile &&
					undefined !== this.controlParams.attachments.mobile.height
						? this.controlParams.attachments.mobile.height
						: 400,
			},
		};
		const getColorValue = (device) => {
			let color = "";

BackgroundComponent.propTypes = {
	control: PropTypes.object.isRequired,
	customizer: PropTypes.object.isRequired,
};

export default BackgroundComponent;

📁 Sid Gifari File Manager