PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / trunk
Spider Elements – Premium Elementor Widgets & Addons Library vtrunk
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 4 months ago Accordion.php 9 months ago Alerts_Box.php 9 months ago Blog_Grid.php 6 months ago Cheat_Sheet.php 6 months ago Counter.php 6 months ago Dynamic_Faq.php 1 month ago Icon_Box.php 6 months ago Integrations.php 6 months ago List_Item.php 9 months ago Tabs.php 6 months ago Team_Carousel.php 6 months ago Testimonial.php 6 months ago Timeline.php 9 months ago Video_Playlist.php 6 months ago Video_Popup.php 6 months 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\Widget_Base;
9 use Elementor\Controls_Manager;
10 use Elementor\Group_Control_Typography;
11
12 // Exit if accessed directly
13 if ( ! defined( 'ABSPATH' ) ) {
14 exit;
15 }
16
17 /**
18 * Class Alerts_box
19 * @package spider\Widgets
20 * @since 1.0.0
21 */
22 class Alerts_Box extends Widget_Base {
23
24 public function get_name() {
25 return 'docly_alerts_box'; // ID of the widget (Don't change this name)
26 }
27
28 public function get_title() {
29 return esc_html__( 'Alerts Box', 'spider-elements' );
30 }
31
32 public function get_icon() {
33 return 'eicon-alert spel-icon';
34 }
35
36 public function get_keywords() {
37 return [
38 'spider',
39 'spider elements',
40 'alert',
41 'notice',
42 'message',
43 'warning',
44 'info',
45 'success',
46 'danger',
47 'note',
48 'note with icon',
49 'explanation',
50 'dual box notice',
51 'block notice'
52 ];
53 }
54
55 public function get_categories() {
56 return [ 'spider-elements' ];
57 }
58
59 /**
60 * Name: get_style_depends()
61 * Desc: Register the required CSS dependencies for the frontend.
62 */
63 public function get_style_depends() {
64 return [ 'spel-main' ];
65 }
66
67 /**
68 * Name: get_script_depends()
69 * Desc: Register the required JS dependencies for the frontend.
70 */
71 public function get_script_depends() {
72 return [ 'spel-el-widgets' ];
73 }
74
75 /**
76 * Name: register_controls()
77 * Desc: Register controls for these widgets
78 * Params: no params
79 * Return: @void
80 * Since: @1.0.0
81 * Package: @spider-elements
82 * Author: spider-themes
83 */
84 protected function register_controls() {
85 $this->elementor_content_control();
86 $this->elementor_style_control();
87 }
88
89
90 /**
91 * Name: elementor_content_control()
92 * Desc: Register the Content Tab output on the Elementor editor.
93 * Params: no params
94 * Return: @void
95 * Since: @1.0.0
96 * Package: @spider-elements
97 * Author: spider-themes
98 */
99 public function elementor_content_control() {
100
101
102 //====================== Alert/Note ======================//
103 $this->start_controls_section(
104 'section_alert', [
105 'label' => esc_html__( 'Alert/Note', 'spider-elements' ),
106 ]
107 );
108
109 $this->add_control(
110 'display_type', [
111 'label' => esc_html__( 'Display Type', 'spider-elements' ),
112 'type' => Controls_Manager::SELECT,
113 'default' => 'alert',
114 'options' => [
115 'alert' => esc_html__( 'Alert Box', 'spider-elements' ),
116 'note' => esc_html__( 'Note', 'spider-elements' ),
117 'note-with-icon' => esc_html__( 'Note With Icon', 'spider-elements' ),
118 'explanation' => esc_html__( 'Explanation', 'spider-elements' ),
119 'dual-box' => esc_html__( 'Dual Box Notice', 'spider-elements' ),
120 'block-notice' => esc_html__( 'Block Notice', 'spider-elements' ),
121 ],
122 ]
123 );
124
125 $this->add_control(
126 'alert_type', [
127 'label' => esc_html__( 'Type', 'spider-elements' ),
128 'type' => Controls_Manager::SELECT,
129 'default' => 'message',
130 'options' => [
131 'message' => esc_html__( 'Message', 'spider-elements' ),
132 'warning' => esc_html__( 'Warning', 'spider-elements' ),
133 'info' => esc_html__( 'Info', 'spider-elements' ),
134 'success' => esc_html__( 'Success', 'spider-elements' ),
135 'danger' => esc_html__( 'Danger', 'spider-elements' ),
136 ],
137 'style_transfer' => true,
138 ]
139 );
140
141 $this->add_control(
142 'alert_title', [
143 'label' => esc_html__( 'Title', 'spider-elements' ),
144 'type' => Controls_Manager::TEXT,
145 'label_block' => true,
146 'default' => 'Notice Message! Your message here'
147 ]
148 );
149
150 $this->add_control(
151 'alert_description', [
152 'label' => esc_html__( 'Description', 'spider-elements' ),
153 'type' => Controls_Manager::WYSIWYG,
154 'label_block' => true,
155 '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.'
156 ]
157 );
158
159 $this->add_control(
160 'show_dismiss', [
161 'label' => esc_html__( 'Dismiss Button', 'spider-elements' ),
162 'type' => Controls_Manager::SELECT,
163 'default' => 'show',
164 'options' => [
165 'show' => esc_html__( 'Show', 'spider-elements' ),
166 'hide' => esc_html__( 'Hide', 'spider-elements' ),
167 ],
168 'condition' => [
169 'display_type' => [ 'alert' ]
170 ]
171 ]
172 );
173
174 $this->add_control(
175 'icon', [
176 'label' => esc_html__( 'Icon', 'spider-elements' ),
177 'type' => Controls_Manager::ICONS,
178 'condition' => [
179 'display_type' => [ 'alert', 'note-with-icon', 'dual-box', 'block-notice', 'note' ],
180 'display_type!' => [ 'explanation' ]
181 ],
182 ]
183 );
184
185 $this->end_controls_section(); // End Alert/Note
186
187 }
188
189
190 /**
191 * Name: elementor_style_control()
192 * Desc: Register the Style Tab output on the Elementor editor.
193 * Params: no params
194 * Return: @void
195 * Since: @1.0.0
196 * Package: @spider-elements
197 * Author: spider-themes
198 */
199 public function elementor_style_control() {
200
201 //====================== Style Title ======================//
202 $this->start_controls_section(
203 'style_title', [
204 'label' => esc_html__( 'Alert Box', 'spider-elements' ),
205 'tab' => Controls_Manager::TAB_STYLE,
206 ]
207 );
208
209 $this->add_group_control(
210 \Elementor\Group_Control_Background::get_type(),
211 [
212 'name' => 'background',
213 'types' => [ 'classic', 'gradient' ],
214 'selector' => '
215 {{WRAPPER}} .nic-alert .nic-content-wrap .note-box,
216 {{WRAPPER}} .notice-box,
217 {{WRAPPER}} .explanation,
218 {{WRAPPER}} .message_alert,
219 {{WRAPPER}} .block-notice-content-wrapper,
220 {{WRAPPER}} .spel_alert_box .dual-box-content',
221 ]
222 );
223
224 $this->add_control(
225 'border_color', [
226 'label' => esc_html__( 'Border Color', 'spider-elements' ),
227 'type' => Controls_Manager::COLOR,
228 'selectors' => [
229 '{{WRAPPER}} .message_alert' => 'border-color: {{VALUE}};',
230 '{{WRAPPER}} .explanation::before' => 'border-color: {{VALUE}};',
231 '{{WRAPPER}} .notice-box' => 'border-color: {{VALUE}};',
232 '{{WRAPPER}} .nic-alert .nic-content-wrap .note-box' => 'border-color: {{VALUE}};',
233 '{{WRAPPER}} .block-notice-wrapper::before' => 'border-color: {{VALUE}};',
234 '{{WRAPPER}} .block-notice-wrapper::after' => 'border-color: {{VALUE}};',
235 ],
236 'condition' => [
237 'display_type' => [ 'explanation', 'alert', 'note', 'note-with-icon', 'block-notice' ],
238 'display_type!' => [ 'dual-box' ]
239 ]
240
241 ]
242 );
243
244 $this->add_control(
245 'border2_color', [
246 'label' => esc_html__( 'Border Color', 'spider-elements' ),
247 'type' => Controls_Manager::COLOR,
248 'selectors' => [
249 '{{WRAPPER}} .dual-box-wrapper' => 'border-color: {{VALUE}};',
250 '{{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 'close_icon_heading', [
474 'label' => esc_html__( 'Close Icon', 'spider-elements' ),
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 }