elementor / includes / widgets / alert.php

alert.php in Elementor Website Builder – more than just a page builder 3.11.5, at includes/widgets/alert.php

543 lines 12.8 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
5	use Elementor\Icons_Manager;
6
7	if ( ! defined( 'ABSPATH' ) ) {
8	exit; // Exit if accessed directly.
9	}
10
11	/**
12	* Elementor alert widget.
13	*
14	* Elementor widget that displays a collapsible display of content in an toggle
15	* style, allowing the user to open multiple items.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Alert extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve alert widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'alert';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve alert widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Alert', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve alert widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-alert';
61	}
62
63	/**
64	* Get widget keywords.
65	*
66	* Retrieve the list of keywords the widget belongs to.
67	*
68	* @since 2.1.0
69	* @access public
70	*
71	* @return array Widget keywords.
72	*/
73	public function get_keywords() {
74	return [ 'alert', 'notice', 'message' ];
75	}
76
77	/**
78	* Register alert widget controls.
79	*
80	* Adds different input fields to allow the user to change and customize the widget settings.
81	*
82	* @since 3.1.0
83	* @access protected
84	*/
85	protected function register_controls() {
86	$this->start_controls_section(
87	'section_alert',
88	[
89	'label' => esc_html__( 'Alert', 'elementor' ),
90	]
91	);
92
93	$this->add_control(
94	'alert_type',
95	[
96	'label' => esc_html__( 'Type', 'elementor' ),
97	'type' => Controls_Manager::SELECT,
98	'default' => 'info',
99	'options' => [
100	'info' => esc_html__( 'Info', 'elementor' ),
101	'success' => esc_html__( 'Success', 'elementor' ),
102	'warning' => esc_html__( 'Warning', 'elementor' ),
103	'danger' => esc_html__( 'Danger', 'elementor' ),
104	],
105	'style_transfer' => true,
106	]
107	);
108
109	$this->add_control(
110	'alert_title',
111	[
112	'label' => esc_html__( 'Title & Description', 'elementor' ),
113	'type' => Controls_Manager::TEXT,
114	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
115	'default' => esc_html__( 'This is an Alert', 'elementor' ),
116	'label_block' => true,
117	'dynamic' => [
118	'active' => true,
119	],
120	]
121	);
122
123	$this->add_control(
124	'alert_description',
125	[
126	'label' => esc_html__( 'Content', 'elementor' ),
127	'type' => Controls_Manager::TEXTAREA,
128	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
129	'default' => esc_html__( 'I am a description. Click the edit button to change this text.', 'elementor' ),
130	'separator' => 'none',
131	'show_label' => false,
132	'dynamic' => [
133	'active' => true,
134	],
135	]
136	);
137
138	$this->add_control(
139	'show_dismiss',
140	[
141	'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
142	'type' => Controls_Manager::SELECT,
143	'default' => 'show',
144	'options' => [
145	'show' => esc_html__( 'Show', 'elementor' ),
146	'hide' => esc_html__( 'Hide', 'elementor' ),
147	],
148	]
149	);
150
151	$this->add_control(
152	'dismiss_icon',
153	[
154	'label' => esc_html__( 'Icon', 'elementor' ),
155	'type' => Controls_Manager::ICONS,
156	'fa4compatibility' => 'icon',
157	'skin' => 'inline',
158	'label_block' => false,
159	'render_type' => 'template',
160	'skin_settings' => [
161	'inline' => [
162	'none' => [
163	'label' => 'Default',
164	'icon' => 'eicon-close',
165	],
166	'icon' => [
167	'icon' => 'eicon-star',
168	],
169	],
170	],
171	'recommended' => [
172	'fa-regular' => [
173	'times-circle',
174	],
175	'fa-solid' => [
176	'times',
177	'times-circle',
178	],
179	],
180	'condition' => [
181	'show_dismiss' => 'show',
182	],
183	]
184	);
185
186	$this->add_control(
187	'view',
188	[
189	'label' => esc_html__( 'View', 'elementor' ),
190	'type' => Controls_Manager::HIDDEN,
191	'default' => 'traditional',
192	]
193	);
194
195	$this->end_controls_section();
196
197	$this->start_controls_section(
198	'section_type',
199	[
200	'label' => esc_html__( 'Alert', 'elementor' ),
201	'tab' => Controls_Manager::TAB_STYLE,
202	]
203	);
204
205	$this->add_control(
206	'background',
207	[
208	'label' => esc_html__( 'Background Color', 'elementor' ),
209	'type' => Controls_Manager::COLOR,
210	'selectors' => [
211	'{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
212	],
213	]
214	);
215
216	$this->add_control(
217	'border_color',
218	[
219	'label' => esc_html__( 'Border Color', 'elementor' ),
220	'type' => Controls_Manager::COLOR,
221	'selectors' => [
222	'{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',
223	],
224	]
225	);
226
227	$this->add_control(
228	'border_left-width',
229	[
230	'label' => esc_html__( 'Left Border Width', 'elementor' ),
231	'type' => Controls_Manager::SLIDER,
232	'size_units' => [ 'px', '%', 'em' ],
233	'range' => [
234	'px' => [
235	'max' => 100,
236	],
237	'em' => [
238	'max' => 10,
239	],
240	],
241	'selectors' => [
242	'{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
243	],
244	]
245	);
246
247	$this->end_controls_section();
248
249	$this->start_controls_section(
250	'section_title',
251	[
252	'label' => esc_html__( 'Title', 'elementor' ),
253	'tab' => Controls_Manager::TAB_STYLE,
254	]
255	);
256
257	$this->add_control(
258	'title_color',
259	[
260	'label' => esc_html__( 'Text Color', 'elementor' ),
261	'type' => Controls_Manager::COLOR,
262	'selectors' => [
263	'{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
264	],
265	]
266	);
267
268	$this->add_group_control(
269	Group_Control_Typography::get_type(),
270	[
271	'name' => 'alert_title',
272	'selector' => '{{WRAPPER}} .elementor-alert-title',
273	'global' => [
274	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
275	],
276	]
277	);
278
279	$this->add_group_control(
280	Group_Control_Text_Shadow::get_type(),
281	[
282	'name' => 'title_shadow',
283	'selector' => '{{WRAPPER}} .elementor-alert-title',
284	]
285	);
286
287	$this->end_controls_section();
288
289	$this->start_controls_section(
290	'section_description',
291	[
292	'label' => esc_html__( 'Description', 'elementor' ),
293	'tab' => Controls_Manager::TAB_STYLE,
294	]
295	);
296
297	$this->add_control(
298	'description_color',
299	[
300	'label' => esc_html__( 'Text Color', 'elementor' ),
301	'type' => Controls_Manager::COLOR,
302	'selectors' => [
303	'{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
304	],
305	]
306	);
307
308	$this->add_group_control(
309	Group_Control_Typography::get_type(),
310	[
311	'name' => 'alert_description',
312	'selector' => '{{WRAPPER}} .elementor-alert-description',
313	'global' => [
314	'default' => Global_Typography::TYPOGRAPHY_TEXT,
315	],
316	]
317	);
318
319	$this->add_group_control(
320	Group_Control_Text_Shadow::get_type(),
321	[
322	'name' => 'description_shadow',
323	'selector' => '{{WRAPPER}} .elementor-alert-description',
324	]
325	);
326
327	$this->end_controls_section();
328
329	$this->start_controls_section(
330	'section_dismiss_icon',
331	[
332	'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
333	'tab' => Controls_Manager::TAB_STYLE,
334	'condition' => [
335	'show_dismiss' => 'show',
336	],
337	]
338	);
339
340	$this->add_responsive_control(
341	'dismiss_icon_size',
342	[
343	'label' => esc_html__( 'Size', 'elementor' ),
344	'type' => Controls_Manager::SLIDER,
345	'range' => [
346	'px' => [
347	'min' => 0,
348	'max' => 100,
349	],
350	],
351	'selectors' => [
352	'{{WRAPPER}}' => '--dismiss-icon-size: {{SIZE}}{{UNIT}};',
353	],
354	]
355	);
356
357	$this->add_responsive_control(
358	'dismiss_icon_vertical_position',
359	[
360	'label' => esc_html__( 'Vertical Position', 'elementor' ),
361	'type' => Controls_Manager::SLIDER,
362	'range' => [
363	'px' => [
364	'min' => -100,
365	'max' => 100,
366	],
367	],
368	'size_units' => [ '%', 'px' ],
369	'selectors' => [
370	'{{WRAPPER}}' => '--dismiss-icon-vertical-position: {{SIZE}}{{UNIT}};',
371	],
372	]
373	);
374
375	$this->add_responsive_control(
376	'dismiss_icon_horizontal_position',
377	[
378	'label' => esc_html__( 'Horizontal Position', 'elementor' ),
379	'type' => Controls_Manager::SLIDER,
380	'range' => [
381	'px' => [
382	'min' => -100,
383	'max' => 100,
384	],
385	],
386	'size_units' => [ '%', 'px' ],
387	'selectors' => [
388	'{{WRAPPER}}' => '--dismiss-icon-horizontal-position: {{SIZE}}{{UNIT}};',
389	],
390	]
391	);
392
393	$this->start_controls_tabs( 'dismiss_icon_colors' );
394
395	$this->start_controls_tab( 'dismiss_icon_normal_colors', [
396	'label' => esc_html__( 'Normal', 'elementor' ),
397	] );
398
399	$this->add_control(
400	'dismiss_icon_normal_color',
401	[
402	'label' => esc_html__( 'Color', 'elementor' ),
403	'type' => Controls_Manager::COLOR,
404	'selectors' => [
405	'{{WRAPPER}}' => '--dismiss-icon-normal-color: {{VALUE}};',
406	],
407	]
408	);
409
410	$this->end_controls_tab();
411
412	$this->start_controls_tab( 'dismiss_icon_hover_colors', [
413	'label' => esc_html__( 'Hover', 'elementor' ),
414	] );
415
416	$this->add_control(
417	'dismiss_icon_hover_color',
418	[
419	'label' => esc_html__( 'Color', 'elementor' ),
420	'type' => Controls_Manager::COLOR,
421	'selectors' => [
422	'{{WRAPPER}}' => '--dismiss-icon-hover-color: {{VALUE}};',
423	],
424	]
425	);
426
427	$this->add_control(
428	'dismiss_icon_hover_transition_duration',
429	[
430	'label' => esc_html__( 'Transition Duration', 'elementor' ),
431	'type' => Controls_Manager::SLIDER,
432	'range' => [
433	'px' => [
434	'max' => 3,
435	'step' => 0.1,
436	],
437	],
438	'selectors' => [
439	'{{WRAPPER}}' => '--dismiss-icon-hover-transition-duration: {{SIZE}}s',
440	],
441	]
442	);
443
444	$this->end_controls_tab();
445
446	$this->end_controls_tabs();
447
448	$this->end_controls_section();
449	}
450
451	/**
452	* Render alert widget output on the frontend.
453	*
454	* Written in PHP and used to generate the final HTML.
455	*
456	* @since 1.0.0
457	* @access protected
458	*/
459	protected function render() {
460	$settings = $this->get_settings_for_display();
461
462	if ( Utils::is_empty( $settings['alert_title'] ) ) {
463	return;
464	}
465
466	if ( ! empty( $settings['alert_type'] ) ) {
467	$this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
468	}
469
470	$this->add_render_attribute( 'wrapper', 'role', 'alert' );
471
472	$this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
473
474	$this->add_inline_editing_attributes( 'alert_title', 'none' );
475	?>
476	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
477	<span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php $this->print_unescaped_setting( 'alert_title' ); ?></span>
478	<?php
479	if ( ! Utils::is_empty( $settings['alert_description'] ) ) :
480	$this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
481
482	$this->add_inline_editing_attributes( 'alert_description' );
483	?>
484	<span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php $this->print_unescaped_setting( 'alert_description' ); ?></span>
485	<?php endif; ?>
486	<?php if ( 'show' === $settings['show_dismiss'] ) : ?>
487	<button type="button" class="elementor-alert-dismiss">
488	<?php
489	if ( ! empty( $settings['dismiss_icon']['value'] ) ) {
490	Icons_Manager::render_icon( $settings['dismiss_icon'], [
491	'aria-hidden' => 'true',
492	] );
493	} else { ?>
494	<span aria-hidden="true">×</span>
495	<?php } ?>
496	<span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span>
497	</button>
498	<?php endif; ?>
499	</div>
500	<?php
501	}
502
503	/**
504	* Render alert widget output in the editor.
505	*
506	* Written as a Backbone JavaScript template and used to generate the live preview.
507	*
508	* @since 2.9.0
509	* @access protected
510	*/
511	protected function content_template() {
512	?>
513	<# if ( settings.alert_title ) {
514	view.addRenderAttribute( {
515	alert_title: { class: 'elementor-alert-title' },
516	alert_description: { class: 'elementor-alert-description' }
517	} );
518
519	view.addInlineEditingAttributes( 'alert_title', 'none' );
520	view.addInlineEditingAttributes( 'alert_description' );
521
522	var iconHTML = elementor.helpers.renderIcon( view, settings.dismiss_icon, { 'aria-hidden': true }, 'i' , 'object' ),
523	migrated = elementor.helpers.isIconMigrated( settings, 'dismiss_icon' );
524	#>
525	<div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
526	<span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
527	<span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
528	<# if ( 'show' === settings.show_dismiss ) { #>
529	<button type="button" class="elementor-alert-dismiss">
530	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
531	{{{ iconHTML.value }}}
532	<# } else { #>
533	<span aria-hidden="true">×</span>
534	<# } #>
535	<span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span>
536	</button>
537	<# } #>
538	</div>
539	<# } #>
540	<?php
541	}
542	}
543