PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.5.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.5.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 1 year ago Accordion.php 1 year ago Alerts_Box.php 1 year ago Animated_Heading.php 1 year ago Before_after.php 1 year ago Blog_Grid.php 1 year ago Buttons.php 1 year ago Cheat_sheet.php 1 year ago Counter.php 1 year ago Fullscreen_Slider.php 1 year ago Icon_box.php 1 year ago Instagram.php 1 year ago Integrations.php 1 year ago List_Item.php 1 year ago Pricing_Table_Switcher.php 1 year ago Pricing_Table_Tabs.php 1 year ago Tabs.php 1 year ago Team_Carousel.php 1 year ago Testimonial.php 1 year ago Timeline.php 1 year ago Video_Playlist.php 1 year ago Video_Popup.php 1 year ago
Alerts_Box.php
575 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 'default' => 'Do one don’t get shirty with me naff only a quid the full monty at public school burke Jeffrey smashing, blatant ruddy fanny around Charles.'
158 ]
159 );
160
161 $this->add_control(
162 'show_dismiss', [
163 'label' => esc_html__( 'Dismiss Button', 'spider-elements' ),
164 'type' => Controls_Manager::SELECT,
165 'default' => 'show',
166 'options' => [
167 'show' => esc_html__( 'Show', 'spider-elements' ),
168 'hide' => esc_html__( 'Hide', 'spider-elements' ),
169 ],
170 'condition' => [
171 'display_type' => [ 'alert' ]
172 ]
173 ]
174 );
175
176 $this->add_control(
177 'icon', [
178 'label' => esc_html__( 'Icon', 'spider-elements' ),
179 'type' => Controls_Manager::ICONS,
180 'condition' => [
181 'display_type' => [ 'alert', 'note-with-icon', 'dual-box', 'block-notice', 'note' ],
182 'display_type!' => [ 'explanation' ]
183 ],
184 ]
185 );
186
187 $this->end_controls_section(); // End Alert/Note
188
189 }
190
191
192 /**
193 * Name: elementor_style_control()
194 * Desc: Register the Style Tab output on the Elementor editor.
195 * Params: no params
196 * Return: @void
197 * Since: @1.0.0
198 * Package: @spider-elements
199 * Author: spider-themes
200 */
201 public function elementor_style_control() {
202
203 //====================== Style Title ======================//
204 $this->start_controls_section(
205 'style_title', [
206 'label' => esc_html__( 'Alert Box', 'spider-elements' ),
207 'tab' => Controls_Manager::TAB_STYLE,
208 ]
209 );
210
211 $this->add_group_control(
212 \Elementor\Group_Control_Background::get_type(),
213 [
214 'name' => 'background',
215 'types' => [ 'classic', 'gradient' ],
216 'selector' => '
217 {{WRAPPER}} .nic-alert .nic-content-wrap .note-box,
218 {{WRAPPER}} .notice-box,
219 {{WRAPPER}} .explanation,
220 {{WRAPPER}} .message_alert,
221 {{WRAPPER}} .block-notice-content-wrapper,
222 {{WRAPPER}} .spel_alert_box .dual-box-content',
223 ]
224 );
225
226 $this->add_control(
227 'border_color', [
228 'label' => esc_html__( 'Border Color', 'spider-elements' ),
229 'type' => Controls_Manager::COLOR,
230 'selectors' => [
231 '{{WRAPPER}} .message_alert' => 'border-color: {{VALUE}};',
232 '{{WRAPPER}} .explanation::before' => 'border-color: {{VALUE}};',
233 '{{WRAPPER}} .notice-box' => 'border-color: {{VALUE}};',
234 '{{WRAPPER}} .nic-alert .nic-content-wrap .note-box' => 'border-color: {{VALUE}};',
235 '{{WRAPPER}} .block-notice-wrapper::before' => 'border-color: {{VALUE}};',
236 '{{WRAPPER}} .block-notice-wrapper::after' => 'border-color: {{VALUE}};',
237 ],
238 'condition' => [
239 'display_type' => [ 'explanation', 'alert', 'note', 'note-with-icon', 'block-notice' ],
240 'display_type!' => [ 'dual-box' ]
241 ]
242
243 ]
244 );
245
246 $this->add_control(
247 'border2_color', [
248 'label' => esc_html__( 'Border Color', 'spider-elements' ),
249 'type' => Controls_Manager::COLOR,
250 'selectors' => [
251 '{{WRAPPER}} .dual-box-wrapper' => 'border-color: {{VALUE}};',
252 '{{WRAPPER}} .dual-box-wrapper .dual-box-content' => 'border-color: {{VALUE}};',
253 ],
254 'condition' => [
255 'display_type' => [ 'dual-box' ],
256 'display_type!' => [ 'explanation', 'alert', 'note', 'note-with-icon', 'block-notice' ]
257 ]
258 ]
259 );
260
261 $this->add_control(
262 'border_left-width', [
263 'label' => esc_html__( 'Left Border Width', 'spider-elements' ),
264 'type' => Controls_Manager::SLIDER,
265 'range' => [
266 'px' => [
267 'min' => 0,
268 'max' => 100,
269 ],
270 ],
271 'selectors' => [
272 '{{WRAPPER}} .notice-box' => 'border-left-width: {{SIZE}}{{UNIT}};',
273 ],
274 'condition' => [
275 'display_type' => [ 'note' ]
276 ]
277 ]
278 );
279
280 $this->add_responsive_control(
281 'padding', [
282 'label' => esc_html__( 'Padding', 'spider-elements' ),
283 'type' => Controls_Manager::DIMENSIONS,
284 'size_units' => [ 'px', 'em', '%' ],
285 'selectors' => [
286 '{{WRAPPER}} .message_alert' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
287 '{{WRAPPER}} .notice-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
288 '{{WRAPPER}} .explanation' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
289 '{{WRAPPER}} .note-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
290 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
291 '{{WRAPPER}} .se_box_padding' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
292 ],
293 ]
294 );
295
296 $this->add_control(
297 'dual-layer-alignment', [
298 'label' => esc_html__( 'Layer Alignment', 'spider-elements' ),
299 'type' => Controls_Manager::CHOOSE,
300 'options' => [
301 'top-left' => [
302 'title' => esc_html__( 'Top Left', 'spider-elements' ),
303 'icon' => 'fa fa-align-left',
304 ],
305 'top-right' => [
306 'title' => esc_html__( 'Top Right', 'spider-elements' ),
307 'icon' => 'fa fa-align-right',
308 ],
309 'bottom-left' => [
310 'title' => esc_html__( 'Bottom Left', 'spider-elements' ),
311 'icon' => 'fa fa-align-left',
312 ],
313 'bottom-right' => [
314 'title' => esc_html__( 'Bottom Right', 'spider-elements' ),
315 'icon' => 'fa fa-align-right',
316 ],
317 ],
318 'default' => 'top-left',
319 'toggle' => true,
320 'condition' => [
321 'display_type' => [ 'dual-box' ]
322 ]
323 ]
324 );
325
326 $this->end_controls_section(); //End Style Title
327
328
329 //============================Start Description Style section =========================//
330 $this->start_controls_section(
331 'section_type', [
332 'label' => esc_html__( 'Contents', 'spider-elements' ),
333 'tab' => Controls_Manager::TAB_STYLE,
334 ]
335 );
336
337 $this->add_control(
338 'box_title-heading', [
339 'label' => esc_html__( 'Title', 'spider-elements' ),
340 'type' => Controls_Manager::HEADING
341 ]
342 );
343
344 $this->add_group_control(
345 Group_Control_Typography::get_type(), [
346 'name' => 'typography_title',
347 'selector' => '
348 {{WRAPPER}} .__title,
349 {{WRAPPER}} .message_alert .title,
350 {{WRAPPER}} .notice-box h5,
351 {{WRAPPER}} .block-notice-wrapper .title,
352 {{WRAPPER}} .nic-content-wrap .note-box h5,
353 {{WRAPPER}} .explanation::after, {{WRAPPER}} .notice h5
354 ',
355 ]
356 );
357
358 $this->add_control(
359 'color_title', [
360 'label' => esc_html__( 'Color', 'spider-elements' ),
361 'type' => Controls_Manager::COLOR,
362 'selectors' => [
363 '{{WRAPPER}} .__title' => 'color: {{VALUE}};',
364 '{{WRAPPER}} .explanation::after' => 'color: {{VALUE}};',
365 '{{WRAPPER}} .title' => 'color: {{VALUE}};',
366 '{{WRAPPER}} .notice h5' => 'color: {{VALUE}};',
367 '{{WRAPPER}} .nic-content-wrap .note-box h5' => 'color: {{VALUE}};',
368 '{{WRAPPER}} .message_alert .title' => 'color: {{VALUE}};',
369 '{{WRAPPER}} .notice-box h5' => 'color: {{VALUE}};',
370
371 ],
372 ]
373 );
374
375 $this->add_group_control(
376 \Elementor\Group_Control_Background::get_type(),
377 [
378 'name' => 'title_background',
379 'types' => [ 'classic', 'gradient' ],
380 'exclude' => [ 'image' ],
381 'selector' => '{{WRAPPER}} .explanation::after',
382 'condition' => [
383 'display_type' => [ 'explanation' ],
384 'display_type!' => [ 'alert', 'note', 'note-with-icon', 'dual-box', 'block-notice' ]
385 ]
386 ]
387 );
388
389 $this->add_control(
390 'box_desc-heading', [
391 'label' => esc_html__( 'Description', 'spider-elements' ),
392 'type' => Controls_Manager::HEADING,
393 'separator' => 'before'
394 ]
395 );
396
397 $this->add_group_control(
398 Group_Control_Typography::get_type(), [
399 'name' => 'typography_content',
400 'selector' => '
401 {{WRAPPER}} .spel_alert_box p',
402 ]
403 );
404
405 $this->add_control(
406 'color_content', [
407 'label' => esc_html__( 'Color', 'spider-elements' ),
408 'type' => Controls_Manager::COLOR,
409 'selectors' => [
410 '{{WRAPPER}} .spel_alert_box p' => 'color: {{VALUE}} !important;',
411 ],
412 ]
413 );
414
415 $this->end_controls_section(); // End Style Alert
416
417
418 //======================== Style Icon ========================//
419 $this->start_controls_section(
420 'section_icon', [
421 'label' => esc_html__( 'Icon', 'spider-elements' ),
422 'tab' => Controls_Manager::TAB_STYLE,
423 'condition' => [
424 'display_type' => [ 'alert', 'note-with-icon', 'dual-box', 'block-notice', 'note' ],
425 'display_type!' => [ 'explanation' ]
426 ]
427 ]
428 );
429
430 $this->add_control(
431 'icons_size', [
432 'label' => esc_html__( 'Size', 'spider-elements' ),
433 'type' => Controls_Manager::SLIDER,
434 'range' => [
435 'px' => [
436 'min' => 0,
437 'max' => 100,
438 ],
439 ],
440 'selectors' => [
441 '{{WRAPPER}} .fa-bell-slash:before' => 'font-size: {{SIZE}}{{UNIT}};',
442 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice i' => 'font-size: {{SIZE}}{{UNIT}};',
443 '{{WRAPPER}} .block-notice-wrapper .block-notice-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
444 '{{WRAPPER}} .notice-box i' => 'font-size: {{SIZE}}{{UNIT}};',
445 '{{WRAPPER}} .info-tab .icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}};',
446 '{{WRAPPER}} .message_alert i' => 'font-size: {{SIZE}}{{UNIT}};',
447 ],
448 'condition' => [
449 'display_type' => [ 'note', 'note-with-icon', 'dual-box', 'block-notice', 'alert' ],
450 'display_type!' => [ 'explanation' ]
451 ]
452 ]
453 );
454
455 $this->add_control(
456 'icon_color', [
457 'label' => esc_html__( 'Color', 'spider-elements' ),
458 'type' => Controls_Manager::COLOR,
459 'selectors' => [
460 '{{WRAPPER}} .info-tab .icon-wrapper i' => 'color: {{VALUE}};',
461 '{{WRAPPER}} .fa-bell-slash:before' => 'color: {{VALUE}};',
462 '{{WRAPPER}} .dual-box-wrapper .dual-box-content .notice i' => 'color: {{VALUE}};',
463 '{{WRAPPER}} .block-notice-wrapper .block-notice-icon i' => 'color: {{VALUE}};',
464 '{{WRAPPER}} .notice-box i' => 'color: {{VALUE}};',
465 '{{WRAPPER}} .message_alert i' => 'color: {{VALUE}};',
466 ],
467 'condition' => [
468 'display_type' => [ 'note', 'note-with-icon', 'dual-box', 'block-notice', 'alert' ],
469 'display_type!' => [ 'explanation' ]
470 ]
471 ]
472 );
473
474 $this->add_control(
475 'closeicon_heading', [
476 'label' => esc_html__( 'Close Icon' ),
477 'type' => Controls_Manager::HEADING,
478 'separator' => 'before',
479 'condition' => [
480 'display_type' => [ 'alert' ],
481 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
482 ]
483 ]
484 );
485
486 $this->add_control(
487 'close_icon_size', [
488 'label' => esc_html__( 'Size', 'spider-elements' ),
489 'type' => Controls_Manager::SLIDER,
490 'range' => [
491 'px' => [
492 'min' => 0,
493 'max' => 100,
494 ],
495 ],
496 'selectors' => [
497 '{{WRAPPER}} .message_alert .close i' => 'font-size: {{SIZE}}{{UNIT}};',
498 ],
499 'condition' => [
500 'display_type' => [ 'alert' ],
501 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
502 ]
503 ]
504 );
505
506 $this->add_control(
507 'close_icon_color', [
508 'label' => esc_html__( 'Color', 'spider-elements' ),
509 'type' => Controls_Manager::COLOR,
510 'selectors' => [
511 '{{WRAPPER}} .message_alert .close i' => 'color: {{VALUE}};',
512 ],
513 'condition' => [
514 'display_type' => [ 'alert' ],
515 'display_type!' => [ 'note', 'note-with-icon', 'explanation', 'dual-box', 'block-notice' ]
516 ]
517 ]
518 );
519
520 $this->add_control(
521 'icon_background',
522 [
523 'label' => esc_html__( 'Background Color', 'spider-elements' ),
524 'type' => Controls_Manager::COLOR,
525 'selectors' => [
526 '{{WRAPPER}} .nic-alert .nic-content-wrap .note-icon' => 'background-color: {{VALUE}};',
527 '{{WRAPPER}} .block-notice-icon:after' => 'background-color: {{VALUE}};',
528 ],
529 'condition' => [
530 'display_type' => [ 'note-with-icon', 'block-notice' ],
531 'display_type!' => [ 'alert', 'note', 'explanation', 'dual-box' ]
532 ]
533 ]
534 );
535
536 $this->add_control(
537 'icon_after_color',
538 [
539 'label' => esc_html__( 'Ribbon Color', 'spider-elements' ),
540 'type' => Controls_Manager::COLOR,
541 'selectors' => [
542 '{{WRAPPER}} .nic-alert .note-icon .icon-wrapper::after' => 'background-color: {{VALUE}};',
543 ],
544 'condition' => [
545 'display_type' => [ 'note-with-icon' ],
546 'display_type!' => [ 'alert', 'note', 'explanation', 'dual-box', 'block-notice' ]
547 ]
548 ]
549 );
550
551 $this->end_controls_section(); // End Style Icon
552
553 }
554
555
556 /**
557 * Name: elementor_render()
558 * Desc: Render the widget output on the frontend.
559 * Params: no params
560 * Return: @void
561 * Since: @1.0.0
562 * Package: @spider-elements
563 * Author: spider-themes
564 */
565 protected function render() {
566
567 $settings = $this->get_settings_for_display();
568 extract( $settings ); // extract all settings array to variables converted to name of key
569
570
571 //================= Template Parts =================//
572 include "templates/alerts-box/alert-box-1.php";
573
574 }
575 }