This commit is contained in:
2024-05-20 15:37:46 +03:00
commit 00b7dbd0b7
10404 changed files with 3285853 additions and 0 deletions

View File

@ -0,0 +1,179 @@
import { merge } from 'lodash';
import { applyFilters } from '@wordpress/hooks';
import conditionCheck from '../control-condition-check';
import { maybeDecode } from '../encode-decode';
const { controls: registeredControls } = window.VPGutenbergVariables;
/**
* Prepare styles from params
* Params example:
array(
'element' => '$ .inner-selector',
'property' => 'height',
'mask' => '$px',
)
*
* @param {string} selector CSS selector.
* @param {Mixed} value Property value.
* @param {Array} params Output params.
*
* @return {string}
*/
export function prepareStylesFromParams(selector, value, params) {
if (
!selector ||
typeof value === 'undefined' ||
value === '' ||
value === null ||
typeof params.property === 'undefined'
) {
return false;
}
// Value mask.
if (typeof params.mask !== 'undefined') {
value = params.mask.replace('$', value);
}
// Custom selector mask.
if (typeof params.element !== 'undefined' && /\$/g.test(params.element)) {
selector = params.element.replace('$', selector);
} else {
selector +=
typeof params.element !== 'undefined' ? ` ${params.element}` : '';
}
return {
[selector]: {
[params.property]: value,
},
};
}
/**
* Check if these control has dynamic CSS.
*
* @param {string} controlName control name.
*
* @return {boolean}
*/
export function hasDynamicCSS(controlName) {
return (
typeof registeredControls[controlName] !== 'undefined' &&
typeof registeredControls[controlName].style !== 'undefined' &&
registeredControls[controlName].style.length
);
}
/**
* Get dynamic CSS from options.
*
* @param {Array} options block options.
*
* @return {string}
*/
export default function getDynamicCSS(options) {
let result = '';
let selector = '';
if (typeof options.block_id !== 'undefined' && options.block_id) {
selector = options.block_id;
} else if (typeof options.id !== 'undefined' && options.id) {
selector = options.id;
}
if (!selector) {
return result;
}
selector = `.vp-id-${selector}`;
let controlStylesObject = {};
// Controls styles.
Object.keys(registeredControls).forEach((k) => {
const control = registeredControls[k];
let allow = typeof control.style !== 'undefined' && control.style;
// Check condition.
if (
allow &&
typeof control.condition !== 'undefined' &&
control.condition.length
) {
allow = conditionCheck(control.condition, options);
}
// Prepare styles.
if (allow) {
control.style.forEach((data) => {
let val = options[control.name];
val = applyFilters(
'vpf.editor.controls-dynamic-css-value',
val,
options,
control,
selector,
data
);
// Prepare Aspect Ratio control value.
if (control.type && control.type === 'aspect_ratio' && val) {
const ratioArray = val.split(':');
if (ratioArray[0] && ratioArray[1]) {
val = `${100 * (ratioArray[1] / ratioArray[0])}%`;
}
}
let stylesObject = prepareStylesFromParams(selector, val, data);
stylesObject = applyFilters(
'vpf.editor.controls-dynamic-css-styles-object',
stylesObject,
selector,
val,
data,
options,
control
);
if (stylesObject) {
controlStylesObject = merge(
controlStylesObject,
stylesObject
);
}
});
}
});
// Prepare CSS of controls.
Object.keys(controlStylesObject).forEach((sel) => {
result += `${sel} {\n`;
Object.keys(controlStylesObject[sel]).forEach((prop) => {
result += ` ${prop}: ${controlStylesObject[sel][prop]};\n`;
});
result += `}\n`;
});
// Custom CSS.
if (typeof options.custom_css !== 'undefined' && options.custom_css) {
let customCss = options.custom_css;
// Decode.
customCss = maybeDecode(customCss);
// replace 'selector' to actual css selector.
customCss = customCss.replace(/selector/g, selector);
// a little security fix.
customCss = customCss.replace(/<\//g, '&lt;/');
result += customCss;
}
return result;
}

View File

@ -0,0 +1,147 @@
<?php
/**
* Parse controls data and generate styles output.
*
* @package visual-portfolio
*/
/**
* Visual_Portfolio_Controls_Dynamic_CSS
*/
class Visual_Portfolio_Controls_Dynamic_CSS {
/**
* Prepare CSS for options.
*
* @param array $options block options.
*
* @return string
*/
public static function get( $options ) {
$result = '';
$selector = '';
if ( isset( $options['block_id'] ) ) {
$selector = $options['block_id'];
} elseif ( isset( $options['id'] ) ) {
$selector = $options['id'];
}
if ( ! $selector ) {
return $result;
}
$selector = '.vp-id-' . $selector;
$registered = Visual_Portfolio_Controls::get_registered_array();
$control_styles_array = array();
// Controls styles.
foreach ( $registered as $control ) {
$allow = isset( $control['style'] ) && ! empty( $control['style'] );
// Check condition.
if ( $allow && isset( $control['condition'] ) && ! empty( $control['condition'] ) ) {
$allow = Visual_Portfolio_Control_Condition_Check::check( $control['condition'], $options );
}
// Prepare styles.
if ( $allow ) {
foreach ( $control['style'] as $data ) {
$val = $options[ $control['name'] ];
$val = apply_filters( 'vpf_controls_dynamic_css_value', $val, $options, $control, $selector, $data );
// Prepare Aspect Ratio control value.
if ( isset( $control['type'] ) && 'aspect_ratio' === $control['type'] && $val ) {
$ratio_array = explode( ':', $val );
if ( isset( $ratio_array[0] ) && $ratio_array[0] && isset( $ratio_array[1] ) && $ratio_array[1] ) {
$val = ( 100 * $ratio_array[1] / $ratio_array[0] ) . '%';
}
}
$styles_array = self::prepare_styles_from_params( $selector, $val, $data );
$styles_array = apply_filters( 'vpf_controls_dynamic_css_styles_array', $styles_array, $selector, $val, $data, $options, $control );
if ( $styles_array ) {
$control_styles_array = array_merge_recursive(
$control_styles_array,
$styles_array
);
}
}
}
}
// Prepare CSS of controls.
foreach ( $control_styles_array as $sel => $styles ) {
$result .= $sel . " {\n";
foreach ( $styles as $prop => $val ) {
$result .= " {$prop}: {$val};\n";
}
$result .= "}\n";
}
// Custom CSS.
if ( isset( $options['custom_css'] ) && $options['custom_css'] ) {
// decode.
$custom_css = visual_portfolio_decode( $options['custom_css'] );
// replace 'selector' to actual css selector.
$custom_css = str_replace( 'selector', $selector, $custom_css );
// a little security fix.
$custom_css = str_replace( '</', '&lt;/', $custom_css );
if ( isset( $options['id'] ) ) {
$custom_css = str_replace( '&gt;', '>', $custom_css );
$custom_css = str_replace( '\"', '"', $custom_css );
$custom_css = str_replace( "\'", "'", $custom_css );
}
$result .= $custom_css;
}
return $result;
}
/**
* Prepare styles from params
* Params example:
array(
'element' => '$ .inner-selector',
'property' => 'height',
'mask' => '$px',
)
*
* @param string $selector CSS selector.
* @param mixed $value Property value.
* @param array $params Output params.
*
* @return array|bool
*/
public static function prepare_styles_from_params( $selector, $value, $params ) {
if ( ! $selector || ! isset( $value ) || '' === $value || null === $value || ! isset( $params['property'] ) ) {
return false;
}
// Value mask.
if ( isset( $params['mask'] ) ) {
$value = str_replace( '$', $value, $params['mask'] );
}
// Custom selector mask.
if ( isset( $params['element'] ) && strpos( $params['element'], '$' ) !== false ) {
$selector = str_replace( '$', $selector, $params['element'] );
} else {
$selector = $selector . ( isset( $params['element'] ) ? ( ' ' . $params['element'] ) : '' );
}
$property = $params['property'];
return array(
$selector => array(
$property => $value,
),
);
}
}