icon.php — Shortcodes and extra features for Phlox theme 2.5.0

auxin-elements / includes / elementor / widgets / icon.php

auxin-elements / includes / elementor / widgets Last commit date

icon.php

444 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Scheme_Color;
8
9
10	if ( ! defined( 'ABSPATH' ) ) {
11	exit; // Exit if accessed directly.
12	}
13
14	/**
15	* Elementor icon widget.
16	*
17	* Elementor widget that displays an icon from over 600+ icons.
18	*
19	* @since 1.0.0
20	*/
21	class Icon extends Widget_Base {
22
23	/**
24	* Get widget name.
25	*
26	* Retrieve icon widget name.
27	*
28	* @since 1.0.0
29	* @access public
30	*
31	* @return string Widget name.
32	*/
33	public function get_name() {
34	return 'aux_icon';
35	}
36
37	/**
38	* Get widget title.
39	*
40	* Retrieve icon widget title.
41	*
42	* @since 1.0.0
43	* @access public
44	*
45	* @return string Widget title.
46	*/
47	public function get_title() {
48	return __( 'Icon Picker', 'auxin-elements' );
49	}
50
51	/**
52	* Get widget icon.
53	*
54	* Retrieve icon widget icon.
55	*
56	* @since 1.0.0
57	* @access public
58	*
59	* @return string Widget icon.
60	*/
61	public function get_icon() {
62	return 'eicon-favorite auxin-badge';
63	}
64
65	/**
66	* Get widget categories.
67	*
68	* Retrieve the list of categories the icon widget belongs to.
69	*
70	* Used to determine where to display the widget in the editor.
71	*
72	* @since 2.0.0
73	* @access public
74	*
75	* @return array Widget categories.
76	*/
77	public function get_categories() {
78	return array( 'auxin-core' );
79	}
80
81	/**
82	* Get widget keywords.
83	*
84	* Retrieve the list of keywords the widget belongs to.
85	*
86	* @since 2.1.0
87	* @access public
88	*
89	* @return array Widget keywords.
90	*/
91	public function get_keywords() {
92	return array( 'icon' );
93	}
94
95	/**
96	* Register icon widget controls.
97	*
98	* Adds different input fields to allow the user to change and customize the widget settings.
99	*
100	* @since 1.0.0
101	* @access protected
102	*/
103	protected function _register_controls() {
104	$this->start_controls_section(
105	'section_icon',
106	array(
107	'label' => __( 'Icon', 'elementor' ),
108	)
109	);
110
111	$this->add_control(
112	'icon',
113	array(
114	'label' => __( 'Icon', 'elementor' ),
115	'type' => 'aux-icon',
116	'default' => 'fa fa-wordpress',
117	)
118	);
119
120	$this->add_control(
121	'view',
122	array(
123	'label' => __( 'View', 'elementor' ),
124	'type' => Controls_Manager::SELECT,
125	'options' => array(
126	'default' => __( 'Default', 'elementor' ),
127	'stacked' => __( 'Stacked', 'elementor' ),
128	'framed' => __( 'Framed', 'elementor' ),
129	),
130	'default' => 'default',
131	'prefix_class' => 'elementor-view-',
132	)
133	);
134
135	$this->add_control(
136	'shape',
137	array(
138	'label' => __( 'Shape', 'elementor' ),
139	'type' => Controls_Manager::SELECT,
140	'options' => array(
141	'circle' => __( 'Circle', 'elementor' ),
142	'square' => __( 'Square', 'elementor' ),
143	),
144	'default' => 'circle',
145	'condition' => array(
146	'view!' => 'default',
147	),
148	'prefix_class' => 'elementor-shape-',
149	)
150	);
151
152	$this->add_control(
153	'link',
154	array(
155	'label' => __( 'Link', 'elementor' ),
156	'type' => Controls_Manager::URL,
157	'dynamic' => array(
158	'active' => true
159	),
160	'placeholder' => __( 'https://your-link.com', 'elementor' ),
161	)
162	);
163
164	$this->add_responsive_control(
165	'align',
166	array(
167	'label' => __( 'Alignment', 'elementor' ),
168	'type' => Controls_Manager::CHOOSE,
169	'options' => array(
170	'left' => array(
171	'title' => __( 'Left', 'elementor' ),
172	'icon' => 'fa fa-align-left',
173	),
174	'center' => array(
175	'title' => __( 'Center', 'elementor' ),
176	'icon' => 'fa fa-align-center',
177	),
178	'right' => array(
179	'title' => __( 'Right', 'elementor' ),
180	'icon' => 'fa fa-align-right',
181	),
182	),
183	'default' => 'center',
184	'selectors' => array(
185	'{{WRAPPER}} .elementor-icon-wrapper' => 'text-align: {{VALUE}};',
186	),
187	)
188	);
189
190	$this->end_controls_section();
191
192	$this->start_controls_section(
193	'section_style_icon',
194	array(
195	'label' => __( 'Icon', 'elementor' ),
196	'tab' => Controls_Manager::TAB_STYLE,
197	)
198	);
199
200	$this->start_controls_tabs( 'icon_colors' );
201
202	$this->start_controls_tab(
203	'icon_colors_normal',
204	array(
205	'label' => __( 'Normal', 'elementor' ),
206	)
207	);
208
209	$this->add_control(
210	'primary_color',
211	array(
212	'label' => __( 'Primary Color', 'elementor' ),
213	'type' => Controls_Manager::COLOR,
214	'default' => '',
215	'selectors' => array(
216	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
217	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};',
218	),
219	'scheme' => array(
220	'type' => Scheme_Color::get_type(),
221	'value' => Scheme_Color::COLOR_1,
222	),
223	)
224	);
225
226	$this->add_control(
227	'secondary_color',
228	array(
229	'label' => __( 'Secondary Color', 'elementor' ),
230	'type' => Controls_Manager::COLOR,
231	'default' => '',
232	'condition' => array(
233	'view!' => 'default',
234	),
235	'selectors' => array(
236	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
237	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'color: {{VALUE}};',
238	),
239	)
240	);
241
242	$this->end_controls_tab();
243
244	$this->start_controls_tab(
245	'icon_colors_hover',
246	array(
247	'label' => __( 'Hover', 'elementor' ),
248	)
249	);
250
251	$this->add_control(
252	'hover_primary_color',
253	array(
254	'label' => __( 'Primary Color', 'elementor' ),
255	'type' => Controls_Manager::COLOR,
256	'default' => '',
257	'selectors' => array(
258	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
259	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'color: {{VALUE}}; border-color: {{VALUE}};',
260	),
261	)
262	);
263
264	$this->add_control(
265	'hover_secondary_color',
266	array(
267	'label' => __( 'Secondary Color', 'elementor' ),
268	'type' => Controls_Manager::COLOR,
269	'default' => '',
270	'condition' => array(
271	'view!' => 'default',
272	),
273	'selectors' => array(
274	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
275	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'color: {{VALUE}};',
276	),
277	)
278	);
279
280	$this->add_control(
281	'hover_animation',
282	array(
283	'label' => __( 'Hover Animation', 'elementor' ),
284	'type' => Controls_Manager::HOVER_ANIMATION,
285	)
286	);
287
288	$this->end_controls_tab();
289
290	$this->end_controls_tabs();
291
292	$this->add_control(
293	'size',
294	array(
295	'label' => __( 'Size', 'elementor' ),
296	'type' => Controls_Manager::SLIDER,
297	'range' => array(
298	'px' => array(
299	'min' => 6,
300	'max' => 300,
301	),
302	),
303	'selectors' => array(
304	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
305	),
306	)
307	);
308
309	$this->add_control(
310	'icon_padding',
311	array(
312	'label' => __( 'Padding', 'elementor' ),
313	'type' => Controls_Manager::SLIDER,
314	'selectors' => array(
315	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
316	),
317	'range' => array(
318	'em' => array(
319	'min' => 0,
320	'max' => 5,
321	),
322	),
323	'condition' => array(
324	'view!' => 'default',
325	),
326	)
327	);
328
329	$this->add_control(
330	'rotate',
331	array(
332	'label' => __( 'Rotate', 'elementor' ),
333	'type' => Controls_Manager::SLIDER,
334	'default' => array(
335	'size' => 0,
336	'unit' => 'deg',
337	),
338	'selectors' => array(
339	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
340	),
341	)
342	);
343
344	$this->add_control(
345	'border_width',
346	array(
347	'label' => __( 'Border Width', 'elementor' ),
348	'type' => Controls_Manager::DIMENSIONS,
349	'selectors' => array(
350	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
351	),
352	'condition' => array(
353	'view' => 'framed',
354	),
355	)
356	);
357
358	$this->add_control(
359	'border_radius',
360	array(
361	'label' => __( 'Border Radius', 'elementor' ),
362	'type' => Controls_Manager::DIMENSIONS,
363	'size_units' => array( 'px', '%' ),
364	'selectors' => array(
365	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
366	),
367	'condition' => array(
368	'view!' => 'default',
369	),
370	)
371	);
372
373	$this->end_controls_section();
374	}
375
376	/**
377	* Render icon widget output on the frontend.
378	*
379	* Written in PHP and used to generate the final HTML.
380	*
381	* @since 1.0.0
382	* @access protected
383	*/
384	protected function render() {
385	$settings = $this->get_settings_for_display();
386
387	$this->add_render_attribute( 'wrapper', 'class', 'elementor-icon-wrapper' );
388
389	$this->add_render_attribute( 'icon-wrapper', 'class', 'elementor-icon' );
390
391	if ( ! empty( $settings['hover_animation'] ) ) {
392	$this->add_render_attribute( 'icon-wrapper', 'class', 'elementor-animation-' . $settings['hover_animation'] );
393	}
394
395	$icon_tag = 'div';
396
397	if ( ! empty( $settings['link']['url'] ) ) {
398	$this->add_render_attribute( 'icon-wrapper', 'href', $settings['link']['url'] );
399	$icon_tag = 'a';
400
401	if ( ! empty( $settings['link']['is_external'] ) ) {
402	$this->add_render_attribute( 'icon-wrapper', 'target', '_blank' );
403	}
404
405	if ( $settings['link']['nofollow'] ) {
406	$this->add_render_attribute( 'icon-wrapper', 'rel', 'nofollow' );
407	}
408	}
409
410	if ( ! empty( $settings['icon'] ) ) {
411	$this->add_render_attribute( 'icon', 'class', $settings['icon'] );
412	$this->add_render_attribute( 'icon', 'aria-hidden', 'true' );
413	}
414
415	?>
416	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
417	<<?php echo $icon_tag . ' ' . $this->get_render_attribute_string( 'icon-wrapper' ); ?>>
418	<i <?php echo $this->get_render_attribute_string( 'icon' ); ?>></i>
419	</<?php echo $icon_tag; ?>>
420	</div>
421	<?php
422	}
423
424	/**
425	* Render icon widget output in the editor.
426	*
427	* Written as a Backbone JavaScript template and used to generate the live preview.
428	*
429	* @since 1.0.0
430	* @access protected
431	*/
432	protected function _content_template() {
433	?>
434	<# var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
435	iconTag = link ? 'a' : 'div'; #>
436	<div class="elementor-icon-wrapper">
437	<{{{ iconTag }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}" {{{ link }}}>
438	<i class="{{ settings.icon }}" aria-hidden="true"></i>
439	</{{{ iconTag }}}>
440	</div>
441	<?php
442	}
443	}
444