whoami7 - Manager
:
/
home
/
rattkxnv
/
byattorney.com
/
wp-content
/
plugins
/
generateblocks
/
src
/
components
/
gradient
/
Upload File:
files >> /home/rattkxnv/byattorney.com/wp-content/plugins/generateblocks/src/components/gradient/index.js
/** * Internal dependencies */ import './editor.scss'; import hasNumericValue from '../../utils/has-numeric-value'; /** * WordPress dependencies */ import { __, } from '@wordpress/i18n'; import { Component, Fragment, } from '@wordpress/element'; import { BaseControl, ToggleControl, TextControl, RangeControl, SelectControl, } from '@wordpress/components'; /** * External dependencies */ import { ColorPicker } from '@edge22/components'; /** * Typography Component */ class GradientControl extends Component { render() { const { attributes, setAttributes, attrGradient, attrGradientDirection, attrGradientColorOne, attrGradientColorOneOpacity, attrGradientColorStopOne, attrGradientColorTwo, attrGradientColorTwoOpacity, attrGradientColorStopTwo, defaultColorOne, defaultColorTwo, } = this.props; const { gradientSelector, innerZindex, useInnerContainer, position, } = attributes; const selectorHelp = 'element' === gradientSelector ? __( 'Displays behind the background image.', 'generateblocks' ) : __( 'Displays in front of the background image.', 'generateblocks' ); return ( <Fragment> <ToggleControl label={ __( 'Use Gradient', 'generateblocks' ) } checked={ !! attributes[ attrGradient ] } onChange={ ( value ) => { const props = this.props; let gradientDirection = attributes[ attrGradientDirection ], gradientColorOne = attributes[ attrGradientColorOne ], gradientColorTwo = attributes[ attrGradientColorTwo ]; if ( value ) { gradientDirection = gradientDirection || 90; gradientColorOne = gradientColorOne || 'rgba(255, 255, 255, 0.1)'; gradientColorTwo = gradientColorTwo || 'rgba(0, 0, 0, 0.30)'; } setAttributes( { [ props[ 'attrGradient' ] ]: value, // eslint-disable-line dot-notation [ props[ 'attrGradientDirection' ] ]: gradientDirection, // eslint-disable-line dot-notation [ props[ 'attrGradientColorOne' ] ]: gradientColorOne, // eslint-disable-line dot-notation [ props[ 'attrGradientColorTwo' ] ]: gradientColorTwo, // eslint-disable-line dot-notation } ); } } /> { !! attributes[ attrGradient ] && ( <Fragment> { 'undefined' !== typeof gradientSelector && <SelectControl label={ __( 'Selector', 'generateblocks' ) } help={ selectorHelp } value={ gradientSelector } options={ [ { label: __( 'Element', 'generateblocks' ), value: 'element' }, { label: __( 'Pseudo Element', 'generateblocks' ), value: 'pseudo-element' }, ] } onChange={ ( value ) => { setAttributes( { gradientSelector: value, } ); if ( useInnerContainer && ! hasNumericValue( innerZindex ) && 'pseudo-element' === value ) { setAttributes( { innerZindex: 1, } ); } if ( ! useInnerContainer && 'pseudo-element' === value && ! position ) { setAttributes( { position: 'relative' } ); } } } /> } <BaseControl> <span className="components-base-control__label">{ __( 'Direction', 'generateblocks' ) }</span> <RangeControl value={ attributes[ attrGradientDirection ] ? attributes[ attrGradientDirection ] : 0 } onChange={ ( value ) => { setAttributes( { [ attrGradientDirection ]: value, } ); } } min={ 0 } max={ 360 } step={ 1 } initialPosition={ 90 } /> </BaseControl> <BaseControl> <span className="components-base-control__label">{ __( 'Color One', 'generateblocks' ) }</span> <div className="gblocks-component-gradient-control"> <ColorPicker value={ attributes[ attrGradientColorOne ] } alpha={ true } valueOpacity={ attributes[ attrGradientColorOneOpacity ] || 0 === attributes[ attrGradientColorOneOpacity ] ? attributes[ attrGradientColorOneOpacity ] : 1 } attrOpacity={ 'gradientColorOneOpacity' } onChange={ ( value ) => setAttributes( { [ attrGradientColorOne ]: value, } ) } onOpacityChange={ ( value ) => setAttributes( { [ attrGradientColorOneOpacity ]: value, } ) } onClear={ () => setAttributes( { [ attrGradientColorOne ]: defaultColorOne, } ) } /> <TextControl className={ 'gblocks-component-gradient-stop-value' } type={ 'text' } value={ attributes[ attrGradientColorStopOne ] || 0 === attributes[ attrGradientColorStopOne ] ? attributes[ attrGradientColorStopOne ] : '' } placeholder={ __( 'Stop position (%)', 'generateblocks' ) } onChange={ ( value ) => { setAttributes( { [ attrGradientColorStopOne ]: value, } ); } } onBlur={ () => { if ( attributes[ attrGradientColorStopOne ] || 0 === attributes[ attrGradientColorStopOne ] ) { setAttributes( { [ attrGradientColorStopOne ]: parseFloat( attributes[ attrGradientColorStopOne ] ), } ); } } } onClick={ ( e ) => { // Make sure onBlur fires in Firefox. e.currentTarget.focus(); } } /> </div> </BaseControl> <BaseControl> <span className="components-base-control__label">{ __( 'Color Two', 'generateblocks' ) }</span> <div className="gblocks-component-gradient-control"> <ColorPicker value={ attributes[ attrGradientColorTwo ] } alpha={ true } valueOpacity={ attributes[ attrGradientColorTwoOpacity ] || 0 === attributes[ attrGradientColorTwoOpacity ] ? attributes[ attrGradientColorTwoOpacity ] : 1 } attrOpacity={ 'gradientColorTwoOpacity' } onChange={ ( value ) => setAttributes( { [ attrGradientColorTwo ]: value, } ) } onOpacityChange={ ( value ) => setAttributes( { [ attrGradientColorTwoOpacity ]: value, } ) } onClear={ () => setAttributes( { [ attrGradientColorTwo ]: defaultColorTwo, } ) } /> <TextControl className={ 'gblocks-component-gradient-stop-value' } type={ 'text' } value={ attributes[ attrGradientColorStopTwo ] || 0 === attributes[ attrGradientColorStopTwo ] ? attributes[ attrGradientColorStopTwo ] : '' } placeholder={ __( 'Stop position (%)', 'generateblocks' ) } onChange={ ( value ) => { setAttributes( { [ attrGradientColorStopTwo ]: value, } ); } } onBlur={ () => { if ( attributes[ attrGradientColorStopTwo ] || 0 === attributes[ attrGradientColorStopTwo ] ) { setAttributes( { [ attrGradientColorStopTwo ]: parseFloat( attributes[ attrGradientColorStopTwo ] ), } ); } } } onClick={ ( e ) => { // Make sure onBlur fires in Firefox. e.currentTarget.focus(); } } /> </div> </BaseControl> </Fragment> ) } </Fragment> ); } } export default GradientControl;
Copyright ©2021 || Defacer Indonesia