start_controls_section( 'search_form_sec', [ 'label' => esc_html__( 'Form', 'forumax' ), ] ); $this->add_control( 'placeholder', [ 'label' => esc_html__( 'Placeholder', 'forumax' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => 'Search for Topics....', ] ); $this->add_control( 'search_post_type', [ 'label' => esc_html__( 'Post Type', 'forumax' ), 'type' => Controls_Manager::SELECT, 'default' => 'all', 'options' => [ 'all' => esc_html__( 'All (Forums, Topics & Replies)', 'forumax' ), 'forum' => esc_html__( 'Forum', 'forumax' ), 'topic' => esc_html__( 'Topic', 'forumax' ), 'reply' => esc_html__( 'Reply', 'forumax' ), 'post' => esc_html__( 'Post', 'forumax' ), 'page' => esc_html__( 'Page', 'forumax' ), 'docs' => esc_html__( 'Docs', 'forumax' ), ], ] ); $this->add_control( 'is_ajax_search', [ 'label' => esc_html__( 'AJAX Live Search', 'forumax' ), 'description' => esc_html__( 'Show search results instantly as users type without page reload.', 'forumax' ), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => '', ] ); $this->add_control( 'search_highlight', [ 'label' => esc_html__( 'Highlight Keywords', 'forumax' ), 'description' => esc_html__( 'Highlight the matching keyword in search results.', 'forumax' ), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => '', 'condition' => [ 'is_ajax_search' => 'yes', ], ] ); // select controls $this->add_control( 'submit_btn_type', [ 'label' => __( 'Search Type', 'forumax' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'icon', 'options' => [ 'icon' => __( 'Icon', 'forumax' ), 'text' => __( 'Text', 'forumax' ) ], ] ); $this->add_control( 'submit_btn_icon', [ 'label' => __( 'Submit Button Icon', 'forumax' ), 'type' => \Elementor\Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-search', 'library' => 'solid', ], 'condition' => [ 'submit_btn_type' => 'icon' ] ] ); $this->add_control( 'submit_btn_text', [ 'label' => esc_html__( 'Submit Button Text', 'forumax' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => __( 'Search', 'forumax' ), 'condition' => [ 'submit_btn_type' => 'text' ] ] ); $this->add_control( 'submit_btn_align', [ 'label' => __( 'Submit Alignment', 'forumax' ), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'forumax' ), 'icon' => 'fa fa-align-left', ], 'right' => [ 'title' => __( 'Right', 'forumax' ), 'icon' => 'fa fa-align-right', ], ], 'toggle' => false, 'default' => 'left', ] ); $this->add_control( 'is_keywords', [ 'label' => esc_html__( 'Keywords', 'forumax' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'separator' => 'before', ] ); $this->add_control( 'keywords_label', [ 'label' => esc_html__( 'Keywords Label', 'forumax' ), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => 'Popular:', 'condition' => [ 'is_keywords' => 'yes' ] ] ); $this->add_control( 'keywords_align', [ 'label' => __( 'Keywords Alignment', 'forumax' ), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'forumax' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'forumax' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'forumax' ), 'icon' => 'fa fa-align-right', ], ], 'toggle' => false, 'default' => 'center' ] ); $keywords = new \Elementor\Repeater(); $keywords->add_control( 'title', [ 'label' => __( 'Title', 'forumax' ), 'type' => \Elementor\Controls_Manager::TEXT, 'label_block' => true, ] ); $this->add_control( 'keywords', [ 'label' => __( 'Repeater List', 'forumax' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $keywords->get_controls(), 'default' => [ [ 'title' => __( 'Keyword #1', 'forumax' ), ], [ 'title' => __( 'Keyword #2', 'forumax' ), ], ], 'title_field' => '{{{ title }}}', 'prevent_empty' => false, 'condition' => [ 'is_keywords' => 'yes' ] ] ); $this->end_controls_section(); /** * Style Keywords * Global */ $this->start_controls_section( 'style_form', [ 'label' => esc_html__( 'Form', 'forumax' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'input_heading_form', [ 'label' => esc_html__( 'Input', 'forumax' ), 'type' => Controls_Manager::HEADING ] ); $this->add_control( 'color_text', [ 'label' => esc_html__( 'Text Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input' => 'color: {{VALUE}};', ] ] ); $this->add_control( 'color_placeholder', [ 'label' => esc_html__( 'Placeholder Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input::placeholder' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'input_border', 'label' => esc_html__( 'Border', 'forumax' ), 'selector' => '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input', ] ); $this->add_control( 'input_bg_color', [ 'label' => esc_html__( 'Background Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input' => 'background-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography_placeholder', 'label' => esc_html__( 'Typography', 'forumax' ), 'selector' => '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input::placeholder, .bbpc_search_form_wrapper .input-wrapper input', ] ); $this->add_responsive_control( 'input-padding', [ 'label' => esc_html__( 'Padding', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] ); $this->add_responsive_control( 'input-border-radius', [ 'label' => __( 'Border Radius', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'submit_heading_form', [ 'label' => esc_html__( 'Submit', 'forumax' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_control( 'color_icon', [ 'label' => esc_html__( 'Button Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'search_bg', [ 'label' => __( 'Background', 'forumax' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button' => 'background: {{VALUE}}', ], ] ); $this->add_responsive_control( 'btn-padding', [ 'label' => esc_html__( 'Padding', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] ); $this->add_responsive_control( 'btn-border-radius', [ 'label' => __( 'Border Radius', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); // slider controls $this->add_control( 'typography_btn', [ 'label' => esc_html__( 'Icon Size', 'forumax' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 10, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button i' => 'font-size: {{SIZE}}{{UNIT}};' ], 'condition' => [ 'submit_btn_type' => 'icon' ], ] ); // Spacing slider when icon is on the LEFT. $this->add_control( 'submit_btn_align_left', [ 'label' => esc_html__( 'Spacing', 'forumax' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper .submit-btn-left' => 'left: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'submit_btn_align' => 'left', ], ] ); // Spacing slider when icon is on the RIGHT. $this->add_control( 'submit_btn_align_right', [ 'label' => esc_html__( 'Spacing', 'forumax' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper .submit-btn-right' => 'right: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'submit_btn_align' => 'right', ], ] ); // typography controls $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography_btn', 'label' => esc_html__( 'Typography', 'forumax' ), 'condition' => [ 'submit_btn_type' => 'text' ], 'selector' => '{{WRAPPER}} .bbpc_search_form_wrapper .input-wrapper button', ] ); $this->end_controls_section(); $this->start_controls_section( 'style_keywords', [ 'label' => esc_html__( 'Keywords', 'forumax' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'margin_keywords', [ 'label' => __( 'Margin', 'forumax' ), 'description' => __( 'Margin around the keywords block', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'separator' => 'before', 'default' => [ 'unit' => 'px', ], ] ); $this->add_control( 'color_keywords_label', [ 'label' => esc_html__( 'Label Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword span.bbpc-search-keywords-label' => 'color: {{VALUE}};', ], ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'keyword_label_typography', 'label' => __( 'Label Typography', 'forumax' ), 'selector' => '{{WRAPPER}} .bbpc-search-keyword span.bbpc-search-keywords-label', ] ); $this->start_controls_tabs( 'bbpc_tabs_keywords_style' ); $this->start_controls_tab( 'bbpc_keywords_style', [ 'label' => esc_html__( 'Normal', 'forumax' ), ] ); $this->add_control( 'bbpc_color_keywords', [ 'label' => esc_html__( 'Keyword Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'separator' => 'before', 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'bbpc_color_keywords_bg', [ 'label' => esc_html__( 'Background Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'separator' => 'after', 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a' => 'background: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'bbpc_keywords_style_hover', [ 'label' => esc_html__( 'Hover', 'forumax' ), ] ); $this->add_control( 'bbpc_color_keywords_hover', [ 'label' => esc_html__( 'Keyword Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a:hover' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'bbpc_color_keywords_bg_hover', [ 'label' => esc_html__( 'Background Color', 'forumax' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a:hover' => 'background: {{VALUE}};', ], ] ); $this->end_controls_tabs(); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography_keywords', 'label' => esc_html__( 'Typography', 'forumax' ), 'selector' => '{{WRAPPER}} .bbpc-search-keyword ul li a', ] ); $this->add_control( 'keywords_padding', [ 'label' => __( 'Padding', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'default' => [ 'unit' => 'px', ], ] ); $this->add_control( 'border_radius', [ 'label' => __( 'Border Radius', 'forumax' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .bbpc-search-keyword ul li a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'default' => [ 'unit' => 'px', ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings(); $widget_id = 'frmx-search-' . $this->get_id(); $input_id = $widget_id . '-input'; $result_id = $widget_id . '-result'; $post_type_id = $widget_id . '-post-type'; /* * $btn_position holds the raw saved value: 'left' or 'right'. * It is used directly — no inversion needed — so the span class * and the input-wrapper class both reflect the actual chosen side. */ $btn_position = $settings['submit_btn_align'] ?? 'left'; $search_post_type = ! empty( $settings['search_post_type'] ) ? $settings['search_post_type'] : 'all'; $is_ajax_search = ! empty( $settings['is_ajax_search'] ) ? 'true' : 'false'; $search_highlight = ! empty( $settings['search_highlight'] ) ? 'true' : 'false'; ?>