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

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

663 lines 13.3 KB

Raw Download Zip

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