Файловый менеджер

Файловый менеджер - Редактировать - /home/harasnat/www/labour/wp-content/plugins/wpforms-lite/assets/js/integrations/gutenberg/modules/container-styles.js

Назад
/* global wpforms_gutenberg_form_selector / / jshint es3: false, esversion: 6 / /* * @param strings.border_color * @param strings.border_style * @param strings.border_width * @param strings.container_styles * @param strings.shadow_size / /* * Gutenberg editor block. * * Container styles panel module. * * @since 1.8.8 / export default ( ( $ ) => { /* * WP core components. * * @since 1.8.8 / const { PanelColorSettings } = wp.blockEditor \|\| wp.editor; const { SelectControl, PanelBody, Flex, FlexBlock, __experimentalUnitControl } = wp.components; /* * Localized data aliases. * * @since 1.8.8 / const { strings, defaults } = wpforms_gutenberg_form_selector; /* * Public functions and properties. * * @since 1.8.8 * * @type {Object} / const app = { /* * Start the engine. * * @since 1.8.8 / init() { $( app.ready ); }, /* * Document ready. * * @since 1.8.8 / ready() { app.events(); }, /* * Events. * * @since 1.8.8 / events() { }, /* * Get block attributes. * * @since 1.8.8 * * @return {Object} Block attributes. / getBlockAttributes() { return { containerPadding: { type: 'string', default: defaults.containerPadding, }, containerBorderStyle: { type: 'string', default: defaults.containerBorderStyle, }, containerBorderWidth: { type: 'string', default: defaults.containerBorderWidth, }, containerBorderColor: { type: 'string', default: defaults.containerBorderColor, }, containerBorderRadius: { type: 'string', default: defaults.containerBorderRadius, }, containerShadowSize: { type: 'string', default: defaults.containerShadowSize, }, }; }, /* * Get Container Styles panel JSX code. * * @since 1.8.8 * * @param {Object} props Block properties. * @param {Object} handlers Block handlers. * @param {Object} formSelectorCommon Common form selector functions. * * @param {Object} uiState UI state. * * @return {Object} Field styles JSX code. */ getContainerStyles( props, handlers, formSelectorCommon, uiState ) { // eslint-disable-line max-lines-per-function, complexity let cssClass = formSelectorCommon.getPanelClass( props ); const isNotDisabled = uiState.isNotDisabled; const isProEnabled = uiState.isProEnabled; if ( ! isNotDisabled ) { cssClass += ' wpforms-gutenberg-panel-disabled'; } return ( <PanelBody className={ cssClass } title={ strings.container_styles }> <div // eslint-disable-line jsx-a11y/no-static-element-interactions className="wpforms-gutenberg-form-selector-panel-body" onClick={ ( event ) => { if ( isNotDisabled ) { return; } event.stopPropagation(); if ( ! isProEnabled ) { return formSelectorCommon.education.showProModal( 'container', strings.container_styles ); } formSelectorCommon.education.showLicenseModal( 'container', strings.container_styles, 'container-styles' ); } } onKeyDown={ ( event ) => { if ( isNotDisabled ) { return; } event.stopPropagation(); if ( ! isProEnabled ) { return formSelectorCommon.education.showProModal( 'container', strings.container_styles ); } formSelectorCommon.education.showLicenseModal( 'container', strings.container_styles, 'container-styles' ); } } > <Flex gap={ 4 } align="flex-start" className="wpforms-gutenberg-form-selector-flex" justify="space-between"> <FlexBlock> <__experimentalUnitControl label={ strings.padding } tabIndex={ isNotDisabled ? 0 : -1 } value={ props.attributes.containerPadding } min={ 0 } isUnitSelectTabbable={ isNotDisabled } onChange={ ( value ) => handlers.styleAttrChange( 'containerPadding', value ) } /> </FlexBlock> <FlexBlock> <SelectControl label={ strings.border_style } tabIndex={ isNotDisabled ? 0 : -1 } value={ props.attributes.containerBorderStyle } options={ [ { label: strings.none, value: 'none' }, { label: strings.solid, value: 'solid' }, { label: strings.dotted, value: 'dotted' }, { label: strings.dashed, value: 'dashed' }, { label: strings.double, value: 'double' }, ] } onChange={ ( value ) => handlers.styleAttrChange( 'containerBorderStyle', value ) } /> </FlexBlock> </Flex> <Flex gap={ 4 } align="flex-start" className="wpforms-gutenberg-form-selector-flex" justify="space-between"> <FlexBlock> <__experimentalUnitControl label={ strings.border_width } tabIndex={ isNotDisabled ? 0 : -1 } value={ props.attributes.containerBorderStyle === 'none' ? '' : props.attributes.containerBorderWidth } min={ 0 } disabled={ props.attributes.containerBorderStyle === 'none' } isUnitSelectTabbable={ isNotDisabled } onChange={ ( value ) => handlers.styleAttrChange( 'containerBorderWidth', value ) } /> </FlexBlock> <FlexBlock> <__experimentalUnitControl label={ strings.border_radius } tabIndex={ isNotDisabled ? 0 : -1 } value={ props.attributes.containerBorderRadius } min={ 0 } isUnitSelectTabbable={ isNotDisabled } onChange={ ( value ) => handlers.styleAttrChange( 'containerBorderRadius', value ) } /> </FlexBlock> </Flex> <Flex gap={ 4 } align="flex-start" className="wpforms-gutenberg-form-selector-flex" justify="space-between"> <FlexBlock> <SelectControl label={ strings.shadow_size } tabIndex={ isNotDisabled ? 0 : -1 } value={ props.attributes.containerShadowSize } options={ [ { label: strings.none, value: 'none' }, { label: strings.small, value: 'small' }, { label: strings.medium, value: 'medium' }, { label: strings.large, value: 'large' }, ] } onChange={ ( value ) => handlers.styleAttrChange( 'containerShadowSize', value ) } /> </FlexBlock> </Flex> <Flex gap={ 4 } align="flex-start" className="wpforms-gutenberg-form-selector-flex" justify="space-between"> <FlexBlock> <div className="wpforms-gutenberg-form-selector-control-label">{ strings.colors }</div> <PanelColorSettings __experimentalIsRenderedInSidebar enableAlpha showTitle={ false } tabIndex={ isNotDisabled ? 0 : -1 } className={ props.attributes.containerBorderStyle === 'none' ? 'wpforms-gutenberg-form-selector-color-panel wpforms-gutenberg-form-selector-color-panel-disabled' : 'wpforms-gutenberg-form-selector-color-panel' } colorSettings={ [ { value: props.attributes.containerBorderColor, onChange: ( value ) => { if ( ! isNotDisabled ) { return; } handlers.styleAttrChange( 'containerBorderColor', value ); }, label: strings.border_color, }, ] } /> </FlexBlock> </Flex> </div> </PanelBody> ); }, }; return app; } )( jQuery );

| ver. 1.4 | Github | .