elementor / includes / widgets / alert.php

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

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