elementor / includes / widgets / alert.php

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

540 lines 12.7 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	'range' => [
233	'px' => [
234	'min' => 0,
235	'max' => 100,
236	],
237	],
238	'selectors' => [
239	'{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
240	],
241	]
242	);
243
244	$this->end_controls_section();
245
246	$this->start_controls_section(
247	'section_title',
248	[
249	'label' => esc_html__( 'Title', 'elementor' ),
250	'tab' => Controls_Manager::TAB_STYLE,
251	]
252	);
253
254	$this->add_control(
255	'title_color',
256	[
257	'label' => esc_html__( 'Text Color', 'elementor' ),
258	'type' => Controls_Manager::COLOR,
259	'selectors' => [
260	'{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
261	],
262	]
263	);
264
265	$this->add_group_control(
266	Group_Control_Typography::get_type(),
267	[
268	'name' => 'alert_title',
269	'selector' => '{{WRAPPER}} .elementor-alert-title',
270	'global' => [
271	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
272	],
273	]
274	);
275
276	$this->add_group_control(
277	Group_Control_Text_Shadow::get_type(),
278	[
279	'name' => 'title_shadow',
280	'selector' => '{{WRAPPER}} .elementor-alert-title',
281	]
282	);
283
284	$this->end_controls_section();
285
286	$this->start_controls_section(
287	'section_description',
288	[
289	'label' => esc_html__( 'Description', 'elementor' ),
290	'tab' => Controls_Manager::TAB_STYLE,
291	]
292	);
293
294	$this->add_control(
295	'description_color',
296	[
297	'label' => esc_html__( 'Text Color', 'elementor' ),
298	'type' => Controls_Manager::COLOR,
299	'selectors' => [
300	'{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
301	],
302	]
303	);
304
305	$this->add_group_control(
306	Group_Control_Typography::get_type(),
307	[
308	'name' => 'alert_description',
309	'selector' => '{{WRAPPER}} .elementor-alert-description',
310	'global' => [
311	'default' => Global_Typography::TYPOGRAPHY_TEXT,
312	],
313	]
314	);
315
316	$this->add_group_control(
317	Group_Control_Text_Shadow::get_type(),
318	[
319	'name' => 'description_shadow',
320	'selector' => '{{WRAPPER}} .elementor-alert-description',
321	]
322	);
323
324	$this->end_controls_section();
325
326	$this->start_controls_section(
327	'section_dismiss_icon',
328	[
329	'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
330	'tab' => Controls_Manager::TAB_STYLE,
331	'condition' => [
332	'show_dismiss' => 'show',
333	],
334	]
335	);
336
337	$this->add_responsive_control(
338	'dismiss_icon_size',
339	[
340	'label' => esc_html__( 'Size', 'elementor' ),
341	'type' => Controls_Manager::SLIDER,
342	'range' => [
343	'px' => [
344	'min' => 0,
345	'max' => 100,
346	],
347	],
348	'selectors' => [
349	'{{WRAPPER}}' => '--dismiss-icon-size: {{SIZE}}{{UNIT}};',
350	],
351	]
352	);
353
354	$this->add_responsive_control(
355	'dismiss_icon_vertical_position',
356	[
357	'label' => esc_html__( 'Vertical Position', 'elementor' ),
358	'type' => Controls_Manager::SLIDER,
359	'range' => [
360	'px' => [
361	'min' => -100,
362	'max' => 100,
363	],
364	],
365	'size_units' => [ '%', 'px' ],
366	'selectors' => [
367	'{{WRAPPER}}' => '--dismiss-icon-vertical-position: {{SIZE}}{{UNIT}};',
368	],
369	]
370	);
371
372	$this->add_responsive_control(
373	'dismiss_icon_horizontal_position',
374	[
375	'label' => esc_html__( 'Horizontal Position', 'elementor' ),
376	'type' => Controls_Manager::SLIDER,
377	'range' => [
378	'px' => [
379	'min' => -100,
380	'max' => 100,
381	],
382	],
383	'size_units' => [ '%', 'px' ],
384	'selectors' => [
385	'{{WRAPPER}}' => '--dismiss-icon-horizontal-position: {{SIZE}}{{UNIT}};',
386	],
387	]
388	);
389
390	$this->start_controls_tabs( 'dismiss_icon_colors' );
391
392	$this->start_controls_tab( 'dismiss_icon_normal_colors', [
393	'label' => esc_html__( 'Normal', 'elementor' ),
394	] );
395
396	$this->add_control(
397	'dismiss_icon_normal_color',
398	[
399	'label' => esc_html__( 'Color', 'elementor' ),
400	'type' => Controls_Manager::COLOR,
401	'selectors' => [
402	'{{WRAPPER}}' => '--dismiss-icon-normal-color: {{VALUE}};',
403	],
404	]
405	);
406
407	$this->end_controls_tab();
408
409	$this->start_controls_tab( 'dismiss_icon_hover_colors', [
410	'label' => esc_html__( 'Hover', 'elementor' ),
411	] );
412
413	$this->add_control(
414	'dismiss_icon_hover_color',
415	[
416	'label' => esc_html__( 'Color', 'elementor' ),
417	'type' => Controls_Manager::COLOR,
418	'selectors' => [
419	'{{WRAPPER}}' => '--dismiss-icon-hover-color: {{VALUE}};',
420	],
421	]
422	);
423
424	$this->add_control(
425	'dismiss_icon_hover_transition_duration',
426	[
427	'label' => esc_html__( 'Transition Duration', 'elementor' ),
428	'type' => Controls_Manager::SLIDER,
429	'selectors' => [
430	'{{WRAPPER}}' => '--dismiss-icon-hover-transition-duration: {{SIZE}}s',
431	],
432	'range' => [
433	'px' => [
434	'max' => 3,
435	'step' => 0.1,
436	],
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 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 alert', 'elementor' ); ?></span>
533	</button>
534	<# } #>
535	</div>
536	<# } #>
537	<?php
538	}
539	}
540