betterdocs / includes / Editors / Elementor / Widget / Basic / SearchForm.php

SearchForm.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 3.5.2, at includes/Editors/Elementor/Widget/Basic/SearchForm.php

660 lines 22.7 KB

Raw Download Zip

1	<?php
2	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget\Basic;
3
4	// If this file is called directly, abort.
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit;
7	}
8
9	use Elementor\Group_Control_Background;
10	use Elementor\Controls_Manager as Controls_Manager;
11	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
12	use Elementor\Group_Control_Border as Group_Control_Border;
13	use Elementor\Group_Control_Typography as Group_Control_Typography;
14
15	class SearchForm extends BaseWidget {
16	public $view_wrapper = 'betterdocs-search-form-wrapper';
17
18	public function get_name() {
19	return 'betterdocs-search-form';
20	}
21
22	public function get_title() {
23	return __( 'Doc Search Form', 'betterdocs' );
24	}
25
26	public function get_categories() {
27	return ['betterdocs-elements', 'docs-archive', 'betterdocs-elements-single'];
28	}
29
30	public function get_icon() {
31	return 'betterdocs-icon-search';
32	}
33
34	public function get_style_depends() {
35	return [ 'betterdocs-search' ];
36	}
37
38	public function get_script_depends() {
39	return [ 'betterdocs-search', 'betterdocs-pro' ];
40	}
41
42	/**
43	* Get widget keywords.
44	*
45	* Retrieve the list of keywords the widget belongs to.
46	*
47	* @return array Widget keywords.
48	* @since 3.5.2
49	* @access public
50	*
51	*/
52	public function get_keywords() {
53	return [
54	'knowledgebase',
55	'knowledge Base',
56	'documentation',
57	'doc',
58	'kb',
59	'betterdocs',
60	'search',
61	'search form'
62
63	];
64	}
65
66	public function get_custom_help_url() {
67	return 'https://betterdocs.co/docs/single-doc-in-elementor';
68	}
69
70	protected function register_controls() {
71
72	$this->start_controls_section(
73	'search_content_placeholders',
74	[
75	'label' => __( 'Search Content', 'betterdocs' ),
76	'tab' => Controls_Manager::TAB_CONTENT
77	]
78	);
79
80	$this->add_control(
81	'section_search_field_placeholder',
82	[
83	'label' => __( 'Placeholder', 'betterdocs' ),
84	'type' => Controls_Manager::TEXT,
85	'default' => esc_html__( 'Search', 'betterdocs' )
86	]
87	);
88
89	$this->add_control(
90	'section_search_field_heading',
91	[
92	'label' => __( 'Search Heading', 'betterdocs' ),
93	'type' => Controls_Manager::TEXT
94	]
95	);
96
97	$this->add_control(
98	'section_search_field_sub_heading',
99	[
100	'label' => __( 'Search Subheading', 'betterdocs' ),
101	'type' => Controls_Manager::TEXT
102	]
103	);
104
105	do_action( 'betterdocs/elementor/widgets/advanced-search/switcher', $this );
106
107	$this->end_controls_section();
108	/**
109	* ----------------------------------------------------------
110	* Section: Search Box
111	* ----------------------------------------------------------
112	*/
113	$this->start_controls_section(
114	'section_search_box_settings',
115	[
116	'label' => __( 'Search Box', 'betterdocs' ),
117	'tab' => Controls_Manager::TAB_STYLE
118	]
119	);
120
121	$this->add_group_control(
122	Group_Control_Background::get_type(),
123	[
124	'name' => 'search_box_bg',
125	'types' => ['classic', 'gradient'],
126	'selector' => '{{WRAPPER}} .betterdocs-search-form-wrapper'
127	]
128	);
129
130	$this->add_responsive_control(
131	'search_box_padding',
132	[
133	'label' => esc_html__( 'Padding', 'betterdocs' ),
134	'type' => Controls_Manager::DIMENSIONS,
135	'size_units' => ['px', 'em', '%'],
136	'default' => [
137	'top' => 50,
138	'right' => 50,
139	'bottom' => 50,
140	'left' => 50
141	],
142	'selectors' => [
143	'{{WRAPPER}} .betterdocs-search-form-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
144	]
145	]
146	);
147
148	$this->add_responsive_control(
149	'search_box_margin',
150	[
151	'label' => esc_html__( 'Margin', 'betterdocs' ),
152	'type' => Controls_Manager::DIMENSIONS,
153	'size_units' => ['px', 'em', '%'],
154	'default' => [
155	'top' => 50,
156	'right' => 50,
157	'bottom' => 50,
158	'left' => 50
159	],
160	'selectors' => [
161	'{{WRAPPER}} .betterdocs-search-form-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
162	]
163	]
164	);
165
166	$this->end_controls_section(); # end of 'Search Box'
167
168	/**
169	* ----------------------------------------------------------
170	* Section: Search Field
171	* ----------------------------------------------------------
172	*/
173	$this->start_controls_section(
174	'section_search_field_settings',
175	[
176	'label' => __( 'Search Field', 'betterdocs' ),
177	'tab' => Controls_Manager::TAB_STYLE
178	]
179	);
180
181	$this->add_control(
182	'search_field_bg',
183	[
184	'label' => esc_html__( 'Field Background Color', 'betterdocs' ),
185	'type' => Controls_Manager::COLOR,
186	'selectors' => [
187	'{{WRAPPER}} .betterdocs-searchform' => 'background: {{VALUE}};'
188	]
189	]
190	);
191
192	$this->add_control(
193	'search_field_text_color',
194	[
195	'label' => esc_html__( 'Text Color', 'betterdocs' ),
196	'type' => Controls_Manager::COLOR,
197	'selectors' => [
198	'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'color: {{VALUE}};'
199	]
200	]
201	);
202
203	$this->add_group_control(
204	Group_Control_Typography::get_type(),
205	[
206	'name' => 'search_field_text_typography',
207	'selector' => '{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field'
208	]
209	);
210
211	$this->add_responsive_control(
212	'search_field_padding',
213	[
214	'label' => __( 'Field Padding', 'betterdocs' ),
215	'type' => Controls_Manager::DIMENSIONS,
216	'size_units' => ['px', 'em', '%'],
217	'selectors' => [
218	'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
219	]
220	]
221	);
222
223	$this->add_responsive_control(
224	'search_box_outer_margin',
225	[
226	'label' => __( 'Search Box Margin', 'betterdocs' ),
227	'type' => Controls_Manager::DIMENSIONS,
228	'size_units' => ['px', 'em', '%'],
229	'selectors' => [
230	'{{WRAPPER}} .betterdocs-searchform' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
231	]
232	]
233	);
234
235	$this->add_responsive_control(
236	'advanced_search_padding',
237	[
238	'label' => __( 'Search Box Padding', 'betterdocs' ),
239	'type' => Controls_Manager::DIMENSIONS,
240	'size_units' => ['px', 'em', '%'],
241	'selectors' => [
242	'{{WRAPPER}} .betterdocs-searchform' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
243	]
244	]
245	);
246
247
248	$this->add_group_control(
249	Group_Control_Border::get_type(),
250	[
251	'name' => 'advanced_search_border',
252	'label' => esc_html__( 'Search Box Border', 'betterdocs' ),
253	'selector' => '{{WRAPPER}} .betterdocs-searchform'
254	]
255	);
256
257	$this->add_control(
258	'search_box_outer_width',
259	[
260	'label' => esc_html__( 'Size', 'betterdocs' ),
261	'type' => Controls_Manager::SLIDER,
262	'size_units' => ['px', '%', 'em'],
263	'default' => [
264	'unit' => '%',
265	'size' => 100
266	],
267	'selectors' => [
268	'{{WRAPPER}} .betterdocs-searchform' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
269	]
270	]
271	);
272
273	$this->add_responsive_control(
274	'search_field_padding_radius',
275	[
276	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
277	'type' => Controls_Manager::DIMENSIONS,
278	'size_units' => ['px', 'em', '%'],
279	'selectors' => [
280	'{{WRAPPER}} .betterdocs-searchform' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
281	]
282	]
283	);
284
285	$this->add_control(
286	'field_search_icon_heading',
287	[
288	'label' => esc_html__( 'Search Icon', 'betterdocs' ),
289	'type' => Controls_Manager::HEADING,
290	'separator' => 'before'
291	]
292	);
293
294	$this->add_control(
295	'field_search_icon_color',
296	[
297	'label' => esc_html__( 'Color', 'betterdocs' ),
298	'type' => Controls_Manager::COLOR,
299	'selectors' => [
300	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'fill: {{VALUE}};'
301	]
302	]
303	);
304
305	$this->add_control(
306	'field_search_icon_size',
307	[
308	'label' => esc_html__( 'Size', 'betterdocs' ),
309	'type' => Controls_Manager::SLIDER,
310	'size_units' => ['px', '%', 'em'],
311	'range' => [
312	'px' => [
313	'max' => 500
314	]
315	],
316	'selectors' => [
317	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
318	]
319	]
320	);
321
322	$this->add_control(
323	'field_close_icon_heading',
324	[
325	'label' => esc_html__( 'Close Icon', 'betterdocs' ),
326	'type' => Controls_Manager::HEADING,
327	'separator' => 'before'
328	]
329	);
330
331	$this->add_control(
332	'search_field_close_icon_color',
333	[
334	'label' => esc_html__( 'Color', 'betterdocs' ),
335	'type' => Controls_Manager::COLOR,
336	'selectors' => [
337	'{{WRAPPER}} .docs-search-close .close-line' => 'fill: {{VALUE}};'
338	]
339	]
340	);
341
342	$this->add_control(
343	'search_field_close_icon_border_color',
344	[
345	'label' => esc_html__( 'Border Color', 'betterdocs' ),
346	'type' => Controls_Manager::COLOR,
347	'selectors' => [
348	'{{WRAPPER}} .docs-search-loader, {{WRAPPER}} .docs-search-close .close-border' => 'fill: {{VALUE}};'
349	]
350	]
351	);
352
353	$this->end_controls_section(); # end of 'Search Field'
354
355	/**
356	* ----------------------------------------------------------
357	* Section: Search Result Box
358	* ----------------------------------------------------------
359	*/
360	$this->start_controls_section(
361	'section_search_result_settings',
362	[
363	'label' => __( 'Search Result Box', 'betterdocs' ),
364	'tab' => Controls_Manager::TAB_STYLE
365	]
366	);
367
368	$this->add_responsive_control(
369	'result_box_width',
370	[
371	'label' => __( 'Width', 'betterdocs' ),
372	'type' => Controls_Manager::SLIDER,
373	'default' => [
374	'size' => 100,
375	'unit' => '%'
376	],
377	'size_units' => ['%', 'px', 'em'],
378	'range' => [
379	'%' => [
380	'max' => 100,
381	'step' => 1
382	]
383	],
384	'selectors' => [
385	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'width: {{SIZE}}{{UNIT}};'
386	]
387	]
388	);
389
390	$this->add_responsive_control(
391	'result_box_max_width',
392	[
393	'label' => __( 'Max Width', 'betterdocs' ),
394	'type' => Controls_Manager::SLIDER,
395	'default' => [
396	'size' => 1600,
397	'unit' => 'px'
398	],
399	'size_units' => ['px', 'em'],
400	'range' => [
401	'px' => [
402	'max' => 1600,
403	'step' => 1
404	]
405	],
406	'selectors' => [
407	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'max-width: {{SIZE}}{{UNIT}};'
408	]
409	]
410	);
411
412	$this->add_group_control(
413	Group_Control_Background::get_type(),
414	[
415	'name' => 'result_box_bg',
416	'types' => ['classic', 'gradient'],
417	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
418	]
419	);
420
421	$this->add_group_control(
422	Group_Control_Border::get_type(),
423	[
424	'name' => 'result_box_border',
425	'label' => esc_html__( 'Border', 'betterdocs' ),
426	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
427	]
428	);
429
430	$this->end_controls_section(); # end of 'Search Result Box'
431
432	/**
433	* ----------------------------------------------------------
434	* Section: Search Result Item
435	* ----------------------------------------------------------
436	*/
437	$this->start_controls_section(
438	'section_search_result_item_settings',
439	[
440	'label' => __( 'Search Result List', 'betterdocs' ),
441	'tab' => Controls_Manager::TAB_STYLE
442	]
443	);
444
445	$this->start_controls_tabs( 'item_settings_tab' );
446
447	// Normal State Tab
448	$this->start_controls_tab(
449	'item_normal',
450	['label' => esc_html__( 'Normal', 'betterdocs' )]
451	);
452
453	$this->add_control(
454	'result_box_item',
455	[
456	'label' => esc_html__( 'Item', 'betterdocs' ),
457	'type' => Controls_Manager::HEADING
458	]
459	);
460
461	$this->add_group_control(
462	Group_Control_Typography::get_type(),
463	[
464	'name' => 'result_box_item_typography',
465	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li a .betterdocs-search-title'
466	]
467	);
468
469	$this->add_control(
470	'result_box_item_color',
471	[
472	'label' => esc_html__( 'Item Color', 'betterdocs' ),
473	'type' => Controls_Manager::COLOR,
474	'selectors' => [
475	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a .betterdocs-search-title' => 'color: {{VALUE}};'
476	]
477	]
478	);
479
480	$this->add_group_control(
481	Group_Control_Border::get_type(),
482	[
483	'name' => 'result_item_border',
484	'label' => esc_html__( 'Border', 'betterdocs' ),
485	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li'
486	]
487	);
488
489	$this->add_responsive_control(
490	'result_box_item_padding',
491	[
492	'label' => __( 'Padding', 'betterdocs' ),
493	'type' => Controls_Manager::DIMENSIONS,
494	'size_units' => ['px', 'em', '%'],
495	'selectors' => [
496	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
497	]
498	]
499	);
500
501	$this->add_control(
502	'search_result_box_item_category',
503	[
504	'label' => esc_html__( 'Category', 'betterdocs' ),
505	'type' => Controls_Manager::HEADING,
506	'separator' => 'before'
507	]
508	);
509
510	$this->add_group_control(
511	Group_Control_Typography::get_type(),
512	[
513	'name' => 'result_box_item_category_typography',
514	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li span.betterdocs-search-category'
515	]
516	);
517
518	$this->add_control(
519	'result_box_item_category_color',
520	[
521	'label' => esc_html__( 'Color', 'betterdocs' ),
522	'type' => Controls_Manager::COLOR,
523	'selectors' => [
524	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li span.betterdocs-search-category' => 'color: {{VALUE}};'
525	]
526	]
527	);
528
529	$this->end_controls_tab();
530
531	// Hover State Tab
532	$this->start_controls_tab(
533	'item_hover',
534	['label' => esc_html__( 'Hover', 'betterdocs' )]
535	);
536
537	$this->add_responsive_control(
538	'result_item_transition',
539	[
540	'label' => __( 'Transition', 'betterdocs' ),
541	'type' => Controls_Manager::SLIDER,
542	'default' => [
543	'size' => 300,
544	'unit' => '%'
545	],
546	'size_units' => ['%'],
547	'range' => [
548	'%' => [
549	'max' => 2500,
550	'step' => 1
551	]
552	],
553	'selectors' => [
554	'{{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;'
555	]
556	]
557	);
558
559	$this->add_control(
560	'result_box_item_hover_heading',
561	[
562	'label' => esc_html__( 'Item', 'betterdocs' ),
563	'type' => Controls_Manager::HEADING
564	]
565	);
566
567	$this->add_group_control(
568	Group_Control_Background::get_type(),
569	[
570	'name' => 'result_box_item_hover_bg',
571	'types' => ['classic', 'gradient'],
572	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover',
573	'exclude' => [
574	'image'
575	]
576	]
577	);
578
579	$this->add_control(
580	'result_box_item_hover_color',
581	[
582	'label' => esc_html__( 'Item Color', 'betterdocs' ),
583	'type' => Controls_Manager::COLOR,
584	'selectors' => [
585	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover a' => 'color: {{VALUE}};'
586	]
587	]
588	);
589
590	$this->add_group_control(
591	Group_Control_Border::get_type(),
592	[
593	'name' => 'result_item_hover_border',
594	'label' => esc_html__( 'Border', 'betterdocs' ),
595	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover'
596	]
597	);
598
599	$this->add_control(
600	'result_box_item_hover_count_heading',
601	[
602	'label' => esc_html__( 'Count', 'betterdocs' ),
603	'type' => Controls_Manager::HEADING,
604	'separator' => 'before'
605	]
606	);
607
608	$this->add_control(
609	'result_box_item_hover_count_color',
610	[
611	'label' => esc_html__( 'Item Color', 'betterdocs' ),
612	'type' => Controls_Manager::COLOR,
613	'selectors' => [
614	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover span' => 'color: {{VALUE}};'
615	]
616	]
617	);
618	$this->end_controls_tab();
619	$this->end_controls_tabs();
620
621	$this->end_controls_section(); # end of 'Search Result Item'
622
623	do_action( 'betterdocs/elementor/widgets/advanced-search/controllers', $this );
624	}
625
626	public function render_callback() {
627	$this->views( 'widgets/search-form' );
628	}
629
630	public function view_params() {
631	$settings = &$this->attributes;
632
633	$popular_search_title = isset( $settings['advance_search_popular_search_title_placeholder'] ) ? $settings['advance_search_popular_search_title_placeholder'] : '';
634	$category_search_toggle = isset( $settings['betterdocs_category_search_toogle'] ) ? $settings['betterdocs_category_search_toogle'] : '';
635	$search_button_toggle = isset( $settings['betterdocs_search_button_toogle'] ) ? $settings['betterdocs_search_button_toogle'] : '';
636	$popular_search_toggle = isset( $settings['betterdocs_popular_search_toogle'] ) ? $settings['betterdocs_popular_search_toogle'] : '';
637
638	$_shortcode_attributes = apply_filters( 'betterdocs_elementor_search_form_params', [
639	'enable_heading' => 'true',
640	'popular_search_title' => $popular_search_title,
641	'category_search' => $category_search_toggle,
642	'search_button' => $search_button_toggle,
643	'popular_search' => $popular_search_toggle,
644	'heading' => esc_html( $settings['section_search_field_heading'] ),
645	'subheading' => esc_html( $settings['section_search_field_sub_heading'] ),
646	'placeholder' => esc_html( $settings['section_search_field_placeholder'] )
647	], $this->attributes );
648
649	return [
650	'shortcode_attr' => $_shortcode_attributes
651	];
652	}
653
654	// In plain mode, render without shortcode
655	public function render_plain_content() {
656	$settings = $this->get_settings_for_display();
657	echo '[betterdocs_search_form placeholder="' . $settings['section_search_field_placeholder'] . '"]';
658	}
659	}
660