­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ [ 'type' => 'string', 'default' => '', ], 'blockPreview' => [ 'type' => 'boolean', 'default' => false, ], // General 'actionType' => [ 'type' => 'string', 'default' => 'link', ], 'buttonAlignment' => [ 'type' => 'string', 'default' => 'center', ], 'buttonText' => [ 'type' => 'string', 'default' => __( 'Click Here', 'jet-popup' ), ], 'buttonLink' => [ 'type' => 'string', 'default' => '', ], 'buttonLinkBlank' => [ 'type' => 'boolean', 'default' => false, ], 'buttonLinkNofollow' => [ 'type' => 'boolean', 'default' => false, ], 'iconId' => [ 'type' => 'number', 'default' => 0, ], 'iconUrl' => [ 'type' => 'string', 'default' => '', ], ]; } /** * Return callback * * @return html */ public function render_callback( $settings = [] ) { if ( filter_var( $settings[ 'blockPreview' ], FILTER_VALIDATE_BOOLEAN ) ) { return sprintf( '', jet_popup()->plugin_url( 'assets/image/block-previews/action-button.png' ) ); } $icon_html = \Jet_Popup_Utils::get_svg_icon_html( $settings['iconId'], '', [], false ); $render_instance = new \Jet_Popup\Render\Action_Button_Render( [ 'action_type' => $settings['actionType'], 'button_alignment' => $settings['buttonAlignment'], 'button_text' => $settings['buttonText'], 'button_link' => $settings['buttonLink'], 'button_link_blank' => $settings['buttonLinkBlank'], 'button_link_nofollow' => $settings['buttonLinkNofollow'], 'icon_html' => $icon_html, ] ); return $render_instance->get_content(); } /** * @return void */ public function add_style_manager_options() { $this->controls_manager->start_section( 'style_controls', [ 'id' => 'section_general_styles', 'initialOpen' => true, 'title' => esc_html__( 'General', 'jet-popup' ), ] ); $this->controls_manager->add_responsive_control( [ 'id' => 'icon_distance', 'label' => __( 'Icon Distance', 'jet-popup' ), 'separator' => 'before', 'type' => 'range', 'units' => [ [ 'value' => 'px', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 50, ] ], ], 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-icon-distance:{{VALUE}}{{UNIT}};', ], ] ); $this->controls_manager->add_responsive_control( [ 'id' => 'button_hor_padding', 'label' => __( 'Horizontal Padding', 'jet-popup' ), 'type' => 'range', 'units' => [ [ 'value' => 'px', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 50, ] ], ], 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-hor-padding:{{VALUE}}{{UNIT}};', ], ] ); $this->controls_manager->add_responsive_control( [ 'id' => 'button_ver_padding', 'label' => __( 'Vertical Padding', 'jet-popup' ), 'type' => 'range', 'units' => [ [ 'value' => 'px', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 50, ] ], ], 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-ver-padding:{{VALUE}}{{UNIT}};', ], ] ); $this->controls_manager->add_control( array( 'id' => 'button_border', 'label' => __( 'Border', 'jet-popup' ), 'separator' => 'after', 'type' => 'border', 'disable_color' => true, 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-border-style: {{STYLE}}; --jp-ab-border-width: {{WIDTH}}; --jp-ab-border-radius: {{RADIUS}};', ], ) ); $this->controls_manager->add_responsive_control( [ 'id' => 'icon_distance', 'label' => __( 'Icon Distance', 'jet-popup' ), 'type' => 'range', 'units' => [ [ 'value' => 'px', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 50, ] ], ], 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-icon-distance:{{VALUE}}{{UNIT}};', ], ] ); $this->controls_manager->add_responsive_control( [ 'id' => 'icon_size', 'label' => __( 'Icon Size', 'jet-popup' ), 'type' => 'range', 'units' => [ [ 'value' => 'px', 'intervals' => [ 'step' => 1, 'min' => 0, 'max' => 50, ] ], ], 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-icon-size:{{VALUE}}{{UNIT}};', ], ] ); $this->controls_manager->add_control( [ 'id' => 'label_typography', 'label' => __( 'Label Typography', 'jet-popup' ), 'type' => 'typography', 'css_selector' => [ '{{WRAPPER}} .jet-popup-action-button .jet-popup-action-button__text' => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};', ], ] ); $this->controls_manager->end_section(); $this->controls_manager->start_section( 'style_controls', [ 'id' => 'section_state_styles', 'initialOpen' => true, 'title' => esc_html__( 'States', 'jet-popup' ), ] ); $this->controls_manager->start_tabs( 'style_controls', [ 'id' => 'state_styles', ] ); $this->controls_manager->start_tab( 'style_controls', [ 'id' => 'normal_state', 'title' => esc_html__( 'Normal', 'jet-popup' ), ] ); $this->controls_manager->add_control( [ 'id' => 'icon_color', 'type' => 'color-picker', 'label' => esc_html__( 'Icon Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-icon-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'label_color', 'type' => 'color-picker', 'label' => esc_html__( 'Label Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-label-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'bg_color', 'type' => 'color-picker', 'label' => esc_html__( 'Background Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-bg-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'border_color', 'type' => 'color-picker', 'label' => esc_html__( 'Border Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-border-color: {{VALUE}};', ), ] ); $this->controls_manager->end_tab(); $this->controls_manager->start_tab( 'style_controls', [ 'id' => 'hover_state', 'title' => esc_html__( 'Hover', 'jet-popup' ), ] ); $this->controls_manager->add_control( [ 'id' => 'icon_hover_color', 'type' => 'color-picker', 'label' => esc_html__( 'Icon Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-icon-hover-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'label_hover_color', 'type' => 'color-picker', 'label' => esc_html__( 'Label Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-label-hover-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'bg_hover_color', 'type' => 'color-picker', 'label' => esc_html__( 'Background Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-bg-hover-color: {{VALUE}};', ), ] ); $this->controls_manager->add_control( [ 'id' => 'border_hover_color', 'type' => 'color-picker', 'label' => esc_html__( 'Border Color', 'jet-menu' ), 'css_selector' => array ( '{{WRAPPER}} .jet-popup-action-button' => '--jp-ab-border-hover-color: {{VALUE}};', ), ] ); $this->controls_manager->end_tab(); $this->controls_manager->end_tabs(); $this->controls_manager->end_section(); } }