circle-chart.php — Shortcodes and extra features for Phlox theme 2.17.14

auxin-elements / includes / elementor / widgets / circle-chart.php

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

circle-chart.php

396 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Widget_Base;
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	exit; // Exit if accessed directly.
11	}
12
13	/**
14	* Elementor 'CircleChart' widget.
15	*
16	* Elementor widget that displays an 'CircleChart' with lightbox.
17	*
18	* @since 1.0.0
19	*/
20	class CircleChart extends Widget_Base {
21
22	/**
23	* Get widget name.
24	*
25	* Retrieve 'CircleChart' 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_circle_chart';
34	}
35
36	/**
37	* Get widget title.
38	*
39	* Retrieve 'CircleChart' 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 __('Circle Chart', '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 'CircleChart' 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-counter-circle auxin-badge';
67	}
68
69	/**
70	* Get widget categories.
71	*
72	* Retrieve 'CircleChart' widget icon.
73	*
74	* @since 1.0.0
75	* @access public
76	*
77	* @return string Widget icon.
78	*/
79	public function get_categories() {
80	return array( 'auxin-core' );
81	}
82
83	/**
84	* Register 'CircleChart' widget controls.
85	*
86	* Adds different input fields to allow the user to change and customize the widget settings.
87	*
88	* @since 1.0.0
89	* @access protected
90	*/
91	protected function register_controls() {
92
93	/-----------------------------------------------------------------------------------/
94	/* Contact Info section
95	/-----------------------------------------------------------------------------------/
96
97	$this->start_controls_section(
98	'chart_info_section',
99	array(
100	'label' => __('Chart Info', 'auxin-elements' )
101	)
102	);
103
104	$this->add_control(
105	'percentage',
106	array(
107	'label' => __('Percentage','auxin-elements' ),
108	'type' => Controls_Manager::SLIDER,
109	'size_units' => array('%'),
110	'range' => array(
111	'%' => array(
112	'min' => 1,
113	'max' => 100,
114	'step' => 1
115	),
116	),
117	'selectors' => array(
118	'{{WRAPPER}} .aux-circle-chart-wrapper' => '--aux-chart-percentage:{{SIZE}};'
119	),
120	'default' => array(
121	'size' => 20,
122	),
123	)
124	);
125
126	$this->add_control(
127	'title',
128	array(
129	'label' => __('Title','auxin-elements'),
130	'type' => Controls_Manager::TEXT
131	)
132	);
133
134	$this->add_control(
135	'subtitle',
136	array(
137	'label' => __('Subtitle','auxin-elements'),
138	'type' => Controls_Manager::TEXT
139	)
140	);
141
142	$this->add_responsive_control(
143	'alignment',
144	array(
145	'label' => __('Alignment', 'auxin-elements'),
146	'type' => Controls_Manager::CHOOSE,
147	'default' => 'center',
148	'options' => array(
149	'left' => array(
150	'title' => __( 'Left', 'auxin-elements' ),
151	'icon' => 'eicon-text-align-left',
152	),
153	'center' => array(
154	'title' => __( 'Center', 'auxin-elements' ),
155	'icon' => 'eicon-text-align-center',
156	),
157	'right' => array(
158	'title' => __( 'Right', 'auxin-elements' ),
159	'icon' => 'eicon-text-align-right',
160	)
161	),
162	'selectors_dictionary' => [
163	'left' => '',
164	'center' => 'text-align:center;margin-left:auto !important;margin-right:auto !important;',
165	'right' => 'text-align:right;margin-left:auto !important;'
166	],
167	'selectors' => [
168	'{{WRAPPER}} .aux-chart-title, {{WRAPPER}} .aux-circle-chart-wrapper' => '{{value}}'
169	]
170	)
171	);
172
173	$this->end_controls_section();
174
175
176	/-----------------------------------------------------------------------------------/
177	/* Style Tab
178	/-----------------------------------------------------------------------------------/
179
180	/* Color Section
181	/-------------------------------------/
182
183	$this->start_controls_section(
184	'chart_style_section',
185	array(
186	'label' => __( 'Chart Style', 'auxin-elements' ),
187	'tab' => Controls_Manager::TAB_STYLE
188	)
189	);
190
191	$this->add_responsive_control(
192	'circle-width',
193	array(
194	'label' => __('Chart Width','auxin-elements' ),
195	'type' => Controls_Manager::SLIDER,
196	'size_units' => array('px'),
197	'range' => array(
198	'px' => array(
199	'min' => 1,
200	'max' => 1000,
201	'step' => 1
202	),
203	),
204	'default' => array(
205	'size' => 150,
206	),
207	'selectors' => array(
208	'{{WRAPPER}} .aux-circle-chart-wrapper' => '--aux-chart-width:{{SIZE}}{{UNIT}};'
209	)
210	)
211	);
212
213	$this->add_responsive_control(
214	'bg-circle-border-width',
215	array(
216	'label' => __('Border Thickness','auxin-elements' ),
217	'type' => Controls_Manager::SLIDER,
218	'size_units' => array('px'),
219	'range' => array(
220	'px' => array(
221	'min' => 1,
222	'max' => 1000,
223	'step' => 1
224	),
225	),
226	'selectors' => array(
227	'{{WRAPPER}} .aux-bg-circle' => 'border-width:{{SIZE}}{{UNIT}};',
228	'{{WRAPPER}} .aux-circle-chart-wrapper' => '--aux-chart-border-width:{{SIZE}}{{UNIT}};'
229	)
230	)
231	);
232
233	$this->add_control(
234	'bg-circle-color',
235	[
236	'label' => __( 'Default Circle Color', 'auxin-elements' ),
237	'type' => Controls_Manager::COLOR,
238	'selectors' => [
239	'{{WRAPPER}} .aux-bg-circle' => 'border-color: {{VALUE}};'
240	]
241	]
242	);
243
244	$this->add_control(
245	'circle-color',
246	[
247	'label' => __( 'Active Circle Color', 'auxin-elements' ),
248	'type' => Controls_Manager::COLOR,
249	'selectors' => [
250	'{{WRAPPER}} .aux-circle-chart-wrapper' => '--aux-chart-color: {{VALUE}};'
251	]
252	]
253	);
254
255	$this->end_controls_section();
256
257	$this->start_controls_section(
258	'text_style_section',
259	array(
260	'label' => __( 'Text Style', 'auxin-elements' ),
261	'tab' => Controls_Manager::TAB_STYLE
262	)
263	);
264
265	$this->add_control(
266	'title_style',
267	[
268	'label' => esc_html__( 'Title Style', 'auxin-elements' ),
269	'type' => Controls_Manager::HEADING,
270	'separator' => 'before',
271	]
272	);
273
274	$this->add_group_control(
275	Group_Control_Typography::get_type(),
276	array(
277	'name' => 'title_typography',
278	'global' => [
279	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
280	],
281	'selector' => '{{WRAPPER}} .aux-chart-title'
282	)
283	);
284
285	$this->add_control(
286	'title_color',
287	array(
288	'label' => __( 'Color', 'auxin-elements' ),
289	'type' => Controls_Manager::COLOR,
290	'selectors' => array(
291	'{{WRAPPER}} .aux-chart-title' => 'color: {{VALUE}};',
292	)
293	)
294	);
295
296	$this->add_control(
297	'number_style',
298	[
299	'label' => esc_html__( 'Number Style', 'auxin-elements' ),
300	'type' => Controls_Manager::HEADING,
301	'separator' => 'before',
302	]
303	);
304
305	$this->add_group_control(
306	Group_Control_Typography::get_type(),
307	array(
308	'name' => 'number_typography',
309	'global' => [
310	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
311	],
312	'selector' => '{{WRAPPER}} .aux-number'
313	)
314	);
315
316	$this->add_control(
317	'number_color',
318	array(
319	'label' => __( 'Color', 'auxin-elements' ),
320	'type' => Controls_Manager::COLOR,
321	'selectors' => array(
322	'{{WRAPPER}} .aux-number' => 'color: {{VALUE}};',
323	)
324	)
325	);
326
327	$this->add_control(
328	'subtitle_style',
329	[
330	'label' => esc_html__( 'Subtitle Style', 'auxin-elements' ),
331	'type' => Controls_Manager::HEADING,
332	'separator' => 'before',
333	]
334	);
335
336	$this->add_group_control(
337	Group_Control_Typography::get_type(),
338	array(
339	'name' => 'subtitle_typography',
340	'global' => [
341	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
342	],
343	'selector' => '{{WRAPPER}} .aux-chart-subtitle'
344	)
345	);
346
347	$this->add_control(
348	'subtitle_color',
349	array(
350	'label' => __( 'Color', 'auxin-elements' ),
351	'type' => Controls_Manager::COLOR,
352	'selectors' => array(
353	'{{WRAPPER}} .aux-chart-subtitle' => 'color: {{VALUE}};',
354	)
355	)
356	);
357
358	$this->end_controls_section();
359	}
360
361	/**
362	* Render 'CircleChart' widget output on the frontend.
363	*
364	* @access protected
365	*/
366	protected function render() {
367
368	$settings = $this->get_settings_for_display();
369
370	?>
371	<span class='aux-chart-title'><?php echo esc_html( $settings['title'] );?></span>
372	<div class="aux-circle-chart-wrapper">
373	<div class="aux-bg-circle"></div>
374	<div class="aux-circle-chart aux-animate">
375	<span class='aux-number'><?php echo esc_html( $settings['percentage']['size'] );?><span>%</span></span>
376	<span class="aux-chart-subtitle"><?php echo esc_html( $settings['subtitle'] );?></span>
377	</div>
378	</div>
379	<?php
380	}
381
382	protected function content_template() {
383	?>
384	<span class='aux-chart-title'>{{{settings.title}}}</span>
385	<div class="aux-circle-chart-wrapper">
386	<div class="aux-bg-circle"></div>
387	<div class="aux-circle-chart aux-animate">
388	<span class='aux-number'>{{{settings.percentage.size}}}<span>%</span></span>
389	<span class="aux-chart-subtitle">{{{settings.subtitle}}}</span>
390	</div>
391	</div>
392	<?php
393	}
394
395	}
396