section = $section;
$this->component_id = $component_id;
$this->has_textbutton_support = $has_textbutton_support;
$this->button_selector = '.builder-item--' . $this->component_id . ' .nv-text-btn';
}
/**
* Adds customizer controls to customize icon and the button (if has support)
*
* @return void
*/
public function add_controls() {
$this->add_button_appearance_control();
$this->add_customize_icon_controls();
}
/**
* Returns default content of the text based button
*
* @return string
*/
public static function get_default_button_text() {
return __( 'Search', 'neve' ) . '!';
}
/**
* Get available icons
* The SVG contents are same with the ones in assets/apps/components/src/Common/svg.js
*
* @param string $id Icon ID (These are the same with choice IDs in RadioButtonsComponent.js).
* @return string
*/
public static function render_icon( $id, $size ) {
$icons = [
self::DEFAULT_ICON => '', // SVG.searchIcon1,
'hfgs-icon-style-2' => '', // SVG.searchIcon2,
'hfgs-icon-style-3' => '', // SVG.searchIcon3
'hfgs-icon-style-4' => '', // SVG.searchIcon4
'hfgs-icon-style-5' => '', // SVG.searchIcon5
self::CUSTOM_ICON => '', // SVG.customSVG
];
return $icons[ $id ];
}
/**
* Adds action type control for icon/button selection
*
* @return void
*/
private function add_button_appearance_control() {
if ( ! $this->has_textbutton_support ) {
return;
}
SettingsManager::get_instance()->add(
[
'id' => self::BUTTON_APPEARANCE,
'group' => $this->component_id,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'refresh',
'label' => __( 'Button Appearance', 'neve' ),
'sanitize_callback' => 'sanitize_key',
'default' => self::DEFAULT_BUTTON_APPEARANCE,
'type' => '\Neve\Customizer\Controls\React\Radio_Buttons',
'section' => $this->section,
'conditional_header' => true,
'options' => [
'choices' => [
self::DEFAULT_BUTTON_APPEARANCE => [
'tooltip' => sprintf( '%s %s', __( 'Icon', 'neve' ), __( 'Button', 'neve' ) ),
'icon' => 'text',
],
'text_button' => [
'tooltip' => sprintf( '%s %s', __( 'Text', 'neve' ), __( 'Button', 'neve' ) ),
'icon' => 'text',
],
],
'show_labels' => true,
],
]
);
}
/**
* Adds a control to allow choose icon style.
*
* @return void
*/
private function add_customize_icon_controls() {
$sm = SettingsManager::get_instance();
$sm::get_instance()->add(
[
'id' => self::ICON_TYPE,
'group' => $this->component_id,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'refresh',
'label' => __( 'Icon', 'neve' ),
'default' => self::DEFAULT_ICON,
'sanitize_callback' => 'sanitize_text_field',
'type' => '\Neve\Customizer\Controls\React\Radio_Buttons',
'section' => $this->section,
'conditional_header' => true,
'options' => [
'is_for' => 'search_icon',
'show_labels' => false,
'active_callback' => [ $this, 'is_icon_mode_enabled' ],
],
]
);
$sm::get_instance()->add(
[
'id' => self::CUSTOM_ICON_SVG,
'group' => $this->component_id,
'tab' => SettingsManager::TAB_STYLE,
'transport' => 'refresh',
'label' => __( 'Custom SVG', 'neve' ),
'default' => self::DEFAULT_CUSTOM_ICON_SVG,
'type' => '\Neve\Customizer\Controls\React\Textarea',
'sanitize_callback' => 'neve_kses_svg',
'section' => $this->section,
'conditional_header' => true,
'options' => [
'active_callback' => function() {
$icon_type = component_setting( self::ICON_TYPE, self::DEFAULT_ICON, $this->component_id );
return $this->is_icon_mode_enabled() && self::CUSTOM_ICON === $icon_type;
},
'input_attrs' => [
'rows' => 8,
],
],
]
);
$new_skin = neve_is_new_skin();
$mod_key = self::BUTTON_STYLE;
$default = $new_skin ? [
'type' => 'outline',
'borderRadius' => [
'top' => 0,
'left' => 0,
'bottom' => 0,
'right' => 0,
],
] : [ 'type' => 'outline' ];
SettingsManager::get_instance()->add(
[
'id' => self::BUTTON_TEXT,
'group' => $this->component_id,
'transport' => 'post' . $this->component_id,
'tab' => SettingsManager::TAB_STYLE,
'sanitize_callback' => 'sanitize_text_field',
'default' => self::get_default_button_text(),
'label' => __( 'Text', 'neve' ),
'type' => 'text',
'section' => $this->section,
'options' => [
'active_callback' => [ $this, 'is_button_mode_enabled' ],
],
'conditional_header' => true,
]
);
SettingsManager::get_instance()->add(
[
'id' => $mod_key,
'group' => $this->component_id,
'transport' => 'postMessage',
'tab' => SettingsManager::TAB_STYLE,
'sanitize_callback' => 'neve_sanitize_button_appearance',
'default' => $default,
'label' => __( 'Button Appearance', 'neve' ),
'type' => '\Neve\Customizer\Controls\React\Button_Appearance',
'section' => $this->section,
'options' => [
'no_hover' => true,
'no_shadow' => true,
'no_border' => true,
'default_vals' => $default,
'active_callback' => [ $this, 'is_button_mode_enabled' ],
],
'live_refresh_selector' => true,
'live_refresh_css_prop' => [
'cssVar' => [
'vars' => [
'--primarybtnbg' => 'background',
'--primarybtnhoverbg' => 'background',
'--primarybtncolor' => 'text',
'--primarybtnhovercolor' => 'text',
],
'selector' => $this->button_selector,
],
],
'conditional_header' => true,
]
);
}
/**
* Get search form button appereance (text button / icon button)
*
* @return string icon_button|text_button
*/
private function get_form_button_appearance() {
return component_setting( self::BUTTON_APPEARANCE, self::DEFAULT_BUTTON_APPEARANCE, $this->component_id );
}
/**
* Check if the "text_button" style mode (a text based button is shown as search action) is enabled for the search component.
*
* @return bool
*/
public function is_button_mode_enabled() {
// if the component doesn't support text buttons, only icons are supported.
if ( ! $this->has_textbutton_support ) {
return false;
}
return 'text_button' === $this->get_form_button_appearance();
}
/**
* Check if the "icon_button" style mode (an icon is shown as search action) is enabled for the search component.
*
* @return bool
*/
public function is_icon_mode_enabled() {
// if the component doesn't support text buttons, only icons are supported.
if ( ! $this->has_textbutton_support ) {
return true;
}
return 'icon_button' === $this->get_form_button_appearance();
}
/**
* Method to add Component css styles.
*
* @param array $css_array An array containing css rules.
*
* @return array
* @since 1.0.0
* @access public
*/
public function get_style( array $css_array = array() ) {
if ( ! neve_is_new_skin() ) {
return $css_array; // sub classes returns legacy style already.
}
if ( ! $this->is_button_mode_enabled() ) {
return $css_array;
}
$button_style_id = $this->component_id . '_' . self::BUTTON_STYLE;
$rules = [
'--primarybtnbg' => $button_style_id . '.background',
'--primarybtnhoverbg' => $button_style_id . '.background',
'--primarybtncolor' => $button_style_id . '.text',
'--primarybtnhovercolor' => $button_style_id . '.text',
];
$css_array[] = [
Dynamic_Selector::KEY_SELECTOR => $this->button_selector,
Dynamic_Selector::KEY_RULES => $rules,
];
return $css_array;
}
}