Loading...
}} {{LEFT}}{{UNIT}};'
],
]
);
$this->end_controls_section(); # end of 'Search Box'
/**
* ----------------------------------------------------------
* Section: Search Field
* ----------------------------------------------------------
*/
$this->start_controls_section(
'section_search_field_settings',
[
'label' => __('Search Field', 'essential-addons-for-elementor-lite'),
]
);
$this->add_control(
'section_search_field_placeholder',
[
'label' => __('Placeholder', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::TEXT,
'default' => esc_html__('Search', 'essential-addons-for-elementor-lite'),
'ai' => [
'active' => false,
],
]
);
$this->add_control(
'search_field_bg',
[
'label' => esc_html__('Field Background Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform' => 'background: {{VALUE}};',
],
]
);
$this->add_control(
'search_field_text_color',
[
'label' => esc_html__('Field Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'search_field_text_typography',
'selector' => '{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field'
]
);
$this->add_responsive_control(
'search_field_padding',
[
'label' => __('Field Padding', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'search_field_padding_radius',
[
'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
],
]
);
$this->add_group_control(
\Elementor\Group_Control_Border::get_type(),
[
'name' => 'search_field_border',
'label' => __('Border', 'essential-addons-for-elementor-lite'),
'selector' => '{{WRAPPER}} .betterdocs-searchform',
]
);
$this->add_group_control(
\Elementor\Group_Control_Box_Shadow::get_type(),
[
'name' => 'search_field_shadow',
'label' => __('Shadow', 'essential-addons-for-elementor-lite'),
'selector' => '{{WRAPPER}} .betterdocs-searchform',
]
);
$this->add_control(
'field_search_icon_heading',
[
'label' => esc_html__('Search Icon', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING,
'separator' => 'before'
]
);
$this->add_control(
'field_search_icon_color',
[
'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'fill: {{VALUE}};',
],
]
);
$this->add_control(
'field_search_icon_size',
[
'label' => esc_html__('Size', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px', '%', 'em'],
'range' => [
'px' => [
'max' => 500,
],
],
'selectors' => [
'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'field_close_icon_heading',
[
'label' => esc_html__('Close Icon', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING,
'separator' => 'before'
]
);
$this->add_control(
'search_field_close_icon_color',
[
'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .docs-search-close .close-line' => 'fill: {{VALUE}};',
],
]
);
$this->add_control(
'search_field_close_icon_border_color',
[
'label' => esc_html__('Border Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .docs-search-loader, {{WRAPPER}} .docs-search-close .close-border' => 'stroke: {{VALUE}};',
],
]
);
$this->end_controls_section(); # end of 'Search Field'
/**
* ----------------------------------------------------------
* Section: Search Result Box
* ----------------------------------------------------------
*/
$this->start_controls_section(
'section_search_result_settings',
[
'label' => __('Search Result Box', 'essential-addons-for-elementor-lite'),
]
);
$this->add_responsive_control(
'result_box_width',
[
'label' => __('Width', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 100,
'unit' => '%',
],
'size_units' => ['%', 'px', 'em'],
'range' => [
'%' => [
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'result_box_max_width',
[
'label' => __('Max Width', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 1600,
'unit' => 'px',
],
'size_units' => ['px', 'em'],
'range' => [
'px' => [
'max' => 1600,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'max-width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'result_box_bg',
'types' => ['classic', 'gradient'],
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'result_box_border',
'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result',
]
);
$this->end_controls_section(); # end of 'Search Result Box'
/**
* ----------------------------------------------------------
* Section: Search Result Item
* ----------------------------------------------------------
*/
$this->start_controls_section(
'section_search_result_item_settings',
[
'label' => __('Search Result List', 'essential-addons-for-elementor-lite'),
]
);
$this->start_controls_tabs('item_settings_tab');
// Normal State Tab
$this->start_controls_tab(
'item_normal',
['label' => esc_html__('Normal', 'essential-addons-for-elementor-lite')]
);
$this->add_control(
'result_box_item',
[
'label' => esc_html__('Item', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'result_box_item_typography',
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li a'
]
);
$this->add_control(
'result_box_item_color',
[
'label' => esc_html__('Item Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'result_item_border',
'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li'
]
);
$this->add_responsive_control(
'result_box_item_padding',
[
'label' => __('Padding', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'search_result_box_item_count',
[
'label' => esc_html__('Count', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING,
'separator' => 'before'
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'result_box_item_count_typography',
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li span'
]
);
$this->add_control(
'result_box_item_count_color',
[
'label' => esc_html__('Item Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li span' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
// Hover State Tab
$this->start_controls_tab(
'item_hover',
['label' => esc_html__('Hover', 'essential-addons-for-elementor-lite')]
);
$this->add_responsive_control(
'result_item_transition',
[
'label' => __('Transition', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 300,
'unit' => '%',
],
'size_units' => ['%'],
'range' => [
'%' => [
'max' => 2500,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li, {{WRAPPER}} .betterdocs-live-search .docs-search-result li a, {{WRAPPER}} .betterdocs-live-search .docs-search-result li span, {{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'transition: {{SIZE}}ms;',
],
]
);
$this->add_control(
'result_box_item_hover_heading',
[
'label' => esc_html__('Item', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'result_box_item_hover_bg',
'types' => ['classic', 'gradient'],
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover',
'exclude' => [
'image'
]
]
);
$this->add_control(
'result_box_item_hover_color',
[
'label' => esc_html__('Item Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover a' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'result_item_hover_border',
'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover'
]
);
$this->add_control(
'result_box_item_hover_count_heading',
[
'label' => esc_html__('Count', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::HEADING,
'separator' => 'before'
]
);
$this->add_control(
'result_box_item_hover_count_color',
[
'label' => esc_html__('Item Color', 'essential-addons-for-elementor-lite'),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover span' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section(); # end of 'Search Result Item'
}
}
protected function render()
{
if (!defined('BETTERDOCS_URL')) return;
$settings = $this->get_settings_for_display();
$shortcode = sprintf('[betterdocs_search_form placeholder="'.$settings['section_search_field_placeholder'].'"]', apply_filters('eael_betterdocs_search_form_params', []));
echo do_shortcode(shortcode_unautop($shortcode));
}
public function render_plain_content()
{
$settings = $this->get_settings_for_display();
// In plain mode, render without shortcode
echo '[betterdocs_search_form placeholder="'.$settings['section_search_field_placeholder'].'"]';
}
}
