borderless / modules / elementor / widgets / animated-text.php

animated-text.php in Borderless – Addons and Templates for Elementor trunk, at modules/elementor/widgets/animated-text.php

467 lines 13.8 KB

Raw Download Zip

1	<?php
2
3	namespace Borderless\Widgets;
4
5	if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
6
7	use Elementor\Widget_Base;
8	use Elementor\Controls_Manager;
9	use Elementor\Group_Control_Image_Size;
10	use \Elementor\Group_Control_Typography;
11	use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
12	use \Elementor\Repeater;
13	use Elementor\Utils;
14
15	class Animated_Text extends Widget_Base {
16
17	public function get_name() {
18	return 'borderless-elementor-animated-text';
19	}
20
21	public function get_title() {
22	return esc_html__('Animated Text', 'borderless');
23	}
24
25	public function get_icon() {
26	return 'borderless-icon-animated-text';
27	}
28
29	public function get_categories() {
30	return [ 'borderless' ];
31	}
32
33	public function get_style_depends() {
34	return [ 'elementor-widget-animated-text' ];
35	}
36
37	public function get_script_depends() {
38	return [ 'borderless-elementor-typewriterjs-script' ];
39	}
40
41	protected function _register_controls() {
42
43	/-----------------------------------------------------------------------------------/
44	/* *. Animated Text - Content
45	/-----------------------------------------------------------------------------------/
46
47	$this->start_controls_section(
48	'borderless_section_animated_text',
49	[
50	'label' => esc_html__( 'Animated Text', 'borderless' ),
51	'tab' => Controls_Manager::TAB_CONTENT,
52	]
53	);
54
55	$this->add_control(
56	'borderless_elementor_animated_text_prefix',
57	[
58	'label' => __( 'Prefix', 'borderless' ),
59	'type' => \Elementor\Controls_Manager::TEXT,
60	'placeholder' => __( 'Enter your title', 'borderless' ),
61	'default' => esc_html__( 'This is the ', 'borderless'),
62	'dynamic' => [ 'active' => true ]
63	]
64	);
65
66	$repeater = new Repeater();
67
68	$repeater->add_control(
69	'borderless_elementor_animated_text_strings_text_field',
70	[
71	'label' => esc_html__( 'Animated String', 'borderless'),
72	'type' => Controls_Manager::TEXT,
73	'label_block' => true,
74	'dynamic' => [ 'active' => true ]
75	]
76	);
77
78	$this->add_control(
79	'borderless_elementor_animated_text_strings',
80	[
81	'label' => __( 'Animated Text', 'borderless'),
82	'type' => Controls_Manager::REPEATER,
83	'show_label' => true,
84	'fields' => $repeater->get_controls(),
85	'title_field' => '{{ borderless_elementor_animated_text_strings_text_field }}',
86	'default' => [
87	[
88	'borderless_elementor_animated_text_strings_text_field' => __( 'First string', 'borderless'),
89	],
90	[
91	'borderless_elementor_animated_text_strings_text_field' => __( 'Second string', 'borderless'),
92	],
93	[
94	'borderless_elementor_animated_text_strings_text_field' => __( 'Third string', 'borderless'),
95	]
96	],
97	]
98	);
99
100	$this->add_control(
101	'borderless_elementor_animated_text_suffix',
102	[
103	'label' => __( 'Suffix', 'borderless' ),
104	'type' => \Elementor\Controls_Manager::TEXT,
105	'placeholder' => __( 'Place your suffix text', 'borderless' ),
106	'default' => esc_html__( ' of the sentence.', 'borderless'),
107	'dynamic' => [ 'active' => true ]
108	]
109	);
110
111	$this->end_controls_section();
112
113	/-----------------------------------------------------------------------------------/
114	/* *. Animated Text Settings - Content
115	/-----------------------------------------------------------------------------------/
116
117	$this->start_controls_section(
118	'borderless_section_animated_text_settings',
119	[
120	'label' => esc_html__( 'Animated Text Settings', 'borderless' ),
121	'tab' => Controls_Manager::TAB_CONTENT,
122	]
123	);
124
125	$this->add_responsive_control(
126	'borderless_elementor_animated_text_alignment',
127	[
128	'label' => esc_html__( 'Alignment', 'borderless'),
129	'type' => Controls_Manager::CHOOSE,
130	'options' => [
131	'left' => [
132	'title' => esc_html__( 'Left', 'borderless'),
133	'icon' => 'fa fa-align-left',
134	],
135	'center' => [
136	'title' => esc_html__( 'Center', 'borderless'),
137	'icon' => 'fa fa-align-center',
138	],
139	'right' => [
140	'title' => esc_html__( 'Right', 'borderless'),
141	'icon' => 'fa fa-align-right',
142	],
143	],
144	'default' => 'center',
145	'selectors' => [
146	'{{WRAPPER}} .borderless-elementor-animated-text-widget' => 'text-align: {{VALUE}}',
147	],
148	]
149	);
150
151	/*
152
153	$this->add_control(
154	'borderless_elementor_animated_text_effect',
155	[
156	'label' => __( 'Direction', 'borderless' ),
157	'type' => \Elementor\Controls_Manager::SELECT,
158	'default' => 'typing',
159	'options' => [
160	'typing' => __( 'Typing', 'borderless' ),
161	'side-up' => __( 'Slide Up', 'borderless' ),
162	'zoom-out' => __( 'Zoom Out', 'borderless' ),
163	'rotate' => __( 'Rotate', 'borderless' ),
164	'auto-fade' => __( 'Auto Fade', 'borderless' ),
165	'custom' => __( 'Custom', 'borderless' ),
166	],
167	]
168	);
169
170	*/
171
172	$this->add_control(
173	'borderless_elementor_animated_text_type_speed',
174	[
175	'label' => __( 'Type Speed', 'borderless' ),
176	'type' => \Elementor\Controls_Manager::NUMBER,
177	'min' => 1,
178	'max' => 9999,
179	'step' => 1,
180	'default' => 50,
181	]
182	);
183
184	$this->add_control(
185	'borderless_elementor_animated_text_back_speed',
186	[
187	'label' => __( 'Back Speed', 'borderless' ),
188	'type' => \Elementor\Controls_Manager::NUMBER,
189	'min' => 1,
190	'max' => 9999,
191	'step' => 1,
192	'default' => 30,
193	]
194	);
195
196	$this->add_control(
197	'borderless_elementor_animated_text_pause_for',
198	[
199	'label' => __( 'Pause For', 'borderless' ),
200	'type' => \Elementor\Controls_Manager::NUMBER,
201	'min' => 1,
202	'max' => 9999,
203	'step' => 1,
204	'default' => 1500,
205	]
206	);
207
208	$this->add_control(
209	'borderless_elementor_animated_text_loop',
210	[
211	'label' => __( 'Loop', 'borderless' ),
212	'type' => \Elementor\Controls_Manager::SWITCHER,
213	'default' => 'yes',
214	]
215	);
216
217	$this->add_control(
218	'borderless_elementor_animated_text_show_cursor',
219	[
220	'label' => __( 'Show Cursor', 'borderless' ),
221	'type' => \Elementor\Controls_Manager::SWITCHER,
222	'default' => 'yes',
223	/*
224	'condition' => array(
225	'borderless_elementor_animated_text_effect' => 'typing',
226	),
227	*/
228	]
229	);
230
231	$this->add_control(
232	'borderless_elementor_animated_text_cursor_mark',
233	[
234	'label' => __( 'Cursor Mark', 'borderless' ),
235	'type' => \Elementor\Controls_Manager::TEXT,
236	'placeholder' => __( 'Enter Mark', 'borderless' ),
237	'default' => esc_html__( '\|', 'borderless'),
238	'dynamic' => [ 'active' => true ],
239	'condition' => array(
240	/* 'borderless_elementor_animated_text_effect' => 'typing', */
241	'borderless_elementor_animated_text_show_cursor' => 'yes',
242	),
243	]
244	);
245
246	$this->end_controls_section();
247
248	/-----------------------------------------------------------------------------------/
249	/* *. Animated Text Prefix - Style
250	/-----------------------------------------------------------------------------------/
251
252	$this->start_controls_section(
253	'borderless_elementor_animated_text_prefix_styles',
254	[
255	'label' => esc_html__( 'Prefix Text Styles', 'borderless'),
256	'tab' => Controls_Manager::TAB_STYLE
257	]
258	);
259
260	$this->add_control(
261	'borderless_elementor_animated_text_prefix_color',
262	[
263	'label' => esc_html__( 'Prefix Text Color', 'borderless'),
264	'type' => Controls_Manager::COLOR,
265	'selectors' => [
266	'{{WRAPPER}} .borderless-elementor-animated-text-prefix' => 'color: {{VALUE}};',
267	],
268	]
269	);
270
271	$this->add_group_control(
272	Group_Control_Typography::get_type(),
273	[
274	'name' => 'borderless_elementor_animated_text_prefix_typography',
275	'global' => [
276	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
277	],
278	'fields_options' => [
279	'typography' => ['default' => 'yes'],
280	'font_size' => ['default' => ['size' => 24]],
281	'font_weight' => ['default' => 600],
282	'line_height' => ['default' => ['size' => 1]],
283	],
284	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-prefix',
285	]
286	);
287
288
289	$this->end_controls_section();
290
291	/-----------------------------------------------------------------------------------/
292	/* *. Animated Text - Style
293	/-----------------------------------------------------------------------------------/
294
295	$this->start_controls_section(
296	'borderless_elementor_animated_text_styles',
297	[
298	'label' => esc_html__( 'Animated Text Styles', 'Borderless'),
299	'tab' => Controls_Manager::TAB_STYLE
300	]
301	);
302
303	$this->add_control(
304	'borderless_elementor_animated_text_color',
305	[
306	'label' => esc_html__( 'Animated Text Color', 'borderless'),
307	'type' => Controls_Manager::COLOR,
308	'selectors' => [
309	'{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__wrapper' => 'color: {{VALUE}};',
310	],
311	]
312	);
313
314	$this->add_control(
315	'borderless_elementor_animated_text_cursor_color',
316	[
317	'label' => esc_html__( 'Animated Text Cursor Color', 'borderless'),
318	'type' => Controls_Manager::COLOR,
319	'selectors' => [
320	'{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__cursor' => 'color: {{VALUE}};',
321	],
322	]
323	);
324
325	$this->add_group_control(
326	Group_Control_Typography::get_type(),
327	[
328	'label' => esc_html__( 'Animated Text Typography', 'borderless'),
329	'name' => 'borderless_elementor_animated_text_typography',
330	'global' => [
331	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
332	],
333	'fields_options' => [
334	'typography' => ['default' => 'yes'],
335	'font_size' => ['default' => ['size' => 24]],
336	'font_weight' => ['default' => 600],
337	'line_height' => ['default' => ['size' => 1]],
338	],
339	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__wrapper',
340	]
341	);
342
343	$this->add_group_control(
344	Group_Control_Typography::get_type(),
345	[
346	'label' => esc_html__( 'Animated Text Cursor Typography', 'borderless'),
347	'name' => 'borderless_elementor_animated_text_cursor_typography',
348	'global' => [
349	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
350	],
351	'fields_options' => [
352	'typography' => ['default' => 'yes'],
353	'font_size' => ['default' => ['size' => 24]],
354	'font_weight' => ['default' => 600],
355	'line_height' => ['default' => ['size' => 1]],
356	],
357	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__cursor',
358	]
359	);
360
361
362	$this->end_controls_section();
363
364	/-----------------------------------------------------------------------------------/
365	/* *. Animated Text Suffix - Style
366	/-----------------------------------------------------------------------------------/
367
368	$this->start_controls_section(
369	'borderless_elementor_animated_text_suffix_styles',
370	[
371	'label' => esc_html__( 'Suffix Text Styles', 'Borderless'),
372	'tab' => Controls_Manager::TAB_STYLE
373	]
374	);
375
376	$this->add_control(
377	'borderless_elementor_animated_text_suffix_color',
378	[
379	'label' => esc_html__( 'Suffix Text Color', 'borderless'),
380	'type' => Controls_Manager::COLOR,
381	'selectors' => [
382	'{{WRAPPER}} .borderless-elementor-animated-text-suffix' => 'color: {{VALUE}};',
383	],
384	]
385	);
386
387	$this->add_group_control(
388	Group_Control_Typography::get_type(),
389	[
390	'name' => 'borderless_elementor_animated_text_suffix_typography',
391	'global' => [
392	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
393	],
394	'fields_options' => [
395	'typography' => ['default' => 'yes'],
396	'font_size' => ['default' => ['size' => 24]],
397	'font_weight' => ['default' => 600],
398	'line_height' => ['default' => ['size' => 1]],
399	],
400	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-suffix',
401	]
402	);
403
404
405	$this->end_controls_section();
406
407	}
408
409	/-----------------------------------------------------------------------------------/
410	/* *. Render
411	/-----------------------------------------------------------------------------------/
412
413	protected function render() {
414
415	$settings = $this->get_settings_for_display();
416
417	/* Start Animated Text Strings Content */
418
419	$strings = array();
420	foreach ( $settings['borderless_elementor_animated_text_strings'] as $item ) {
421	if ( ! empty( $item['borderless_elementor_animated_text_strings_text_field'] ) ) {
422	array_push( $strings, str_replace( '\'', ''', $item['borderless_elementor_animated_text_strings_text_field'] ) );
423	}
424	}
425	$strings = implode("\|",$strings);
426
427	/* End Animated Text Strings Content */
428
429	$this->add_render_attribute( 'animated-text', 'data-animated-text-strings', $strings );
430	$this->add_render_attribute( 'animated-text', 'data-animated-text-delay', $settings['borderless_elementor_animated_text_type_speed'] );
431	$this->add_render_attribute( 'animated-text', 'data-animated-text-delete-speed', $settings['borderless_elementor_animated_text_back_speed'] );
432	$this->add_render_attribute( 'animated-text', 'data-animated-text-pause-for', $settings['borderless_elementor_animated_text_pause_for'] );
433	$this->add_render_attribute( 'animated-text', 'data-animated-text-cursor', $settings['borderless_elementor_animated_text_cursor_mark'] );
434	$this->add_render_attribute( 'animated-text', 'data-animated-text-loop', $settings['borderless_elementor_animated_text_loop'] );
435
436	?>
437
438	<div class="borderless-elementor-animated-text-widget">
439
440	<div class="borderless-elementor-animated-text">
441
442	<?php if ( ! empty( $settings['borderless_elementor_animated_text_prefix'] ) ) { ?>
443	<span class="borderless-elementor-animated-text-prefix"><?php echo wp_kses( ( $settings['borderless_elementor_animated_text_prefix'] ), true ); ?></span>
444	<?php } ?>
445
446	<?php if ( ! empty( $strings ) ) { ?>
447	<span class="borderless-elementor-animated-text-strings" <?php echo $this->get_render_attribute_string( 'animated-text' ) ?>></span>
448	<?php } ?>
449
450	<?php if ( ! empty( $settings['borderless_elementor_animated_text_suffix'] ) ) { ?>
451	<span class="borderless-elementor-animated-text-suffix"><?php echo wp_kses( ( $settings['borderless_elementor_animated_text_suffix'] ), true ); ?></span>
452	<?php } ?>
453
454	</div>
455
456	</div>
457
458	<?php
459
460	}
461
462	protected function _content_template() {
463
464	}
465
466
467	}