Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/cartflows-pro   php

Repository URL to install this package:

/**
 * BLOCK: Offer Product Quantity Block
 */

// Import block dependencies and components.
import classnames from "classnames"
import styling from "./styling"
import CFP_Block_Icons from "../../../dist/blocks/controls/block-icons"

// Import all of our Text Options requirements.
import TextShadowControl from "../../components/text-shadow"
import TypographyControl from "../../components/typography"

// Import Web font loader for google fonts.
import WebfontLoader from "../../components/typography/fontloader"

const { __ } = wp.i18n

const {
	BlockControls,
	InspectorControls,
	ColorPalette,
} = wp.blockEditor

const {
	withSelect
} = wp.data

const {
    PanelBody,
	SelectControl,
	RangeControl,
	ButtonGroup,
	Button,
    TabPanel,
	Dashicon,
} = wp.components

const { Component, Fragment } = wp.element

class OfferProductQuantity extends Component {

    constructor() {
		super( ...arguments )

	}

    componentDidMount() {

		// Assigning block_id in the attribute.
		this.props.setAttributes( { block_id: this.props.clientId.substr( 0, 8 ) } )

		// Assigning block_id in the attribute.
		this.props.setAttributes( { classMigrate: true } )

		// Pushing Style tag for this block css.
		const $style = document.createElement( "style" )
		$style.setAttribute( "id", "wpcfp-offer-product-quantity-style-" + this.props.clientId.substr( 0, 8 ) )
		document.head.appendChild( $style )
    }

    componentDidUpdate(prevProps, prevState) {
		var element = document.getElementById( "wpcfp-offer-product-quantity-style-" + this.props.clientId.substr( 0, 8 ) )

		if( null !== element && undefined !== element ) {
			element.innerHTML = styling( this.props )
		}
    }

    render() {

        // Setup the attributes
        const {
            className,
            attributes,
            setAttributes,
            attributes: {
                formJson,
                isHtml,
                // Alignment
                alignment,
                // Width
				width,
				// Label bottom spacing
				label_bottom_spacing,
                //Margin
				topMargin,
				bottomMargin,
                // Label Color
                labelColor,
                // Input Text Color
                inputTextColor,
                // Background Color
                backgroundColor,
                // Text
				textFontFamily,
				textFontWeight,
				textFontSubset,
				textFontSize,
				textFontSizeType,
				textFontSizeMobile,
				textFontSizeTablet,
				textLineHeight,
				textLineHeightType,
				textLineHeightMobile,
				textLineHeightTablet,
				textLoadGoogleFonts,
				// Text Shadow
				textShadowColor,
				textShadowHOffset,
				textShadowVOffset,
                textShadowBlur,
                //Border
				borderStyle,
				borderWidth,
				borderRadius,
                borderColor,
            },

        } = this.props

        let html = ""

        if ( formJson && formJson.data.html ) {
            html = formJson.data.html
        }

        let loadTextGoogleFonts;

        if( true === textLoadGoogleFonts ) {
            const tconfig = {
                google: {
                    families: [ textFontFamily + ( textFontWeight ? ':' + textFontWeight : '' ) ],
                },
            };
            loadTextGoogleFonts = (
                <WebfontLoader config={ tconfig }>
                </WebfontLoader>
            )
        }

        const offerProductQuantityGeneralSettings = () => {

            return (
				<PanelBody title={ __( "General", 'cartflows-pro' ) } initialOpen={ true }>

                    <SelectControl
						label={ __( "Alignment", 'cartflows-pro' ) }
						value={ alignment }
						onChange={ ( value ) => setAttributes( { alignment: value } ) }
						options={ [
							{ value: "center", label: __( "Center", 'cartflows-pro' ) },
							{ value: "left", label: __( "Left", 'cartflows-pro' ) },
							{ value: "right", label: __( "Right", 'cartflows-pro' ) },
						] }
					/>

                    <RangeControl
                        label={ 'Width (%)' }
                        value={ width }
                        onChange={ ( value ) => setAttributes( { width: value } ) }
                        min={ 0 }
                        max={ 100 }
                        allowReset
                    />

					<RangeControl
                        label={ 'Label Bottom Spacing (px)' }
                        value={ label_bottom_spacing }
                        onChange={ ( value ) => setAttributes( { label_bottom_spacing: value } ) }
                        min={ 0 }
                        max={ 100 }
                        allowReset
                    />
                
                </PanelBody>

            )

        }

        const offerProductQuantityContentSettings = () => {

            return (
				<PanelBody title={ __( "Content", 'cartflows-pro' ) } initialOpen={ false }>

                    <TypographyControl
						label={ __( "Typography", 'cartflows-pro' ) }
                        attributes = { attributes }
						setAttributes = { setAttributes }
						loadGoogleFonts = { { value: textLoadGoogleFonts, label:'textLoadGoogleFonts' } }
						fontFamily = { { value: textFontFamily, label:'textFontFamily' } }
						fontWeight = { { value: textFontWeight, label:'textFontWeight' } }
						fontSubset = { { value: textFontSubset, label:'textFontSubset' } }
						fontSizeType = { { value: textFontSizeType, label:'textFontSizeType'  } }
						fontSize = { { value: textFontSize, label:'textFontSize' } }
						fontSizeMobile = { { value: textFontSizeMobile, label:'textFontSizeMobile' } }
						fontSizeTablet= { { value: textFontSizeTablet, label:'textFontSizeTablet' } }
						lineHeightType = { { value: textLineHeightType, label:'textLineHeightType'  } }
						lineHeight = { { value: textLineHeight, label:'textLineHeight' } }
						lineHeightMobile = { { value: textLineHeightMobile, label:'textLineHeightMobile' } }
						lineHeightTablet= { { value: textLineHeightTablet, label:'textLineHeightTablet' } }
					/>

                    <hr className="cfp-editor__separator" />
                    <p className="cfp-setting-label">{ __( "Label Color", 'cartflows-pro' ) }<span className="components-base-control__label"><span className="component-color-indicator" style={{ backgroundColor: labelColor }} ></span></span></p>
                    <ColorPalette
                        value={ labelColor }
                        onChange={ ( colorValue ) => setAttributes( { labelColor: colorValue } ) }
                        allowReset
                    />
                    <p className="cfp-setting-label">{ __( "Input Text Color", 'cartflows-pro' ) }<span className="components-base-control__label"><span className="component-color-indicator" style={{ backgroundColor: inputTextColor }} ></span></span></p>
                    <ColorPalette
                        value={ inputTextColor }
                        onChange={ ( colorValue ) => setAttributes( { inputTextColor: colorValue } ) }
                        allowReset
                    />
                    <p className="cfp-setting-label">{ __( "Background Color", 'cartflows-pro' ) }<span className="components-base-control__label"><span className="component-color-indicator" style={{ backgroundColor: backgroundColor }} ></span></span></p>
                    <ColorPalette
                        value={ backgroundColor }
                        onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
                        allowReset
                    />

					<h2>{ __( "Input Field Border", 'cartflows-pro' ) }</h2>
					<SelectControl
						label={ __( "Border Style", 'cartflows-pro' ) }
						value={ borderStyle }
						onChange={ ( value ) => setAttributes( { borderStyle: value } ) }
						options={ [
							{ value: "none", label: __( "None", 'cartflows-pro' ) },
							{ value: "solid", label: __( "Solid", 'cartflows-pro' ) },
							{ value: "dotted", label: __( "Dotted", 'cartflows-pro' ) },
							{ value: "dashed", label: __( "Dashed", 'cartflows-pro' ) },
							{ value: "double", label: __( "Double", 'cartflows-pro' ) },
							{ value: "groove", label: __( "Groove", 'cartflows-pro' ) },
							{ value: "inset", label: __( "Inset", 'cartflows-pro' ) },
							{ value: "outset", label: __( "Outset", 'cartflows-pro' ) },
							{ value: "ridge", label: __( "Ridge", 'cartflows-pro' ) },
						] }
					/>
					{ "none" != borderStyle && (
						<RangeControl
							label={ __( "Border Width", 'cartflows-pro' ) }
							value={ borderWidth }
							onChange={ ( value ) => setAttributes( { borderWidth: value } ) }
							min={ 0 }
							max={ 50 }
							allowReset
						/>
					) }
					<RangeControl
						label={ __( "Border Radius", 'cartflows-pro' ) }
						value={ borderRadius }
						onChange={ ( value ) => setAttributes( { borderRadius: value } ) }
						min={ 0 }
						max={ 1000 }
						allowReset
					/>
					{ "none" != borderStyle && (
						<Fragment>
							<p className="cfp-setting-label">{ __( "Border Color", 'cartflows-pro' ) }<span className="components-base-control__label"><span className="component-color-indicator" style={{ backgroundColor: borderColor }} ></span></span></p>
							<ColorPalette
								value={ borderColor }
								onChange={ ( colorValue ) => setAttributes( { borderColor: colorValue } ) }
								allowReset
							/>
						</Fragment>
					) }

					<hr className="cfp-editor__separator" />
					<TextShadowControl
                        setAttributes = { setAttributes }
                        label = { __( "Text Shadow", 'cartflows-pro' ) }
                        textShadowColor = { { value: textShadowColor, label: __( "Color", 'cartflows-pro' ) } }
                        textShadowHOffset = { { value: textShadowHOffset, label: __( "Horizontal", 'cartflows-pro' ) } }
                        textShadowVOffset = { { value: textShadowVOffset, label: __( "Vertical", 'cartflows-pro' ) } }
                        textShadowBlur = { { value: textShadowBlur, label: __( "Blur", 'cartflows-pro' ) } }
                    />

                </PanelBody>

            )

        }

        const offerProductQuantitySpacingSettings = () => {

            return (
				<PanelBody title={ __( "Spacing", 'cartflows-pro' ) } initialOpen={ false }>

					<h2>{ __( "Margin (px)", 'cartflows-pro' ) }</h2>
					<RangeControl
						label={ CFP_Block_Icons.top_margin }
						className={ "cfp-margin-control" }
						value={ topMargin }
						onChange={ ( value ) => setAttributes( { topMargin: value } ) }
						min={ 0 }
						max={ 100 }
						allowReset
					/>
					<RangeControl
						label={ CFP_Block_Icons.bottom_margin }
						className={ "cfp-margin-control" }
						value={ bottomMargin }
						onChange={ ( value ) => setAttributes( { bottomMargin: value } ) }
						min={ 0 }
						max={ 100 }
						allowReset
					/>

                </PanelBody>

            )

        }

        return (
            <Fragment>
                <BlockControls>
                </BlockControls>
                <InspectorControls>

                    { offerProductQuantityGeneralSettings() }
                    { offerProductQuantityContentSettings() }
					{ offerProductQuantitySpacingSettings() }

                </InspectorControls>
                <div
					className={ classnames(
						className,
						`cfp-block-${this.props.clientId.substr( 0, 8 )}`,					
					) }
				>
                    <div className="wpcfp__offer-product-quantity">
                        { isHtml &&
                            <div dangerouslySetInnerHTML={ { __html: html } } />
                        }
                    </div>
                </div>
                
                { loadTextGoogleFonts }

            </Fragment>

        )

    }

}

// export default OfferProductQuantity;

export default withSelect( ( select, props ) => {
    const { setAttributes } = props
    const { isHtml } = props.attributes
	let json_data = ""

	if ( ! isHtml ) {

		jQuery.ajax({
			url: cfp_blocks_info.ajax_url,
			data: {
				action				: "wpcfp_offer_product_quantity_shortcode",
				nonce				: cfp_blocks_info.wpcfp_ajax_nonce,
				id					: cfp_blocks_info.ID,
				cartflows_gb        : true,
			},
			dataType: "json",
			type: "POST",
			success: function( data ) {
				setAttributes( { isHtml: true } )
				setAttributes( { formJson: data } )
                json_data = data
			}
		})
	}

	return {
		formHTML: json_data
	}
} )( OfferProductQuantity )