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,634 @@
|
||||
/* jshint esversion: 6 */
|
||||
import PropTypes from "prop-types";
|
||||
import classnames from "classnames";
|
||||
|
||||
import ResponsiveControl from "../common/responsive.js";
|
||||
import ColorControl from "../common/color.js";
|
||||
import Icons from "../common/icons.js";
|
||||
|
||||
import { __ } from "@wordpress/i18n";
|
||||
|
||||
const { ButtonGroup, Dashicon, Toolbar, Tooltip, Button, ToggleControl } =
|
||||
wp.components;
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { createRef, Component, Fragment } from "@wordpress/element";
|
||||
class BoxshadowComponent extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.updateValues = this.updateValues.bind(this);
|
||||
this.handleChangeComplete = this.handleChangeComplete.bind(this);
|
||||
this.handleResponsiveChangeComplete =
|
||||
this.handleResponsiveChangeComplete.bind(this);
|
||||
let value = this.props.control.setting.get();
|
||||
let defaultParams = {
|
||||
responsive: false,
|
||||
};
|
||||
this.controlParams = this.props.control.params.input_attrs
|
||||
? {
|
||||
...defaultParams,
|
||||
...this.props.control.params.input_attrs,
|
||||
}
|
||||
: defaultParams;
|
||||
let responsiveDefault = {
|
||||
desktop: {
|
||||
color: "rgba(0,0,0,0.05)",
|
||||
hOffset: 0,
|
||||
vOffset: 15,
|
||||
blur: 15,
|
||||
spread: -10,
|
||||
inset: false,
|
||||
disabled: false,
|
||||
},
|
||||
};
|
||||
let noneResponsiveDefault = {
|
||||
color: "rgba(0,0,0,0.05)",
|
||||
hOffset: 0,
|
||||
vOffset: 15,
|
||||
blur: 15,
|
||||
spread: -10,
|
||||
inset: false,
|
||||
disabled: false,
|
||||
};
|
||||
let baseDefault;
|
||||
if (this.controlParams.responsive) {
|
||||
baseDefault = responsiveDefault;
|
||||
} else {
|
||||
baseDefault = noneResponsiveDefault;
|
||||
}
|
||||
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));
|
||||
this.state = {
|
||||
currentDevice: "desktop",
|
||||
value: value,
|
||||
};
|
||||
this.anchorNodeRef = createRef();
|
||||
}
|
||||
handleResponsiveChangeComplete(color, isPalette, device) {
|
||||
let value = this.state.value;
|
||||
if (undefined === value[device]) {
|
||||
value[device] = {
|
||||
color: "",
|
||||
hOffset: "",
|
||||
vOffset: "",
|
||||
blur: "",
|
||||
spread: "",
|
||||
inset: "",
|
||||
disabled: false,
|
||||
};
|
||||
}
|
||||
if (isPalette) {
|
||||
value[device].color = isPalette;
|
||||
} 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);
|
||||
}
|
||||
handleChangeComplete(color, isPalette) {
|
||||
let value = this.state.value;
|
||||
if (isPalette) {
|
||||
value.color = isPalette;
|
||||
} else if (
|
||||
undefined !== color.rgb &&
|
||||
undefined !== color.rgb.a &&
|
||||
1 !== color.rgb.a
|
||||
) {
|
||||
value.color =
|
||||
"rgba(" +
|
||||
color.rgb.r +
|
||||
"," +
|
||||
color.rgb.g +
|
||||
"," +
|
||||
color.rgb.b +
|
||||
"," +
|
||||
color.rgb.a +
|
||||
")";
|
||||
} else {
|
||||
value.color = color.hex;
|
||||
}
|
||||
this.updateValues(value);
|
||||
}
|
||||
render() {
|
||||
const data = this.props.control.params;
|
||||
const onResponsiveInputChange = (event, setting) => {
|
||||
const newValue = Number(event.target.value);
|
||||
let value = this.state.value;
|
||||
if (undefined === value[this.state.currentDevice]) {
|
||||
value[this.state.currentDevice] = {
|
||||
color: "",
|
||||
hOffset: "",
|
||||
vOffset: "",
|
||||
blur: "",
|
||||
spread: "",
|
||||
inset: "",
|
||||
disabled: false,
|
||||
};
|
||||
}
|
||||
value[this.state.currentDevice][setting] = newValue;
|
||||
this.updateValues(value);
|
||||
};
|
||||
const onInputChange = (event, setting) => {
|
||||
const newValue =
|
||||
"" !== event.target.value ? Number(event.target.value) : "";
|
||||
let value = this.state.value;
|
||||
value[setting] = newValue;
|
||||
this.updateValues(value);
|
||||
};
|
||||
const onInsetChange = (newValue) => {
|
||||
let value = this.state.value;
|
||||
value.inset = newValue;
|
||||
this.updateValues(value);
|
||||
};
|
||||
const onDisableChange = (newValue) => {
|
||||
let value = this.state.value;
|
||||
value.disabled = newValue;
|
||||
this.updateValues(value);
|
||||
};
|
||||
const responsiveControlLabel = (
|
||||
<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.updateValues(value);
|
||||
}}
|
||||
>
|
||||
<Dashicon icon="image-rotate" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{data.label && data.label}
|
||||
</Fragment>
|
||||
);
|
||||
const controlLabel = (
|
||||
<Fragment>
|
||||
<Tooltip text={__("Reset Values", "kadence")}>
|
||||
<Button
|
||||
className="reset kadence-reset"
|
||||
disabled={this.defaultValue === this.state.value}
|
||||
onClick={() => {
|
||||
let value = this.state.value;
|
||||
value = this.defaultValue;
|
||||
this.updateValues(value);
|
||||
}}
|
||||
>
|
||||
<Dashicon icon="image-rotate" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{data.label && data.label}
|
||||
</Fragment>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={this.anchorNodeRef}
|
||||
className="kadence-control-field kadence-boxshadow-control kadence-border-control"
|
||||
>
|
||||
{this.controlParams.responsive && (
|
||||
<ResponsiveControl
|
||||
onChange={(currentDevice) =>
|
||||
this.setState({ currentDevice })
|
||||
}
|
||||
controlLabel={responsiveControlLabel}
|
||||
>
|
||||
{!this.state.value.disabled && (
|
||||
<>
|
||||
<div className="kt-box-color-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Color")}
|
||||
</p>
|
||||
<ColorControl
|
||||
presetColors={this.state.colorPalette}
|
||||
color={
|
||||
undefined !==
|
||||
this.state.value.color &&
|
||||
this.state.value.color
|
||||
? this.state.value.color
|
||||
: ""
|
||||
}
|
||||
usePalette={true}
|
||||
tooltip={__("Border Color")}
|
||||
onChangeComplete={(color, isPalette) =>
|
||||
this.handleChangeComplete(
|
||||
color,
|
||||
isPalette
|
||||
)
|
||||
}
|
||||
customizer={this.props.customizer}
|
||||
controlRef={this.anchorNodeRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="kt-box-x-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("X")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.hOffset
|
||||
? this.state.value
|
||||
.hOffset
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"hOffset"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-y-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Y")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.vOffset
|
||||
? this.state.value
|
||||
.vOffset
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"vOffset"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-x-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Blur")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.blur
|
||||
? this.state.value.blur
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(event, "blur")
|
||||
}
|
||||
min={0}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-y-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Spread")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.spread
|
||||
? this.state.value
|
||||
.spread
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"spread"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-inset-settings">
|
||||
<ToggleControl
|
||||
label={__("Inset")}
|
||||
checked={
|
||||
undefined !== this.state.value &&
|
||||
undefined !== this.state.value.inset
|
||||
? this.state.value.inset
|
||||
: false
|
||||
}
|
||||
onChange={(value) =>
|
||||
this.props.onInsetChange(value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="kt-box-disable-settings">
|
||||
<ToggleControl
|
||||
label={__("Disable")}
|
||||
checked={
|
||||
undefined !== this.state.value &&
|
||||
undefined !== this.state.value.disabled
|
||||
? this.state.value.disabled
|
||||
: false
|
||||
}
|
||||
onChange={(value) =>
|
||||
this.props.onDisableChange(value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</ResponsiveControl>
|
||||
)}
|
||||
{!this.controlParams.responsive && (
|
||||
<Fragment>
|
||||
<div className="kadence-responsive-control-bar">
|
||||
<span className="customize-control-title">
|
||||
{controlLabel}
|
||||
</span>
|
||||
</div>
|
||||
{!this.state.value.disabled && (
|
||||
<div className="kadence-responsive-controls-content">
|
||||
<Fragment>
|
||||
<div className="kt-box-color-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Color")}
|
||||
</p>
|
||||
<ColorControl
|
||||
presetColors={
|
||||
this.state.colorPalette
|
||||
}
|
||||
color={
|
||||
undefined !==
|
||||
this.state.value.color &&
|
||||
this.state.value.color
|
||||
? this.state.value.color
|
||||
: ""
|
||||
}
|
||||
usePalette={true}
|
||||
tooltip={__("Border Color")}
|
||||
onChangeComplete={(
|
||||
color,
|
||||
isPalette
|
||||
) =>
|
||||
this.handleChangeComplete(
|
||||
color,
|
||||
isPalette
|
||||
)
|
||||
}
|
||||
customizer={this.props.customizer}
|
||||
controlRef={this.anchorNodeRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="kt-box-x-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("X")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value
|
||||
.hOffset
|
||||
? this.state.value
|
||||
.hOffset
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"hOffset"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-y-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Y")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value
|
||||
.vOffset
|
||||
? this.state.value
|
||||
.vOffset
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"vOffset"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-x-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Blur")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value
|
||||
.blur
|
||||
? this.state.value
|
||||
.blur
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"blur"
|
||||
)
|
||||
}
|
||||
min={0}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="kt-box-y-settings kt-box-shadow-subset">
|
||||
<p className="kt-box-shadow-title">
|
||||
{__("Spread")}
|
||||
</p>
|
||||
<div className="components-base-control kt-boxshadow-number-input">
|
||||
<div className="components-base-control__field">
|
||||
<input
|
||||
value={
|
||||
undefined !==
|
||||
this.state.value &&
|
||||
undefined !==
|
||||
this.state.value
|
||||
.spread
|
||||
? this.state.value
|
||||
.spread
|
||||
: ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onInputChange(
|
||||
event,
|
||||
"spread"
|
||||
)
|
||||
}
|
||||
min={-200}
|
||||
max={200}
|
||||
step={1}
|
||||
type="number"
|
||||
className="components-text-control__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
</div>
|
||||
)}
|
||||
<div className="kadence-responsive-controls-content">
|
||||
{!this.state.value.disabled && (
|
||||
<div className="kt-box-inset-settings">
|
||||
<ToggleControl
|
||||
label={__("Inset")}
|
||||
checked={
|
||||
undefined !== this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.inset &&
|
||||
this.state.value.inset
|
||||
? true
|
||||
: false
|
||||
}
|
||||
onChange={(value) =>
|
||||
onInsetChange(value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="kt-box-disable-settings">
|
||||
<ToggleControl
|
||||
label={__("Disable")}
|
||||
checked={
|
||||
undefined !== this.state.value &&
|
||||
undefined !==
|
||||
this.state.value.disabled &&
|
||||
this.state.value.disabled
|
||||
? true
|
||||
: false
|
||||
}
|
||||
onChange={(value) => onDisableChange(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
{ this.props.control.renderNotice() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
updateValues(value) {
|
||||
this.setState({ value: value });
|
||||
if (this.controlParams.responsive) {
|
||||
value.flag = !this.props.control.setting.get().flag;
|
||||
}
|
||||
this.props.control.setting.set({
|
||||
...this.props.control.setting.get(),
|
||||
...value,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
BoxshadowComponent.propTypes = {
|
||||
control: PropTypes.object.isRequired,
|
||||
customizer: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default BoxshadowComponent;
|
||||
@@ -0,0 +1,14 @@
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import BoxShadowComponent from './boxshadow-component.js';
|
||||
|
||||
export const BoxShadowControl = wp.customize.KadenceControl.extend( {
|
||||
renderContent: function renderContent() {
|
||||
let control = this;
|
||||
let root = createRoot( control.container[0] );
|
||||
root.render( <BoxShadowComponent control={control} customizer={ wp.customize }/> );
|
||||
// ReactDOM.render(
|
||||
// <BoxShadowComponent control={control} customizer={ wp.customize }/>,
|
||||
// control.container[0]
|
||||
// );
|
||||
}
|
||||
} );
|
||||
Reference in New Issue
Block a user