elementor / modules / shapes / widgets / text-path.php

text-path.php in Elementor Website Builder – more than just a page builder 3.3.1, at modules/shapes/widgets/text-path.php

680 lines 13.4 KB

Raw Download Zip

1	<?php
2
3	namespace Elementor\Modules\Shapes\Widgets;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Modules\Shapes\Module as Shapes_Module;
9	use Elementor\Utils;
10	use Elementor\Widget_Base;
11
12	if ( ! defined( 'ABSPATH' ) ) {
13	exit; // Exit if accessed directly.
14	}
15
16	/**
17	* Elementor WordArt widget.
18	*
19	* Elementor widget that displays text along SVG path.
20	*
21	*/
22	class TextPath extends Widget_Base {
23
24	const DEFAULT_PATH_FILL = '#E8178A';
25
26	/**
27	* Get widget name.
28	*
29	* Retrieve Text Path widget name.
30	*
31	* @return string Widget name.
32	* @access public
33	*
34	*/
35	public function get_name() {
36	return 'text-path';
37	}
38
39	/**
40	* Get widget title.
41	*
42	* Retrieve Text Path widget title.
43	*
44	* @return string Widget title.
45	* @access public
46	*
47	*/
48	public function get_title() {
49	return __( 'Text Path', 'elementor' );
50	}
51
52	/**
53	* Get widget icon.
54	*
55	* Retrieve Text Path widget icon.
56	*
57	* @return string Widget icon.
58	* @access public
59	*
60	*/
61	public function get_icon() {
62	return 'eicon-wordart';
63	}
64
65	/**
66	* Get widget keywords.
67	*
68	* Retrieve the list of keywords the widget belongs to.
69	*
70	* @return array Widget keywords.
71	* @access public
72	*
73	*/
74	public function get_keywords() {
75	return [ 'text path', 'word path', 'text on path', 'wordart', 'word art' ];
76	}
77
78	/**
79	* Register content controls under content tab.
80	*/
81	protected function register_content_tab() {
82	$this->start_controls_section(
83	'section_content_text_path',
84	[
85	'label' => __( 'Text Path', 'elementor' ),
86	'tab' => Controls_Manager::TAB_CONTENT,
87	]
88	);
89
90	$this->add_control(
91	'text',
92	[
93	'label' => __( 'Text', 'elementor' ),
94	'type' => Controls_Manager::TEXT,
95	'label_block' => true,
96	'default' => __( 'Add Your Curvy Text Here', 'elementor' ),
97	'frontend_available' => true,
98	'render_type' => 'none',
99	'dynamic' => [
100	'active' => true,
101	],
102	]
103	);
104
105	$this->add_control(
106	'path',
107	[
108	'label' => __( 'Path Type', 'elementor' ),
109	'type' => Controls_Manager::SELECT,
110	'options' => Shapes_Module::get_paths(),
111	'default' => 'wave',
112	]
113	);
114
115	$this->add_control(
116	'custom_path',
117	[
118	'label' => __( 'SVG', 'elementor' ),
119	'type' => Controls_Manager::MEDIA,
120	'media_types' => [
121	'svg',
122	],
123	'condition' => [
124	'path' => 'custom',
125	],
126	'dynamic' => [
127	'active' => true,
128	],
129	'description' => sprintf( __( 'Want to create custom text paths with SVG? <a target="_blank" href="%s">Learn More</a>', 'elementor' ), 'https://go.elementor.com/text-path-create-paths' ),
130	]
131	);
132
133	$this->add_control(
134	'link',
135	[
136	'label' => __( 'Link', 'elementor' ),
137	'type' => Controls_Manager::URL,
138	'label_block' => true,
139	'dynamic' => [
140	'active' => true,
141	],
142	'placeholder' => __( 'Paste URL or type', 'elementor' ),
143	'frontend_available' => true,
144	]
145	);
146
147	$this->add_responsive_control(
148	'align',
149	[
150	'label' => __( 'Alignment', 'elementor' ),
151	'type' => Controls_Manager::CHOOSE,
152	'default' => '',
153	'options' => [
154	'left' => [
155	'title' => __( 'Left', 'elementor' ),
156	'icon' => 'eicon-text-align-left',
157	],
158	'center' => [
159	'title' => __( 'Center', 'elementor' ),
160	'icon' => 'eicon-text-align-center',
161	],
162	'right' => [
163	'title' => __( 'Right', 'elementor' ),
164	'icon' => 'eicon-text-align-right',
165	],
166	],
167	'selectors' => [
168	'{{WRAPPER}}' => '--alignment: {{VALUE}}',
169	],
170	'frontend_available' => true,
171	]
172	);
173
174	$this->add_control(
175	'text_path_direction',
176	[
177	'label' => __( 'Text Direction', 'elementor' ),
178	'type' => Controls_Manager::SELECT,
179	'default' => '',
180	'options' => [
181	'' => __( 'Default', 'elementor' ),
182	'rtl' => __( 'RTL', 'elementor' ),
183	'ltr' => __( 'LTR', 'elementor' ),
184	],
185	'selectors' => [
186	'{{WRAPPER}}' => '--direction: {{VALUE}}',
187	],
188	'frontend_available' => true,
189	]
190	);
191
192	$this->add_control(
193	'show_path',
194	[
195	'label' => __( 'Show Path', 'elementor' ),
196	'type' => Controls_Manager::SWITCHER,
197	'label_on' => __( 'On', 'elementor' ),
198	'label_off' => __( 'Off', 'elementor' ),
199	'return_value' => self::DEFAULT_PATH_FILL,
200	'separator' => 'before',
201	'default' => '',
202	'selectors' => [
203	'{{WRAPPER}}' => '--path-stroke: {{VALUE}}; --path-fill: transparent;',
204	],
205	]
206	);
207
208	$this->end_controls_section();
209	}
210
211	/**
212	* Register style controls under style tab.
213	*/
214	protected function register_style_tab() {
215	/**
216	* Text Path styling section.
217	*/
218	$this->start_controls_section(
219	'section_style_text_path',
220	[
221	'label' => __( 'Text Path', 'elementor' ),
222	'tab' => Controls_Manager::TAB_STYLE,
223	]
224	);
225
226	$this->add_responsive_control(
227	'size',
228	[
229	'label' => __( 'Size', 'elementor' ),
230	'type' => Controls_Manager::SLIDER,
231	'size_units' => [ '%', 'px' ],
232	'range' => [
233	'%' => [
234	'min' => 0,
235	'max' => 100,
236	'step' => 10,
237	],
238	'px' => [
239	'min' => 0,
240	'max' => 800,
241	'step' => 50,
242	],
243	],
244	'default' => [
245	'unit' => 'px',
246	'size' => 500,
247	],
248	'tablet_default' => [
249	'unit' => 'px',
250	'size' => 500,
251	],
252	'mobile_default' => [
253	'unit' => 'px',
254	'size' => 500,
255	],
256	'selectors' => [
257	'{{WRAPPER}}' => '--width: {{SIZE}}{{UNIT}};',
258	],
259	]
260	);
261
262	$this->add_responsive_control(
263	'rotation',
264	[
265	'label' => __( 'Rotate', 'elementor' ),
266	'type' => Controls_Manager::SLIDER,
267	'size_units' => [ 'deg' ],
268	'range' => [
269	'deg' => [
270	'min' => 0,
271	'max' => 360,
272	'step' => 1,
273	],
274	],
275	'default' => [
276	'unit' => 'deg',
277	'size' => '',
278	],
279	'tablet_default' => [
280	'unit' => 'deg',
281	'size' => '',
282	],
283	'mobile_default' => [
284	'unit' => 'deg',
285	'size' => '',
286	],
287	'selectors' => [
288	'{{WRAPPER}}' => '--rotate: {{SIZE}}{{UNIT}};',
289	],
290	]
291	);
292
293	$this->add_control(
294	'text_heading',
295	[
296	'label' => __( 'Text', 'elementor' ),
297	'type' => Controls_Manager::HEADING,
298	]
299	);
300
301	$this->add_group_control(
302	Group_Control_Typography::get_type(),
303	[
304	'name' => 'text_typography',
305	'selector' => '{{WRAPPER}}',
306	'global' => [
307	'default' => Global_Typography::TYPOGRAPHY_TEXT,
308	],
309	'fields_options' => [
310	'font_size' => [
311	'default' => [
312	'size' => '20',
313	'unit' => 'px',
314	],
315	'size_units' => [ 'px' ],
316	],
317	],
318	]
319	);
320
321	$this->add_responsive_control(
322	'word_spacing',
323	[
324	'label' => __( 'Word Spacing', 'elementor' ),
325	'type' => Controls_Manager::SLIDER,
326	'size_units' => [ 'px' ],
327	'range' => [
328	'px' => [
329	'min' => -20,
330	'max' => 20,
331	'step' => 1,
332	],
333	],
334	'default' => [
335	'unit' => 'px',
336	'size' => '',
337	],
338	'tablet_default' => [
339	'unit' => 'px',
340	'size' => '',
341	],
342	'mobile_default' => [
343	'unit' => 'px',
344	'size' => '',
345	],
346	'selectors' => [
347	'{{WRAPPER}}' => '--word-spacing: {{SIZE}}{{UNIT}};',
348	],
349	]
350	);
351
352	$this->add_control(
353	'start_point',
354	[
355	'label' => __( 'Starting Point', 'elementor' ),
356	'type' => Controls_Manager::SLIDER,
357	'size_units' => [ '%' ],
358	'range' => [
359	'px' => [
360	'min' => -100,
361	'max' => 100,
362	'step' => 1,
363	],
364	],
365	'default' => [
366	'unit' => '%',
367	'size' => 0,
368	],
369	'frontend_available' => true,
370	'render_type' => 'none',
371	]
372	);
373
374	$this->start_controls_tabs( 'text_style' );
375
376	/**
377	* Normal tab.
378	*/
379	$this->start_controls_tab(
380	'text_normal',
381	[
382	'label' => __( 'Normal', 'elementor' ),
383	]
384	);
385
386	$this->add_control(
387	'text_color_normal',
388	[
389	'label' => __( 'Color', 'elementor' ),
390	'type' => Controls_Manager::COLOR,
391	'default' => '',
392	'selectors' => [
393	'{{WRAPPER}}' => '--text-color: {{VALUE}};',
394	],
395	]
396	);
397
398	$this->end_controls_tab();
399
400	/**
401	* Hover tab.
402	*/
403	$this->start_controls_tab(
404	'text_hover',
405	[
406	'label' => __( 'Hover', 'elementor' ),
407	]
408	);
409
410	$this->add_control(
411	'text_color_hover',
412	[
413	'label' => __( 'Color', 'elementor' ),
414	'type' => Controls_Manager::COLOR,
415	'default' => '',
416	'selectors' => [
417	'{{WRAPPER}}' => '--text-color-hover: {{VALUE}};',
418	],
419	]
420	);
421
422	$this->add_control(
423	'hover_animation',
424	[
425	'label' => __( 'Hover Animation', 'elementor' ),
426	'type' => Controls_Manager::HOVER_ANIMATION,
427	]
428	);
429
430	$this->add_control(
431	'hover_transition',
432	[
433	'label' => __( 'Transition Duration', 'elementor' ),
434	'type' => Controls_Manager::SLIDER,
435	'default' => [
436	'size' => 0.3,
437	'unit' => 's',
438	],
439	'range' => [
440	's' => [
441	'min' => 0,
442	'max' => 3,
443	'step' => 0.1,
444	],
445	],
446	'selectors' => [
447	'{{WRAPPER}}' => '--transition: {{SIZE}}{{UNIT}}',
448	],
449	]
450	);
451
452	$this->end_controls_tab();
453
454	$this->end_controls_tabs();
455
456	$this->end_controls_section();
457
458	/**
459	* Path styling section.
460	*/
461	$this->start_controls_section(
462	'section_style_path',
463	[
464	'label' => __( 'Path', 'elementor' ),
465	'tab' => Controls_Manager::TAB_STYLE,
466	'condition' => [
467	'show_path!' => '',
468	],
469	]
470	);
471
472	$this->start_controls_tabs( 'path_style' );
473
474	/**
475	* Normal tab.
476	*/
477	$this->start_controls_tab(
478	'path_normal',
479	[
480	'label' => __( 'Normal', 'elementor' ),
481	]
482	);
483
484	$this->add_control(
485	'path_fill_normal',
486	[
487	'label' => __( 'Color', 'elementor' ),
488	'type' => Controls_Manager::COLOR,
489	'default' => '',
490	'selectors' => [
491	'{{WRAPPER}}' => '--path-fill: {{VALUE}};',
492	],
493	]
494	);
495
496	$this->add_control(
497	'stroke_heading_normal',
498	[
499	'label' => __( 'Stroke', 'elementor' ),
500	'type' => Controls_Manager::HEADING,
501	]
502	);
503
504	$this->add_control(
505	'stroke_color_normal',
506	[
507	'label' => __( 'Color', 'elementor' ),
508	'type' => Controls_Manager::COLOR,
509	'default' => self::DEFAULT_PATH_FILL,
510	'selectors' => [
511	'{{WRAPPER}}' => '--stroke-color: {{VALUE}};',
512	],
513	]
514	);
515
516	$this->add_control(
517	'stroke_width_normal',
518	[
519	'label' => __( 'Width', 'elementor' ),
520	'type' => Controls_Manager::SLIDER,
521	'default' => [
522	'size' => 1,
523	'unit' => 'px',
524	],
525	'range' => [
526	'px' => [
527	'min' => 0,
528	'max' => 20,
529	'step' => 1,
530	],
531	],
532	'selectors' => [
533	'{{WRAPPER}}' => '--stroke-width: {{SIZE}}{{UNIT}}',
534	],
535	]
536	);
537
538	$this->end_controls_tab();
539
540	/**
541	* Hover tab.
542	*/
543	$this->start_controls_tab(
544	'path_hover',
545	[
546	'label' => __( 'Hover', 'elementor' ),
547	]
548	);
549
550	$this->add_control(
551	'path_fill_hover',
552	[
553	'label' => __( 'Color', 'elementor' ),
554	'type' => Controls_Manager::COLOR,
555	'default' => '',
556	'selectors' => [
557	'{{WRAPPER}}' => '--path-fill-hover: {{VALUE}};',
558	],
559	]
560	);
561
562	$this->add_control(
563	'stroke_heading_hover',
564	[
565	'label' => __( 'Stroke', 'elementor' ),
566	'type' => Controls_Manager::HEADING,
567	]
568	);
569
570	$this->add_control(
571	'stroke_color_hover',
572	[
573	'label' => __( 'Color', 'elementor' ),
574	'type' => Controls_Manager::COLOR,
575	'default' => '',
576	'selectors' => [
577	'{{WRAPPER}}' => '--stroke-color-hover: {{VALUE}};',
578	],
579	]
580	);
581
582	$this->add_control(
583	'stroke_width_hover',
584	[
585	'label' => __( 'Width', 'elementor' ),
586	'type' => Controls_Manager::SLIDER,
587	'default' => [
588	'size' => '',
589	'unit' => 'px',
590	],
591	'range' => [
592	'px' => [
593	'min' => 0,
594	'max' => 20,
595	'step' => 1,
596	],
597	],
598	'selectors' => [
599	'{{WRAPPER}}' => '--stroke-width-hover: {{SIZE}}{{UNIT}}',
600	],
601	]
602	);
603
604	$this->add_control(
605	'stroke_transition',
606	[
607	'label' => __( 'Transition Duration', 'elementor' ),
608	'type' => Controls_Manager::SLIDER,
609	'default' => [
610	'size' => 0.3,
611	'unit' => 's',
612	],
613	'range' => [
614	's' => [
615	'min' => 0,
616	'max' => 3,
617	'step' => 0.1,
618	],
619	],
620	'selectors' => [
621	'{{WRAPPER}}' => '--stroke-transition: {{SIZE}}{{UNIT}}',
622	],
623	]
624	);
625
626	$this->end_controls_tab();
627
628	$this->end_controls_tabs();
629
630	$this->end_controls_section();
631	}
632
633	/**
634	* Register Text Path widget controls.
635	*
636	* Adds different input fields to allow the user to change and customize the widget settings.
637	*
638	* @access protected
639	*/
640	protected function register_controls() {
641	$this->register_content_tab();
642	$this->register_style_tab();
643	}
644
645	/**
646	* Render Text Path widget output on the frontend.
647	*
648	* Written in PHP and used to generate the final HTML.
649	*
650	* @access protected
651	*/
652	protected function render() {
653	$settings = $this->get_settings_for_display();
654
655	// Get the shape SVG markup.
656	if ( 'custom' !== $settings['path'] ) {
657	$path_svg = Shapes_Module::get_path_svg( $settings['path'] );
658	} else {
659	$url = $settings['custom_path']['url'];
660	// Get the file contents only if it's svg.
661	$path_svg = ( 'svg' === pathinfo( $url, PATHINFO_EXTENSION ) ) ? file_get_contents( $url ) : '';
662	}
663
664	// Add Text Path text.
665	$this->add_render_attribute( 'text_path', 'class', 'e-text-path' );
666
667	// Add hover animation.
668	if ( ! empty( $settings['hover_animation'] ) ) {
669	$this->add_render_attribute( 'text_path', 'class', 'elementor-animation-' . $settings['hover_animation'] );
670	}
671
672	// Render.
673	?>
674	<div <?php echo $this->get_render_attribute_string( 'text_path' ); ?> data-text="<?php echo $settings['text']; ?>">
675	<?php echo $path_svg; ?>
676	</div>
677	<?php
678	}
679	}
680