first
This commit is contained in:
@ -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, '</');
|
||||
|
||||
result += customCss;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
@ -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( '</', '</', $custom_css );
|
||||
|
||||
if ( isset( $options['id'] ) ) {
|
||||
$custom_css = str_replace( '>', '>', $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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user