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,101 @@
|
||||
/* 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 { ButtonGroup, Dashicon, Popover, Tooltip, Button } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class AddComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.addItem = this.addItem.bind( this );
|
||||
this.state = {
|
||||
isVisible: false,
|
||||
}
|
||||
}
|
||||
addItem( item, row, column ) {
|
||||
this.setState( { isVisible: false } );
|
||||
let updateItems = this.props.list;
|
||||
let theitem = [ {
|
||||
id: item,
|
||||
} ];
|
||||
updateItems.push( {
|
||||
id: item,
|
||||
});
|
||||
this.props.setList( updateItems );
|
||||
}
|
||||
render() {
|
||||
const renderItems = ( item, row, column ) => {
|
||||
let available = true;
|
||||
this.props.controlParams.rows.map( ( zone ) => {
|
||||
Object.keys( this.props.settings[zone] ).map( ( area ) => {
|
||||
if ( this.props.settings[zone][area].includes( item ) ) {
|
||||
available = false;
|
||||
}
|
||||
} );
|
||||
} );
|
||||
return (
|
||||
<Fragment>
|
||||
{ available && (
|
||||
<Button
|
||||
isTertiary
|
||||
className={ 'builder-add-btn' }
|
||||
onClick={ () => {
|
||||
this.addItem( item, row, column );
|
||||
} }
|
||||
>
|
||||
{ ( undefined !== this.props.choices[ item ] && undefined !== this.props.choices[ item ].name ? this.props.choices[ item ].name : '' ) }
|
||||
</Button>
|
||||
) }
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
const toggleClose = () => {
|
||||
if ( this.state.isVisible === true ) {
|
||||
this.setState( { isVisible: false } );
|
||||
}
|
||||
};
|
||||
let classForAdd = 'kadence-builder-add-item';
|
||||
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && 'right' === this.props.location ) {
|
||||
classForAdd = classForAdd + ' center-on-left';
|
||||
}
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && 'left' === this.props.location ) {
|
||||
classForAdd = classForAdd + ' center-on-right';
|
||||
}
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && 'left_center' === this.props.location ) {
|
||||
classForAdd = classForAdd + ' right-center-on-right';
|
||||
}
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && 'right_center' === this.props.location ) {
|
||||
classForAdd = classForAdd + ' left-center-on-left';
|
||||
}
|
||||
return (
|
||||
<div className={ classForAdd } key={ this.props.id }>
|
||||
{ this.state.isVisible && (
|
||||
<Popover position="top" inline={true} className="kadence-popover-add-builder" onClose={ toggleClose }>
|
||||
<div className="kadence-popover-builder-list">
|
||||
<ButtonGroup className="kadence-radio-container-control">
|
||||
{ Object.keys( this.props.choices ).map( ( item ) => {
|
||||
return renderItems( item, this.props.row, this.props.column );
|
||||
} ) }
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Popover>
|
||||
) }
|
||||
<Button
|
||||
className="kadence-builder-item-add-icon"
|
||||
onClick={ () => {
|
||||
this.setState( { isVisible: true } );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon="plus"/>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default AddComponent;
|
||||
@@ -0,0 +1,239 @@
|
||||
/* 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 RowComponent from './row-component';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const { ButtonGroup, Dashicon, Tooltip, Button } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class BuilderComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.updateValues = this.updateValues.bind( this );
|
||||
this.onDragEnd = this.onDragEnd.bind( this );
|
||||
this.onAddItem = this.onAddItem.bind( this );
|
||||
this.onDragStart = this.onDragStart.bind( this );
|
||||
this.onDragStop = this.onDragStop.bind( this );
|
||||
this.removeItem = this.removeItem.bind( this );
|
||||
this.focusPanel = this.focusPanel.bind( this );
|
||||
this.focusItem = this.focusItem.bind( this );
|
||||
this.onFooterUpdate = this.onFooterUpdate.bind( this );
|
||||
this.linkColumns();
|
||||
let value = this.props.control.setting.get();
|
||||
let baseDefault = {};
|
||||
this.defaultValue = this.props.control.params.default ? {
|
||||
...baseDefault,
|
||||
...this.props.control.params.default
|
||||
} : baseDefault;
|
||||
value = value ? {
|
||||
...this.defaultValue,
|
||||
...value
|
||||
} : this.defaultValue;
|
||||
let defaultParams = {};
|
||||
this.controlParams = this.props.control.params.input_attrs ? {
|
||||
...defaultParams,
|
||||
...this.props.control.params.input_attrs,
|
||||
} : defaultParams;
|
||||
this.choices = ( kadenceCustomizerControlsData && kadenceCustomizerControlsData.choices && kadenceCustomizerControlsData.choices[ this.controlParams.group ] ? kadenceCustomizerControlsData.choices[ this.controlParams.group ] : [] );
|
||||
this.state = {
|
||||
value: value,
|
||||
};
|
||||
}
|
||||
onDragStart() {
|
||||
var dropzones = document.querySelectorAll( '.kadence-builder-area' );
|
||||
var i;
|
||||
for (i = 0; i < dropzones.length; ++i) {
|
||||
dropzones[i].classList.add( 'kadence-dragging-dropzones' );
|
||||
}
|
||||
}
|
||||
onDragStop() {
|
||||
var dropzones = document.querySelectorAll( '.kadence-builder-area' );
|
||||
var i;
|
||||
for (i = 0; i < dropzones.length; ++i) {
|
||||
dropzones[i].classList.remove( 'kadence-dragging-dropzones' );
|
||||
}
|
||||
}
|
||||
removeItem( item, row, zone ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState[ row ];
|
||||
let updateItems = [];
|
||||
{ update[ zone ].length > 0 && (
|
||||
update[ zone ].map( ( old ) => {
|
||||
if ( item !== old ) {
|
||||
updateItems.push( old );
|
||||
}
|
||||
} )
|
||||
) };
|
||||
if ( 'header_desktop_items' === this.controlParams.group && row + '_center' === zone && updateItems.length === 0 ) {
|
||||
if ( update[ row + '_left_center' ].length > 0 ) {
|
||||
update[ row + '_left_center' ].map( ( move ) => {
|
||||
updateState[ row ][ row + '_left' ].push( move );
|
||||
} )
|
||||
updateState[ row ][ row + '_left_center' ] = [];
|
||||
}
|
||||
if ( update[ row + '_right_center' ].length > 0 ) {
|
||||
update[ row + '_right_center' ].map( ( move ) => {
|
||||
updateState[ row ][ row + '_right' ].push( move );
|
||||
} )
|
||||
updateState[ row ][ row + '_right_center' ] = [];
|
||||
}
|
||||
}
|
||||
update[ zone ] = updateItems;
|
||||
updateState[ row ][ zone ] = updateItems;
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
let event = new CustomEvent(
|
||||
'kadenceRemovedBuilderItem', {
|
||||
'detail': this.controlParams.group
|
||||
} );
|
||||
document.dispatchEvent( event );
|
||||
}
|
||||
onDragEnd( row, zone, items ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState[ row ];
|
||||
let updateItems = [];
|
||||
{ items.length > 0 && (
|
||||
items.map( ( item ) => {
|
||||
updateItems.push( item.id );
|
||||
} )
|
||||
) };
|
||||
if ( ! this.arraysEqual( update[ zone ], updateItems ) ) {
|
||||
if ( 'header_desktop_items' === this.controlParams.group && row + '_center' === zone && updateItems.length === 0 ) {
|
||||
if ( undefined !== update[ row + '_left_center' ] && update[ row + '_left_center' ].length > 0 ) {
|
||||
update[ row + '_left_center' ].map( ( move ) => {
|
||||
updateState[ row ][ row + '_left' ].push( move );
|
||||
} )
|
||||
updateState[ row ][ row + '_left_center' ] = [];
|
||||
}
|
||||
if ( undefined !== update[ row + '_right_center' ] && update[ row + '_right_center' ].length > 0 ) {
|
||||
update[ row + '_right_center' ].map( ( move ) => {
|
||||
updateState[ row ][ row + '_right' ].push( move );
|
||||
} )
|
||||
updateState[ row ][ row + '_right_center' ] = [];
|
||||
}
|
||||
}
|
||||
update[ zone ] = updateItems;
|
||||
updateState[ row ][ zone ] = updateItems;
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
}
|
||||
}
|
||||
onAddItem( row, zone, items ) {
|
||||
this.onDragEnd( row, zone, items );
|
||||
let event = new CustomEvent(
|
||||
'kadenceRemovedBuilderItem', {
|
||||
'detail': this.controlParams.group
|
||||
} );
|
||||
document.dispatchEvent( event );
|
||||
}
|
||||
onFooterUpdate( row ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState[ row ];
|
||||
let removeEvent = false;
|
||||
const columns = parseInt( this.props.customizer.control( 'footer_' + row + '_columns' ).setting.get(), 10 );
|
||||
if ( columns < 5 ) {
|
||||
if ( undefined !== update[ row + '_5' ] && update[ row + '_5' ].length > 0 ) {
|
||||
updateState[ row ][ row + '_5' ] = [];
|
||||
removeEvent = true;
|
||||
}
|
||||
}
|
||||
if ( columns < 4 ) {
|
||||
if ( undefined !== update[ row + '_4' ] && update[ row + '_4' ].length > 0 ) {
|
||||
updateState[ row ][ row + '_4' ] = [];
|
||||
removeEvent = true;
|
||||
}
|
||||
}
|
||||
if ( columns < 3 ) {
|
||||
if ( undefined !== update[ row + '_3' ] && update[ row + '_3' ].length > 0 ) {
|
||||
updateState[ row ][ row + '_3' ] = [];
|
||||
removeEvent = true;
|
||||
}
|
||||
}
|
||||
if ( columns < 2 ) {
|
||||
if ( undefined !== update[ row + '_2' ] && update[ row + '_2' ].length > 0 ) {
|
||||
updateState[ row ][ row + '_2' ] = [];
|
||||
removeEvent = true;
|
||||
}
|
||||
}
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
if ( removeEvent ) {
|
||||
let event = new CustomEvent(
|
||||
'kadenceRemovedBuilderItem', {
|
||||
'detail': this.controlParams.group
|
||||
} );
|
||||
document.dispatchEvent( event );
|
||||
}
|
||||
}
|
||||
arraysEqual( a, b ) {
|
||||
if (a === b) return true;
|
||||
if (a == null || b == null) return false;
|
||||
if (a.length != b.length) return false;
|
||||
for (var i = 0; i < a.length; ++i) {
|
||||
if (a[i] !== b[i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
focusPanel( item ) {
|
||||
if ( undefined !== this.props.customizer.section( 'kadence_customizer_' + item ) ) {
|
||||
this.props.customizer.section( 'kadence_customizer_' + item ).focus();
|
||||
}
|
||||
}
|
||||
focusItem( item ) {
|
||||
if ( undefined !== this.props.customizer.section( item ) ) {
|
||||
this.props.customizer.section( item ).focus();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className={ `kadence-control-field kadence-builder-items${ ( this.controlParams.rows.includes( 'popup' ) ? ' kadence-builder-items-with-popup' : '' ) }` }>
|
||||
{ this.controlParams.rows.includes( 'popup' ) && (
|
||||
<RowComponent showDrop={ () => this.onDragStart() } focusPanel={ ( item ) => this.focusPanel( item ) } focusItem={ ( item ) => this.focusItem( item ) } removeItem={ ( remove, row, zone ) => this.removeItem( remove, row, zone ) } onAddItem={ ( updateRow, updateZone, updateItems ) => this.onAddItem( updateRow, updateZone, updateItems ) } hideDrop={ () => this.onDragStop() } onUpdate={ ( updateRow, updateZone, updateItems ) => this.onDragEnd( updateRow, updateZone, updateItems ) } key={ 'popup' } row={ 'popup' } controlParams={ this.controlParams } choices={ this.choices } items={ this.state.value[ 'popup' ] } settings={ this.state.value } />
|
||||
) }
|
||||
<div className="kadence-builder-row-items">
|
||||
{ this.controlParams.rows.map( ( row ) => {
|
||||
if ( 'popup' === row ) {
|
||||
return;
|
||||
}
|
||||
return <RowComponent showDrop={ () => this.onDragStart() } focusPanel={ ( item ) => this.focusPanel( item ) } focusItem={ ( item ) => this.focusItem( item ) } removeItem={ ( remove, row, zone ) => this.removeItem( remove, row, zone ) } hideDrop={ () => this.onDragStop() } onUpdate={ ( updateRow, updateZone, updateItems ) => this.onDragEnd( updateRow, updateZone, updateItems ) } onAddItem={ ( updateRow, updateZone, updateItems ) => this.onAddItem( updateRow, updateZone, updateItems ) } key={ row } row={ row } controlParams={ this.controlParams } choices={ this.choices } customizer={ this.props.customizer } items={ this.state.value[ row ] } settings={ this.state.value } />;
|
||||
} ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// linkFocusButtons() {
|
||||
// this.props.control.container.on( 'click', '.kadence-builder-areas .kadence-builder-item', function( e ) {
|
||||
// e.preventDefault();
|
||||
// var targetKey = e.target.getAttribute( 'data-section' );
|
||||
// var targetControl = wp.customize.section( targetKey );
|
||||
// if ( targetControl ) targetControl.focus();
|
||||
// } );
|
||||
// }
|
||||
updateValues( value ) {
|
||||
this.props.control.setting.set( {
|
||||
...this.props.control.setting.get(),
|
||||
...value,
|
||||
flag: !this.props.control.setting.get().flag
|
||||
} );
|
||||
}
|
||||
linkColumns() {
|
||||
let self = this;
|
||||
document.addEventListener( 'kadenceUpdateFooterColumns', function( e ) {
|
||||
if ( 'footer_items' === self.controlParams.group ) {
|
||||
self.onFooterUpdate( e.detail );
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
BuilderComponent.propTypes = {
|
||||
control: PropTypes.object.isRequired,
|
||||
customizer: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default BuilderComponent;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import BuilderComponent from './builder-component.js';
|
||||
|
||||
export const BuilderControl = wp.customize.KadenceControl.extend( {
|
||||
renderContent: function renderContent() {
|
||||
let control = this;
|
||||
let root = createRoot( control.container[0] );
|
||||
root.render( <BuilderComponent control={ control } customizer={ wp.customize } /> );
|
||||
// ReactDOM.render( <BuilderComponent control={ control } customizer={ wp.customize } />, control.container[0] );
|
||||
}
|
||||
} );
|
||||
@@ -0,0 +1,79 @@
|
||||
/* jshint esversion: 6 */
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import ResponsiveControl from '../common/responsive.js';
|
||||
import { ReactSortable } from "react-sortablejs";
|
||||
import Icons from '../common/icons.js';
|
||||
import ItemComponent from './item-component';
|
||||
import AddComponent from './add-component';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const { ButtonGroup, Dashicon, Tooltip, Button } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class DropComponent extends Component {
|
||||
render() {
|
||||
const location = this.props.zone.replace( this.props.row + '_', '');
|
||||
const currentList = ( typeof this.props.items != "undefined" && this.props.items != null && this.props.items.length != null && this.props.items.length > 0 ? this.props.items : [] );
|
||||
let theItems = [];
|
||||
{ currentList.length > 0 && (
|
||||
currentList.map( ( item ) => {
|
||||
theItems.push(
|
||||
{
|
||||
id: item,
|
||||
}
|
||||
)
|
||||
} )
|
||||
) };
|
||||
const currentCenterList = ( typeof this.props.centerItems != "undefined" && this.props.centerItems != null && this.props.centerItems.length != null && this.props.centerItems.length > 0 ? this.props.centerItems : [] );
|
||||
let theCenterItems = [];
|
||||
{ currentCenterList.length > 0 && (
|
||||
currentCenterList.map( ( item ) => {
|
||||
theCenterItems.push(
|
||||
{
|
||||
id: item,
|
||||
}
|
||||
)
|
||||
} )
|
||||
) };
|
||||
return (
|
||||
<div className={ `kadence-builder-area kadence-builder-area-${ location }` } data-location={ this.props.zone }>
|
||||
<p className="kadence-small-label">{ this.props.controlParams.zones[this.props.row][this.props.zone] }</p>
|
||||
{ 'header_desktop_items' === this.props.controlParams.group && 'right' === location && (
|
||||
<Fragment>
|
||||
<ReactSortable animation={100} onStart={ () => this.props.showDrop() } onEnd={ () => this.props.hideDrop() } group={ this.props.controlParams.group } className={ `kadence-builder-drop kadence-builder-sortable-panel kadence-builder-drop-${ location }_center` } list={ theCenterItems } setList={ newState => this.props.onUpdate( this.props.row, this.props.zone + '_center', newState ) } >
|
||||
{ currentCenterList.length > 0 && (
|
||||
currentCenterList.map( ( item, index ) => {
|
||||
return <ItemComponent removeItem={ ( remove ) => this.props.removeItem( remove, this.props.row, this.props.zone + '_center' ) } focusItem={ ( focus ) => this.props.focusItem( focus ) } key={ item } index={ index } item={ item } controlParams={ this.props.controlParams } />;
|
||||
} )
|
||||
) }
|
||||
</ReactSortable>
|
||||
<AddComponent row={ this.props.row } list={ theCenterItems } settings={ this.props.settings } column={ this.props.zone + '_center' } setList={ newState => this.props.onAddItem( this.props.row, this.props.zone + '_center', newState ) } key={ location } location={ location + '_center' } id={ 'add-center-' + location } controlParams={ this.props.controlParams } choices={ this.props.choices } />
|
||||
</Fragment>
|
||||
) }
|
||||
<ReactSortable animation={100} onStart={ () => this.props.showDrop() } onEnd={ () => this.props.hideDrop() } group={ this.props.controlParams.group } className={ `kadence-builder-drop kadence-builder-sortable-panel kadence-builder-drop-${ location }` } list={ theItems } setList={ newState => this.props.onUpdate( this.props.row, this.props.zone, newState ) } >
|
||||
{ currentList.length > 0 && (
|
||||
currentList.map( ( item, index ) => {
|
||||
return <ItemComponent removeItem={ ( remove ) => this.props.removeItem( remove, this.props.row, this.props.zone ) } focusItem={ ( focus ) => this.props.focusItem( focus ) } key={ item } index={ index } item={ item } controlParams={ this.props.controlParams } />;
|
||||
} )
|
||||
) }
|
||||
</ReactSortable>
|
||||
<AddComponent row={ this.props.row } list={ theItems } settings={ this.props.settings } column={ this.props.zone } setList={ newState => this.props.onAddItem( this.props.row, this.props.zone, newState ) } key={ location } location={ location } id={ 'add-' + location } controlParams={ this.props.controlParams } choices={ this.props.choices } />
|
||||
{ 'header_desktop_items' === this.props.controlParams.group && 'left' === location && (
|
||||
<Fragment>
|
||||
<ReactSortable animation={100} onStart={ () => this.props.showDrop() } onEnd={ () => this.props.hideDrop() } group={ this.props.controlParams.group } className={ `kadence-builder-drop kadence-builder-sortable-panel kadence-builder-drop-${ location }_center` } list={ theCenterItems } setList={ newState => this.props.onUpdate( this.props.row, this.props.zone + '_center', newState ) } >
|
||||
{ currentCenterList.length > 0 && (
|
||||
currentCenterList.map( ( item, index ) => {
|
||||
return <ItemComponent removeItem={ ( remove ) => this.props.removeItem( remove, this.props.row, this.props.zone + '_center' ) } focusItem={ ( focus ) => this.props.focusItem( focus ) } key={ item } index={ index } item={ item } controlParams={ this.props.controlParams } />;
|
||||
} )
|
||||
) }
|
||||
</ReactSortable>
|
||||
<AddComponent row={ this.props.row } list={ theCenterItems } settings={ this.props.settings } column={ this.props.zone + '_center' } setList={ newState => this.props.onAddItem( this.props.row, this.props.zone + '_center', newState ) } key={ location } location={ location + '_center' } id={ 'add-center-' + location } controlParams={ this.props.controlParams } choices={ this.props.choices } />
|
||||
</Fragment>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default DropComponent;
|
||||
@@ -0,0 +1,74 @@
|
||||
/* 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 { ButtonGroup, Dashicon, Tooltip, Button } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class ItemComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.choices = ( kadenceCustomizerControlsData && kadenceCustomizerControlsData.choices && kadenceCustomizerControlsData.choices[ this.props.controlParams.group ] ? kadenceCustomizerControlsData.choices[ this.props.controlParams.group ] : [] );
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="kadence-builder-item" data-id={ this.props.item } data-section={ undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].section ? this.choices[ this.props.item ].section : '' } key={ this.props.item }>
|
||||
<span
|
||||
className="kadence-builder-item-icon kadence-move-icon"
|
||||
>
|
||||
{ Icons['drag'] }
|
||||
</span>
|
||||
<span
|
||||
className="kadence-builder-item-text"
|
||||
>
|
||||
{ ( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].name ? this.choices[ this.props.item ].name : '' ) }
|
||||
</span>
|
||||
<Button
|
||||
className="kadence-builder-item-focus-icon kadence-builder-item-icon"
|
||||
aria-label={ __( 'Setting settings for', 'kadence' ) + ' ' + ( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].name ? this.choices[ this.props.item ].name : '' ) }
|
||||
onClick={ () => {
|
||||
this.props.focusItem( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].section ? this.choices[ this.props.item ].section : '' );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon="admin-generic"/>
|
||||
</Button>
|
||||
{ kadenceCustomizerControlsData.blockWidgets && this.props.item.includes('widget') && 'toggle-widget' !== this.props.item && (
|
||||
<Button
|
||||
className="kadence-builder-item-focus-icon kadence-builder-item-icon"
|
||||
aria-label={ __( 'Setting settings for', 'kadence' ) + ' ' + ( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].name ? this.choices[ this.props.item ].name : '' ) }
|
||||
onClick={ () => {
|
||||
this.props.focusItem( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].section ? 'kadence_customizer_' + this.choices[ this.props.item ].section : '' );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon="admin-settings"/>
|
||||
</Button>
|
||||
) }
|
||||
{ kadenceCustomizerControlsData.blockWidgets && 'toggle-widget' === this.props.item && (
|
||||
<Button
|
||||
className="kadence-builder-item-focus-icon kadence-builder-item-icon"
|
||||
aria-label={ __( 'Setting settings for', 'kadence' ) + ' ' + ( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].name ? this.choices[ this.props.item ].name : '' ) }
|
||||
onClick={ () => {
|
||||
this.props.focusItem( 'kadence_customizer_sidebar-widgets-header2' );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon="admin-settings"/>
|
||||
</Button>
|
||||
) }
|
||||
<Button
|
||||
className="kadence-builder-item-icon"
|
||||
aria-label={ __( 'Remove', 'kadence' ) + ' ' + ( undefined !== this.choices[ this.props.item ] && undefined !== this.choices[ this.props.item ].name ? this.choices[ this.props.item ].name : '' ) }
|
||||
onClick={ () => {
|
||||
this.props.removeItem( this.props.item );
|
||||
} }
|
||||
>
|
||||
<Dashicon icon="no-alt"/>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default ItemComponent;
|
||||
@@ -0,0 +1,70 @@
|
||||
/* 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 DropComponent from './drop-component';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const { ButtonGroup, Dashicon, Tooltip, Button } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class RowComponent extends Component {
|
||||
render() {
|
||||
let centerClass = 'no-center-items';
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && typeof this.props.items[this.props.row + '_center'] != "undefined" && this.props.items[this.props.row + '_center'] != null && this.props.items[this.props.row + '_center'].length != null && this.props.items[this.props.row + '_center'].length > 0 ){
|
||||
centerClass = 'has-center-items';
|
||||
}
|
||||
if ( 'popup' === this.props.row ) {
|
||||
centerClass = 'popup-vertical-group';
|
||||
}
|
||||
if ( 'footer_items' === this.props.controlParams.group ) {
|
||||
var columns = this.props.customizer.control( 'footer_' + this.props.row + '_columns' ).setting.get();
|
||||
var layout = this.props.customizer.control( 'footer_' + this.props.row + '_layout' ).setting.get();
|
||||
var direction = this.props.customizer.control( 'footer_' + this.props.row + '_direction' ).setting.get();
|
||||
centerClass = 'footer-column-row footer-row-columns-' + columns + ' footer-row-layout-' + layout.desktop + ' footer-row-direction-' + direction.desktop;
|
||||
}
|
||||
const mode = ( this.props.controlParams.group.indexOf( 'header' ) !== -1 ? 'header' : 'footer' );
|
||||
let besideItems = [];
|
||||
return (
|
||||
<div className={ `kadence-builder-areas ${ centerClass }` }>
|
||||
<Button
|
||||
className="kadence-row-left-actions"
|
||||
aria-label={ __( 'Edit Settings for', 'kadence' ) + ' ' + ( this.props.row === 'popup' ? __( 'Off Canvas', 'kadence' ) : this.props.row + ' ' + __( 'Row', 'kadence' ) ) }
|
||||
onClick={ () => this.props.focusPanel( mode + '_' + this.props.row ) }
|
||||
icon="admin-generic"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
className="kadence-row-actions"
|
||||
aria-label={ __( 'Edit Settings for', 'kadence' ) + ' ' + ( this.props.row === 'popup' ? __( 'Off Canvas', 'kadence' ) : this.props.row + ' ' + __( 'Row', 'kadence' ) ) }
|
||||
onClick={ () => this.props.focusPanel( mode + '_' + this.props.row ) }
|
||||
>
|
||||
{ ( this.props.row === 'popup' ? __( 'Off Canvas', 'kadence' ) : this.props.row + ' ' + __( 'Row', 'kadence' ) ) }
|
||||
<Dashicon icon="admin-generic" />
|
||||
</Button>
|
||||
<div className="kadence-builder-group kadence-builder-group-horizontal" data-setting={ this.props.row }>
|
||||
{ Object.keys( this.props.controlParams.zones[ this.props.row ] ).map( ( zone, index ) => {
|
||||
if ( this.props.row + '_left_center' === zone || this.props.row + '_right_center' === zone ) {
|
||||
return;
|
||||
}
|
||||
if ( 'footer_items' === this.props.controlParams.group ) {
|
||||
if ( columns < ( index + 1 ) ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && this.props.row + '_left' === zone ) {
|
||||
besideItems = this.props.items[ this.props.row + '_left_center' ];
|
||||
}
|
||||
if ( 'header_desktop_items' === this.props.controlParams.group && this.props.row + '_right' === zone ) {
|
||||
besideItems = this.props.items[ this.props.row + '_right_center' ];
|
||||
}
|
||||
return <DropComponent removeItem={ ( remove, removeRow, removeZone ) => this.props.removeItem( remove, removeRow, removeZone ) } focusItem={ ( focus ) => this.props.focusItem( focus ) } hideDrop={ () => this.props.hideDrop() } showDrop={ () => this.props.showDrop() } onUpdate={ ( updateRow, updateZone, updateItems ) => this.props.onUpdate( updateRow, updateZone, updateItems ) } zone={ zone } row={ this.props.row } choices={ this.props.choices } key={ zone } items={ this.props.items[zone] } centerItems={ besideItems } controlParams={ this.props.controlParams } onAddItem={ ( updateRow, updateZone, updateItems ) => this.props.onAddItem( updateRow, updateZone, updateItems ) } settings={ this.props.settings } />;
|
||||
} ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default RowComponent;
|
||||
Reference in New Issue
Block a user