🏠 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, '</' ); result += customCss; } return result; }
Save
Cancel