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,314 @@
|
||||
/* 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 { ReactSortable } from "react-sortablejs";
|
||||
import uniqueId from 'lodash/uniqueId';
|
||||
|
||||
import ItemComponent from './item-component';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const { ButtonGroup, Dashicon, Tooltip, Popover, Button, SelectControl } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class ContactComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.updateValues = this.updateValues.bind( this );
|
||||
this.onDragEnd = this.onDragEnd.bind( this );
|
||||
this.onDragStart = this.onDragStart.bind( this );
|
||||
this.onDragStop = this.onDragStop.bind( this );
|
||||
this.removeItem = this.removeItem.bind( this );
|
||||
this.saveArrayUpdate = this.saveArrayUpdate.bind( this );
|
||||
this.toggleEnableItem = this.toggleEnableItem.bind( this );
|
||||
this.onChangeIcon = this.onChangeIcon.bind( this );
|
||||
this.onChangeLabel = this.onChangeLabel.bind( this );
|
||||
this.onChangeLink = this.onChangeLink.bind( this );
|
||||
this.onChangeURL = this.onChangeURL.bind( this );
|
||||
this.onChangeAttachment = this.onChangeAttachment.bind( this );
|
||||
this.onChangeWidth = this.onChangeWidth.bind( this );
|
||||
this.onChangeSource = this.onChangeSource.bind( this );
|
||||
this.addItem = this.addItem.bind( this );
|
||||
let value = this.props.control.setting.get();
|
||||
let baseDefault = {
|
||||
'items': [
|
||||
{
|
||||
'id': 'phone',
|
||||
'enabled': true,
|
||||
'source': 'icon',
|
||||
'url': '',
|
||||
'imageid': '',
|
||||
'width': 24,
|
||||
'link': '',
|
||||
'icon': 'mobile',
|
||||
'label': '444-546-8765',
|
||||
},
|
||||
{
|
||||
'id': 'hours',
|
||||
'enabled': true,
|
||||
'source': 'icon',
|
||||
'url': '',
|
||||
'imageid': '',
|
||||
'width': 24,
|
||||
'link': '',
|
||||
'icon': 'hours',
|
||||
'label': 'Mon - Fri: 8AM - 5PM',
|
||||
}
|
||||
],
|
||||
};
|
||||
this.defaultValue = this.props.control.params.default ? {
|
||||
...baseDefault,
|
||||
...this.props.control.params.default
|
||||
} : baseDefault;
|
||||
value = value ? {
|
||||
...this.defaultValue,
|
||||
...value
|
||||
} : this.defaultValue;
|
||||
let defaultParams = {
|
||||
'group' : 'contact_item_group',
|
||||
'options': [
|
||||
{ value: 'phone', label: __( 'Phone', 'kadence' ), content: __( '444-546-8765', 'kadence' ) },
|
||||
{ value: 'hours', label: __( 'Hours', 'kadence' ), content: __( 'Mon - Fri: 8AM - 5PM', 'kadence' ) },
|
||||
{ value: 'email', label: __( 'Email', 'kadence' ), content: __( 'example@example.com', 'kadence' ) },
|
||||
{ value: 'location', label: __( 'Address', 'kadence' ), content: __( '4560 example street', 'kadence' ) },
|
||||
],
|
||||
};
|
||||
this.controlParams = this.props.control.params.input_attrs ? {
|
||||
...defaultParams,
|
||||
...this.props.control.params.input_attrs,
|
||||
} : defaultParams;
|
||||
let availibleContactOptions = [];
|
||||
this.controlParams.options.map( ( option ) => {
|
||||
if ( ! value.items.some( obj => obj.id === option.value ) ) {
|
||||
availibleContactOptions.push( option );
|
||||
}
|
||||
} );
|
||||
this.state = {
|
||||
value: value,
|
||||
isVisible: false,
|
||||
control: ( undefined !== availibleContactOptions[0] && undefined !== availibleContactOptions[0].value ? availibleContactOptions[0].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' );
|
||||
}
|
||||
}
|
||||
saveArrayUpdate( value, index ) {
|
||||
let updateState = this.state.value;
|
||||
let items = updateState.items;
|
||||
|
||||
const newItems = items.map( ( item, thisIndex ) => {
|
||||
if ( index === thisIndex ) {
|
||||
item = { ...item, ...value };
|
||||
}
|
||||
|
||||
return item;
|
||||
} );
|
||||
updateState.items = newItems;
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
}
|
||||
toggleEnableItem( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { enabled: value }, itemIndex );
|
||||
}
|
||||
onChangeLabel( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { label: value }, itemIndex );
|
||||
}
|
||||
onChangeLink( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { link: value }, itemIndex );
|
||||
}
|
||||
onChangeIcon( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { icon: value }, itemIndex );
|
||||
}
|
||||
onChangeURL( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { url: value }, itemIndex );
|
||||
}
|
||||
onChangeAttachment( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { imageid: value }, itemIndex );
|
||||
}
|
||||
onChangeWidth( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { width: value }, itemIndex );
|
||||
}
|
||||
onChangeSource( value, itemIndex ) {
|
||||
this.saveArrayUpdate( { source: value }, itemIndex );
|
||||
}
|
||||
removeItem( itemIndex ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState.items;
|
||||
let updateItems = [];
|
||||
{ update.length > 0 && (
|
||||
update.map( ( old, index ) => {
|
||||
if ( itemIndex !== index ) {
|
||||
updateItems.push( old );
|
||||
}
|
||||
} )
|
||||
) };
|
||||
updateState.items = updateItems;
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
}
|
||||
addItem() {
|
||||
const itemControl = this.state.control;
|
||||
this.setState( { isVisible: false } );
|
||||
if ( itemControl ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState.items;
|
||||
const itemLabel = this.controlParams.options.filter(function(o){return o.value === itemControl;} );
|
||||
let newItem = {
|
||||
'id': itemControl,
|
||||
'enabled': true,
|
||||
'source': 'icon',
|
||||
'url': '',
|
||||
'imageid': '',
|
||||
'width': 24,
|
||||
'link': '',
|
||||
'icon': itemControl,
|
||||
'label': itemLabel[0].content,
|
||||
};
|
||||
update.push( newItem );
|
||||
updateState.items = update;
|
||||
let availibleContactOptions = [];
|
||||
this.controlParams.options.map( ( option ) => {
|
||||
if ( ! update.some( obj => obj.id === option.value ) ) {
|
||||
availibleContactOptions.push( option );
|
||||
}
|
||||
} );
|
||||
this.setState( { control: ( undefined !== availibleContactOptions[0] && undefined !== availibleContactOptions[0].value ? availibleContactOptions[0].value : '' ) } );
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
}
|
||||
}
|
||||
onDragEnd( items ) {
|
||||
let updateState = this.state.value;
|
||||
let update = updateState.items;
|
||||
let updateItems = [];
|
||||
{ items.length > 0 && (
|
||||
items.map( ( item ) => {
|
||||
update.filter( obj => {
|
||||
if ( obj.id === item.id ) {
|
||||
updateItems.push( obj );
|
||||
}
|
||||
} )
|
||||
} )
|
||||
) };
|
||||
if ( ! this.arraysEqual( update, updateItems ) ) {
|
||||
update.items = updateItems;
|
||||
updateState.items = updateItems;
|
||||
this.setState( { value: updateState } );
|
||||
this.updateValues( updateState );
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
render() {
|
||||
const currentList = ( typeof this.state.value != "undefined" && this.state.value.items != null && this.state.value.items.length != null && this.state.value.items.length > 0 ? this.state.value.items : [] );
|
||||
let theItems = [];
|
||||
{ currentList.length > 0 && (
|
||||
currentList.map( ( item ) => {
|
||||
theItems.push(
|
||||
{
|
||||
id: item.id,
|
||||
}
|
||||
)
|
||||
} )
|
||||
) };
|
||||
const availibleContactOptions = [];
|
||||
this.controlParams.options.map( ( option ) => {
|
||||
if ( ! theItems.some( obj => obj.id === option.value ) ) {
|
||||
availibleContactOptions.push( option );
|
||||
}
|
||||
} )
|
||||
const toggleClose = () => {
|
||||
if ( this.state.isVisible === true ) {
|
||||
this.setState( { isVisible: false } );
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="kadence-control-field kadence-sorter-items">
|
||||
<div className="kadence-sorter-row">
|
||||
<ReactSortable animation={100} onStart={ () => this.onDragStop() } onEnd={ () => this.onDragStop() } group={ this.controlParams.group } className={ `kadence-sorter-drop kadence-sorter-sortable-panel kadence-sorter-drop-${ this.controlParams.group } kadence-sorter-drop-social_item_group` } handle={ '.kadence-sorter-item-panel-header' } list={ theItems } setList={ ( newState ) => this.onDragEnd( newState ) } >
|
||||
{ currentList.length > 0 && (
|
||||
currentList.map( ( item, index ) => {
|
||||
return <ItemComponent removeItem={ ( remove ) => this.removeItem( remove ) } toggleEnabled={ ( enable, itemIndex ) => this.toggleEnableItem( enable, itemIndex ) } onChangeLabel={ ( label, itemIndex ) => this.onChangeLabel( label, itemIndex ) } onChangeLink={ ( link, itemIndex ) => this.onChangeLink( link, itemIndex ) } onChangeSource={ ( source, itemIndex ) => this.onChangeSource( source, itemIndex ) } onChangeWidth={ ( width, itemIndex ) => this.onChangeWidth( width, itemIndex ) } onChangeURL={ ( url, itemIndex ) => this.onChangeURL( url, itemIndex ) } onChangeAttachment={ ( imageid, itemIndex ) => this.onChangeAttachment( imageid, itemIndex ) } onChangeIcon={ ( icon, itemIndex ) => this.onChangeIcon( icon, itemIndex ) } key={ item.id } index={ index } item={ item } controlParams={ this.controlParams } />;
|
||||
} )
|
||||
) }
|
||||
</ReactSortable>
|
||||
</div>
|
||||
{ undefined !== availibleContactOptions[0] && undefined !== availibleContactOptions[0].value && (
|
||||
<div className="kadence-contact-add-area kadence-social-add-area">
|
||||
{ this.state.isVisible && (
|
||||
<Popover position="top right" className="kadence-popover-color kadence-popover-contact kadence-customizer-popover" onClose={ toggleClose }>
|
||||
<div className="kadence-popover-contact-list kadence-popover-social-list">
|
||||
<ButtonGroup className="kadence-radio-container-control">
|
||||
{ availibleContactOptions.map( ( item, index ) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<Button
|
||||
isTertiary
|
||||
className={ 'contact-radio-btn' }
|
||||
onClick={ () => {
|
||||
this.setState( { control: availibleContactOptions[index].value } );
|
||||
this.state.control = availibleContactOptions[index].value;
|
||||
this.addItem();
|
||||
} }
|
||||
>
|
||||
{ availibleContactOptions[index].label && (
|
||||
availibleContactOptions[index].label
|
||||
) }
|
||||
</Button>
|
||||
</Fragment>
|
||||
);
|
||||
} ) }
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Popover>
|
||||
) }
|
||||
<Button
|
||||
className="kadence-sorter-add-item"
|
||||
isPrimary
|
||||
onClick={ () => {
|
||||
this.setState( { isVisible: true } );
|
||||
} }
|
||||
>
|
||||
{ __( 'Add Contact', 'kadence' ) }
|
||||
<Dashicon icon="plus"/>
|
||||
</Button>
|
||||
</div>
|
||||
) }
|
||||
{ this.props.control.renderNotice() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
updateValues( value ) {
|
||||
this.props.control.setting.set( {
|
||||
...this.props.control.setting.get(),
|
||||
...value,
|
||||
flag: !this.props.control.setting.get().flag
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
ContactComponent.propTypes = {
|
||||
control: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ContactComponent;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import ContactComponent from './contact-component.js';
|
||||
|
||||
export const ContactControl = wp.customize.KadenceControl.extend( {
|
||||
renderContent: function renderContent() {
|
||||
let control = this;
|
||||
let root = createRoot( control.container[0] );
|
||||
root.render( <ContactComponent control={ control } /> );
|
||||
// ReactDOM.render( <ContactComponent control={ control } />, control.container[0] );
|
||||
}
|
||||
} );
|
||||
@@ -0,0 +1,99 @@
|
||||
const ContactIcons = {
|
||||
email: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M15 2H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zM5.831 9.773l-3 2.182a.559.559 0 01-.785-.124.563.563 0 01.124-.786l3-2.182a.563.563 0 01.662.91zm8.124 2.058a.563.563 0 01-.785.124l-3-2.182a.563.563 0 01.662-.91l3 2.182a.563.563 0 01.124.786zm-.124-6.876l-5.5 4a.562.562 0 01-.662 0l-5.5-4a.563.563 0 01.662-.91L8 7.804l5.169-3.759a.563.563 0 01.662.91z"></path>
|
||||
</svg>,
|
||||
emailAlt: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<path d="M28 11.094V23.5c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 010 23.5V11.094c.469.516 1 .969 1.578 1.359 2.594 1.766 5.219 3.531 7.766 5.391 1.313.969 2.938 2.156 4.641 2.156h.031c1.703 0 3.328-1.188 4.641-2.156 2.547-1.844 5.172-3.625 7.781-5.391a9.278 9.278 0 001.563-1.359zM28 6.5c0 1.75-1.297 3.328-2.672 4.281-2.438 1.687-4.891 3.375-7.313 5.078-1.016.703-2.734 2.141-4 2.141h-.031c-1.266 0-2.984-1.437-4-2.141-2.422-1.703-4.875-3.391-7.297-5.078-1.109-.75-2.688-2.516-2.688-3.938 0-1.531.828-2.844 2.5-2.844h23c1.359 0 2.5 1.125 2.5 2.5z"></path>
|
||||
</svg>,
|
||||
emailAlt2: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M3 7.921l8.427 5.899c.34.235.795.246 1.147 0L21 7.921V18c0 .272-.11.521-.295.705S20.272 19 20 19H4c-.272 0-.521-.11-.705-.295S3 18.272 3 18zM1 5.983V18c0 .828.34 1.579.88 2.12S3.172 21 4 21h16c.828 0 1.579-.34 2.12-.88S23 18.828 23 18V6.012v-.03a2.995 2.995 0 00-.88-2.102A2.998 2.998 0 0020 3H4c-.828 0-1.579.34-2.12.88A2.995 2.995 0 001 5.983zm19.894-.429L12 11.779 3.106 5.554a.999.999 0 01.188-.259A.994.994 0 014 5h16a1.016 1.016 0 01.893.554z"></path>
|
||||
</svg>,
|
||||
phone:<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="28"
|
||||
viewBox="0 0 12 28"
|
||||
>
|
||||
<path d="M7.25 22c0-.688-.562-1.25-1.25-1.25s-1.25.562-1.25 1.25.562 1.25 1.25 1.25 1.25-.562 1.25-1.25zm3.25-2.5v-11c0-.266-.234-.5-.5-.5H2c-.266 0-.5.234-.5.5v11c0 .266.234.5.5.5h8c.266 0 .5-.234.5-.5zm-3-13.25A.246.246 0 007.25 6h-2.5c-.141 0-.25.109-.25.25s.109.25.25.25h2.5c.141 0 .25-.109.25-.25zM12 6v16c0 1.094-.906 2-2 2H2c-1.094 0-2-.906-2-2V6c0-1.094.906-2 2-2h8c1.094 0 2 .906 2 2z"></path>
|
||||
</svg>,
|
||||
phoneAlt:<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M7 1a2.997 2.997 0 00-3 3v16a2.997 2.997 0 003 3h10a2.997 2.997 0 003-3V4a2.997 2.997 0 00-3-3zm0 2h10c.276 0 .525.111.707.293S18 3.724 18 4v16c0 .276-.111.525-.293.707S17.276 21 17 21H7c-.276 0-.525-.111-.707-.293S6 20.276 6 20V4c0-.276.111-.525.293-.707S6.724 3 7 3zm5 16a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||
</svg>,
|
||||
phoneAlt2: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="28"
|
||||
viewBox="0 0 24 28"
|
||||
>
|
||||
<path d="M20 18.641c0-.078 0-.172-.031-.25-.094-.281-2.375-1.437-2.812-1.687-.297-.172-.656-.516-1.016-.516-.688 0-1.703 2.047-2.312 2.047-.313 0-.703-.281-.984-.438-2.063-1.156-3.484-2.578-4.641-4.641-.156-.281-.438-.672-.438-.984 0-.609 2.047-1.625 2.047-2.312 0-.359-.344-.719-.516-1.016-.25-.438-1.406-2.719-1.687-2.812-.078-.031-.172-.031-.25-.031-.406 0-1.203.187-1.578.344-1.031.469-1.781 2.438-1.781 3.516 0 1.047.422 2 .781 2.969 1.25 3.422 4.969 7.141 8.391 8.391.969.359 1.922.781 2.969.781 1.078 0 3.047-.75 3.516-1.781.156-.375.344-1.172.344-1.578zM24 6.5v15c0 2.484-2.016 4.5-4.5 4.5h-15A4.502 4.502 0 010 21.5v-15C0 4.016 2.016 2 4.5 2h15C21.984 2 24 4.016 24 6.5z"></path>
|
||||
</svg>,
|
||||
hours: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="28"
|
||||
viewBox="0 0 24 28"
|
||||
>
|
||||
<path d="M14 8.5v7c0 .281-.219.5-.5.5h-5a.494.494 0 01-.5-.5v-1c0-.281.219-.5.5-.5H12V8.5c0-.281.219-.5.5-.5h1c.281 0 .5.219.5.5zm6.5 5.5c0-4.688-3.813-8.5-8.5-8.5S3.5 9.313 3.5 14s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5zm3.5 0c0 6.625-5.375 12-12 12S0 20.625 0 14 5.375 2 12 2s12 5.375 12 12z"></path>
|
||||
</svg>,
|
||||
hoursAlt: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 12c0-3.037-1.232-5.789-3.222-7.778S15.037 1 12 1 6.211 2.232 4.222 4.222 1 8.963 1 12s1.232 5.789 3.222 7.778S8.963 23 12 23s5.789-1.232 7.778-3.222S23 15.037 23 12zm-2 0c0 2.486-1.006 4.734-2.636 6.364S14.486 21 12 21s-4.734-1.006-6.364-2.636S3 14.486 3 12s1.006-4.734 2.636-6.364S9.514 3 12 3s4.734 1.006 6.364 2.636S21 9.514 21 12zM11 6v6a1 1 0 00.553.894l4 2a1 1 0 00.895-1.789L13 11.382V6a1 1 0 00-2 0z"></path>
|
||||
</svg>,
|
||||
hoursAlt2: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0a8 8 0 100 16A8 8 0 008 0zm2.293 11.707L7 8.414V4h2v3.586l2.707 2.707-1.414 1.414z"></path>
|
||||
</svg>,
|
||||
location: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="28"
|
||||
viewBox="0 0 16 28"
|
||||
>
|
||||
<path d="M12 10c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zm4 0c0 .953-.109 1.937-.516 2.797L9.796 24.891C9.468 25.579 8.749 26 7.999 26s-1.469-.422-1.781-1.109L.515 12.797C.109 11.938-.001 10.953-.001 10c0-4.422 3.578-8 8-8s8 3.578 8 8z"></path>
|
||||
</svg>,
|
||||
locationAlt: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M22 10c0-2.761-1.12-5.263-2.929-7.071S14.761 0 12 0 6.737 1.12 4.929 2.929 2 7.239 2 10c0 .569.053 1.128.15 1.676.274 1.548.899 3.004 1.682 4.32 2.732 4.591 7.613 7.836 7.613 7.836.331.217.765.229 1.109 0 0 0 4.882-3.245 7.613-7.836.783-1.316 1.408-2.772 1.682-4.32A9.506 9.506 0 0022 10zm-2 0c0 .444-.041.887-.119 1.328-.221 1.25-.737 2.478-1.432 3.646-1.912 3.214-5.036 5.747-6.369 6.74-1.398-.916-4.588-3.477-6.53-6.74-.695-1.168-1.211-2.396-1.432-3.646A7.713 7.713 0 014 10c0-2.209.894-4.208 2.343-5.657S9.791 2 12 2s4.208.894 5.657 2.343S20 7.791 20 10zm-4 0c0-1.104-.449-2.106-1.172-2.828a3.994 3.994 0 00-5.656 0 3.994 3.994 0 000 5.656 3.994 3.994 0 005.656 0A3.994 3.994 0 0016 10zm-2 0c0 .553-.223 1.051-.586 1.414S12.553 12 12 12s-1.051-.223-1.414-.586S10 10.553 10 10s.223-1.051.586-1.414S11.447 8 12 8s1.051.223 1.414.586S14 9.447 14 10z"></path>
|
||||
</svg>,
|
||||
locationAlt2: <svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0a5 5 0 00-5 5c0 5 5 9 5 9s5-4 5-9a5 5 0 00-5-5zm0 8a3 3 0 110-6 3 3 0 010 6zm4.285 2.9a16.57 16.57 0 01-.682.988l.108.052c.76.38 1.101.806 1.101 1.059s-.34.679-1.101 1.059c-.957.479-2.31.753-3.712.753s-2.754-.275-3.712-.753c-.76-.38-1.101-.806-1.101-1.059s.34-.679 1.101-1.059l.108-.052c-.231-.31-.461-.64-.682-.988-1.061.541-1.715 1.282-1.715 2.1 0 1.657 2.686 3 6 3s6-1.343 6-3c0-.817-.654-1.558-1.715-2.1z"></path>
|
||||
</svg>,
|
||||
};
|
||||
export default ContactIcons;
|
||||
@@ -0,0 +1,203 @@
|
||||
/* jshint esversion: 6 */
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import ContactIcons from './icons.js';
|
||||
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
const { MediaUpload } = wp.blockEditor;
|
||||
const { ButtonGroup, Dashicon, Tooltip, TextControl, Button, TabPanel, RangeControl, Placeholder } = wp.components;
|
||||
|
||||
const { Component, Fragment } = wp.element;
|
||||
class ItemComponent extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
this.state = {
|
||||
open: false,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="kadence-sorter-item" data-id={ this.props.item.id } key={ this.props.item.id }>
|
||||
<div className="kadence-sorter-item-panel-header">
|
||||
<Tooltip text={ __( 'Toggle Item Visibility', 'kadence' ) }>
|
||||
<Button
|
||||
className={ `kadence-sorter-visiblity ${ ( this.props.item.enabled ? 'item-is-visible' : 'item-is-hidden' ) }`}
|
||||
onClick={ () => {
|
||||
this.props.toggleEnabled( ( this.props.item.enabled ? false : true ), this.props.index );
|
||||
} }
|
||||
>
|
||||
{ ContactIcons[this.props.item.id] }
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<span className="kadence-sorter-title">
|
||||
{ ( undefined !== this.props.item.label && '' !== this.props.item.label ? this.props.item.label : __( 'Contact Item', 'kadence' ) ) }
|
||||
</span>
|
||||
<Tooltip text={ __( 'Expand Item Controls', 'kadence' ) }>
|
||||
<Button
|
||||
className="kadence-sorter-item-expand"
|
||||
onClick={ () => {
|
||||
this.setState( { open: ( this.state.open ? false : true ) } )
|
||||
} }
|
||||
>
|
||||
<Dashicon icon={ ( this.state.open ? 'arrow-up-alt2' : 'arrow-down-alt2' ) }/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{ this.state.open && (
|
||||
<div className="kadence-sorter-item-panel-content">
|
||||
<TabPanel className="sortable-style-tabs kadence-contact-type"
|
||||
activeClass="active-tab"
|
||||
initialTabName={ ( undefined !== this.props.item.source ? this.props.item.source : 'icon' ) }
|
||||
onSelect={ ( value ) => this.props.onChangeSource( value, this.props.index ) }
|
||||
tabs={ [
|
||||
{
|
||||
name: 'icon',
|
||||
title: __( 'Icon', 'kadence' ),
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
title: __( 'Image', 'kadence' ),
|
||||
},
|
||||
] }>
|
||||
{
|
||||
( tab ) => {
|
||||
let tabout;
|
||||
if ( tab.name ) {
|
||||
if ( 'image' === tab.name ) {
|
||||
tabout = (
|
||||
<Fragment>
|
||||
{ ! this.props.item.url && (
|
||||
<div className="attachment-media-view">
|
||||
<MediaUpload
|
||||
onSelect={ ( imageData ) => {
|
||||
this.props.onChangeURL( imageData.url, this.props.index );
|
||||
this.props.onChangeAttachment( imageData.id, this.props.index );
|
||||
} }
|
||||
allowedTypes={ ['image'] }
|
||||
render={ ( { open } ) => (
|
||||
<Button className="button-add-media" isSecondary onClick={ open }>
|
||||
{ __( 'Add Image', 'kadence' )}
|
||||
</Button>
|
||||
) }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
{ this.props.item.url && (
|
||||
<div className="contact-custom-image">
|
||||
<div className="kadence-Contact-image">
|
||||
<img className="kadence-Contact-image-preview" src={ this.props.item.url } />
|
||||
</div>
|
||||
<Button
|
||||
className='remove-image'
|
||||
isDestructive
|
||||
onClick={ () => {
|
||||
this.props.onChangeURL( '', this.props.index );
|
||||
this.props.onChangeAttachment( '', this.props.index );
|
||||
} }
|
||||
>
|
||||
{ __( 'Remove Image', 'kadence' ) }
|
||||
<Dashicon icon='no'/>
|
||||
</Button>
|
||||
</div>
|
||||
) }
|
||||
<RangeControl
|
||||
label={ __( 'Max Width (px)', 'kadence' ) }
|
||||
value={ ( undefined !== this.props.item.width ? this.props.item.width : 24 ) }
|
||||
onChange={ ( value ) => {
|
||||
this.props.onChangeWidth( value, this.props.index );
|
||||
} }
|
||||
step={ 1 }
|
||||
min={ 2 }
|
||||
max={ 100 }
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
tabout = (
|
||||
<Fragment>
|
||||
<ButtonGroup className="kadence-radio-container-control">
|
||||
<Button
|
||||
isTertiary
|
||||
className={ ( this.props.item.id === ( undefined !== this.props.item.icon ? this.props.item.icon : this.props.item.id ) ?
|
||||
'active-radio ' :
|
||||
'' ) + 'svg-icon-' + this.props.item.id }
|
||||
onClick={ () => {
|
||||
this.props.onChangeIcon( this.props.item.id, this.props.index );
|
||||
} }
|
||||
>
|
||||
<span className="kadence-radio-icon">
|
||||
{ ContactIcons[this.props.item.id] }
|
||||
</span>
|
||||
</Button>
|
||||
{ ContactIcons[ this.props.item.id + 'Alt' ] && (
|
||||
<Button
|
||||
isTertiary
|
||||
className={ ( this.props.item.id + 'Alt' === ( undefined !== this.props.item.icon ? this.props.item.icon : this.props.item.id ) ?
|
||||
'active-radio ' :
|
||||
'' ) + 'svg-icon-' + this.props.item.id + 'Alt' }
|
||||
onClick={ () => {
|
||||
this.props.onChangeIcon( this.props.item.id + 'Alt', this.props.index );
|
||||
} }
|
||||
>
|
||||
<span className="kadence-radio-icon">
|
||||
{ ContactIcons[ this.props.item.id + 'Alt' ] }
|
||||
</span>
|
||||
</Button>
|
||||
) }
|
||||
{ ContactIcons[ this.props.item.id + 'Alt2' ] && (
|
||||
<Button
|
||||
isTertiary
|
||||
className={ ( this.props.item.id + 'Alt2' === ( undefined !== this.props.item.icon ? this.props.item.icon : this.props.item.id ) ?
|
||||
'active-radio ' :
|
||||
'' ) + 'svg-icon-' + this.props.item.id + 'Alt2' }
|
||||
onClick={ () => {
|
||||
this.props.onChangeIcon( this.props.item.id + 'Alt2', this.props.index );
|
||||
} }
|
||||
>
|
||||
<span className="kadence-radio-icon">
|
||||
{ ContactIcons[ this.props.item.id + 'Alt2' ] }
|
||||
</span>
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <div>{ tabout }</div>;
|
||||
}
|
||||
}
|
||||
</TabPanel>
|
||||
<TextControl
|
||||
label={ __( 'Item Label', 'kadence' ) }
|
||||
value={ this.props.item.label ? this.props.item.label : '' }
|
||||
onChange={ ( value ) => {
|
||||
this.props.onChangeLabel( value, this.props.index );
|
||||
} }
|
||||
/>
|
||||
<TextControl
|
||||
label={ __( 'Item Link', 'kadence' ) }
|
||||
value={ this.props.item.link ? this.props.item.link : '' }
|
||||
onChange={ ( value ) => {
|
||||
this.props.onChangeLink( value, this.props.index );
|
||||
} }
|
||||
/>
|
||||
<Button
|
||||
className="kadence-sorter-item-remove"
|
||||
isDestructive
|
||||
onClick={ () => {
|
||||
this.props.removeItem( this.props.index );
|
||||
} }
|
||||
>
|
||||
{ __( 'Remove Item', 'kadence' ) }
|
||||
<Dashicon icon="no-alt"/>
|
||||
</Button>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default ItemComponent;
|
||||
Reference in New Issue
Block a user