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

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

638 lines 21.8 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_control(
236	'search_box_outer_width',
237	[
238	'label' => esc_html__( 'Size', 'betterdocs' ),
239	'type' => Controls_Manager::SLIDER,
240	'size_units' => ['px', '%', 'em'],
241	'default' => [
242	'unit' => '%',
243	'size' => 100
244	],
245	'selectors' => [
246	'{{WRAPPER}} .betterdocs-searchform' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
247	]
248	]
249	);
250
251	$this->add_responsive_control(
252	'search_field_padding_radius',
253	[
254	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
255	'type' => Controls_Manager::DIMENSIONS,
256	'size_units' => ['px', 'em', '%'],
257	'selectors' => [
258	'{{WRAPPER}} .betterdocs-searchform' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
259	]
260	]
261	);
262
263	$this->add_control(
264	'field_search_icon_heading',
265	[
266	'label' => esc_html__( 'Search Icon', 'betterdocs' ),
267	'type' => Controls_Manager::HEADING,
268	'separator' => 'before'
269	]
270	);
271
272	$this->add_control(
273	'field_search_icon_color',
274	[
275	'label' => esc_html__( 'Color', 'betterdocs' ),
276	'type' => Controls_Manager::COLOR,
277	'selectors' => [
278	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'fill: {{VALUE}};'
279	]
280	]
281	);
282
283	$this->add_control(
284	'field_search_icon_size',
285	[
286	'label' => esc_html__( 'Size', 'betterdocs' ),
287	'type' => Controls_Manager::SLIDER,
288	'size_units' => ['px', '%', 'em'],
289	'range' => [
290	'px' => [
291	'max' => 500
292	]
293	],
294	'selectors' => [
295	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
296	]
297	]
298	);
299
300	$this->add_control(
301	'field_close_icon_heading',
302	[
303	'label' => esc_html__( 'Close Icon', 'betterdocs' ),
304	'type' => Controls_Manager::HEADING,
305	'separator' => 'before'
306	]
307	);
308
309	$this->add_control(
310	'search_field_close_icon_color',
311	[
312	'label' => esc_html__( 'Color', 'betterdocs' ),
313	'type' => Controls_Manager::COLOR,
314	'selectors' => [
315	'{{WRAPPER}} .docs-search-close .close-line' => 'fill: {{VALUE}};'
316	]
317	]
318	);
319
320	$this->add_control(
321	'search_field_close_icon_border_color',
322	[
323	'label' => esc_html__( 'Border Color', 'betterdocs' ),
324	'type' => Controls_Manager::COLOR,
325	'selectors' => [
326	'{{WRAPPER}} .docs-search-loader, {{WRAPPER}} .docs-search-close .close-border' => 'fill: {{VALUE}};'
327	]
328	]
329	);
330
331	$this->end_controls_section(); # end of 'Search Field'
332
333	/**
334	* ----------------------------------------------------------
335	* Section: Search Result Box
336	* ----------------------------------------------------------
337	*/
338	$this->start_controls_section(
339	'section_search_result_settings',
340	[
341	'label' => __( 'Search Result Box', 'betterdocs' ),
342	'tab' => Controls_Manager::TAB_STYLE
343	]
344	);
345
346	$this->add_responsive_control(
347	'result_box_width',
348	[
349	'label' => __( 'Width', 'betterdocs' ),
350	'type' => Controls_Manager::SLIDER,
351	'default' => [
352	'size' => 100,
353	'unit' => '%'
354	],
355	'size_units' => ['%', 'px', 'em'],
356	'range' => [
357	'%' => [
358	'max' => 100,
359	'step' => 1
360	]
361	],
362	'selectors' => [
363	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'width: {{SIZE}}{{UNIT}};'
364	]
365	]
366	);
367
368	$this->add_responsive_control(
369	'result_box_max_width',
370	[
371	'label' => __( 'Max Width', 'betterdocs' ),
372	'type' => Controls_Manager::SLIDER,
373	'default' => [
374	'size' => 1600,
375	'unit' => 'px'
376	],
377	'size_units' => ['px', 'em'],
378	'range' => [
379	'px' => [
380	'max' => 1600,
381	'step' => 1
382	]
383	],
384	'selectors' => [
385	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'max-width: {{SIZE}}{{UNIT}};'
386	]
387	]
388	);
389
390	$this->add_group_control(
391	Group_Control_Background::get_type(),
392	[
393	'name' => 'result_box_bg',
394	'types' => ['classic', 'gradient'],
395	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
396	]
397	);
398
399	$this->add_group_control(
400	Group_Control_Border::get_type(),
401	[
402	'name' => 'result_box_border',
403	'label' => esc_html__( 'Border', 'betterdocs' ),
404	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
405	]
406	);
407
408	$this->end_controls_section(); # end of 'Search Result Box'
409
410	/**
411	* ----------------------------------------------------------
412	* Section: Search Result Item
413	* ----------------------------------------------------------
414	*/
415	$this->start_controls_section(
416	'section_search_result_item_settings',
417	[
418	'label' => __( 'Search Result List', 'betterdocs' ),
419	'tab' => Controls_Manager::TAB_STYLE
420	]
421	);
422
423	$this->start_controls_tabs( 'item_settings_tab' );
424
425	// Normal State Tab
426	$this->start_controls_tab(
427	'item_normal',
428	['label' => esc_html__( 'Normal', 'betterdocs' )]
429	);
430
431	$this->add_control(
432	'result_box_item',
433	[
434	'label' => esc_html__( 'Item', 'betterdocs' ),
435	'type' => Controls_Manager::HEADING
436	]
437	);
438
439	$this->add_group_control(
440	Group_Control_Typography::get_type(),
441	[
442	'name' => 'result_box_item_typography',
443	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li a'
444	]
445	);
446
447	$this->add_control(
448	'result_box_item_color',
449	[
450	'label' => esc_html__( 'Item Color', 'betterdocs' ),
451	'type' => Controls_Manager::COLOR,
452	'selectors' => [
453	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'color: {{VALUE}};'
454	]
455	]
456	);
457
458	$this->add_group_control(
459	Group_Control_Border::get_type(),
460	[
461	'name' => 'result_item_border',
462	'label' => esc_html__( 'Border', 'betterdocs' ),
463	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li'
464	]
465	);
466
467	$this->add_responsive_control(
468	'result_box_item_padding',
469	[
470	'label' => __( 'Padding', 'betterdocs' ),
471	'type' => Controls_Manager::DIMENSIONS,
472	'size_units' => ['px', 'em', '%'],
473	'selectors' => [
474	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
475	]
476	]
477	);
478
479	$this->add_control(
480	'search_result_box_item_category',
481	[
482	'label' => esc_html__( 'Category', 'betterdocs' ),
483	'type' => Controls_Manager::HEADING,
484	'separator' => 'before'
485	]
486	);
487
488	$this->add_group_control(
489	Group_Control_Typography::get_type(),
490	[
491	'name' => 'result_box_item_category_typography',
492	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li span'
493	]
494	);
495
496	$this->add_control(
497	'result_box_item_category_color',
498	[
499	'label' => esc_html__( 'Color', 'betterdocs' ),
500	'type' => Controls_Manager::COLOR,
501	'selectors' => [
502	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li span' => 'color: {{VALUE}};'
503	]
504	]
505	);
506
507	$this->end_controls_tab();
508
509	// Hover State Tab
510	$this->start_controls_tab(
511	'item_hover',
512	['label' => esc_html__( 'Hover', 'betterdocs' )]
513	);
514
515	$this->add_responsive_control(
516	'result_item_transition',
517	[
518	'label' => __( 'Transition', 'betterdocs' ),
519	'type' => Controls_Manager::SLIDER,
520	'default' => [
521	'size' => 300,
522	'unit' => '%'
523	],
524	'size_units' => ['%'],
525	'range' => [
526	'%' => [
527	'max' => 2500,
528	'step' => 1
529	]
530	],
531	'selectors' => [
532	'{{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;'
533	]
534	]
535	);
536
537	$this->add_control(
538	'result_box_item_hover_heading',
539	[
540	'label' => esc_html__( 'Item', 'betterdocs' ),
541	'type' => Controls_Manager::HEADING
542	]
543	);
544
545	$this->add_group_control(
546	Group_Control_Background::get_type(),
547	[
548	'name' => 'result_box_item_hover_bg',
549	'types' => ['classic', 'gradient'],
550	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover',
551	'exclude' => [
552	'image'
553	]
554	]
555	);
556
557	$this->add_control(
558	'result_box_item_hover_color',
559	[
560	'label' => esc_html__( 'Item Color', 'betterdocs' ),
561	'type' => Controls_Manager::COLOR,
562	'selectors' => [
563	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover a' => 'color: {{VALUE}};'
564	]
565	]
566	);
567
568	$this->add_group_control(
569	Group_Control_Border::get_type(),
570	[
571	'name' => 'result_item_hover_border',
572	'label' => esc_html__( 'Border', 'betterdocs' ),
573	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover'
574	]
575	);
576
577	$this->add_control(
578	'result_box_item_hover_count_heading',
579	[
580	'label' => esc_html__( 'Count', 'betterdocs' ),
581	'type' => Controls_Manager::HEADING,
582	'separator' => 'before'
583	]
584	);
585
586	$this->add_control(
587	'result_box_item_hover_count_color',
588	[
589	'label' => esc_html__( 'Item Color', 'betterdocs' ),
590	'type' => Controls_Manager::COLOR,
591	'selectors' => [
592	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover span' => 'color: {{VALUE}};'
593	]
594	]
595	);
596	$this->end_controls_tab();
597	$this->end_controls_tabs();
598
599	$this->end_controls_section(); # end of 'Search Result Item'
600
601	do_action( 'betterdocs/elementor/widgets/advanced-search/controllers', $this );
602	}
603
604	public function render_callback() {
605	$this->views( 'widgets/search-form' );
606	}
607
608	public function view_params() {
609	$settings = &$this->attributes;
610
611	$popular_search_title = isset( $settings['advance_search_popular_search_title_placeholder'] ) ? $settings['advance_search_popular_search_title_placeholder'] : '';
612	$category_search_toggle = isset( $settings['betterdocs_category_search_toogle'] ) ? $settings['betterdocs_category_search_toogle'] : '';
613	$search_button_toggle = isset( $settings['betterdocs_search_button_toogle'] ) ? $settings['betterdocs_search_button_toogle'] : '';
614	$popular_search_toggle = isset( $settings['betterdocs_popular_search_toogle'] ) ? $settings['betterdocs_popular_search_toogle'] : '';
615
616	$_shortcode_attributes = apply_filters( 'betterdocs_elementor_search_form_params', [
617	'enable_heading' => 'true',
618	'popular_search_title' => $popular_search_title,
619	'category_search' => $category_search_toggle,
620	'search_button' => $search_button_toggle,
621	'popular_search' => $popular_search_toggle,
622	'heading' => esc_html( $settings['section_search_field_heading'] ),
623	'subheading' => esc_html( $settings['section_search_field_sub_heading'] ),
624	'placeholder' => esc_html( $settings['section_search_field_placeholder'] )
625	], $this->attributes );
626
627	return [
628	'shortcode_attr' => $_shortcode_attributes
629	];
630	}
631
632	// In plain mode, render without shortcode
633	public function render_plain_content() {
634	$settings = $this->get_settings_for_display();
635	echo '[betterdocs_search_form placeholder="' . $settings['section_search_field_placeholder'] . '"]';
636	}
637	}
638