PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.1.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.1.0
trunk 1.0.0 1.1.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.7.0 1.8.0 1.9.0
spider-elements / widgets / Alerts_Box.php
spider-elements / widgets Last commit date
templates 2 years ago Accordion.php 2 years ago Alerts_Box.php 2 years ago Animated_Heading.php 2 years ago Before_after.php 2 years ago Blog_Grid.php 2 years ago Buttons.php 2 years ago Cheat_sheet.php 2 years ago Counter.php 2 years ago Fullscreen_Slider.php 2 years ago Icon_box.php 2 years ago Instagram.php 2 years ago Integrations.php 2 years ago List_Item.php 2 years ago Marquee_Slides.php 2 years ago Pricing_Table_Switcher.php 2 years ago Pricing_Table_Tabs.php 2 years ago Skill_Showcase.php 2 years ago Tabs.php 2 years ago Team_Carousel.php 2 years ago Testimonial.php 2 years ago Timeline.php 2 years ago Video_Playlist.php 2 years ago Video_Popup.php 2 years ago
Alerts_Box.php
573 lines
1 <?php
2 /**
3 * Use namespace to avoid conflict
4 */
5
6 namespace SPEL\Widgets;
7
8 use Elementor\Icons_Manager;
9 use Elementor\Widget_Base;
10 use Elementor\Controls_Manager;
11 use Elementor\Group_Control_Typography;
12 use Elementor\Group_Control_Background;
13
14 // Exit if accessed directly
15 if ( ! defined( 'ABSPATH' ) ) {
16 exit;
17 }
18
19 /**
20 * Class Alerts_box
21 * @package spider\Widgets
22 * @since 1.0.0
23 */
24 class Alerts_Box extends Widget_Base {
25
26 public function get_name() {
27 return 'docly_alerts_box'; // ID of the widget (Don't change this name)
28 }
29
30 public function get_title() {
31 return esc_html__( 'Alerts Box', 'spider-elements' );
32 }
33
34 public function get_icon() {
35 return 'eicon-alert spel-icon';
36 }
37
38 public function get_keywords() {
39 return [
40 'spider',
41 'spider elements',
42 'alert',
43 'notice',
44 'message',
45 'warning',
46 'info',
47 'success',
48 'danger',
49 'note',
50 'note with icon',
51 'explanation',
52 'dual box notice',
53 'block notice'
54 ];
55 }
56
57 public function get_categories() {
58 return [ 'spider-elements' ];
59 }
60
61 /**
62 * Name: get_style_depends()
63 * Desc: Register the required CSS dependencies for the frontend.
64 */
65 public function get_style_depends() {
66 return [ 'spel-main' ];
67 }
68
69 /**
70 * Name: get_script_depends()
71 * Desc: Register the required JS dependencies for the frontend.
72 */
73 public function get_script_depends() {
74 return [ 'spel-el-widgets' ];
75 }
76
77 /**
78 * Name: register_controls()
79 * Desc: Register controls for these widgets
80 * Params: no params
81 * Return: @void
82 * Since: @1.0.0
83 * Package: @spider-elements
84 * Author: spider-themes
85 */
86 protected function register_controls() {
87 $this->elementor_content_control();
88 $this->elementor_style_control();
89 }
90
91
92 /**
93 * Name: elementor_content_control()
94 * Desc: Register the Content Tab output on the Elementor editor.
95 * Params: no params
96 * Return: @void
97 * Since: @1.0.0
98 * Package: @spider-elements
99 * Author: spider-themes
100 */
101 public function elementor_content_control() {
102
103
104 //====================== Alert/Note ======================//
105 $this->start_controls_section(
106 'section_alert', [
107 'label' => esc_html__( 'Alert/Note', 'spider-elements' ),
108 ]
109 );
110
111 $this->add_control(
112 'display_type', [
113 'label' => esc_html__( 'Display Type', 'spider-elements' ),
114 'type' => Controls_Manager::SELECT,
115 'default' => 'alert',
116 'options' => [
117 'alert' => esc_html__( 'Alert Box', 'spider-elements' ),
118 'note' => esc_html__( 'Note', 'spider-elements' ),
119 'note-with-icon' => esc_html__( 'Note With Icon', 'spider-elements' ),
120 'explanation' => esc_html__( 'Explanation', 'spider-elements' ),
121 'dual-box' => esc_html__( 'Dual Box Notice', 'spider-elements' ),
122 'block-notice' => esc_html__( 'Block Notice', 'spider-elements' ),
123 ],
124 ]
125 );
126
127 $this->add_control(
128 'alert_type', [
129 'label' => esc_html__( 'Type', 'spider-elements' ),
130 'type' => Controls_Manager::SELECT,
131 'default' => 'message',
132 'options' => [
133 'message' => esc_html__( 'Message', 'spider-elements' ),
134 'warning' => esc_html__( 'Warning', 'spider-elements' ),
135 'info' => esc_html__( 'Info', 'spider-elements' ),
136 'success' => esc_html__( 'Success', 'spider-elements' ),
137 'danger' => esc_html__( 'Danger', 'spider-elements' ),
138 ],
139 'style_transfer' => true,
140 ]
141 );
142
143 $this->add_control(
144 'alert_title', [
145 'label' => esc_html__( 'Title', 'spider-elements' ),
146 'type' => Controls_Manager::TEXT,
147 'label_block' => true,
148 'default' => 'Notice Message! Your message here'
149 ]
150 );
151
152 $this->add_control(
153 'alert_description', [
154 'label' => esc_html__( 'Description', 'spider-elements' ),
155 'type' => Controls_Manager::WYSIWYG,
156 'label_block' => true,
157 ]
158 );
159
160 $this->add_control(
161 'show_dismiss', [
162 'label' => esc_html__( 'Dismiss Button', 'spider-elements' ),
163 'type' => Controls_Manager::SELECT,
164 'default' => 'show',
165 'options' => [
166 'show' => esc_html__( 'Show', 'spider-elements' ),
167 'hide' => esc_html__( 'Hide', 'spider-elements' ),
168 ],
169 'condition' => [
170 'display_type' => [ 'alert' ]
171 ]
172 ]
173 );
174
175 $this->add_control(
176 'icon', [
177 'label' => esc_html__( 'Icon', 'spider-elements' ),
178 'type' => Controls_Manager::ICONS,
179 'condition' => [
180 'display_type' => [ 'alert', 'note-with-icon', 'dual-box', 'block-notice', 'note' ],
181 'display_type!' => [ 'explanation' ]
182 ],
183 ]
184 );
185
186 $this->end_controls_section(); // End Alert/Note
187
188 }
189
190
191 /**
192 * Name: elementor_style_control()
193 * Desc: Register the Style Tab output on the Elementor editor.
194 * Params: no params
195 * Return: @void
196 * Since: @1.0.0
197 * Package: @spider-elements
198 * Author: spider-themes
199 */
200 public function elementor_style_control() {
201
202 //====================== Style Title ======================//
203 $this->start_controls_section(
204 'style_title', [
205 'label' => esc_html__( 'Alert Box', 'spider-elements' ),
206 'tab' => Controls_Manager::TAB_STYLE,
207 ]
208 );
209
210 $this->add_group_control(
211 \Elementor\Group_Control_Background::get_type(),
212 [
213 'name' => 'background',
214 'types' => [ 'classic', 'gradient' ],
215 'selector' => '
216 {{WRAPPER}} .nic-alert .nic-content-wrap .note-box,
217 {{WRAPPER}} .notice-box,
218 {{WRAPPER}} .explanation,
219 {{WRAPPER}} .message_alert,
220 {{WRAPPER}} .block-notice-content-wrapper,
221 {{WRAPPER}} .spel_alert_box .dual-box-content',
222 ]
223 );
224
225 $this->add_control(
226 'border_color', [
227 'label' => esc_html__( 'Border Color', 'spider-elements' ),
228 'type' => Controls_Manager::COLOR,
229 'selectors' => [
230 '{{WRAPPER}} .message_alert' => 'border-color: {{VALUE}};',
231 '{{WRAPPER}} .explanation::before' => 'border-color: {{VALUE}};',
232 '{{WRAPPER}} .notice-box' => 'border-color: {{VALUE}};',
233 '{{WRAPPER}} .nic-alert .nic-content-wrap .note-box' => 'border-color: {{VALUE}};',
234 '{{WRAPPER}} .block-notice-wrapper::before' => 'border-color: {{VALUE}};',
235 '{{WRAPPER}} .block-notice-wrapper::after' => 'border-color: {{VALUE}};',
236 ],
237 'condition' => [
238 'display_type' => [ 'explanation', 'alert', 'note', 'note-with-icon', 'block-notice' ],
239 'display_type!' => [ 'dual-box' ]
240 ]
241
242 ]
243 );
244
245 $this->add_control(
246 'border2_color', [
247 'label' => esc_html__( 'Border Color', 'spider-elements' ),
248 'type' => Controls_Manager::COLOR,
249 'selectors' => [
250 '{{WRAPPER}} .dual-box-wrapper, .dual-box-wrapper .dual-box-content' => 'border-color: {{VALUE}};',
251 ],
252 'condition' => [
253 'display_type' => [ 'dual-box' ],
254 'display_type!' => [ 'explanation', 'alert', 'note', 'note-with-icon', 'block-notice' ]
255 ]
256 ]
257 );
258
259 $this->add_control(
260 'border_left-width', [
261 'label' => esc_html__( 'Left Border Width', 'spider-elements' ),
262 'type' => Controls_Manager::SLIDER,
263 'range' => [
264 'px' => [
265 'min' => 0,
266 'max' => 100,
267 ],
268 ],
269 'selectors' => [
270 '{{WRAPPER}} .notice-box' => 'border-left-width: {{SIZE}}{{UNIT}};',
271 ],
272 'condition' => [
273 'display_type' => [ 'note' ]
274 ]
275 ]
276 );
277
278 $this->add_responsive_control(
279 'padding', [
280 'label' => esc_html__( 'Padding', 'spider-elements' ),
281 'type' => Controls_Manager::DIMENSIONS,
282 'size_units' => [ 'px', 'em', '%' ],
283 'selectors' => [
284 '{{WRAPPER}} .message_alert' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
285 '{{WRAPPER}} .notice-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
286 '{{WRAPPER}} .explanation' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
287 '{{WRAPPER}} .note-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
288 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
289 '{{WRAPPER}} .se_box_padding' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
290 ],
291 ]
292 );
293
294 $this->add_control(
295 'dual-layer-alignment', [
296 'label' => esc_html__( 'Layer Alignment', 'spider-elements' ),
297 'type' => Controls_Manager::CHOOSE,
298 'options' => [
299 'top-left' => [
300 'title' => esc_html__( 'Top Left', 'spider-elements' ),
301 'icon' => 'fa fa-align-left',
302 ],
303 'top-right' => [
304 'title' => esc_html__( 'Top Right', 'spider-elements' ),
305 'icon' => 'fa fa-align-right',
306 ],
307 'bottom-left' => [
308 'title' => esc_html__( 'Bottom Left', 'spider-elements' ),
309 'icon' => 'fa fa-align-left',
310 ],
311 'bottom-right' => [
312 'title' => esc_html__( 'Bottom Right', 'spider-elements' ),
313 'icon' => 'fa fa-align-right',
314 ],
315 ],
316 'default' => 'top-left',
317 'toggle' => true,
318 'condition' => [
319 'display_type' => [ 'dual-box' ]
320 ]
321 ]
322 );
323
324 $this->end_controls_section(); //End Style Title
325
326
327 //============================Start Description Style section =========================//
328 $this->start_controls_section(
329 'section_type', [
330 'label' => esc_html__( 'Contents', 'spider-elements' ),
331 'tab' => Controls_Manager::TAB_STYLE,
332 ]
333 );
334
335 $this->add_control(
336 'box_title-heading', [
337 'label' => esc_html__( 'Title', 'spider-elements' ),
338 'type' => Controls_Manager::HEADING
339 ]
340 );
341
342 $this->add_group_control(
343 Group_Control_Typography::get_type(), [
344 'name' => 'typography_title',
345 'selector' => '
346 {{WRAPPER}} .__title,
347 {{WRAPPER}} .message_alert .title,
348 {{WRAPPER}} .notice-box h5,
349 {{WRAPPER}} .block-notice-wrapper .title,
350 {{WRAPPER}} .nic-content-wrap .note-box h5,
351 {{WRAPPER}} .explanation::after, {{WRAPPER}} .notice h5
352 ',
353 ]
354 );
355
356 $this->add_control(
357 'color_title', [
358 'label' => esc_html__( 'Color', 'spider-elements' ),
359 'type' => Controls_Manager::COLOR,
360 'selectors' => [
361 '{{WRAPPER}} .__title' => 'color: {{VALUE}};',
362 '{{WRAPPER}} .explanation::after' => 'color: {{VALUE}};',
363 '{{WRAPPER}} .title' => 'color: {{VALUE}};',
364 '{{WRAPPER}} .notice h5' => 'color: {{VALUE}};',
365 '{{WRAPPER}} .nic-content-wrap .note-box h5' => 'color: {{VALUE}};',
366 '{{WRAPPER}} .message_alert .title' => 'color: {{VALUE}};',
367 '{{WRAPPER}} .notice-box h5' => 'color: {{VALUE}};',
368
369 ],
370 ]
371 );
372
373 $this->add_group_control(
374 \Elementor\Group_Control_Background::get_type(),
375 [
376 'name' => 'title_background',
377 'types' => [ 'classic', 'gradient' ],
378 'exclude' => [ 'image' ],
379 'selector' => '{{WRAPPER}} .explanation::after',
380 'condition' => [
381 'display_type' => [ 'explanation' ],
382 'display_type!' => [ 'alert', 'note', 'note-with-icon', 'dual-box', 'block-notice' ]
383 ]
384 ]
385 );
386
387 $this->add_control(
388 'box_desc-heading', [
389 'label' => esc_html__( 'Description', 'spider-elements' ),
390 'type' => Controls_Manager::HEADING,
391 'separator' => 'before'
392 ]
393 );
394
395 $this->add_group_control(
396 Group_Control_Typography::get_type(), [
397 'name' => 'typography_content',
398 'selector' => '
399 {{WRAPPER}} .spel_alert_box p',
400 ]
401 );
402
403 $this->add_control(
404 'color_content', [
405 'label' => esc_html__( 'Color', 'spider-elements' ),
406 'type' => Controls_Manager::COLOR,
407 'selectors' => [
408 '{{WRAPPER}} .spel_alert_box p' => 'color: {{VALUE}} !important;',
409 ],
410 ]
411 );
412
413 $this->end_controls_section(); // End Style Alert
414
415
416 //======================== Style Icon ========================//
417 $this->start_controls_section(
418 'section_icon', [
419 'label' => esc_html__( 'Icon', 'spider-elements' ),
420 'tab' => Controls_Manager::TAB_STYLE,
421 'condition' => [
422 'display_type' => [ 'alert', 'note-with-icon', 'dual-box', 'block-notice', 'note' ],
423 'display_type!' => [ 'explanation' ]
424 ]
425 ]
426 );
427
428 $this->add_control(
429 'icons_size', [
430 'label' => esc_html__( 'Size', 'spider-elements' ),
431 'type' => Controls_Manager::SLIDER,
432 'range' => [
433 'px' => [
434 'min' => 0,
435 'max' => 100,
436 ],
437 ],
438 'selectors' => [
439 '{{WRAPPER}} .fa-bell-slash:before' => 'font-size: {{SIZE}}{{UNIT}};',
440 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice i' => 'font-size: {{SIZE}}{{UNIT}};',
441 '{{WRAPPER}} .block-notice-wrapper .block-notice-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
442 '{{WRAPPER}} .notice-box i' => 'font-size: {{SIZE}}{{UNIT}};',
443 '{{WRAPPER}} .info-tab .icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}};',
444 '{{WRAPPER}} .message_alert i' => 'font-size: {{SIZE}}{{UNIT}};',
445 ],
446 'condition' => [
447 'display_type' => [ 'note', 'note-with-icon', 'dual-box', 'block-notice', 'alert' ],
448 'display_type!' => [ 'explanation' ]
449 ]
450 ]
451 );
452
453 $this->add_control(
454 'icon_color', [
455 'label' => esc_html__( 'Color', 'spider-elements' ),
456 'type' => Controls_Manager::COLOR,
457 'selectors' => [
458 '{{WRAPPER}} .info-tab .icon-wrapper i' => 'color: {{VALUE}};',
459 '{{WRAPPER}} .fa-bell-slash:before' => 'color: {{VALUE}};',
460 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice i' => 'color: {{VALUE}};',
461 '{{WRAPPER}} .block-notice-wrapper .block-notice-icon i' => 'color: {{VALUE}};',
462 '{{WRAPPER}} .notice-box i' => 'color: {{VALUE}};',
463 '{{WRAPPER}} .message_alert i' => 'color: {{VALUE}};',
464 ],
465 'condition' => [
466 'display_type' => [ 'note', 'note-with-icon', 'dual-box', 'block-notice', 'alert' ],
467 'display_type!' => [ 'explanation' ]
468 ]
469 ]
470 );
471
472 $this->add_control(
473 'closeicon_heading', [
474 'label' => esc_html__( 'Close Icon' ),
475 'type' => Controls_Manager::HEADING,
476 'separator' => 'before',
477 'condition' => [
478 'display_type' => [ 'alert' ],
479 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
480 ]
481 ]
482 );
483
484 $this->add_control(
485 'close_icon_size', [
486 'label' => esc_html__( 'Size', 'spider-elements' ),
487 'type' => Controls_Manager::SLIDER,
488 'range' => [
489 'px' => [
490 'min' => 0,
491 'max' => 100,
492 ],
493 ],
494 'selectors' => [
495 '{{WRAPPER}} .message_alert .close i' => 'font-size: {{SIZE}}{{UNIT}};',
496 ],
497 'condition' => [
498 'display_type' => [ 'alert' ],
499 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
500 ]
501 ]
502 );
503
504 $this->add_control(
505 'close_icon_color', [
506 'label' => esc_html__( 'Color', 'spider-elements' ),
507 'type' => Controls_Manager::COLOR,
508 'selectors' => [
509 '{{WRAPPER}} .message_alert .close i' => 'color: {{VALUE}};',
510 ],
511 'condition' => [
512 'display_type' => [ 'alert' ],
513 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
514 ]
515 ]
516 );
517
518 $this->add_control(
519 'icon_background',
520 [
521 'label' => esc_html__( 'Background Color', 'spider-elements' ),
522 'type' => Controls_Manager::COLOR,
523 'selectors' => [
524 '{{WRAPPER}} .nic-alert .nic-content-wrap .note-icon' => 'background-color: {{VALUE}};',
525 '{{WRAPPER}} .block-notice-icon:after' => 'background-color: {{VALUE}};',
526 ],
527 'condition' => [
528 'display_type' => [ 'note-with-icon', 'block-notice' ],
529 'display_type!' => [ 'alert', 'note', 'explanation', 'dual-box' ]
530 ]
531 ]
532 );
533
534 $this->add_control(
535 'icon_after_color',
536 [
537 'label' => esc_html__( 'Ribbon Color', 'spider-elements' ),
538 'type' => Controls_Manager::COLOR,
539 'selectors' => [
540 '{{WRAPPER}} .nic-alert .note-icon .icon-wrapper::after' => 'background-color: {{VALUE}};',
541 ],
542 'condition' => [
543 'display_type' => [ 'note-with-icon' ],
544 'display_type!' => [ 'alert', 'note', 'explanation', 'dual-box', 'block-notice' ]
545 ]
546 ]
547 );
548
549 $this->end_controls_section(); // End Style Icon
550
551 }
552
553
554 /**
555 * Name: elementor_render()
556 * Desc: Render the widget output on the frontend.
557 * Params: no params
558 * Return: @void
559 * Since: @1.0.0
560 * Package: @spider-elements
561 * Author: spider-themes
562 */
563 protected function render() {
564
565 $settings = $this->get_settings_for_display();
566 extract( $settings ); // extract all settings array to variables converted to name of key
567
568
569 //================= Template Parts =================//
570 include "templates/alerts-box/alert-box-1.php";
571
572 }
573 }