elementor / includes / widgets / alert.php

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

542 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', '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	'dynamic' => [
132	'active' => true,
133	],
134	]
135	);
136
137	$this->add_control(
138	'show_dismiss',
139	[
140	'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
141	'type' => Controls_Manager::SELECT,
142	'default' => 'show',
143	'options' => [
144	'show' => esc_html__( 'Show', 'elementor' ),
145	'hide' => esc_html__( 'Hide', 'elementor' ),
146	],
147	]
148	);
149
150	$this->add_control(
151	'dismiss_icon',
152	[
153	'label' => esc_html__( 'Icon', 'elementor' ),
154	'type' => Controls_Manager::ICONS,
155	'fa4compatibility' => 'icon',
156	'skin' => 'inline',
157	'label_block' => false,
158	'render_type' => 'template',
159	'skin_settings' => [
160	'inline' => [
161	'none' => [
162	'label' => 'Default',
163	'icon' => 'eicon-close',
164	],
165	'icon' => [
166	'icon' => 'eicon-star',
167	],
168	],
169	],
170	'recommended' => [
171	'fa-regular' => [
172	'times-circle',
173	],
174	'fa-solid' => [
175	'times',
176	'times-circle',
177	],
178	],
179	'condition' => [
180	'show_dismiss' => 'show',
181	],
182	]
183	);
184
185	$this->add_control(
186	'view',
187	[
188	'label' => esc_html__( 'View', 'elementor' ),
189	'type' => Controls_Manager::HIDDEN,
190	'default' => 'traditional',
191	]
192	);
193
194	$this->end_controls_section();
195
196	$this->start_controls_section(
197	'section_type',
198	[
199	'label' => esc_html__( 'Alert', 'elementor' ),
200	'tab' => Controls_Manager::TAB_STYLE,
201	]
202	);
203
204	$this->add_control(
205	'background',
206	[
207	'label' => esc_html__( 'Background Color', 'elementor' ),
208	'type' => Controls_Manager::COLOR,
209	'selectors' => [
210	'{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
211	],
212	]
213	);
214
215	$this->add_control(
216	'border_color',
217	[
218	'label' => esc_html__( 'Border Color', 'elementor' ),
219	'type' => Controls_Manager::COLOR,
220	'selectors' => [
221	'{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',
222	],
223	]
224	);
225
226	$this->add_control(
227	'border_left-width',
228	[
229	'label' => esc_html__( 'Left Border Width', 'elementor' ),
230	'type' => Controls_Manager::SLIDER,
231	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
232	'range' => [
233	'px' => [
234	'max' => 100,
235	],
236	'em' => [
237	'max' => 10,
238	],
239	],
240	'selectors' => [
241	'{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
242	],
243	]
244	);
245
246	$this->end_controls_section();
247
248	$this->start_controls_section(
249	'section_title',
250	[
251	'label' => esc_html__( 'Title', 'elementor' ),
252	'tab' => Controls_Manager::TAB_STYLE,
253	]
254	);
255
256	$this->add_control(
257	'title_color',
258	[
259	'label' => esc_html__( 'Text Color', 'elementor' ),
260	'type' => Controls_Manager::COLOR,
261	'selectors' => [
262	'{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
263	],
264	]
265	);
266
267	$this->add_group_control(
268	Group_Control_Typography::get_type(),
269	[
270	'name' => 'alert_title',
271	'selector' => '{{WRAPPER}} .elementor-alert-title',
272	'global' => [
273	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
274	],
275	]
276	);
277
278	$this->add_group_control(
279	Group_Control_Text_Shadow::get_type(),
280	[
281	'name' => 'title_shadow',
282	'selector' => '{{WRAPPER}} .elementor-alert-title',
283	]
284	);
285
286	$this->end_controls_section();
287
288	$this->start_controls_section(
289	'section_description',
290	[
291	'label' => esc_html__( 'Description', 'elementor' ),
292	'tab' => Controls_Manager::TAB_STYLE,
293	]
294	);
295
296	$this->add_control(
297	'description_color',
298	[
299	'label' => esc_html__( 'Text Color', 'elementor' ),
300	'type' => Controls_Manager::COLOR,
301	'selectors' => [
302	'{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
303	],
304	]
305	);
306
307	$this->add_group_control(
308	Group_Control_Typography::get_type(),
309	[
310	'name' => 'alert_description',
311	'selector' => '{{WRAPPER}} .elementor-alert-description',
312	'global' => [
313	'default' => Global_Typography::TYPOGRAPHY_TEXT,
314	],
315	]
316	);
317
318	$this->add_group_control(
319	Group_Control_Text_Shadow::get_type(),
320	[
321	'name' => 'description_shadow',
322	'selector' => '{{WRAPPER}} .elementor-alert-description',
323	]
324	);
325
326	$this->end_controls_section();
327
328	$this->start_controls_section(
329	'section_dismiss_icon',
330	[
331	'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
332	'tab' => Controls_Manager::TAB_STYLE,
333	'condition' => [
334	'show_dismiss' => 'show',
335	],
336	]
337	);
338
339	$this->add_responsive_control(
340	'dismiss_icon_size',
341	[
342	'label' => esc_html__( 'Size', 'elementor' ),
343	'type' => Controls_Manager::SLIDER,
344	'range' => [
345	'px' => [
346	'min' => 0,
347	'max' => 100,
348	],
349	],
350	'selectors' => [
351	'{{WRAPPER}}' => '--dismiss-icon-size: {{SIZE}}{{UNIT}};',
352	],
353	]
354	);
355
356	$this->add_responsive_control(
357	'dismiss_icon_vertical_position',
358	[
359	'label' => esc_html__( 'Vertical Position', 'elementor' ),
360	'type' => Controls_Manager::SLIDER,
361	'range' => [
362	'px' => [
363	'min' => -100,
364	'max' => 100,
365	],
366	],
367	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
368	'selectors' => [
369	'{{WRAPPER}}' => '--dismiss-icon-vertical-position: {{SIZE}}{{UNIT}};',
370	],
371	]
372	);
373
374	$this->add_responsive_control(
375	'dismiss_icon_horizontal_position',
376	[
377	'label' => esc_html__( 'Horizontal Position', 'elementor' ),
378	'type' => Controls_Manager::SLIDER,
379	'range' => [
380	'px' => [
381	'min' => -100,
382	'max' => 100,
383	],
384	],
385	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
386	'selectors' => [
387	'{{WRAPPER}}' => '--dismiss-icon-horizontal-position: {{SIZE}}{{UNIT}};',
388	],
389	]
390	);
391
392	$this->start_controls_tabs( 'dismiss_icon_colors' );
393
394	$this->start_controls_tab( 'dismiss_icon_normal_colors', [
395	'label' => esc_html__( 'Normal', 'elementor' ),
396	] );
397
398	$this->add_control(
399	'dismiss_icon_normal_color',
400	[
401	'label' => esc_html__( 'Color', 'elementor' ),
402	'type' => Controls_Manager::COLOR,
403	'selectors' => [
404	'{{WRAPPER}}' => '--dismiss-icon-normal-color: {{VALUE}};',
405	],
406	]
407	);
408
409	$this->end_controls_tab();
410
411	$this->start_controls_tab( 'dismiss_icon_hover_colors', [
412	'label' => esc_html__( 'Hover', 'elementor' ),
413	] );
414
415	$this->add_control(
416	'dismiss_icon_hover_color',
417	[
418	'label' => esc_html__( 'Color', 'elementor' ),
419	'type' => Controls_Manager::COLOR,
420	'selectors' => [
421	'{{WRAPPER}}' => '--dismiss-icon-hover-color: {{VALUE}};',
422	],
423	]
424	);
425
426	$this->add_control(
427	'dismiss_icon_hover_transition_duration',
428	[
429	'label' => esc_html__( 'Transition Duration', 'elementor' ),
430	'type' => Controls_Manager::SLIDER,
431	'range' => [
432	'px' => [
433	'max' => 3,
434	'step' => 0.1,
435	],
436	],
437	'selectors' => [
438	'{{WRAPPER}}' => '--dismiss-icon-hover-transition-duration: {{SIZE}}s',
439	],
440	]
441	);
442
443	$this->end_controls_tab();
444
445	$this->end_controls_tabs();
446
447	$this->end_controls_section();
448	}
449
450	/**
451	* Render alert widget output on the frontend.
452	*
453	* Written in PHP and used to generate the final HTML.
454	*
455	* @since 1.0.0
456	* @access protected
457	*/
458	protected function render() {
459	$settings = $this->get_settings_for_display();
460
461	if ( Utils::is_empty( $settings['alert_title'] ) ) {
462	return;
463	}
464
465	if ( ! empty( $settings['alert_type'] ) ) {
466	$this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
467	}
468
469	$this->add_render_attribute( 'wrapper', 'role', 'alert' );
470
471	$this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
472
473	$this->add_inline_editing_attributes( 'alert_title', 'none' );
474	?>
475	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
476	<span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php $this->print_unescaped_setting( 'alert_title' ); ?></span>
477	<?php
478	if ( ! Utils::is_empty( $settings['alert_description'] ) ) :
479	$this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
480
481	$this->add_inline_editing_attributes( 'alert_description' );
482	?>
483	<span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php $this->print_unescaped_setting( 'alert_description' ); ?></span>
484	<?php endif; ?>
485	<?php if ( 'show' === $settings['show_dismiss'] ) : ?>
486	<button type="button" class="elementor-alert-dismiss">
487	<?php
488	if ( ! empty( $settings['dismiss_icon']['value'] ) ) {
489	Icons_Manager::render_icon( $settings['dismiss_icon'], [
490	'aria-hidden' => 'true',
491	] );
492	} else { ?>
493	<span aria-hidden="true">×</span>
494	<?php } ?>
495	<span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss this alert.', 'elementor' ); ?></span>
496	</button>
497	<?php endif; ?>
498	</div>
499	<?php
500	}
501
502	/**
503	* Render alert widget output in the editor.
504	*
505	* Written as a Backbone JavaScript template and used to generate the live preview.
506	*
507	* @since 2.9.0
508	* @access protected
509	*/
510	protected function content_template() {
511	?>
512	<# if ( settings.alert_title ) {
513	view.addRenderAttribute( {
514	alert_title: { class: 'elementor-alert-title' },
515	alert_description: { class: 'elementor-alert-description' }
516	} );
517
518	view.addInlineEditingAttributes( 'alert_title', 'none' );
519	view.addInlineEditingAttributes( 'alert_description' );
520
521	var iconHTML = elementor.helpers.renderIcon( view, settings.dismiss_icon, { 'aria-hidden': true }, 'i' , 'object' ),
522	migrated = elementor.helpers.isIconMigrated( settings, 'dismiss_icon' );
523	#>
524	<div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
525	<span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
526	<span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
527	<# if ( 'show' === settings.show_dismiss ) { #>
528	<button type="button" class="elementor-alert-dismiss">
529	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
530	{{{ iconHTML.value }}}
531	<# } else { #>
532	<span aria-hidden="true">×</span>
533	<# } #>
534	<span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss this alert.', 'elementor' ); ?></span>
535	</button>
536	<# } #>
537	</div>
538	<# } #>
539	<?php
540	}
541	}
542