first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,192 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import isFieldVisible from '../../utils/is-field-visible';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
canvasBreakpoints,
|
||||
canvasAllBreakpoints,
|
||||
} = window;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class ComponentFieldsCSSOutput extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.prepareStylesFromParams = this.prepareStylesFromParams.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current field value. If value doesn't exist, use default value.
|
||||
*
|
||||
* @param {Object} fieldData field data.
|
||||
* @param {String} breakpoint breakpoint name.
|
||||
*
|
||||
* @returns {Mixed} field value.
|
||||
*/
|
||||
getFieldValue( fieldData, breakpoint = '' ) {
|
||||
const {
|
||||
attributes = {},
|
||||
} = this.props;
|
||||
|
||||
let suffix = '';
|
||||
|
||||
if ( breakpoint ) {
|
||||
suffix = `_${ breakpoint }`;
|
||||
}
|
||||
|
||||
if ( typeof attributes[ fieldData.key + suffix ] !== 'undefined' ) {
|
||||
return attributes[ fieldData.key + suffix ];
|
||||
} else if ( typeof fieldData[ 'default' + suffix ] !== 'undefined' ) {
|
||||
return fieldData[ 'default' + suffix ];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare styles from params
|
||||
* Params example:
|
||||
{
|
||||
'element' : '$',
|
||||
'property' : 'height',
|
||||
'value_pattern' : 'linear-gradient(to bottom, $ 14%,#7db9e8 77%)',
|
||||
'media_query' : '@media ( min-width: 760px )',
|
||||
'units' : 'px',
|
||||
'prefix' : 'calc(1px + ',
|
||||
'suffix' : ') !important',
|
||||
}
|
||||
*
|
||||
* @param {String} selector CSS selector.
|
||||
* @param {Mixed} value Property value.
|
||||
* @param {Object} params Output params.
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
prepareStylesFromParams( selector, value, params ) {
|
||||
let result = '';
|
||||
|
||||
if ( ! selector || typeof value === 'undefined' || '' === value || null === value || ! params.property ) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// check for context
|
||||
if ( params.context && params.context.indexOf( 'editor' ) === -1 ) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// Reverse smart selector.
|
||||
if ( params.reverse && params.reverse_max ) {
|
||||
let multi_selector = '';
|
||||
for (let iteration = 1; iteration < params.reverse_max; iteration++) {
|
||||
if ( iteration <= value ) {
|
||||
continue;
|
||||
}
|
||||
multi_selector += ( multi_selector ? ', ' : '' ) + params.reverse.replace( /\$numb/g, iteration );
|
||||
}
|
||||
|
||||
selector = multi_selector;
|
||||
}
|
||||
|
||||
// value pattern
|
||||
if ( params.value_pattern ) {
|
||||
value = params.value_pattern.replace( /\$/g, value );
|
||||
}
|
||||
|
||||
// prepare CSS
|
||||
result = `
|
||||
${ params.element ? params.element.replace( /\$/g, selector ) : selector } {
|
||||
${ params.property }: ${ params.prefix || '' }${ value }${ params.units || '' }${ params.suffix || '' };
|
||||
}
|
||||
`;
|
||||
|
||||
// add media query
|
||||
if ( params.media_query ) {
|
||||
result = `
|
||||
${ params.media_query } {
|
||||
${ result }
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
selector = '',
|
||||
fields = [],
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let result = '';
|
||||
|
||||
fields
|
||||
.filter( ( fieldData ) => {
|
||||
if ( ! fieldData || ! fieldData.type ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// check active_callback
|
||||
return isFieldVisible( fieldData, attributes, fields );
|
||||
})
|
||||
.forEach( ( fieldData, i ) => {
|
||||
if ( selector && fieldData.output ) {
|
||||
fieldData.output.forEach( ( outputData ) => {
|
||||
// general styles.
|
||||
result += this.prepareStylesFromParams( selector, this.getFieldValue( fieldData ), outputData );
|
||||
|
||||
// Dark styles.
|
||||
if ( canvasSchemes && ( 'color' === fieldData.type ) ) {
|
||||
Object.keys( canvasSchemes ).forEach( ( name ) => {
|
||||
if ( name && 'default' !== name ) {
|
||||
|
||||
let rule = `[data-scheme="${name}"] ${selector}`;
|
||||
|
||||
result += this.prepareStylesFromParams( rule, this.getFieldValue( fieldData, name ), {
|
||||
...outputData
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
// Responsive styles.
|
||||
if ( fieldData.responsive ) {
|
||||
Object.keys( canvasAllBreakpoints ).forEach( ( name ) => {
|
||||
if ( name && 'desktop' !== name ) {
|
||||
let rule = selector;
|
||||
|
||||
// If exist scheme.
|
||||
if ( canvasAllBreakpoints[ name ].scheme ) {
|
||||
rule = `[data-scheme="${name}"] ${canvasAllBreakpoints[ name ].scheme}`;
|
||||
}
|
||||
|
||||
result += this.prepareStylesFromParams( rule, this.getFieldValue( fieldData, name ), {
|
||||
...outputData,
|
||||
media_query: `@media (max-width: ${ canvasAllBreakpoints[ name ].width }px)`,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
return (
|
||||
result ? (
|
||||
<style>
|
||||
{ result }
|
||||
</style>
|
||||
) : ''
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
<?php
|
||||
/**
|
||||
* Parse fields data and generate styles output.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
require_once CNVS_PATH . 'gutenberg/utils/is-field-visible/index.php';
|
||||
|
||||
if ( ! class_exists( 'CNVS_Gutenberg_Fields_CSS_Output' ) ) {
|
||||
|
||||
/**
|
||||
* Class Gutenberg Fields CSS Output.
|
||||
*/
|
||||
class CNVS_Gutenberg_Fields_CSS_Output {
|
||||
/**
|
||||
* Prepare CSS for selected fields.
|
||||
*
|
||||
* @param string $selector CSS selector.
|
||||
* @param array $fields Fields data.
|
||||
* @param array $attributes Block attributes.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public static function get( $selector, $fields = array(), $attributes = array() ) {
|
||||
$schemes = cnvs_gutenberg()->get_schemes_data();
|
||||
$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
|
||||
$all_breakpoints = cnvs_gutenberg()->get_all_breakpoints_data();
|
||||
|
||||
$result = '';
|
||||
|
||||
foreach ( $fields as $field ) {
|
||||
if ( ! isset( $field['type'] ) || ! isset( $field['output'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// check if field visible.
|
||||
if ( ! CNVS_Gutenberg_Utils_Is_Field_Visible::check( $field, $attributes, $fields ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
foreach ( $field['output'] as $data ) {
|
||||
$result .= self::prepare_styles_from_params( $selector, self::get_field_value( $field, $attributes ), $data );
|
||||
|
||||
if ( $schemes && ( 'color' === $field['type'] ) ) {
|
||||
|
||||
foreach ( $schemes as $name => $scheme ) {
|
||||
$rule = sprintf( '[data-scheme="%s"] %s', $name, $selector );
|
||||
|
||||
if ( $name && 'default' !== $name ) {
|
||||
$result .= self::prepare_styles_from_params(
|
||||
$rule,
|
||||
self::get_field_value( $field, $attributes, $name ),
|
||||
$data
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( isset( $field['responsive'] ) && $field['responsive'] ) {
|
||||
foreach ( $all_breakpoints as $name => $breakpoint ) {
|
||||
if ( $name && 'desktop' !== $name ) {
|
||||
|
||||
$rule = $selector;
|
||||
|
||||
// If exist scheme.
|
||||
if ( isset( $breakpoint['scheme'] ) ) {
|
||||
$rule = sprintf( '[data-scheme="%s"] %s', $breakpoint['scheme'], $selector );
|
||||
}
|
||||
|
||||
$result .= self::prepare_styles_from_params(
|
||||
$rule,
|
||||
self::get_field_value( $field, $attributes, $name ),
|
||||
array_merge(
|
||||
$data,
|
||||
array(
|
||||
'media_query' => '@media (max-width: ' . apply_filters( 'canvas_blocks_dynamic_breakpoint_width', $breakpoint['width'], $field ) . 'px)',
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current field value. If value doesn't exist, use default value.
|
||||
*
|
||||
* @param array $field Field data.
|
||||
* @param array $attributes Field attributes.
|
||||
* @param string $breakpoint Breakpoint name.
|
||||
*
|
||||
* @return mixed Field value.
|
||||
*/
|
||||
public static function get_field_value( $field, $attributes, $breakpoint = '' ) {
|
||||
$suffix = '';
|
||||
|
||||
if ( $breakpoint ) {
|
||||
$suffix = '_' . $breakpoint;
|
||||
}
|
||||
|
||||
if ( isset( $attributes[ $field['key'] . $suffix ] ) ) {
|
||||
return $attributes[ $field['key'] . $suffix ];
|
||||
} elseif ( isset( $field[ 'default' . $suffix ] ) ) {
|
||||
return $field[ 'default' . $suffix ];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare styles from params
|
||||
* Params example:
|
||||
array(
|
||||
'element' => '$',
|
||||
'property' => 'height',
|
||||
'value_pattern' => 'linear-gradient(to bottom, $ 14%,#7db9e8 77%)',
|
||||
'media_query' => '@media ( min-width: 760px )',
|
||||
'units' => 'px',
|
||||
'prefix' => 'calc(1px + ',
|
||||
'suffix' => ') !important',
|
||||
)
|
||||
*
|
||||
* @param string $selector CSS selector.
|
||||
* @param mixed $value Property value.
|
||||
* @param array $params Output params.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public static function prepare_styles_from_params( $selector, $value, $params ) {
|
||||
$result = '';
|
||||
|
||||
if ( ! $selector || ! isset( $value ) || '' === $value || null === $value || ! isset( $params['property'] ) ) {
|
||||
return $result;
|
||||
}
|
||||
|
||||
// Check for context.
|
||||
if ( isset( $params['context'] ) && ! in_array( 'front', $params['context'], true ) ) {
|
||||
return $result;
|
||||
}
|
||||
|
||||
// Custom selector pattern.
|
||||
if ( isset( $params['element'] ) ) {
|
||||
$selector = str_replace( '$', $selector, $params['element'] );
|
||||
}
|
||||
|
||||
// Reverse smart selector.
|
||||
if ( isset( $params['reverse'] ) && isset( $params['reverse_max'] ) ) {
|
||||
$multi_selector = __return_empty_string();
|
||||
|
||||
for ( $iteration = 1; $iteration <= $params['reverse_max']; $iteration++ ) {
|
||||
if ( $iteration <= $value ) {
|
||||
continue;
|
||||
}
|
||||
$multi_selector .= ( $multi_selector ? ', ' : '' ) . str_replace( '$numb', $iteration, $params['reverse'] );
|
||||
}
|
||||
|
||||
$selector = str_replace( '$', $selector, $multi_selector );
|
||||
}
|
||||
|
||||
// Value pattern.
|
||||
if ( isset( $params['value_pattern'] ) ) {
|
||||
$value = str_replace( '$', $value, $params['value_pattern'] );
|
||||
}
|
||||
|
||||
// Prefix.
|
||||
if ( isset( $params['prefix'] ) ) {
|
||||
$value = $params['prefix'] . $value;
|
||||
}
|
||||
|
||||
// Units.
|
||||
if ( isset( $params['units'] ) ) {
|
||||
$value = $value . $params['units'];
|
||||
}
|
||||
|
||||
// Suffix.
|
||||
if ( isset( $params['suffix'] ) ) {
|
||||
$value = $value . $params['suffix'];
|
||||
}
|
||||
|
||||
$property = $params['property'];
|
||||
|
||||
// Prepare CSS.
|
||||
$result = "${selector} { ${property}: ${value}; }";
|
||||
|
||||
// Add media query.
|
||||
if ( isset( $params['media_query'] ) ) {
|
||||
$media_query = $params['media_query'];
|
||||
|
||||
$result = "${media_query} { ${result} }";
|
||||
}
|
||||
|
||||
return $result;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user