easy-elements / widgets / search / search.php

search.php in Easy Elements for Elementor – Addons & Website Templates 1.2.1, at widgets/search/search.php

326 lines 10.3 KB

Raw Download Zip

1	<?php
2	use Elementor\Controls_Manager;
3	use Elementor\Widget_Base;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit;
7	}
8
9	class Easyel_Search_Widget extends \Elementor\Widget_Base {
10
11	public function get_style_depends() {
12	$handle = 'eel-search-style';
13	$css_path = plugin_dir_path( __FILE__ ) . 'css/search.min.css';
14
15	if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
16	wp_register_style( $handle, plugins_url( 'css/search.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
17	}
18	return [ $handle ];
19	}
20
21	public function get_script_depends() {
22	$handle = 'eel-search-script';
23	$js_path = plugin_dir_path( __FILE__ ) . 'js/search.js';
24
25	if ( ! wp_script_is( $handle, 'registered' ) && file_exists( $js_path ) ) {
26	wp_register_script( $handle, plugins_url( 'js/search.js', __FILE__ ), [ 'jquery' ], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $js_path ) : EASYELEMENTS_VER, true );
27	}
28	return [ $handle ];
29	}
30
31	public function get_name() {
32	return 'eel-search';
33	}
34
35	public function get_title() {
36	return __( 'Search', 'easy-elements' );
37	}
38
39	public function get_icon() {
40	return 'easyicon easyelIcon-search';
41	}
42
43	public function get_categories() {
44	return [ 'easyelements_header_footer_category' ];
45	}
46
47	public function get_keywords() {
48	return [ 'search', 'input', 'field', 'click', 'text' ];
49	}
50
51	protected function register_controls() {
52
53	$this->start_controls_section(
54	'content_section',
55	[
56	'label' => esc_html__('Search Settings', 'easy-elements'),
57	'tab' => Controls_Manager::TAB_CONTENT,
58	]
59	);
60
61	$this->add_control(
62	'select_style',
63	[
64	'label' => esc_html__( 'Search Skin', 'easy-elements' ),
65	'type' => \Elementor\Controls_Manager::SELECT,
66	'default' => '1',
67	'options' => [
68	'1' => esc_html__( 'Search Popup', 'easy-elements' ),
69	'2' => esc_html__( 'Search Fields', 'easy-elements' ),
70	],
71	]
72	);
73
74	$this->add_control(
75	'search_top_title',
76	[
77	'label' => esc_html__('Search Title', 'easy-elements'),
78	'type' => Controls_Manager::TEXT,
79	]
80	);
81
82	$this->add_control(
83	'search_placeholder',
84	[
85	'label' => esc_html__('Search Placeholder', 'easy-elements'),
86	'type' => Controls_Manager::TEXT,
87	'default' => esc_html__('Type keywords here...', 'easy-elements'),
88	]
89	);
90
91	$this->add_control(
92	'open_icon',
93	[
94	'label' => esc_html__('Search Icon', 'easy-elements'),
95	'type' => \Elementor\Controls_Manager::ICONS,
96	'default' => [
97	'value' => 'fas fa-search',
98	'library' => 'fa-solid',
99	],
100	]
101	);
102
103	$this->add_responsive_control(
104	'search_icon_size',
105	[
106	'label' => esc_html__('Icon Size (px)', 'easy-elements'),
107	'type' => Controls_Manager::SLIDER,
108	'range' => [
109	'px' => [
110	'min' => 10,
111	'max' => 100,
112	],
113	],
114	'selectors' => [
115	'{{WRAPPER}} .eel-search-open-btn i, {{WRAPPER}} .eel-search-open-btn svg' => 'font-size: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
116	'{{WRAPPER}} .eel-search-submit-btn i, {{WRAPPER}} .eel-search-submit-btn svg' => 'font-size: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
117	],
118	]
119	);
120
121	$this->add_responsive_control(
122	'search_icon_vertical_position',
123	[
124	'label' => esc_html__('Icon Vertical Position (px)', 'easy-elements'),
125	'type' => Controls_Manager::SLIDER,
126	'range' => [
127	'px' => [
128	'min' => -50,
129	'max' => 50,
130	],
131	],
132	'default' => [
133	'unit' => 'px',
134	'size' => 0,
135	],
136	'selectors' => [
137	'{{WRAPPER}} .eel-search-open-btn' => 'transform: translateY({{SIZE}}{{UNIT}});',
138	],
139	'condition' => [
140	'select_style' => '1'
141	]
142	]
143	);
144
145	$this->add_responsive_control(
146	'search_icon_horizontal_position',
147	[
148	'label' => esc_html__('Icon Horizontal Position (px)', 'easy-elements'),
149	'type' => Controls_Manager::SLIDER,
150	'selectors' => [
151	'{{WRAPPER}} .eel-search-submit-btn' => 'right: {{SIZE}}{{UNIT}};',
152	],
153	'condition' => [
154	'select_style' => '2'
155	]
156	]
157	);
158
159
160	$this->add_control(
161	'close_icon',
162	[
163	'label' => esc_html__('Close Icon', 'easy-elements'),
164	'type' => \Elementor\Controls_Manager::ICONS,
165	'default' => [
166	'value' => 'fas fa-arrow-up',
167	'library' => 'fa-solid',
168	],
169	'condition' => [
170	'select_style' => '1'
171	]
172	]
173	);
174
175	$this->add_responsive_control(
176	'icon_size',
177	[
178	'label' => esc_html__('Close Icon Size (px)', 'easy-elements'),
179	'type' => Controls_Manager::SLIDER,
180	'range' => [
181	'px' => [
182	'min' => 10,
183	'max' => 100,
184	],
185	],
186	'selectors' => [
187	'{{WRAPPER}} .eel-search-close-btn i, {{WRAPPER}} .eel-search-close-btn svg' => 'font-size: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
188	],
189	'condition' => [
190	'select_style' => '1'
191	]
192	]
193	);
194
195
196	$this->add_control(
197	'overlay_background',
198	[
199	'label' => esc_html__('Overlay Background', 'easy-elements'),
200	'type' => Controls_Manager::COLOR,
201	'default' => '',
202	'selectors' => [
203	'{{WRAPPER}} .eel-search-lightbox, {{WRAPPER}} .eel-search-overlay' => 'background: {{VALUE}};',
204	],
205	'condition' => [
206	'select_style' => '1'
207	]
208	]
209	);
210
211	$this->add_control(
212	'input_text_color',
213	[
214	'label' => esc_html__('Input Text Color', 'easy-elements'),
215	'type' => Controls_Manager::COLOR,
216	'selectors' => [
217	'{{WRAPPER}} .eel-search-content .eel-search-field' => 'color: {{VALUE}};',
218	'{{WRAPPER}} .eel-search-style-2 .eel-search-field' => 'color: {{VALUE}};',
219	],
220	]
221	);
222
223	$this->add_control(
224	'input_bg_color',
225	[
226	'label' => esc_html__('Input Background Color', 'easy-elements'),
227	'type' => Controls_Manager::COLOR,
228	'selectors' => [
229	'{{WRAPPER}} .eel-search-content .eel-search-field' => 'background-color: {{VALUE}};',
230	'{{WRAPPER}} .eel-search-style-2 .eel-search-field' => 'background: {{VALUE}};',
231	],
232	]
233	);
234
235	$this->add_control(
236	'input_border_color',
237	[
238	'label' => esc_html__('Input Border Color', 'easy-elements'),
239	'type' => Controls_Manager::COLOR,
240	'selectors' => [
241	'{{WRAPPER}} .eel-search-style-2 .eel-search-field' => 'border-color: {{VALUE}};',
242	],
243	'condition' => [
244	'select_style' => '2'
245	]
246	]
247	);
248
249	$this->add_control(
250	'input_focus_border_color',
251	[
252	'label' => esc_html__('Border Color (Focus)', 'easy-elements'),
253	'type' => Controls_Manager::COLOR,
254	'selectors' => [
255	'{{WRAPPER}} .eel-search-style-2 .eel-search-field:focus' => 'border-color: {{VALUE}};',
256	],
257	'condition' => [
258	'select_style' => '2'
259	]
260	]
261	);
262
263	$this->add_control(
264	'submit_button_color',
265	[
266	'label' => esc_html__('Submit Button Background', 'easy-elements'),
267	'type' => Controls_Manager::COLOR,
268	'selectors' => [
269	'{{WRAPPER}} .eel-search-content .eel-search-submit' => 'background-color: {{VALUE}};',
270	],
271	'condition' => [
272	'select_style' => '1'
273	]
274	]
275	);
276	$this->end_controls_section();
277	}
278
279	protected function render() {
280	$settings = $this->get_settings_for_display();
281	$style = $settings['select_style'];
282
283	if ( $style == '2' ) : ?>
284	<div class="eel-search-style-<?php echo esc_attr( $style ); ?>">
285	<form role="search" method="get" class="eel-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
286	<input type="search" class="eel-search-field" placeholder="<?php echo esc_attr( $settings['search_placeholder'] ?? 'Search..' ); ?>" value="" name="s" />
287	<button type="submit" class="eel-search-submit-btn" aria-label="Submit Search">
288	<?php
289	if( $settings['open_icon']['value'] ) :
290	\Elementor\Icons_Manager::render_icon( $settings['open_icon'], [ 'aria-hidden' => 'true' ] );
291	else : ?>
292	<i class="eel-absl unicon-search"></i>
293	<?php
294	endif; ?>
295	</button>
296	</form>
297	</div>
298	<?php
299	else: ?>
300	<a href="#" role="button" class="eel-search-open-btn" aria-label="<?php esc_attr_e('Open Search', 'easy-elements'); ?>">
301	<?php \Elementor\Icons_Manager::render_icon( $settings['open_icon'], [ 'aria-hidden' => 'true' ] ); ?>
302	</a>
303
304	<div class="eel-search-lightbox">
305	<div class="eel-search-overlay">
306	<a href="#" role="button" class="eel-search-close-btn" aria-label="<?php esc_attr_e('Close Search', 'easy-elements'); ?>">
307	<?php \Elementor\Icons_Manager::render_icon( $settings['close_icon'], [ 'aria-hidden' => 'true' ] ); ?>
308	</a>
309	</div>
310	<div class="eel-search-content">
311	<div class="eel-search-title">
312	<?php echo esc_attr( $settings['search_top_title'] ?: __( 'What are you looking for?', 'easy-elements' ) ); ?>
313	</div>
314	<form role="search" method="get" class="eel-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
315	<input type="search" class="eel-search-field" placeholder="<?php echo esc_attr( $settings['search_placeholder'] ?? 'Type keywords here...' ); ?>" value="" name="s" />
316	<button type="submit" class="eel-search-submit" aria-label="Submit Search">
317	<i class="eel-absl unicon-search"></i>
318	</button>
319	</form>
320	</div>
321	</div>
322	<?php
323	endif;
324	}
325	}
326