uicore-elements / includes / widgets / highlighted-text.php

highlighted-text.php in UiCore Elements – Free widgets and templates for Elementor 1.2.0, at includes/widgets/highlighted-text.php

614 lines 18.1 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Repeater;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
8	use UiCoreElements\UiCoreWidget;
9
10	defined('ABSPATH') \|\| exit();
11
12	/**
13	* Highlighted Text
14	*
15	* @author Andrei Voica <andrei@uicore.co>
16	* @since 1.0.3
17	*/
18	class HighlightedText extends UiCoreWidget
19	{
20	public function __construct($data = [], $args = null)
21	{
22	parent::__construct($data, $args);
23	}
24
25	public function get_name()
26	{
27	return 'highlighted-text';
28	}
29	public function get_categories()
30	{
31	return ['uicore'];
32	}
33
34	public function get_title()
35	{
36	return __('Highlighted Text', 'uicore-elements');
37	}
38
39	public function get_icon()
40	{
41	return 'eicon-animated-headline ui-e-widget';
42	}
43
44	public function get_keywords()
45	{
46	return [ 'headline', 'heading', 'animation', 'title', 'text' ];
47	}
48
49	public function get_styles() {
50	return [
51	'highlighted-text'
52	];
53	}
54
55	public function get_scripts()
56	{
57	return [
58	'highlighted-text' => [
59	'condition' => [
60	'shape_animation' => 'animate',
61	],
62	// 'deps' => [
63	// 'uicore-frontend',
64	// ],
65	]
66	];
67	}
68
69	protected function register_controls()
70	{
71	$this->start_controls_section(
72	'text_elements',
73	[
74	'label' => __( 'Text', 'uicore-elements' ),
75	]
76	);
77	$repeater = new Repeater();
78
79	$repeater->add_control(
80	'type',
81	[
82	'label' => esc_html__( 'Type', 'uicore-elements' ),
83	'type' => \Elementor\Controls_Manager::SELECT,
84	'default' => 'text',
85	'options' => [
86	'text' => esc_html__( 'Text', 'uicore-elements' ),
87	'icon' => esc_html__( 'Icon', 'uicore-elements' ),
88	'image' => esc_html__( 'Image', 'uicore-elements' ),
89	],
90	'selectors' => [
91	'{{WRAPPER}} .uicore-repeater-selector' => 'border-style: {{VALUE}};',
92	],
93	'render_type' => 'template',
94	]
95	);
96
97	$repeater->add_control(
98	'text',
99	[
100	'label' => __( 'Text', 'uicore-elements' ),
101	'type' => Controls_Manager::TEXT,
102	'label_block' => true,
103	'placeholder' => __( 'Some Text', 'uicore-elements' ),
104	'default' => __( 'Some Text', 'uicore-elements' ),
105	'condition' => [ 'type' => 'text' ],
106	]
107	);
108
109	$repeater->add_control(
110	'headline_style',
111	[
112	'label' => __( 'Highlight Style', 'uicore-elements' ),
113	'type' => Controls_Manager::SELECT,
114	'default' => 'none',
115	'options' => [
116	'none' => __( 'None', 'uicore-elements' ),
117	'color' => __( 'No Stroke', 'uicore-elements' ),
118	'stroke1' => __( 'Stroke 1', 'uicore-elements' ),
119	'stroke2' => __( 'Stroke 2', 'uicore-elements' ),
120	'stroke3' => __( 'Stroke 3', 'uicore-elements' ),
121	'stroke4' => __( 'Stroke 4', 'uicore-elements' ),
122	'stroke5' => __( 'Stroke 5', 'uicore-elements' ),
123	'stroke6' => __( 'Stroke 6', 'uicore-elements' ),
124	'stroke7' => __( 'Stroke 7', 'uicore-elements' ),
125	'stroke8' => __( 'Stroke 8', 'uicore-elements' ),
126	'stroke9' => __( 'Stroke 9', 'uicore-elements' ),
127	],
128	'render_type' => 'template',
129	'condition' => [ 'type' => 'text' ],
130	]
131	);
132
133	$repeater->add_control(
134	'icon',
135	[
136	'label' => esc_html__( 'Icon', 'uicore-elements' ),
137	'type' => \Elementor\Controls_Manager::ICONS,
138	'default' => [
139	'value' => 'fas fa-circle',
140	'library' => 'fa-solid',
141	],
142	'recommended' => [
143	'fa-solid' => [
144	'circle',
145	'dot-circle',
146	'square-full',
147	],
148	'fa-regular' => [
149	'circle',
150	'dot-circle',
151	'square-full',
152	],
153	],
154	'condition' => [ 'type' => 'icon' ],
155	]
156	);
157
158	$repeater->add_control(
159	'icon_color',
160	[
161	'label' => esc_html__( 'Color', 'uicore-elements' ),
162	'type' => \Elementor\Controls_Manager::COLOR,
163	'selectors' => [
164	'{{WRAPPER}} {{CURRENT_ITEM}}.ui-e-highlight-icon, {{WRAPPER}} {{CURRENT_ITEM}}' => 'color: {{VALUE}}; fill: {{VALUE}}', //icon as a font + svg
165
166	],
167	'condition' => [ 'type' => ['icon','text'] ],
168	]
169	);
170	$repeater->add_group_control(
171	\Elementor\Group_Control_Background::get_type(),
172	[
173	'name' => 'background_color',
174	'condition' => [ 'type' => ['icon','text'] ],
175	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.ui-e-highlight-icon, {{WRAPPER}} {{CURRENT_ITEM}} .ui-e-headline-text',
176	]
177	);
178	$repeater->add_control(
179	'background_color_as_text',
180	[
181	'label' => esc_html__( 'Use Background Color as Text Color', 'uicore-elements' ),
182	'type' => \Elementor\Controls_Manager::SWITCHER,
183	'default' => false,
184	'render_type' => 'template',
185	'condition' => [ 'type' => ['icon','text'] ],
186	'selectors' => [
187	'{{WRAPPER}} {{CURRENT_ITEM}}.ui-e-highlight-icon, {{WRAPPER}} {{CURRENT_ITEM}} .ui-e-headline-text' => 'background-color: transparent;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;',
188	],
189	]
190	);
191	$repeater->add_control(
192	'stroke_color',
193	[
194	'label' => esc_html__( 'Stroke Color', 'uicore-elements' ),
195	'type' => \Elementor\Controls_Manager::COLOR,
196	'selectors' => [
197	'{{WRAPPER}} {{CURRENT_ITEM}} svg path' => 'stroke: {{VALUE}}',
198
199	],
200	'condition' => [ 'headline_style!' => ['none','color'] ],
201	]
202	);
203
204	$repeater->add_control(
205	'image',
206	[
207	'label' => esc_html__( 'Choose Image', 'uicore-elements' ),
208	'type' => \Elementor\Controls_Manager::MEDIA,
209	'default' => [
210	'url' => \Elementor\Utils::get_placeholder_image_src(),
211	],
212	'condition' => [ 'type' => 'image' ],
213	]
214	);
215
216	$repeater->add_control(
217	'size',
218	[
219	'label' => __('Size', 'uicore-elements'),
220	'type' => \Elementor\Controls_Manager::SLIDER,
221	'default' => [
222	'size' => 100,
223	'unit' => '%',
224	],
225	'range' => [
226	'%' => [
227	'min' => 0,
228	'max' => 150,
229	],
230	],
231	'selectors' => [
232	'{{WRAPPER}} {{CURRENT_ITEM}}' => '--ui-e-asset-size: calc({{SIZE}} / 100);',
233	],
234	'condition' => [ 'type' => ['icon', 'image'] ],
235	]
236	);
237
238	$this->add_control(
239	'content',
240	[
241	'label' => __( 'Content', 'uicore-elements' ),
242	'type' => Controls_Manager::REPEATER,
243	'fields' => $repeater->get_controls(),
244	'default' => [
245	[
246	'text' => __( 'This is my awesome', 'uicore-elements' ),
247	'headline_style' => 'none',
248	],
249	[
250	'text' => __( 'highlight', 'uicore-elements' ),
251	'headline_style' => 'stroke1',
252	],
253	[
254	'text' => __( 'text.', 'uicore-elements' ),
255	'headline_style' => 'none',
256	],
257	],
258	'title_field' => '{{{ type == "text" ? text : type }}}',
259	'render_type' => 'template',
260	]
261	);
262
263	$this->add_responsive_control(
264	'alignment',
265	[
266	'label' => __( 'Alignment', 'uicore-elements' ),
267	'type' => Controls_Manager::CHOOSE,
268	'options' => [
269	'left' => [
270	'title' => __( 'Left', 'uicore-elements' ),
271	'icon' => 'eicon-text-align-left',
272	],
273	'center' => [
274	'title' => __( 'Center', 'uicore-elements' ),
275	'icon' => 'eicon-text-align-center',
276	],
277	'right' => [
278	'title' => __( 'Right', 'uicore-elements' ),
279	'icon' => 'eicon-text-align-right',
280	],
281	],
282	'default' => 'center',
283	'selectors' => [
284	'{{WRAPPER}}' => 'text-align: {{VALUE}}',
285	],
286	]
287	);
288
289	$this->add_control(
290	'tag',
291	[
292	'label' => __( 'HTML Tag', 'uicore-elements' ),
293	'type' => Controls_Manager::SELECT,
294	'options' => [
295	'h1' => 'H1',
296	'h2' => 'H2',
297	'h3' => 'H3',
298	'h4' => 'H4',
299	'h5' => 'H5',
300	'h6' => 'H6',
301	'div' => 'div',
302	'span' => 'span',
303	'p' => 'p',
304	],
305	'default' => 'h2',
306	]
307	);
308
309	$this->end_controls_section();
310
311	$this->start_controls_section(
312	'section_style_marker',
313	[
314	'label' => __( 'Shape', 'uicore-elements' ),
315	'tab' => Controls_Manager::TAB_STYLE,
316	]
317	);
318
319	$this->add_control(
320	'marker_color',
321	[
322	'label' => __( 'Color', 'uicore-elements' ),
323	'type' => Controls_Manager::COLOR,
324	'global' => [
325	'default' => '#F1F200',
326	],
327	'selectors' => [
328	'{{WRAPPER}} .ui-e-headline-text path' => 'stroke: {{VALUE}}',
329	],
330	]
331	);
332
333	$this->add_control(
334	'stroke_width',
335	[
336	'label' => __( 'Width', 'uicore-elements' ),
337	'type' => Controls_Manager::SLIDER,
338	'range' => [
339	'px' => [
340	'min' => 1,
341	'max' => 100,
342	],
343	],
344	'default' => [
345	'size' => '40',
346	'unit' => 'px'
347	],
348	'selectors' => [
349	'{{WRAPPER}} .ui-e-headline-text path' => 'stroke-width: {{SIZE}}',
350	],
351	]
352	);
353
354	$this->add_control(
355	'vertical_offset',
356	[
357	'label' => __( 'Vertical Offset', 'uicore-elements' ),
358	'type' => Controls_Manager::SLIDER,
359	'range' => [
360	'%' => [
361	'min' => -100,
362	'max' => 100,
363	],
364	'px' => [
365	'min' => -100,
366	'max' => 100,
367	],
368	],
369	'default' => [
370	'size' => '0',
371	'unit' => '%',
372	],
373	'size_units'=>['%', 'px'],
374	'selectors' => [
375	'{{WRAPPER}} .ui-e-headline-text svg' => 'bottom: {{SIZE}}{{UNIT}}',
376	],
377	]
378	);
379	$this->add_control(
380	'shape_animation',
381	[
382	'label' => __( 'Animation', 'uicore-elements' ),
383	'type' => Controls_Manager::SWITCHER,
384	'label_on' => __( 'On', 'uicore-elements' ),
385	'label_off' => __( 'Off', 'uicore-elements' ),
386	'default' => 'animate',
387	'separator' => 'before',
388	'return_value' =>'animate',
389	'prefix_class' => 'ui-e-a-',
390	]
391	);
392
393	$this->add_control(
394	'shape_animation_delay',
395	[
396	'label' => __( 'Animation Delay', 'uicore-elements' ) . ' (ms)',
397	'type' => Controls_Manager::NUMBER,
398	'default' => '',
399	'min' => 0,
400	'step' => 100,
401	'condition' => [
402	'shape_animation' => 'animate',
403	],
404	'render_type' => 'template'
405	]
406	);
407
408
409	$this->end_controls_section();
410
411	$this->start_controls_section(
412	'section_style_text',
413	[
414	'label' => __( 'Headline', 'uicore-elements' ),
415	'tab' => Controls_Manager::TAB_STYLE,
416	]
417	);
418
419	$this->add_control(
420	'title_color',
421	[
422	'label' => __( 'Text Color', 'uicore-elements' ),
423	'type' => Controls_Manager::COLOR,
424	'selectors' => [
425	'{{WRAPPER}} .ui-e-highlight-icon, {{WRAPPER}} .ui-e-headline-text' => 'color: {{VALUE}}',
426	],
427	]
428	);
429
430
431	$this->add_group_control(
432	Group_Control_Typography::get_type(),
433	[
434	'name' => 'title_typography',
435	'selector' => '{{WRAPPER}} .ui-e-highlight-icon, {{WRAPPER}} .ui-e-headline-text, {{WRAPPER}} .ui-e-highlight-image',
436	]
437	);
438
439	$this->add_control(
440	'higlighted_title_color',
441	[
442	'label' => __( 'Highlighted Text Color', 'uicore-elements' ),
443	'type' => Controls_Manager::COLOR,
444	'selectors' => [
445	'{{WRAPPER}} .ui-e-headline-highlighted' => 'color: {{VALUE}}',
446	],
447	]
448	);
449	$this->add_group_control(
450	Group_Control_Typography::get_type(),
451	[
452	'name' => 'higlighted_title_typography',
453	'selector' => '{{WRAPPER}} .ui-e-headline-highlighted',
454	]
455	);
456
457
458	$this->end_controls_section();
459
460
461	}
462
463
464	protected function get_svg($return,$type='')
465	{
466	$paths = [
467	'none'=> null,
468	'color'=> null,
469	'stroke1'=>"<path d='M15.2,133.3L15.2,133.3c121.9-7.6,244-9.9,366.1-6.8c34.6,0.9,69.1,2.3,103.7,4'/>",
470
471	'stroke2'=>"<path d='M479,122c-13.3-1-26.8-1-40.4-2.3c-31.8-1.2-63.7,0.4-95.3,0.6c-38.5,1.5-77,2.3-115.5,5.2
472	c-41.6,1.2-83.3,5-124.9,5.2c-5.4,0.4-11,1-16.4,0.8c-21.9-0.4-44.1,1.9-65.6-3.5'/>",
473
474	'stroke3'=>"<path d='M15,133.4c19-12.7,48.1-11.4,69.2-8.2
475	c6.3,1.1,12.9,2.1,19.2,3.4c16.5,3.2,33.5,6.3,50.6,5.5c12.7-0.6,24.9-3.4,36.7-6.1c11-2.5,22.4-5.1,34.2-5.9
476	c24.3-1.9,48.5,3.4,71.9,8.4c27.6,6.1,53.8,11.8,80.4,6.8c9.9-1.9,19.2-5.3,28.3-8.4c8.2-3,16.9-5.9,25.9-8
477	c20.3-4.4,45.8-1.1,53.6,12.2'/>",
478
479	'stroke4'=>"<path d='M18,122.6c42.3-4.6,87.4-5.1,130.3-1.6'/>
480	<path d='M166.7,121.3c29.6,1.6,60,3.3,90.1,1.8c12.4-0.5,24.8-1.6,36.9-2.7c7.3-0.7,14.8-1.3,22.3-1.8
481	c55.5-4.2,112.6-1.8,166,1.1'/>
482	<path d='M57.8,133c30.8-0.7,62,1.1,92.1,2.7c30.5,1.8,62,3.6,93.2,2.7c20.4-0.5,41.1-2.4,61.1-4
483	c37.6-3.1,76.5-6.4,113.7-2'/>",
484
485	'stroke5'=>"<path d='M53.4,135.8c-12.8-1.5-25.6-1.3-38.3,0.7'/>
486	<path d='M111.2,136c-12.2-0.2-24.4-0.5-36.7-0.8'/>
487	<path d='M163.3,135.2c-12.2,0.2-24.4,0.5-36.6,0.8'/>
488	<path d='M217.8,134.7c-12.5,0.6-24.9,1.2-37.4,1.8'/>
489	<path d='M274.7,135.5c-12.8,0.1-25.5,0.1-38.3,0.2'/>
490	<path d='M327.6,135.1c-13.6-0.8-27.2-0.3-40.7,1.4'/>
491	<path d='M378.8,134.7c-12.2,0.6-24.4,1.2-36.6,1.8'/>
492	<path d='M432.5,136.4c-12.2-0.6-24.4-1.1-36.6-1.7'/>
493	<path d='M487.9,136.1c-11.6-1.3-23.3-1.4-35-0.2'/>",
494
495	'stroke6'=>"<path d='M14.4,111.6c0,0,202.9-33.7,471.2,0c0,0-194-8.9-397.3,24.7c0,0,141.9-5.9,309.2,0'/>",
496
497	'stroke7'=>"<path d='M15.2 133.3H485'/>",
498	'stroke8'=>'<path d="M1.65186 148.981C1.65186 148.981 73.8781 98.5943 206.859 93.0135C339.841 87.4327 489.874 134.065 489.874 134.065"/>',
499	'stroke9'=>'<path d="M7 74.5C7 74.5 104 127 252 117C400 107 494.5 49 494.5 49C494.5 49 473.5 59 461.5 74.5C449.5 90 449.5 107 449.5 107"/>
500	<path d="M20.5 101.5C20.5 101.5 93 133.5 180.5 142.5C268 151.5 347 127.5 347 127.5"/>'
501	];
502
503	if($return === 'list'){
504	foreach($paths as $name => $path){
505	if($name === 'none'){
506	$svg[$name] = "";
507	}else{
508	$svg[$name] = '<span class="uicore-svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none">'.$path.'</svg></span>';
509	}
510	}
511	}else{
512	if($type === 'none'){
513	$svg = "";
514	}else{
515	$svg = '<span class="uicore-svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none">'.$paths[$type].'</svg></span>';
516	}
517	}
518
519	return $svg;
520	}
521
522	protected function render()
523	{
524	$settings = $this->get_settings_for_display();
525	$tag = $settings['tag'];
526	$content = $settings['content'];
527	$delay = $settings['shape_animation_delay'];
528	?>
529	<<?php echo esc_html($tag); echo $delay ? ' data-delay="'.esc_attr($delay).'"' : ''; ?> class="ui-e--highlighted-text" >
530	<?php
531
532
533	foreach($content as $item){
534	$svg_markup = null;
535	switch ($item['type']) {
536	case 'text':
537	if($item['headline_style'] === 'none'){
538	echo '<span class="ui-e-headline-text elementor-repeater-item-'
539	. esc_attr($item['_id']) . '">'
540	. Helper::esc_string($item['text']) //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
541	. '</span>';
542	}else{
543	$svg_markup = $this->get_svg('single',$item['headline_style']);
544	echo '<span class="ui-e-headline-text elementor-repeater-item-'
545	. esc_attr($item['_id'])
546	. ' ui-e-headline-'.esc_attr($item['headline_style']).'">
547	<span class="whitespace"></span>
548	<span>
549	<span class="ui-e-headline-text ui-e-headline-highlighted">'
550	. Helper::esc_string($item['text']) //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
551	.'</span>'
552	. Helper::esc_svg($svg_markup) //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
553	.'</span> <span class="whitespace"> </span></span>';
554	}
555	break;
556	case 'icon':
557	echo "<span class='ui-e-highlight-icon elementor-repeater-item-" . esc_attr($item['_id']) . "'>";
558	\Elementor\Icons_Manager::render_icon($item['icon'], ['aria-hidden' => 'true', 'class'=>'char']);
559	echo "</span>";
560	break;
561	case 'image':
562	echo '<span class="ui-e-highlight-image elementor-repeater-item-' . esc_attr($item['_id']) . '">'.wp_get_attachment_image($item['image']['id'], "medium", false, ["loading" => false, "class"=>'char']).'</span>';
563	break;
564	default:
565	break;
566	}
567
568	}
569	?>
570	</<?php echo esc_html($tag); ?>>
571	<?php
572
573	}
574	protected function content_template() {
575	?>
576	<#
577	var svgs = <?php echo wp_json_encode($this->get_svg('list')); ?>;
578	#>
579	<{{{ settings.tag }}} class="ui-e--highlighted-text">
580	<#
581	settings.content.forEach( function (item){
582	switch (item.type) {
583	case 'text':
584	if(item.headline_style === 'none'){
585	#><span class="ui-e-headline-text elementor-repeater-item-{{{ item._id }}}">{{{ item.text }}}</span><#
586	}else{
587	#><span class="ui-e-headline-text {{{ 'ui-e-headline-' + item.headline_style }}} elementor-repeater-item-{{{ item._id }}}"><span class="whitespace"> </span><span><span class="ui-e-headline-text ui-e-headline-highlighted">{{{ item.text }}}</span>{{{svgs[item.headline_style]}}}</span><span class="whitespace"> </span></span><#
588	}
589	break;
590	case 'icon':
591	#><span class="char ui-e-highlight-icon elementor-repeater-item-{{{ item._id }}}">{{{ elementor.helpers.renderIcon( view, item.icon, { 'aria-hidden': true }, 'i' , 'value' ) }}}</span><#
592	break;
593	case 'image':
594	var image = {
595	id: item.image.id,
596	url: item.image.url,
597	size: item.thumbnail_size,
598	dimension: item.thumbnail_custom_dimension,
599	model: view.getEditModel()
600	};
601	var image_url = elementor.imagesManager.getImageUrl( image );
602	#><span class="ui-e-highlight-image elementor-repeater-item-{{{ item._id }}}"><img class="char" src="{{{ image_url }}}" /></span><#
603	break;
604	default:
605	break;
606	}
607	});
608	#>
609	</{{{ settings.tag }}}>
610	<?php
611	}
612	}
613	\Elementor\Plugin::instance()->widgets_manager->register(new HighlightedText());
614