PluginProbe
Elementor Website Builder – more than just a page builder / 4.1.3
Elementor Website Builder – more than just a page builder v4.1.3
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
elementor / includes / widgets / alert.php

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

595 lines 14.0 KB
No matching file
Up and down to move Enter to open Esc to close
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 protected function is_dynamic_content(): bool {
78 return false;
79 }
80
81 /**
82 * Get style dependencies.
83 *
84 * Retrieve the list of style dependencies the widget requires.
85 *
86 * @since 3.24.0
87 * @access public
88 *
89 * @return array Widget style dependencies.
90 */
91 public function get_style_depends(): array {
92 return [ 'widget-alert' ];
93 }
94
95 public function has_widget_inner_wrapper(): bool {
96 return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
97 }
98
99 /**
100 * Register alert widget controls.
101 *
102 * Adds different input fields to allow the user to change and customize the widget settings.
103 *
104 * @since 3.1.0
105 * @access protected
106 */
107 protected function register_controls() {
108 $this->start_controls_section(
109 'section_alert',
110 [
111 'label' => esc_html__( 'Alert', 'elementor' ),
112 ]
113 );
114
115 $this->add_control(
116 'alert_type',
117 [
118 'label' => esc_html__( 'Type', 'elementor' ),
119 'type' => Controls_Manager::SELECT,
120 'default' => 'info',
121 'options' => [
122 'info' => esc_html__( 'Info', 'elementor' ),
123 'success' => esc_html__( 'Success', 'elementor' ),
124 'warning' => esc_html__( 'Warning', 'elementor' ),
125 'danger' => esc_html__( 'Danger', 'elementor' ),
126 ],
127 'prefix_class' => 'elementor-alert-',
128 ]
129 );
130
131 $this->add_control(
132 'alert_title',
133 [
134 'label' => esc_html__( 'Title', 'elementor' ),
135 'type' => Controls_Manager::TEXT,
136 'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
137 'default' => esc_html__( 'This is an Alert', 'elementor' ),
138 'label_block' => true,
139 'dynamic' => [
140 'active' => true,
141 ],
142 ]
143 );
144
145 $this->add_control(
146 'alert_description',
147 [
148 'label' => esc_html__( 'Content', 'elementor' ),
149 'type' => Controls_Manager::TEXTAREA,
150 'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
151 'default' => esc_html__( 'I am a description. Click the edit button to change this text.', 'elementor' ),
152 'dynamic' => [
153 'active' => true,
154 ],
155 ]
156 );
157
158 $this->add_control(
159 'show_dismiss',
160 [
161 'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
162 'type' => Controls_Manager::SWITCHER,
163 'label_on' => esc_html__( 'Show', 'elementor' ),
164 'label_off' => esc_html__( 'Hide', 'elementor' ),
165 'return_value' => 'show',
166 'default' => 'show',
167 ]
168 );
169
170 $this->add_control(
171 'dismiss_icon',
172 [
173 'label' => esc_html__( 'Icon', 'elementor' ),
174 'type' => Controls_Manager::ICONS,
175 'fa4compatibility' => 'icon',
176 'skin' => 'inline',
177 'label_block' => false,
178 'render_type' => 'template',
179 'skin_settings' => [
180 'inline' => [
181 'none' => [
182 'label' => 'Default',
183 'icon' => 'eicon-close',
184 ],
185 'icon' => [
186 'icon' => 'eicon-star',
187 ],
188 ],
189 ],
190 'recommended' => [
191 'fa-regular' => [
192 'times-circle',
193 ],
194 'fa-solid' => [
195 'times',
196 'times-circle',
197 ],
198 ],
199 'condition' => [
200 'show_dismiss' => 'show',
201 ],
202 ]
203 );
204
205 $this->end_controls_section();
206
207 $this->start_controls_section(
208 'section_type',
209 [
210 'label' => esc_html__( 'Alert', 'elementor' ),
211 'tab' => Controls_Manager::TAB_STYLE,
212 ]
213 );
214
215 $this->add_control(
216 'background',
217 [
218 'label' => esc_html__( 'Background Color', 'elementor' ),
219 'type' => Controls_Manager::COLOR,
220 'selectors' => [
221 '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
222 ],
223 ]
224 );
225
226 $this->add_control(
227 'border_color',
228 [
229 'label' => esc_html__( 'Side Border Color', 'elementor' ),
230 'type' => Controls_Manager::COLOR,
231 'selectors' => [
232 '{{WRAPPER}} .elementor-alert' => 'border-inline-start-color: {{VALUE}};',
233 ],
234 ]
235 );
236
237 $this->add_control(
238 'border_left-width',
239 [
240 'label' => esc_html__( 'Side Border Width', 'elementor' ),
241 'type' => Controls_Manager::SLIDER,
242 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
243 'range' => [
244 'px' => [
245 'max' => 100,
246 ],
247 'em' => [
248 'max' => 10,
249 ],
250 ],
251 'selectors' => [
252 '{{WRAPPER}} .elementor-alert' => 'border-inline-start-width: {{SIZE}}{{UNIT}};',
253 ],
254 ]
255 );
256
257 $this->end_controls_section();
258
259 $this->start_controls_section(
260 'section_title',
261 [
262 'label' => esc_html__( 'Title', 'elementor' ),
263 'tab' => Controls_Manager::TAB_STYLE,
264 ]
265 );
266
267 $this->add_control(
268 'title_color',
269 [
270 'label' => esc_html__( 'Text Color', 'elementor' ),
271 'type' => Controls_Manager::COLOR,
272 'selectors' => [
273 '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
274 ],
275 ]
276 );
277
278 $this->add_group_control(
279 Group_Control_Typography::get_type(),
280 [
281 'name' => 'alert_title',
282 'selector' => '{{WRAPPER}} .elementor-alert-title',
283 'global' => [
284 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
285 ],
286 ]
287 );
288
289 $this->add_group_control(
290 Group_Control_Text_Shadow::get_type(),
291 [
292 'name' => 'title_shadow',
293 'selector' => '{{WRAPPER}} .elementor-alert-title',
294 ]
295 );
296
297 $this->end_controls_section();
298
299 $this->start_controls_section(
300 'section_description',
301 [
302 'label' => esc_html__( 'Description', 'elementor' ),
303 'tab' => Controls_Manager::TAB_STYLE,
304 ]
305 );
306
307 $this->add_control(
308 'description_color',
309 [
310 'label' => esc_html__( 'Text Color', 'elementor' ),
311 'type' => Controls_Manager::COLOR,
312 'selectors' => [
313 '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
314 ],
315 ]
316 );
317
318 $this->add_group_control(
319 Group_Control_Typography::get_type(),
320 [
321 'name' => 'alert_description',
322 'selector' => '{{WRAPPER}} .elementor-alert-description',
323 'global' => [
324 'default' => Global_Typography::TYPOGRAPHY_TEXT,
325 ],
326 ]
327 );
328
329 $this->add_group_control(
330 Group_Control_Text_Shadow::get_type(),
331 [
332 'name' => 'description_shadow',
333 'selector' => '{{WRAPPER}} .elementor-alert-description',
334 ]
335 );
336
337 $this->end_controls_section();
338
339 $this->start_controls_section(
340 'section_dismiss_icon',
341 [
342 'label' => esc_html__( 'Dismiss Icon', 'elementor' ),
343 'tab' => Controls_Manager::TAB_STYLE,
344 'condition' => [
345 'show_dismiss' => 'show',
346 ],
347 ]
348 );
349
350 $this->add_responsive_control(
351 'dismiss_icon_size',
352 [
353 'label' => esc_html__( 'Size', 'elementor' ),
354 'type' => Controls_Manager::SLIDER,
355 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
356 'range' => [
357 'px' => [
358 'max' => 100,
359 ],
360 'em' => [
361 'max' => 10,
362 ],
363 'rem' => [
364 'max' => 10,
365 ],
366 ],
367 'selectors' => [
368 '{{WRAPPER}}' => '--dismiss-icon-size: {{SIZE}}{{UNIT}};',
369 ],
370 ]
371 );
372
373 $this->add_responsive_control(
374 'dismiss_icon_vertical_position',
375 [
376 'label' => esc_html__( 'Vertical Position', 'elementor' ),
377 'type' => Controls_Manager::SLIDER,
378 'range' => [
379 'px' => [
380 'min' => -100,
381 'max' => 100,
382 ],
383 ],
384 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
385 'selectors' => [
386 '{{WRAPPER}}' => '--dismiss-icon-vertical-position: {{SIZE}}{{UNIT}};',
387 ],
388 ]
389 );
390
391 $this->add_responsive_control(
392 'dismiss_icon_horizontal_position',
393 [
394 'label' => esc_html__( 'Horizontal Position', 'elementor' ),
395 'type' => Controls_Manager::SLIDER,
396 'range' => [
397 'px' => [
398 'min' => -100,
399 'max' => 100,
400 ],
401 ],
402 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
403 'selectors' => [
404 '{{WRAPPER}}' => '--dismiss-icon-horizontal-position: {{SIZE}}{{UNIT}};',
405 ],
406 ]
407 );
408
409 $this->start_controls_tabs( 'dismiss_icon_colors' );
410
411 $this->start_controls_tab( 'dismiss_icon_normal_colors', [
412 'label' => esc_html__( 'Normal', 'elementor' ),
413 ] );
414
415 $this->add_control(
416 'dismiss_icon_normal_color',
417 [
418 'label' => esc_html__( 'Color', 'elementor' ),
419 'type' => Controls_Manager::COLOR,
420 'selectors' => [
421 '{{WRAPPER}}' => '--dismiss-icon-normal-color: {{VALUE}};',
422 ],
423 ]
424 );
425
426 $this->end_controls_tab();
427
428 $this->start_controls_tab( 'dismiss_icon_hover_colors', [
429 'label' => esc_html__( 'Hover', 'elementor' ),
430 ] );
431
432 $this->add_control(
433 'dismiss_icon_hover_color',
434 [
435 'label' => esc_html__( 'Color', 'elementor' ),
436 'type' => Controls_Manager::COLOR,
437 'selectors' => [
438 '{{WRAPPER}}' => '--dismiss-icon-hover-color: {{VALUE}};',
439 ],
440 ]
441 );
442
443 $this->add_control(
444 'dismiss_icon_hover_transition_duration',
445 [
446 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
447 'type' => Controls_Manager::SLIDER,
448 'range' => [
449 'px' => [
450 'min' => 0,
451 'max' => 3,
452 'step' => 0.1,
453 ],
454 ],
455 'selectors' => [
456 '{{WRAPPER}}' => '--dismiss-icon-hover-transition-duration: {{SIZE}}s',
457 ],
458 ]
459 );
460
461 $this->end_controls_tab();
462
463 $this->end_controls_tabs();
464
465 $this->end_controls_section();
466 }
467
468 /**
469 * Render alert widget output on the frontend.
470 *
471 * Written in PHP and used to generate the final HTML.
472 *
473 * @since 1.0.0
474 * @access protected
475 */
476 protected function render() {
477 $settings = $this->get_settings_for_display();
478
479 if ( Utils::is_empty( $settings['alert_title'] ) && Utils::is_empty( $settings['alert_description'] ) ) {
480 return;
481 }
482
483 $this->add_render_attribute( 'alert_wrapper', 'class', 'elementor-alert' );
484
485 $this->add_render_attribute( 'alert_wrapper', 'role', 'alert' );
486
487 $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
488
489 $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
490
491 $this->add_inline_editing_attributes( 'alert_title', 'none' );
492
493 $this->add_inline_editing_attributes( 'alert_description' );
494 ?>
495 <div <?php $this->print_render_attribute_string( 'alert_wrapper' ); ?>>
496
497 <?php if ( ! Utils::is_empty( $settings['alert_title'] ) ) : ?>
498 <span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php echo wp_kses_post( $settings['alert_title'] ); ?></span>
499 <?php endif; ?>
500
501 <?php if ( ! Utils::is_empty( $settings['alert_description'] ) ) : ?>
502 <span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php echo wp_kses_post( $settings['alert_description'] ); ?></span>
503 <?php endif; ?>
504
505 <?php if ( 'show' === $settings['show_dismiss'] ) : ?>
506 <button type="button" class="elementor-alert-dismiss" aria-label="<?php echo esc_attr__( 'Dismiss this alert.', 'elementor' ); ?>">
507 <?php
508 if ( ! empty( $settings['dismiss_icon']['value'] ) ) {
509 Icons_Manager::render_icon( $settings['dismiss_icon'], [ 'aria-hidden' => 'true' ] );
510 } else { ?>
511 <span aria-hidden="true">&times;</span>
512 <?php } ?>
513 </button>
514 <?php endif; ?>
515
516 </div>
517 <?php
518 }
519
520 /**
521 * Render alert widget output in the editor.
522 *
523 * Written as a Backbone JavaScript template and used to generate the live preview.
524 *
525 * @since 2.9.0
526 * @access protected
527 */
528 public function render_markdown(): string {
529 $settings = $this->get_settings_for_display();
530
531 $title = Utils::html_to_plain_text( $settings['alert_title'] ?? '' );
532 $description = Utils::html_to_plain_text( $settings['alert_description'] ?? '' );
533
534 if ( empty( $title ) && empty( $description ) ) {
535 return '';
536 }
537
538 if ( ! empty( $title ) && ! empty( $description ) ) {
539 return '> **' . $title . ':** ' . $description;
540 }
541
542 if ( ! empty( $title ) ) {
543 return '> **' . $title . '**';
544 }
545
546 return '> ' . $description;
547 }
548
549 protected function content_template() {
550 ?>
551 <#
552 if ( ! settings.alert_title && ! settings.alert_description ) {
553 return;
554 }
555
556 view.addRenderAttribute( 'alert_wrapper', 'class', 'elementor-alert' );
557
558 view.addRenderAttribute( 'alert_wrapper', 'role', 'alert' );
559
560 view.addRenderAttribute( 'alert_title', 'class', 'elementor-alert-title' );
561
562 view.addRenderAttribute( 'alert_description', 'class', 'elementor-alert-description' );
563
564 view.addInlineEditingAttributes( 'alert_title', 'none' );
565
566 view.addInlineEditingAttributes( 'alert_description' );
567
568 var iconHTML = elementor.helpers.renderIcon( view, settings.dismiss_icon, { 'aria-hidden': true }, 'i' , 'object' ),
569 migrated = elementor.helpers.isIconMigrated( settings, 'dismiss_icon' );
570 #>
571 <div {{{ view.getRenderAttributeString( 'alert_wrapper' ) }}}>
572
573 <# if ( settings.alert_title ) { #>
574 <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{ settings.alert_title }}</span>
575 <# } #>
576
577 <# if ( settings.alert_description ) { #>
578 <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{ settings.alert_description }}</span>
579 <# } #>
580
581 <# if ( 'show' === settings.show_dismiss ) { #>
582 <button type="button" class="elementor-alert-dismiss" aria-label="<?php echo esc_attr__( 'Dismiss this alert.', 'elementor' ); ?>">
583 <# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
584 {{{ iconHTML.value }}}
585 <# } else { #>
586 <span aria-hidden="true">&times;</span>
587 <# } #>
588 </button>
589 <# } #>
590
591 </div>
592 <?php
593 }
594 }
595