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

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

685 lines 14.1 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', 'grad', 'rad', 'turn' ],
274	'default' => [
275	'unit' => 'deg',
276	],
277	'tablet_default' => [
278	'unit' => 'deg',
279	],
280	'mobile_default' => [
281	'unit' => 'deg',
282	],
283	'selectors' => [
284	'{{WRAPPER}}' => '--rotate: {{SIZE}}{{UNIT}};',
285	],
286	]
287	);
288
289	$this->add_control(
290	'text_heading',
291	[
292	'label' => esc_html__( 'Text', 'elementor' ),
293	'type' => Controls_Manager::HEADING,
294	]
295	);
296
297	$this->add_group_control(
298	Group_Control_Typography::get_type(),
299	[
300	'name' => 'text_typography',
301	'selector' => '{{WRAPPER}}',
302	'global' => [
303	'default' => Global_Typography::TYPOGRAPHY_TEXT,
304	],
305	'fields_options' => [
306	'font_size' => [
307	'default' => [
308	'size' => '20',
309	'unit' => 'px',
310	],
311	'size_units' => [ 'px' ],
312	],
313	// Text decoration isn't an inherited property, so it's required to explicitly
314	// target the specific `textPath` element.
315	'text_decoration' => [
316	'selectors' => [
317	'{{WRAPPER}} textPath' => 'text-decoration: {{VALUE}};',
318	],
319	],
320	],
321	]
322	);
323
324	$this->add_group_control(
325	Group_Control_Text_Stroke::get_type(),
326	[
327	'name' => 'text_stroke',
328	'selector' => '{{WRAPPER}} textPath',
329	]
330	);
331
332	$this->add_responsive_control(
333	'word_spacing',
334	[
335	'label' => esc_html__( 'Word Spacing', 'elementor' ),
336	'type' => Controls_Manager::SLIDER,
337	'size_units' => [ 'px', 'em' ],
338	'range' => [
339	'px' => [
340	'min' => -20,
341	'max' => 20,
342	'step' => 1,
343	],
344	'em' => [
345	'min' => -1,
346	'max' => 1,
347	'step' => 0.1,
348	],
349	],
350	'default' => [
351	'unit' => 'px',
352	'size' => '',
353	],
354	'tablet_default' => [
355	'unit' => 'px',
356	'size' => '',
357	],
358	'mobile_default' => [
359	'unit' => 'px',
360	'size' => '',
361	],
362	'selectors' => [
363	'{{WRAPPER}}' => '--word-spacing: {{SIZE}}{{UNIT}};',
364	],
365	]
366	);
367
368	$this->add_control(
369	'start_point',
370	[
371	'label' => esc_html__( 'Starting Point', 'elementor' ),
372	'type' => Controls_Manager::SLIDER,
373	'size_units' => [ '%' ],
374	'range' => [
375	'px' => [
376	'min' => -100,
377	'max' => 100,
378	'step' => 1,
379	],
380	],
381	'default' => [
382	'unit' => '%',
383	'size' => 0,
384	],
385	'frontend_available' => true,
386	'render_type' => 'none',
387	]
388	);
389
390	$this->start_controls_tabs( 'text_style' );
391
392	/**
393	* Normal tab.
394	*/
395	$this->start_controls_tab(
396	'text_normal',
397	[
398	'label' => esc_html__( 'Normal', 'elementor' ),
399	]
400	);
401
402	$this->add_control(
403	'text_color_normal',
404	[
405	'label' => esc_html__( 'Color', 'elementor' ),
406	'type' => Controls_Manager::COLOR,
407	'default' => '',
408	'selectors' => [
409	'{{WRAPPER}}' => '--text-color: {{VALUE}};',
410	],
411	]
412	);
413
414	$this->end_controls_tab();
415
416	/**
417	* Hover tab.
418	*/
419	$this->start_controls_tab(
420	'text_hover',
421	[
422	'label' => esc_html__( 'Hover', 'elementor' ),
423	]
424	);
425
426	$this->add_control(
427	'text_color_hover',
428	[
429	'label' => esc_html__( 'Color', 'elementor' ),
430	'type' => Controls_Manager::COLOR,
431	'default' => '',
432	'selectors' => [
433	'{{WRAPPER}}' => '--text-color-hover: {{VALUE}};',
434	],
435	]
436	);
437
438	$this->add_control(
439	'hover_animation',
440	[
441	'label' => esc_html__( 'Hover Animation', 'elementor' ),
442	'type' => Controls_Manager::HOVER_ANIMATION,
443	]
444	);
445
446	$this->add_control(
447	'hover_transition',
448	[
449	'label' => esc_html__( 'Transition Duration', 'elementor' ),
450	'type' => Controls_Manager::SLIDER,
451	'size_units' => [ 's', 'ms' ],
452	'default' => [
453	'unit' => 's',
454	'size' => 0.3,
455	],
456	'selectors' => [
457	'{{WRAPPER}}' => '--transition: {{SIZE}}{{UNIT}}',
458	],
459	]
460	);
461
462	$this->end_controls_tab();
463
464	$this->end_controls_tabs();
465
466	$this->end_controls_section();
467
468	/**
469	* Path styling section.
470	*/
471	$this->start_controls_section(
472	'section_style_path',
473	[
474	'label' => esc_html__( 'Path', 'elementor' ),
475	'tab' => Controls_Manager::TAB_STYLE,
476	'condition' => [
477	'show_path!' => '',
478	],
479	]
480	);
481
482	$this->start_controls_tabs( 'path_style' );
483
484	/**
485	* Normal tab.
486	*/
487	$this->start_controls_tab(
488	'path_normal',
489	[
490	'label' => esc_html__( 'Normal', 'elementor' ),
491	]
492	);
493
494	$this->add_control(
495	'path_fill_normal',
496	[
497	'label' => esc_html__( 'Color', 'elementor' ),
498	'type' => Controls_Manager::COLOR,
499	'default' => '',
500	'selectors' => [
501	'{{WRAPPER}}' => '--path-fill: {{VALUE}};',
502	],
503	]
504	);
505
506	$this->add_control(
507	'stroke_heading_normal',
508	[
509	'label' => esc_html__( 'Stroke', 'elementor' ),
510	'type' => Controls_Manager::HEADING,
511	]
512	);
513
514	$this->add_control(
515	'stroke_color_normal',
516	[
517	'label' => esc_html__( 'Color', 'elementor' ),
518	'type' => Controls_Manager::COLOR,
519	'default' => self::DEFAULT_PATH_FILL,
520	'selectors' => [
521	'{{WRAPPER}}' => '--stroke-color: {{VALUE}};',
522	],
523	]
524	);
525
526	$this->add_control(
527	'stroke_width_normal',
528	[
529	'label' => esc_html__( 'Width', 'elementor' ),
530	'type' => Controls_Manager::SLIDER,
531	'default' => [
532	'size' => 1,
533	'unit' => 'px',
534	],
535	'range' => [
536	'px' => [
537	'min' => 0,
538	'max' => 20,
539	'step' => 1,
540	],
541	],
542	'selectors' => [
543	'{{WRAPPER}}' => '--stroke-width: {{SIZE}}{{UNIT}}',
544	],
545	]
546	);
547
548	$this->end_controls_tab();
549
550	/**
551	* Hover tab.
552	*/
553	$this->start_controls_tab(
554	'path_hover',
555	[
556	'label' => esc_html__( 'Hover', 'elementor' ),
557	]
558	);
559
560	$this->add_control(
561	'path_fill_hover',
562	[
563	'label' => esc_html__( 'Color', 'elementor' ),
564	'type' => Controls_Manager::COLOR,
565	'default' => '',
566	'selectors' => [
567	'{{WRAPPER}}' => '--path-fill-hover: {{VALUE}};',
568	],
569	]
570	);
571
572	$this->add_control(
573	'stroke_heading_hover',
574	[
575	'label' => esc_html__( 'Stroke', 'elementor' ),
576	'type' => Controls_Manager::HEADING,
577	]
578	);
579
580	$this->add_control(
581	'stroke_color_hover',
582	[
583	'label' => esc_html__( 'Color', 'elementor' ),
584	'type' => Controls_Manager::COLOR,
585	'default' => '',
586	'selectors' => [
587	'{{WRAPPER}}' => '--stroke-color-hover: {{VALUE}};',
588	],
589	]
590	);
591
592	$this->add_control(
593	'stroke_width_hover',
594	[
595	'label' => esc_html__( 'Width', 'elementor' ),
596	'type' => Controls_Manager::SLIDER,
597	'default' => [
598	'size' => '',
599	'unit' => 'px',
600	],
601	'range' => [
602	'px' => [
603	'min' => 0,
604	'max' => 20,
605	'step' => 1,
606	],
607	],
608	'selectors' => [
609	'{{WRAPPER}}' => '--stroke-width-hover: {{SIZE}}{{UNIT}}',
610	],
611	]
612	);
613
614	$this->add_control(
615	'stroke_transition',
616	[
617	'label' => esc_html__( 'Transition Duration', 'elementor' ),
618	'type' => Controls_Manager::SLIDER,
619	'size_units' => [ 's', 'ms' ],
620	'default' => [
621	'unit' => 's',
622	'size' => 0.3,
623	],
624	'selectors' => [
625	'{{WRAPPER}}' => '--stroke-transition: {{SIZE}}{{UNIT}}',
626	],
627	]
628	);
629
630	$this->end_controls_tab();
631
632	$this->end_controls_tabs();
633
634	$this->end_controls_section();
635	}
636
637	/**
638	* Register Text Path widget controls.
639	*
640	* Adds different input fields to allow the user to change and customize the widget settings.
641	*
642	* @access protected
643	*/
644	protected function register_controls() {
645	$this->register_content_tab();
646	$this->register_style_tab();
647	}
648
649	/**
650	* Render Text Path widget output on the frontend.
651	*
652	* Written in PHP and used to generate the final HTML.
653	*
654	* @access protected
655	*/
656	protected function render() {
657	$settings = $this->get_settings_for_display();
658
659	// Get the path URL.
660	$path_url = ( 'custom' === $settings['path'] )
661	? wp_get_attachment_url( $settings['custom_path']['id'] )
662	: Shapes_Module::get_path_url( $settings['path'] );
663
664	// Remove the HTTP protocol to prevent Mixed Content error.
665	$path_url = preg_replace( '/^https?:/i', '', $path_url );
666
667	// Add Text Path attributes.
668	$this->add_render_attribute( 'text_path', [
669	'class' => 'e-text-path',
670	'data-text' => esc_attr( $settings['text'] ),
671	'data-url' => esc_url( $path_url ),
672	] );
673
674	// Add hover animation.
675	if ( ! empty( $settings['hover_animation'] ) ) {
676	$this->add_render_attribute( 'text_path', 'class', 'elementor-animation-' . $settings['hover_animation'] );
677	}
678
679	// Render.
680	?>
681	<div <?php $this->print_render_attribute_string( 'text_path' ); ?>></div>
682	<?php
683	}
684	}
685