elementor / includes / widgets / counter.php

counter.php in Elementor Website Builder – more than just a page builder 3.19.0-dev3, at includes/widgets/counter.php

390 lines 9.0 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor counter widget.
13	*
14	* Elementor widget that displays stats and numbers in an escalating manner.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Counter extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve counter widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'counter';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve counter widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Counter', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve counter widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-counter';
60	}
61
62	/**
63	* Retrieve the list of scripts the counter widget depended on.
64	*
65	* Used to set scripts dependencies required to run the widget.
66	*
67	* @since 1.3.0
68	* @access public
69	*
70	* @return array Widget scripts dependencies.
71	*/
72	public function get_script_depends() {
73	return [ 'jquery-numerator' ];
74	}
75
76	/**
77	* Get widget keywords.
78	*
79	* Retrieve the list of keywords the widget belongs to.
80	*
81	* @since 2.1.0
82	* @access public
83	*
84	* @return array Widget keywords.
85	*/
86	public function get_keywords() {
87	return [ 'counter' ];
88	}
89
90	/**
91	* Register counter widget controls.
92	*
93	* Adds different input fields to allow the user to change and customize the widget settings.
94	*
95	* @since 3.1.0
96	* @access protected
97	*/
98	protected function register_controls() {
99	$this->start_controls_section(
100	'section_counter',
101	[
102	'label' => esc_html__( 'Counter', 'elementor' ),
103	]
104	);
105
106	$this->add_control(
107	'starting_number',
108	[
109	'label' => esc_html__( 'Starting Number', 'elementor' ),
110	'type' => Controls_Manager::NUMBER,
111	'default' => 0,
112	'dynamic' => [
113	'active' => true,
114	],
115	]
116	);
117
118	$this->add_control(
119	'ending_number',
120	[
121	'label' => esc_html__( 'Ending Number', 'elementor' ),
122	'type' => Controls_Manager::NUMBER,
123	'default' => 100,
124	'dynamic' => [
125	'active' => true,
126	],
127	]
128	);
129
130	$this->add_control(
131	'prefix',
132	[
133	'label' => esc_html__( 'Number Prefix', 'elementor' ),
134	'type' => Controls_Manager::TEXT,
135	'dynamic' => [
136	'active' => true,
137	],
138	'ai' => [
139	'active' => false,
140	],
141	'default' => '',
142	'placeholder' => 1,
143	]
144	);
145
146	$this->add_control(
147	'suffix',
148	[
149	'label' => esc_html__( 'Number Suffix', 'elementor' ),
150	'type' => Controls_Manager::TEXT,
151	'dynamic' => [
152	'active' => true,
153	],
154	'ai' => [
155	'active' => false,
156	],
157	'default' => '',
158	'placeholder' => esc_html__( 'Plus', 'elementor' ),
159	]
160	);
161
162	$this->add_control(
163	'duration',
164	[
165	'label' => esc_html__( 'Animation Duration', 'elementor' ) . ' (ms)',
166	'type' => Controls_Manager::NUMBER,
167	'default' => 2000,
168	'min' => 100,
169	'step' => 100,
170	]
171	);
172
173	$this->add_control(
174	'thousand_separator',
175	[
176	'label' => esc_html__( 'Thousand Separator', 'elementor' ),
177	'type' => Controls_Manager::SWITCHER,
178	'default' => 'yes',
179	'label_on' => esc_html__( 'Show', 'elementor' ),
180	'label_off' => esc_html__( 'Hide', 'elementor' ),
181	]
182	);
183
184	$this->add_control(
185	'thousand_separator_char',
186	[
187	'label' => esc_html__( 'Separator', 'elementor' ),
188	'type' => Controls_Manager::SELECT,
189	'condition' => [
190	'thousand_separator' => 'yes',
191	],
192	'options' => [
193	'' => 'Default',
194	'.' => 'Dot',
195	' ' => 'Space',
196	'_' => 'Underline',
197	"'" => 'Apostrophe',
198	],
199	]
200	);
201
202	$this->add_control(
203	'title',
204	[
205	'label' => esc_html__( 'Title', 'elementor' ),
206	'type' => Controls_Manager::TEXT,
207	'label_block' => true,
208	'dynamic' => [
209	'active' => true,
210	],
211	'default' => esc_html__( 'Cool Number', 'elementor' ),
212	'placeholder' => esc_html__( 'Cool Number', 'elementor' ),
213	]
214	);
215
216	$this->end_controls_section();
217
218	$this->start_controls_section(
219	'section_number',
220	[
221	'label' => esc_html__( 'Number', 'elementor' ),
222	'tab' => Controls_Manager::TAB_STYLE,
223	]
224	);
225
226	$this->add_control(
227	'number_color',
228	[
229	'label' => esc_html__( 'Text Color', 'elementor' ),
230	'type' => Controls_Manager::COLOR,
231	'global' => [
232	'default' => Global_Colors::COLOR_PRIMARY,
233	],
234	'selectors' => [
235	'{{WRAPPER}} .elementor-counter-number-wrapper' => 'color: {{VALUE}};',
236	],
237	]
238	);
239
240	$this->add_group_control(
241	Group_Control_Typography::get_type(),
242	[
243	'name' => 'typography_number',
244	'global' => [
245	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
246	],
247	'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper',
248	]
249	);
250
251	$this->add_group_control(
252	Group_Control_Text_Stroke::get_type(),
253	[
254	'name' => 'number_stroke',
255	'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper',
256	]
257	);
258
259	$this->add_group_control(
260	Group_Control_Text_Shadow::get_type(),
261	[
262	'name' => 'number_shadow',
263	'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper',
264	]
265	);
266
267	$this->end_controls_section();
268
269	$this->start_controls_section(
270	'section_title',
271	[
272	'label' => esc_html__( 'Title', 'elementor' ),
273	'tab' => Controls_Manager::TAB_STYLE,
274	]
275	);
276
277	$this->add_control(
278	'title_color',
279	[
280	'label' => esc_html__( 'Text Color', 'elementor' ),
281	'type' => Controls_Manager::COLOR,
282	'global' => [
283	'default' => Global_Colors::COLOR_SECONDARY,
284	],
285	'selectors' => [
286	'{{WRAPPER}} .elementor-counter-title' => 'color: {{VALUE}};',
287	],
288	]
289	);
290
291	$this->add_group_control(
292	Group_Control_Typography::get_type(),
293	[
294	'name' => 'typography_title',
295	'global' => [
296	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
297	],
298	'selector' => '{{WRAPPER}} .elementor-counter-title',
299	]
300	);
301
302	$this->add_group_control(
303	Group_Control_Text_Stroke::get_type(),
304	[
305	'name' => 'title_stroke',
306	'selector' => '{{WRAPPER}} .elementor-counter-title',
307	]
308	);
309
310	$this->add_group_control(
311	Group_Control_Text_Shadow::get_type(),
312	[
313	'name' => 'title_shadow',
314	'selector' => '{{WRAPPER}} .elementor-counter-title',
315	]
316	);
317
318	$this->end_controls_section();
319	}
320
321	/**
322	* Render counter widget output in the editor.
323	*
324	* Written as a Backbone JavaScript template and used to generate the live preview.
325	*
326	* @since 2.9.0
327	* @access protected
328	*/
329	protected function content_template() {
330	?>
331	<# view.addRenderAttribute( 'counter-title', {
332	'class': 'elementor-counter-title'
333	} );
334
335	view.addInlineEditingAttributes( 'counter-title' );
336	#>
337	<div class="elementor-counter">
338	<div class="elementor-counter-number-wrapper">
339	<span class="elementor-counter-number-prefix">{{{ settings.prefix }}}</span>
340	<span class="elementor-counter-number" data-duration="{{ settings.duration }}" data-to-value="{{ settings.ending_number }}" data-delimiter="{{ settings.thousand_separator ? settings.thousand_separator_char \|\| ',' : '' }}">{{{ settings.starting_number }}}</span>
341	<span class="elementor-counter-number-suffix">{{{ settings.suffix }}}</span>
342	</div>
343	<# if ( settings.title ) {
344	#><div {{{ view.getRenderAttributeString( 'counter-title' ) }}}>{{{ settings.title }}}</div><#
345	} #>
346	</div>
347	<?php
348	}
349
350	/**
351	* Render counter widget output on the frontend.
352	*
353	* Written in PHP and used to generate the final HTML.
354	*
355	* @since 1.0.0
356	* @access protected
357	*/
358	protected function render() {
359	$settings = $this->get_settings_for_display();
360
361	$this->add_render_attribute( 'counter', [
362	'class' => 'elementor-counter-number',
363	'data-duration' => $settings['duration'],
364	'data-to-value' => $settings['ending_number'],
365	'data-from-value' => $settings['starting_number'],
366	] );
367
368	if ( ! empty( $settings['thousand_separator'] ) ) {
369	$delimiter = empty( $settings['thousand_separator_char'] ) ? ',' : $settings['thousand_separator_char'];
370	$this->add_render_attribute( 'counter', 'data-delimiter', $delimiter );
371	}
372
373	$this->add_render_attribute( 'counter-title', 'class', 'elementor-counter-title' );
374
375	$this->add_inline_editing_attributes( 'counter-title' );
376	?>
377	<div class="elementor-counter">
378	<div class="elementor-counter-number-wrapper">
379	<span class="elementor-counter-number-prefix"><?php $this->print_unescaped_setting( 'prefix' ); ?></span>
380	<span <?php $this->print_render_attribute_string( 'counter' ); ?>><?php $this->print_unescaped_setting( 'starting_number' ); ?></span>
381	<span class="elementor-counter-number-suffix"><?php $this->print_unescaped_setting( 'suffix' ); ?></span>
382	</div>
383	<?php if ( $settings['title'] ) : ?>
384	<div <?php $this->print_render_attribute_string( 'counter-title' ); ?>><?php $this->print_unescaped_setting( 'title' ); ?></div>
385	<?php endif; ?>
386	</div>
387	<?php
388	}
389	}
390