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

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

459 lines 13.6 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\Schemes\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	'scheme' => Typography::TYPOGRAPHY_1,
276	'fields_options' => [
277	'typography' => ['default' => 'yes'],
278	'font_size' => ['default' => ['size' => 24]],
279	'font_weight' => ['default' => 600],
280	'line_height' => ['default' => ['size' => 1]],
281	],
282	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-prefix',
283	]
284	);
285
286
287	$this->end_controls_section();
288
289	/-----------------------------------------------------------------------------------/
290	/* *. Animated Text - Style
291	/-----------------------------------------------------------------------------------/
292
293	$this->start_controls_section(
294	'borderless_elementor_animated_text_styles',
295	[
296	'label' => esc_html__( 'Animated Text Styles', 'Borderless'),
297	'tab' => Controls_Manager::TAB_STYLE
298	]
299	);
300
301	$this->add_control(
302	'borderless_elementor_animated_text_color',
303	[
304	'label' => esc_html__( 'Animated Text Color', 'borderless'),
305	'type' => Controls_Manager::COLOR,
306	'selectors' => [
307	'{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__wrapper' => 'color: {{VALUE}};',
308	],
309	]
310	);
311
312	$this->add_control(
313	'borderless_elementor_animated_text_cursor_color',
314	[
315	'label' => esc_html__( 'Animated Text Cursor Color', 'borderless'),
316	'type' => Controls_Manager::COLOR,
317	'selectors' => [
318	'{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__cursor' => 'color: {{VALUE}};',
319	],
320	]
321	);
322
323	$this->add_group_control(
324	Group_Control_Typography::get_type(),
325	[
326	'label' => esc_html__( 'Animated Text Typography', 'borderless'),
327	'name' => 'borderless_elementor_animated_text_typography',
328	'scheme' => Typography::TYPOGRAPHY_1,
329	'fields_options' => [
330	'typography' => ['default' => 'yes'],
331	'font_size' => ['default' => ['size' => 24]],
332	'font_weight' => ['default' => 600],
333	'line_height' => ['default' => ['size' => 1]],
334	],
335	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__wrapper',
336	]
337	);
338
339	$this->add_group_control(
340	Group_Control_Typography::get_type(),
341	[
342	'label' => esc_html__( 'Animated Text Cursor Typography', 'borderless'),
343	'name' => 'borderless_elementor_animated_text_cursor_typography',
344	'scheme' => Typography::TYPOGRAPHY_1,
345	'fields_options' => [
346	'typography' => ['default' => 'yes'],
347	'font_size' => ['default' => ['size' => 24]],
348	'font_weight' => ['default' => 600],
349	'line_height' => ['default' => ['size' => 1]],
350	],
351	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-strings .Typewriter__cursor',
352	]
353	);
354
355
356	$this->end_controls_section();
357
358	/-----------------------------------------------------------------------------------/
359	/* *. Animated Text Suffix - Style
360	/-----------------------------------------------------------------------------------/
361
362	$this->start_controls_section(
363	'borderless_elementor_animated_text_suffix_styles',
364	[
365	'label' => esc_html__( 'Suffix Text Styles', 'Borderless'),
366	'tab' => Controls_Manager::TAB_STYLE
367	]
368	);
369
370	$this->add_control(
371	'borderless_elementor_animated_text_suffix_color',
372	[
373	'label' => esc_html__( 'Suffix Text Color', 'borderless'),
374	'type' => Controls_Manager::COLOR,
375	'selectors' => [
376	'{{WRAPPER}} .borderless-elementor-animated-text-suffix' => 'color: {{VALUE}};',
377	],
378	]
379	);
380
381	$this->add_group_control(
382	Group_Control_Typography::get_type(),
383	[
384	'name' => 'borderless_elementor_animated_text_suffix_typography',
385	'scheme' => Typography::TYPOGRAPHY_1,
386	'fields_options' => [
387	'typography' => ['default' => 'yes'],
388	'font_size' => ['default' => ['size' => 24]],
389	'font_weight' => ['default' => 600],
390	'line_height' => ['default' => ['size' => 1]],
391	],
392	'selector' => '{{WRAPPER}} .borderless-elementor-animated-text-suffix',
393	]
394	);
395
396
397	$this->end_controls_section();
398
399	}
400
401	/-----------------------------------------------------------------------------------/
402	/* *. Render
403	/-----------------------------------------------------------------------------------/
404
405	protected function render() {
406
407	$settings = $this->get_settings_for_display();
408
409	/* Start Animated Text Strings Content */
410
411	$strings = array();
412	foreach ( $settings['borderless_elementor_animated_text_strings'] as $item ) {
413	if ( ! empty( $item['borderless_elementor_animated_text_strings_text_field'] ) ) {
414	array_push( $strings, str_replace( '\'', ''', $item['borderless_elementor_animated_text_strings_text_field'] ) );
415	}
416	}
417	$strings = implode("\|",$strings);
418
419	/* End Animated Text Strings Content */
420
421	$this->add_render_attribute( 'animated-text', 'data-animated-text-strings', $strings );
422	$this->add_render_attribute( 'animated-text', 'data-animated-text-delay', $settings['borderless_elementor_animated_text_type_speed'] );
423	$this->add_render_attribute( 'animated-text', 'data-animated-text-delete-speed', $settings['borderless_elementor_animated_text_back_speed'] );
424	$this->add_render_attribute( 'animated-text', 'data-animated-text-pause-for', $settings['borderless_elementor_animated_text_pause_for'] );
425	$this->add_render_attribute( 'animated-text', 'data-animated-text-cursor', $settings['borderless_elementor_animated_text_cursor_mark'] );
426	$this->add_render_attribute( 'animated-text', 'data-animated-text-loop', $settings['borderless_elementor_animated_text_loop'] );
427
428	?>
429
430	<div class="borderless-elementor-animated-text-widget">
431
432	<div class="borderless-elementor-animated-text">
433
434	<?php if ( ! empty( $settings['borderless_elementor_animated_text_prefix'] ) ) { ?>
435	<span class="borderless-elementor-animated-text-prefix"><?php echo wp_kses( ( $settings['borderless_elementor_animated_text_prefix'] ), true ); ?></span>
436	<?php } ?>
437
438	<?php if ( ! empty( $strings ) ) { ?>
439	<span class="borderless-elementor-animated-text-strings" <?php echo $this->get_render_attribute_string( 'animated-text' ) ?>></span>
440	<?php } ?>
441
442	<?php if ( ! empty( $settings['borderless_elementor_animated_text_suffix'] ) ) { ?>
443	<span class="borderless-elementor-animated-text-suffix"><?php echo wp_kses( ( $settings['borderless_elementor_animated_text_suffix'] ), true ); ?></span>
444	<?php } ?>
445
446	</div>
447
448	</div>
449
450	<?php
451
452	}
453
454	protected function _content_template() {
455
456	}
457
458
459	}