betterdocs / includes / elementor / widgets / basic / betterdocs-elementor-search-form.php

betterdocs-elementor-search-form.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 2.0.5, at includes/elementor/widgets/basic/betterdocs-elementor-search-form.php

634 lines 21.0 KB

Raw Download Zip

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