WordFence

🏠 Root / home / artorgp / www / wp-content / plugins / visual-portfolio / gutenberg / utils / controls-dynamic-css /

Editing: index.js

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;
}