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

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

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