f3ff7b7186
- WordPress 6.9.4 (es_ES) with Kadence theme - Homepage: Hero, La Asociación, Pilares, Beneficios, Eventos, Miembros, Hazte Miembro, Contacto - Brand identity: #13294b navy, #a12932 burgundy, #c69c48 gold - Fonts: Raleway (headings) + Source Sans 3 (body) + Lato (UI) - Plugins: Kadence Blocks, Polylang, Contact Form 7 - Custom CSS with full brand styling and responsive layout - HTTPS enforced via wp-config.php proxy detection
79 lines
3.5 KiB
JavaScript
79 lines
3.5 KiB
JavaScript
/* jshint esversion: 6 */
|
|
import PropTypes from 'prop-types';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
const { ButtonGroup, Dashicon, Tooltip, Button } = wp.components;
|
|
|
|
const { Component, Fragment } = wp.element;
|
|
class TabsComponent extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
this.focusPanel = this.focusPanel.bind( this );
|
|
let defaultParams = {
|
|
'general': {
|
|
'label': 'General',
|
|
'target' : '',
|
|
},
|
|
'design': {
|
|
'label': 'Design',
|
|
'target' : 'design',
|
|
},
|
|
'active': 'general',
|
|
};
|
|
this.controlParams = this.props.control.params.input_attrs ? {
|
|
...defaultParams,
|
|
...this.props.control.params.input_attrs,
|
|
} : defaultParams;
|
|
}
|
|
focusPanel( section ) {
|
|
let self = this;
|
|
let otherSection;
|
|
let secton_id = ( 'woocommerce_product_catalog_design' === section || 'woocommerce_product_catalog' === section || 'woocommerce_store_notice' === section || 'woocommerce_store_notice_design' === section ? section : 'kadence_customizer_' + section )
|
|
if ( section === self.controlParams.design.target ) {
|
|
otherSection = ( 'woocommerce_product_catalog_design' === section || 'woocommerce_product_catalog' === section || 'woocommerce_store_notice' === section || 'woocommerce_store_notice_design' === section ? self.controlParams.general.target : 'kadence_customizer_' + self.controlParams.general.target );
|
|
} else {
|
|
otherSection = ( 'woocommerce_product_catalog_design' === section || 'woocommerce_product_catalog' === section || 'woocommerce_store_notice' === section || 'woocommerce_store_notice_design' === section ? self.controlParams.design.target : 'kadence_customizer_' + self.controlParams.design.target );
|
|
}
|
|
if ( undefined !== self.props.customizer.section( secton_id ) ) {
|
|
const container = self.props.customizer.section( secton_id ).contentContainer[0];
|
|
const otherContainer = self.props.customizer.section( otherSection ).contentContainer[0];
|
|
container.classList.add( 'kadence-prevent-transition' );
|
|
otherContainer.classList.add( 'kadence-prevent-transition' );
|
|
setTimeout( function(){
|
|
self.props.customizer.section( secton_id ).focus();
|
|
}, 10);
|
|
setTimeout( function(){
|
|
container.classList.remove( 'kadence-prevent-transition' );
|
|
container.classList.remove( 'busy' );
|
|
container.style.top = null;
|
|
otherContainer.classList.remove( 'kadence-prevent-transition' );
|
|
otherContainer.classList.remove( 'busy' );
|
|
}, 300);
|
|
}
|
|
}
|
|
render() {
|
|
return (
|
|
<div className="customize-control-kadence_blank_control">
|
|
<div className="customize-control-description">
|
|
<div class="kadence-nav-tabs kadence-compontent-tabs nav-tab-wrapper wp-clearfix">
|
|
<Button className={ `nav-tab kadence-general-tab kadence-compontent-tabs-button kadence-nav-tabs-button${ 'general' === this.controlParams.active ? ' nav-tab-active' : '' }` } onClick={ () => this.focusPanel( this.controlParams.general.target ) }>
|
|
<span>{ this.controlParams.general.label }</span>
|
|
</Button>
|
|
<Button className={ `nav-tab kadence-design-tab kadence-compontent-tabs-button kadence-nav-tabs-button${ 'design' === this.controlParams.active ? ' nav-tab-active' : '' }` } onClick={ () => this.focusPanel( this.controlParams.design.target ) }>
|
|
<span>{ this.controlParams.design.label }</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{ this.props.control.renderNotice() }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
TabsComponent.propTypes = {
|
|
control: PropTypes.object.isRequired,
|
|
customizer: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default TabsComponent;
|