feat: initial ACRIB WordPress deployment
- 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
This commit is contained in:
Malin
@@ -0,0 +1,14 @@
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import MeasureComponent from './measure-component';
|
||||
|
||||
export const MeasureControl = wp.customize.KadenceControl.extend( {
|
||||
renderContent: function renderContent() {
|
||||
let control = this;
|
||||
let root = createRoot( control.container[0] );
|
||||
root.render( <MeasureComponent control={control}/> );
|
||||
// ReactDOM.render(
|
||||
// <MeasureComponent control={control}/>,
|
||||
// control.container[0]
|
||||
// );
|
||||
}
|
||||
} );
|
||||
@@ -0,0 +1,516 @@
|
||||
/* jshint esversion: 6 */
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import ResponsiveControl from '../common/responsive.js';
|
||||
import Icons from '../common/icons.js';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const { RangeControl, Dashicon, Tooltip, Button, Toolbar, TextControl, ToolbarGroup } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class MeasureComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.updateValues = this.updateValues.bind( this );
|
||||
this.getUnitButtons = this.getUnitButtons.bind( this );
|
||||
this.createLevelControlToolbar = this.createLevelControlToolbar.bind( this );
|
||||
this.createResponsiveLevelControlToolbar = this.createResponsiveLevelControlToolbar.bind( this );
|
||||
this.getResponsiveUnitButtons = this.getResponsiveUnitButtons.bind( this );
|
||||
let value = this.props.control.setting.get();
|
||||
let baseDefault = {
|
||||
'unit': {
|
||||
'desktop': 'px'
|
||||
},
|
||||
'size': {
|
||||
'desktop': [ 0, 0, 0, 0 ]
|
||||
},
|
||||
'locked': {
|
||||
'desktop': true
|
||||
}
|
||||
};
|
||||
this.defaultValue = this.props.control.params.default ? {
|
||||
...baseDefault,
|
||||
...this.props.control.params.default
|
||||
} : baseDefault;
|
||||
value = value ? {
|
||||
...this.defaultValue,
|
||||
...value
|
||||
} : this.defaultValue;
|
||||
let defaultParams = {
|
||||
min: {
|
||||
px: '0',
|
||||
em: '0',
|
||||
rem: '0',
|
||||
},
|
||||
max: {
|
||||
px: '120',
|
||||
em: '12',
|
||||
rem: '12',
|
||||
},
|
||||
step: {
|
||||
px: '1',
|
||||
em: '0.01',
|
||||
rem: '0.01',
|
||||
},
|
||||
units: ['px', 'em', 'rem' ],
|
||||
responsive: true,
|
||||
};
|
||||
this.controlParams = this.props.control.params.input_attrs ? {
|
||||
...defaultParams,
|
||||
...this.props.control.params.input_attrs,
|
||||
} : defaultParams;
|
||||
this.state = {
|
||||
currentDevice: 'desktop',
|
||||
size: value.size,
|
||||
unit: value.unit,
|
||||
locked: value.locked
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const responsiveControlLabel = (
|
||||
<Fragment>
|
||||
{ this.controlParams.responsive && (
|
||||
<Fragment>
|
||||
<Tooltip text={ __( 'Reset Device Values', 'kadence' ) }>
|
||||
<Button
|
||||
className="reset kadence-reset"
|
||||
disabled={ ( this.state.size[this.state.currentDevice] === this.defaultValue.size[this.state.currentDevice] ) && ( this.state.unit[this.state.currentDevice] === this.defaultValue.unit[this.state.currentDevice] ) }
|
||||
onClick={ () => {
|
||||
let value = this.state.size;
|
||||
value[this.state.currentDevice] = this.defaultValue.size[this.state.currentDevice];
|
||||
let svalue = this.state.unit;
|
||||
svalue[this.state.currentDevice] = this.defaultValue.unit[this.state.currentDevice];
|
||||
let lvalue = this.state.unit;
|
||||
lvalue[this.state.currentDevice] = this.defaultValue.locked[this.state.currentDevice];
|
||||
this.setState( { size: value, unit: svalue, locked: lvalue } );
|
||||
this.updateValues( { size: value, unit: svalue, locked: lvalue } );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon='image-rotate' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{ this.props.control.params.label &&
|
||||
this.props.control.params.label
|
||||
}
|
||||
</Fragment>
|
||||
) }
|
||||
</Fragment>
|
||||
);
|
||||
const controlLabel = (
|
||||
<Fragment>
|
||||
<Tooltip text={ __( 'Reset Values', 'kadence' ) }>
|
||||
<Button
|
||||
className="reset kadence-reset"
|
||||
disabled={ ( this.state.size === this.defaultValue.size ) && ( this.state.unit === this.defaultValue.unit ) }
|
||||
onClick={ () => {
|
||||
let value = this.state.size;
|
||||
value = this.defaultValue.size;
|
||||
let svalue = this.state.unit;
|
||||
svalue = this.defaultValue.unit;
|
||||
let lvalue = this.state.locked;
|
||||
lvalue = this.defaultValue.locked;
|
||||
this.setState( { size: value, unit: svalue, locked: lvalue } );
|
||||
this.updateValues( { size: value, unit: svalue, locked: lvalue } );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon='image-rotate' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{ this.props.control.params.label &&
|
||||
this.props.control.params.label
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
return (
|
||||
<div className="kadence-control-field kadence-range-control">
|
||||
{ this.controlParams.responsive && (
|
||||
<ResponsiveControl
|
||||
onChange={ ( currentDevice) => this.setState( { currentDevice } ) }
|
||||
controlLabel={ responsiveControlLabel }
|
||||
>
|
||||
{ this.state.locked[this.state.currentDevice] && (
|
||||
<RangeControl
|
||||
initialPosition={ ( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][0] ? this.state.size[this.state.currentDevice][0] : '' ) }
|
||||
value={ ( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][0] ? this.state.size[this.state.currentDevice][0] : '' ) }
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
value[ this.state.currentDevice ] = [ val, val, val, val ];
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit[this.state.currentDevice]]}
|
||||
max={this.controlParams.max[this.state.unit[this.state.currentDevice]]}
|
||||
step={this.controlParams.step[this.state.unit[this.state.currentDevice]]}
|
||||
/>
|
||||
) }
|
||||
{ ! this.state.locked[this.state.currentDevice] && (
|
||||
<Fragment>
|
||||
<TextControl
|
||||
label={ __( 'Top', 'kadence' ) }
|
||||
hideLabelFromVision={ true }
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
value={( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][0] ? this.state.size[this.state.currentDevice][0] : '' )}
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
if ( undefined === value[ this.state.currentDevice ] ) {
|
||||
value[ this.state.currentDevice ] = [ 0, 0, 0, 0 ];
|
||||
}
|
||||
value[ this.state.currentDevice ][0] = val;
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit[this.state.currentDevice]]}
|
||||
max={this.controlParams.max[this.state.unit[this.state.currentDevice]]}
|
||||
step={this.controlParams.step[this.state.unit[this.state.currentDevice]]}
|
||||
/>
|
||||
<TextControl
|
||||
label={ __( 'Right', 'kadence' ) }
|
||||
hideLabelFromVision={ true }
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
value={( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][1] ? this.state.size[this.state.currentDevice][1] : '' )}
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
if ( undefined === value[ this.state.currentDevice ] ) {
|
||||
value[ this.state.currentDevice ] = [ 0, 0, 0, 0 ];
|
||||
}
|
||||
value[ this.state.currentDevice ][1] = val;
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit[this.state.currentDevice]]}
|
||||
max={this.controlParams.max[this.state.unit[this.state.currentDevice]]}
|
||||
step={this.controlParams.step[this.state.unit[this.state.currentDevice]]}
|
||||
/>
|
||||
<TextControl
|
||||
label={ __( 'Bottom', 'kadence' ) }
|
||||
hideLabelFromVision={ true }
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
value={( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][2] ? this.state.size[this.state.currentDevice][2] : '' )}
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
if ( undefined === value[ this.state.currentDevice ] ) {
|
||||
value[ this.state.currentDevice ] = [ 0, 0, 0, 0 ];
|
||||
}
|
||||
value[ this.state.currentDevice ][2] = val;
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit[this.state.currentDevice]]}
|
||||
max={this.controlParams.max[this.state.unit[this.state.currentDevice]]}
|
||||
step={this.controlParams.step[this.state.unit[this.state.currentDevice]]}
|
||||
/>
|
||||
<TextControl
|
||||
label={ __( 'Left', 'kadence' ) }
|
||||
hideLabelFromVision={ true }
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
value={( this.state.size[this.state.currentDevice] && this.state.size[this.state.currentDevice][3] ? this.state.size[this.state.currentDevice][3] : '' )}
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
if ( undefined === value[ this.state.currentDevice ] ) {
|
||||
value[ this.state.currentDevice ] = [ 0, 0, 0, 0 ];
|
||||
}
|
||||
value[ this.state.currentDevice ][3] = val;
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit[this.state.currentDevice]]}
|
||||
max={this.controlParams.max[this.state.unit[this.state.currentDevice]]}
|
||||
step={this.controlParams.step[this.state.unit[this.state.currentDevice]]}
|
||||
/>
|
||||
</Fragment>
|
||||
) }
|
||||
<div className="kadence-units kadence-locked">
|
||||
{ this.getResponsiveLockedButtons() }
|
||||
</div>
|
||||
{ this.controlParams.units && (
|
||||
<div className="kadence-units">
|
||||
{ this.getResponsiveUnitButtons() }
|
||||
</div>
|
||||
) }
|
||||
</ResponsiveControl>
|
||||
) }
|
||||
{ ! this.controlParams.responsive && (
|
||||
<Fragment>
|
||||
<div className="kadence-responsive-control-bar">
|
||||
<span className="customize-control-title">{ controlLabel }</span>
|
||||
</div>
|
||||
<div className="kadence-responsive-controls-content">
|
||||
{ this.state.locked && (
|
||||
<RangeControl
|
||||
initialPosition={ this.state.size[0] }
|
||||
value={this.state.size[0]}
|
||||
onChange={ (val) => {
|
||||
let value = this.state.size;
|
||||
value = [ val, val, val, val ];
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit]}
|
||||
max={this.controlParams.max[this.state.unit]}
|
||||
step={this.controlParams.step[this.state.unit]}
|
||||
/>
|
||||
) }
|
||||
{ ! this.state.locked && (
|
||||
<Fragment>
|
||||
<div className="measure-input-wrap">
|
||||
<input
|
||||
value={this.state.size[0]}
|
||||
onChange={ ( event ) => {
|
||||
const val = ( '' !== event.target.value ? Number( event.target.value ) : '' );
|
||||
let value = this.state.size;
|
||||
value[0] = val;
|
||||
if ( val !== '' ) {
|
||||
if ( '' === value[1] ) {
|
||||
value[1] = 0;
|
||||
}
|
||||
if ( '' === value[2] ) {
|
||||
value[2] = 0;
|
||||
}
|
||||
if ( '' === value[3] ) {
|
||||
value[3] = 0;
|
||||
}
|
||||
}
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit]}
|
||||
max={this.controlParams.max[this.state.unit]}
|
||||
step={this.controlParams.step[this.state.unit]}
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
/>
|
||||
<small>{ __( 'Top', 'kadence' ) }</small>
|
||||
</div>
|
||||
<div className="measure-input-wrap">
|
||||
<input
|
||||
value={this.state.size[1]}
|
||||
onChange={ ( event ) => {
|
||||
const val = ( '' !== event.target.value ? Number( event.target.value ) : '' );
|
||||
let value = this.state.size;
|
||||
value[1] = val;
|
||||
if ( val !== '' ) {
|
||||
if ( '' === value[0] ) {
|
||||
value[0] = 0;
|
||||
}
|
||||
if ( '' === value[2] ) {
|
||||
value[2] = 0;
|
||||
}
|
||||
if ( '' === value[3] ) {
|
||||
value[3] = 0;
|
||||
}
|
||||
}
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit]}
|
||||
max={this.controlParams.max[this.state.unit]}
|
||||
step={this.controlParams.step[this.state.unit]}
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
/>
|
||||
<small>{ __( 'Right', 'kadence' ) }</small>
|
||||
</div>
|
||||
<div className="measure-input-wrap">
|
||||
<input
|
||||
value={this.state.size[2]}
|
||||
onChange={ ( event ) => {
|
||||
const val = ( '' !== event.target.value ? Number( event.target.value ) : '' );
|
||||
let value = this.state.size;
|
||||
value[2] = val;
|
||||
if ( val !== '' ) {
|
||||
if ( '' === value[0] ) {
|
||||
value[0] = 0;
|
||||
}
|
||||
if ( '' === value[1] ) {
|
||||
value[1] = 0;
|
||||
}
|
||||
if ( '' === value[3] ) {
|
||||
value[3] = 0;
|
||||
}
|
||||
}
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit]}
|
||||
max={this.controlParams.max[this.state.unit]}
|
||||
step={this.controlParams.step[this.state.unit]}
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
/>
|
||||
<small>{ __( 'Bottom', 'kadence' ) }</small>
|
||||
</div>
|
||||
<div className="measure-input-wrap">
|
||||
<input
|
||||
value={this.state.size[3]}
|
||||
onChange={ ( event ) => {
|
||||
const val = ( '' !== event.target.value ? Number( event.target.value ) : '' );
|
||||
let value = this.state.size;
|
||||
value[3] = val;
|
||||
if ( val !== '' ) {
|
||||
if ( '' === value[0] ) {
|
||||
value[0] = 0;
|
||||
}
|
||||
if ( '' === value[1] ) {
|
||||
value[1] = 0;
|
||||
}
|
||||
if ( '' === value[2] ) {
|
||||
value[2] = 0;
|
||||
}
|
||||
}
|
||||
this.setState( { size: value } );
|
||||
this.updateValues( { size: value } );
|
||||
} }
|
||||
min={this.controlParams.min[this.state.unit]}
|
||||
max={this.controlParams.max[this.state.unit]}
|
||||
step={this.controlParams.step[this.state.unit]}
|
||||
type="number"
|
||||
className="measure-inputs"
|
||||
/>
|
||||
<small>{ __( 'Left', 'kadence' ) }</small>
|
||||
</div>
|
||||
</Fragment>
|
||||
) }
|
||||
<div className="kadence-units kadence-locked">
|
||||
{ this.getLockedButtons() }
|
||||
</div>
|
||||
{ this.controlParams.units && (
|
||||
<div className="kadence-units">
|
||||
{ this.getUnitButtons() }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</Fragment>
|
||||
) }
|
||||
{ this.props.control.renderNotice() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
getLockedButtons() {
|
||||
const { locked } = this.state;
|
||||
if ( locked ) {
|
||||
return ( <Button
|
||||
className="is-single"
|
||||
onClick={ () => {
|
||||
let value = this.state.locked;
|
||||
value = false;
|
||||
this.setState( { locked: value } );
|
||||
this.updateValues( { locked: value } );
|
||||
} }
|
||||
isSmall
|
||||
>{ Icons['locked'] }</Button> );
|
||||
}
|
||||
return ( <Button
|
||||
className="is-single"
|
||||
isSmall
|
||||
onClick={ () => {
|
||||
let value = this.state.locked;
|
||||
value = true;
|
||||
this.setState( { locked: value } );
|
||||
this.updateValues( { locked: value } );
|
||||
} }
|
||||
>{ Icons['unlocked'] }</Button> );
|
||||
}
|
||||
getUnitButtons() {
|
||||
let self = this;
|
||||
const { units } = this.controlParams;
|
||||
if ( units.length === 1 ) {
|
||||
return ( <Button
|
||||
className="is-active is-single"
|
||||
isSmall
|
||||
disabled
|
||||
>{ ( '%' === self.state.unit ? Icons.percent : Icons[ self.state.unit ] ) }</Button> );
|
||||
}
|
||||
return <ToolbarGroup
|
||||
isCollapsed={ true }
|
||||
icon={ ( '%' === self.state.unit ? Icons.percent : Icons[ self.state.unit ] ) }
|
||||
label={ __( 'Unit', 'kadence' ) }
|
||||
controls={ units.map( (unit) => this.createLevelControlToolbar( unit ) ) }
|
||||
/>
|
||||
}
|
||||
createLevelControlToolbar( unit ) {
|
||||
return [ {
|
||||
icon: ( unit === '%' ? Icons.percent : Icons[ unit ] ),
|
||||
isActive: this.state.unit === unit,
|
||||
onClick: () => {
|
||||
let value = this.state.unit;
|
||||
value = unit;
|
||||
this.setState( { unit: value } );
|
||||
this.updateValues( { unit: value } );
|
||||
},
|
||||
} ];
|
||||
};
|
||||
createResponsiveLevelControlToolbar( unit ) {
|
||||
return [ {
|
||||
icon: ( unit === '%' ? Icons.percent : Icons[ unit ] ),
|
||||
isActive: this.state.unit[this.state.currentDevice] === unit,
|
||||
onClick: () => {
|
||||
let value = this.state.unit;
|
||||
value[ this.state.currentDevice ] = unit;
|
||||
this.setState( { unit: value } );
|
||||
this.updateValues( { unit: value } );
|
||||
},
|
||||
} ];
|
||||
};
|
||||
getResponsiveLockedButtons() {
|
||||
let self = this;
|
||||
const { locked } = this.state;
|
||||
if ( locked[ self.state.currentDevice ] ) {
|
||||
return ( <Button
|
||||
className="is-single"
|
||||
isSmall
|
||||
onClick={ () => {
|
||||
let value = this.state.locked;
|
||||
value[ this.state.currentDevice ] = false;
|
||||
this.setState( { locked: value } );
|
||||
this.updateValues( { locked: value } );
|
||||
} }
|
||||
>{ Icons['locked'] }</Button> );
|
||||
}
|
||||
return ( <Button
|
||||
className="is-single"
|
||||
isSmall
|
||||
onClick={ () => {
|
||||
let value = this.state.locked;
|
||||
value[ this.state.currentDevice ] = true;
|
||||
this.setState( { locked: value } );
|
||||
this.updateValues( { locked: value } );
|
||||
} }
|
||||
>{ Icons['unlocked'] }</Button> );
|
||||
}
|
||||
getResponsiveUnitButtons() {
|
||||
let self = this;
|
||||
const { units } = this.controlParams;
|
||||
if ( units.length === 1 ) {
|
||||
return ( <Button
|
||||
className="is-active is-single"
|
||||
isSmall
|
||||
disabled
|
||||
>{ ( '%' === self.state.unit[ self.state.currentDevice ] ? Icons.percent : Icons[ self.state.unit[ self.state.currentDevice ] ] ) }</Button> );
|
||||
}
|
||||
return <ToolbarGroup
|
||||
isCollapsed={ true }
|
||||
icon={ ( '%' === self.state.unit[ self.state.currentDevice ] ? Icons.percent : Icons[ self.state.unit[ self.state.currentDevice ] ] ) }
|
||||
label={ __( 'Unit', 'kadence' ) }
|
||||
controls={ units.map( (unit) => this.createResponsiveLevelControlToolbar( unit ) ) }
|
||||
/>
|
||||
}
|
||||
updateValues( value ) {
|
||||
this.props.control.setting.set( {
|
||||
...this.props.control.setting.get(),
|
||||
...value,
|
||||
flag: !this.props.control.setting.get().flag
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
MeasureComponent.propTypes = {
|
||||
control: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default MeasureComponent;
|
||||
Reference in New Issue
Block a user