File manager - Edit - /home/acsexpp/www/wp-content/themes/kadence/inc/customizer/react/src/color/color-component.js
Back
import PropTypes from "prop-types"; import { isEqual } from "lodash"; import { __ } from "@wordpress/i18n"; const { Tooltip, Button, Dashicon } = wp.components; /** * WordPress dependencies */ import { createRef, Component, Fragment } from "@wordpress/element"; import ColorControl from "../common/color.js"; class ColorComponent extends Component { constructor(props) { super(props); this.handleChangeComplete = this.handleChangeComplete.bind(this); this.updateValues = this.updateValues.bind(this); let value = this.props.control.setting.get(); let baseDefault = { color: "", hover: "", }; 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 = { colors: { color: { tooltip: __("Color", "kadence"), palette: true, }, hover: { tooltip: __("Hover Color", "kadence"), palette: true, }, }, allowGradient: false, }; 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, colorPalette: palette, }; this.anchorNodeRef = createRef(); } handleChangeComplete(color, isPalette, item) { let value = this.state.value; if (isPalette) { value[item] = isPalette; } else if (typeof color === "string" || color instanceof String) { value[item] = color; } else if ( undefined !== color.rgb && undefined !== color.rgb.a && 1 !== color.rgb.a ) { value[item] = "rgba(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + "," + color.rgb.a + ")"; } else { value[item] = color.hex; } this.updateValues(value); } render() { return ( <div ref={this.anchorNodeRef} className="kadence-control-field kadence-color-control" > <span className="customize-control-title"> <Fragment> <Tooltip text={__("Reset Values", "kadence")}> <Button className="reset kadence-reset" disabled={ JSON.stringify(this.state.value) === JSON.stringify(this.defaultValue) } onClick={() => { let value = JSON.parse( JSON.stringify(this.defaultValue) ); this.updateValues(value); }} > <Dashicon icon="image-rotate" /> </Button> </Tooltip> {this.props.control.params.label && this.props.control.params.label} </Fragment> </span> {Object.keys(this.controlParams.colors).map((item) => { return ( <ColorControl key={item} presetColors={this.state.colorPalette} color={ undefined !== this.state.value[item] && this.state.value[item] ? this.state.value[item] : "" } usePalette={ undefined !== this.controlParams.colors[item] && undefined !== this.controlParams.colors[item].palette && "" !== this.controlParams.colors[item].palette ? this.controlParams.colors[item].palette : true } tooltip={ undefined !== this.controlParams.colors[item] && undefined !== this.controlParams.colors[item].tooltip ? this.controlParams.colors[item].tooltip : "" } onChangeComplete={(color, isPalette) => this.handleChangeComplete( color, isPalette, item ) } customizer={this.props.customizer} allowGradient={this.controlParams.allowGradient} controlRef={this.anchorNodeRef} /> ); })} { this.props.control.renderNotice() } </div> ); } updateValues(value) { this.setState({ value: value }); this.props.control.setting.set({ ...this.props.control.setting.get(), ...value, }); } } ColorComponent.propTypes = { control: PropTypes.object.isRequired, customizer: PropTypes.object.isRequired, }; export default ColorComponent;
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings