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

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

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

icon.php

466 lines

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