PluginProbe
Elementor Website Builder – more than just a page builder / 3.1.0-dev1
Elementor Website Builder – more than just a page builder v3.1.0-dev1
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 / common.php

common.php in Elementor Website Builder – more than just a page builder 3.1.0-dev1, at includes/widgets/common.php

763 lines 16.7 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 if ( ! defined( 'ABSPATH' ) ) {
5 exit; // Exit if accessed directly.
6 }
7
8 /**
9 * Elementor common widget.
10 *
11 * Elementor base widget that gives you all the advanced options of the basic
12 * widget.
13 *
14 * @since 1.0.0
15 */
16 class Widget_Common extends Widget_Base {
17
18 /**
19 * Get widget name.
20 *
21 * Retrieve common widget name.
22 *
23 * @since 1.0.0
24 * @access public
25 *
26 * @return string Widget name.
27 */
28 public function get_name() {
29 return 'common';
30 }
31
32 /**
33 * Show in panel.
34 *
35 * Whether to show the common widget in the panel or not.
36 *
37 * @since 1.0.0
38 * @access public
39 *
40 * @return bool Whether to show the widget in the panel.
41 */
42 public function show_in_panel() {
43 return false;
44 }
45
46 /**
47 * Register common widget controls.
48 *
49 * Adds different input fields to allow the user to change and customize the widget settings.
50 *
51 * @since 1.0.0
52 * @access protected
53 */
54 protected function _register_controls() {
55 $this->start_controls_section(
56 '_section_style',
57 [
58 'label' => __( 'Advanced', 'elementor' ),
59 'tab' => Controls_Manager::TAB_ADVANCED,
60 ]
61 );
62
63 // Element Name for the Navigator
64 $this->add_control(
65 '_title',
66 [
67 'label' => __( 'Title', 'elementor' ),
68 'type' => Controls_Manager::HIDDEN,
69 'render_type' => 'none',
70 ]
71 );
72
73 $this->add_responsive_control(
74 '_margin',
75 [
76 'label' => __( 'Margin', 'elementor' ),
77 'type' => Controls_Manager::DIMENSIONS,
78 'size_units' => [ 'px', 'em', '%', 'rem' ],
79 'selectors' => [
80 '{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
81 ],
82 ]
83 );
84
85 $this->add_responsive_control(
86 '_padding',
87 [
88 'label' => __( 'Padding', 'elementor' ),
89 'type' => Controls_Manager::DIMENSIONS,
90 'size_units' => [ 'px', 'em', '%', 'rem' ],
91 'selectors' => [
92 '{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
93 ],
94 ]
95 );
96
97 $this->add_responsive_control(
98 '_z_index',
99 [
100 'label' => __( 'Z-Index', 'elementor' ),
101 'type' => Controls_Manager::NUMBER,
102 'min' => 0,
103 'selectors' => [
104 '{{WRAPPER}}' => 'z-index: {{VALUE}};',
105 ],
106 'separator' => 'before',
107 ]
108 );
109
110 $this->add_control(
111 '_element_id',
112 [
113 'label' => __( 'CSS ID', 'elementor' ),
114 'type' => Controls_Manager::TEXT,
115 'dynamic' => [
116 'active' => true,
117 ],
118 'default' => '',
119 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
120 'style_transfer' => false,
121 'classes' => 'elementor-control-direction-ltr',
122 ]
123 );
124
125 $this->add_control(
126 '_css_classes',
127 [
128 'label' => __( 'CSS Classes', 'elementor' ),
129 'type' => Controls_Manager::TEXT,
130 'dynamic' => [
131 'active' => true,
132 ],
133 'prefix_class' => '',
134 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
135 'classes' => 'elementor-control-direction-ltr',
136 ]
137 );
138
139 $this->end_controls_section();
140
141 $this->start_controls_section(
142 'section_effects',
143 [
144 'label' => __( 'Motion Effects', 'elementor' ),
145 'tab' => Controls_Manager::TAB_ADVANCED,
146 ]
147 );
148
149 $this->add_responsive_control(
150 '_animation',
151 [
152 'label' => __( 'Entrance Animation', 'elementor' ),
153 'type' => Controls_Manager::ANIMATION,
154 'frontend_available' => true,
155 ]
156 );
157
158 $this->add_control(
159 'animation_duration',
160 [
161 'label' => __( 'Animation Duration', 'elementor' ),
162 'type' => Controls_Manager::SELECT,
163 'default' => '',
164 'options' => [
165 'slow' => __( 'Slow', 'elementor' ),
166 '' => __( 'Normal', 'elementor' ),
167 'fast' => __( 'Fast', 'elementor' ),
168 ],
169 'prefix_class' => 'animated-',
170 'condition' => [
171 '_animation!' => '',
172 ],
173 ]
174 );
175
176 $this->add_control(
177 '_animation_delay',
178 [
179 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
180 'type' => Controls_Manager::NUMBER,
181 'default' => '',
182 'min' => 0,
183 'step' => 100,
184 'condition' => [
185 '_animation!' => '',
186 ],
187 'render_type' => 'none',
188 'frontend_available' => true,
189 ]
190 );
191
192 $this->end_controls_section();
193
194 $this->start_controls_section(
195 '_section_background',
196 [
197 'label' => __( 'Background', 'elementor' ),
198 'tab' => Controls_Manager::TAB_ADVANCED,
199 ]
200 );
201
202 $this->start_controls_tabs( '_tabs_background' );
203
204 $this->start_controls_tab(
205 '_tab_background_normal',
206 [
207 'label' => __( 'Normal', 'elementor' ),
208 ]
209 );
210
211 $this->add_group_control(
212 Group_Control_Background::get_type(),
213 [
214 'name' => '_background',
215 'selector' => '{{WRAPPER}} > .elementor-widget-container',
216 ]
217 );
218
219 $this->end_controls_tab();
220
221 $this->start_controls_tab(
222 '_tab_background_hover',
223 [
224 'label' => __( 'Hover', 'elementor' ),
225 ]
226 );
227
228 $this->add_group_control(
229 Group_Control_Background::get_type(),
230 [
231 'name' => '_background_hover',
232 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
233 ]
234 );
235
236 $this->add_control(
237 '_background_hover_transition',
238 [
239 'label' => __( 'Transition Duration', 'elementor' ),
240 'type' => Controls_Manager::SLIDER,
241 'range' => [
242 'px' => [
243 'max' => 3,
244 'step' => 0.1,
245 ],
246 ],
247 'render_type' => 'ui',
248 'separator' => 'before',
249 'selectors' => [
250 '{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
251 ],
252 ]
253 );
254
255 $this->end_controls_tab();
256
257 $this->end_controls_tabs();
258
259 $this->end_controls_section();
260
261 $this->start_controls_section(
262 '_section_border',
263 [
264 'label' => __( 'Border', 'elementor' ),
265 'tab' => Controls_Manager::TAB_ADVANCED,
266 ]
267 );
268
269 $this->start_controls_tabs( '_tabs_border' );
270
271 $this->start_controls_tab(
272 '_tab_border_normal',
273 [
274 'label' => __( 'Normal', 'elementor' ),
275 ]
276 );
277
278 $this->add_group_control(
279 Group_Control_Border::get_type(),
280 [
281 'name' => '_border',
282 'selector' => '{{WRAPPER}} > .elementor-widget-container',
283 ]
284 );
285
286 $this->add_responsive_control(
287 '_border_radius',
288 [
289 'label' => __( 'Border Radius', 'elementor' ),
290 'type' => Controls_Manager::DIMENSIONS,
291 'size_units' => [ 'px', '%' ],
292 'selectors' => [
293 '{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
294 ],
295 ]
296 );
297
298 $this->add_group_control(
299 Group_Control_Box_Shadow::get_type(),
300 [
301 'name' => '_box_shadow',
302 'selector' => '{{WRAPPER}} > .elementor-widget-container',
303 ]
304 );
305
306 $this->end_controls_tab();
307
308 $this->start_controls_tab(
309 '_tab_border_hover',
310 [
311 'label' => __( 'Hover', 'elementor' ),
312 ]
313 );
314
315 $this->add_group_control(
316 Group_Control_Border::get_type(),
317 [
318 'name' => '_border_hover',
319 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
320 ]
321 );
322
323 $this->add_responsive_control(
324 '_border_radius_hover',
325 [
326 'label' => __( 'Border Radius', 'elementor' ),
327 'type' => Controls_Manager::DIMENSIONS,
328 'size_units' => [ 'px', '%' ],
329 'selectors' => [
330 '{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
331 ],
332 ]
333 );
334
335 $this->add_group_control(
336 Group_Control_Box_Shadow::get_type(),
337 [
338 'name' => '_box_shadow_hover',
339 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
340 ]
341 );
342
343 $this->add_control(
344 '_border_hover_transition',
345 [
346 'label' => __( 'Transition Duration', 'elementor' ),
347 'type' => Controls_Manager::SLIDER,
348 'separator' => 'before',
349 'range' => [
350 'px' => [
351 'max' => 3,
352 'step' => 0.1,
353 ],
354 ],
355 'selectors' => [
356 '{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
357 ],
358 ]
359 );
360
361 $this->end_controls_tab();
362
363 $this->end_controls_tabs();
364
365 $this->end_controls_section();
366
367 $this->start_controls_section(
368 '_section_position',
369 [
370 'label' => __( 'Positioning', 'elementor' ),
371 'tab' => Controls_Manager::TAB_ADVANCED,
372 ]
373 );
374
375 $this->add_responsive_control(
376 '_element_width',
377 [
378 'label' => __( 'Width', 'elementor' ),
379 'type' => Controls_Manager::SELECT,
380 'default' => '',
381 'options' => [
382 '' => __( 'Default', 'elementor' ),
383 'inherit' => __( 'Full Width', 'elementor' ) . ' (100%)',
384 'auto' => __( 'Inline', 'elementor' ) . ' (auto)',
385 'initial' => __( 'Custom', 'elementor' ),
386 ],
387 'selectors_dictionary' => [
388 'inherit' => '100%',
389 ],
390 'prefix_class' => 'elementor-widget%s__width-',
391 'selectors' => [
392 '{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
393 ],
394 ]
395 );
396
397 $this->add_responsive_control(
398 '_element_custom_width',
399 [
400 'label' => __( 'Custom Width', 'elementor' ),
401 'type' => Controls_Manager::SLIDER,
402 'range' => [
403 'px' => [
404 'max' => 1000,
405 'step' => 1,
406 ],
407 '%' => [
408 'max' => 100,
409 'step' => 1,
410 ],
411 ],
412 'condition' => [
413 '_element_width' => 'initial',
414 ],
415 'device_args' => [
416 Controls_Stack::RESPONSIVE_TABLET => [
417 'condition' => [
418 '_element_width_tablet' => [ 'initial' ],
419 ],
420 ],
421 Controls_Stack::RESPONSIVE_MOBILE => [
422 'condition' => [
423 '_element_width_mobile' => [ 'initial' ],
424 ],
425 ],
426 ],
427 'size_units' => [ 'px', '%', 'vw' ],
428 'selectors' => [
429 '{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
430 ],
431 ]
432 );
433
434 $this->add_responsive_control(
435 '_element_vertical_align',
436 [
437 'label' => __( 'Vertical Align', 'elementor' ),
438 'type' => Controls_Manager::CHOOSE,
439 'options' => [
440 'flex-start' => [
441 'title' => __( 'Start', 'elementor' ),
442 'icon' => 'eicon-v-align-top',
443 ],
444 'center' => [
445 'title' => __( 'Center', 'elementor' ),
446 'icon' => 'eicon-v-align-middle',
447 ],
448 'flex-end' => [
449 'title' => __( 'End', 'elementor' ),
450 'icon' => 'eicon-v-align-bottom',
451 ],
452 ],
453 'condition' => [
454 '_element_width!' => '',
455 '_position' => '',
456 ],
457 'selectors' => [
458 '{{WRAPPER}}' => 'align-self: {{VALUE}}',
459 ],
460 ]
461 );
462
463 $this->add_control(
464 '_position_description',
465 [
466 'raw' => '<strong>' . __( 'Please note!', 'elementor' ) . '</strong> ' . __( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
467 'type' => Controls_Manager::RAW_HTML,
468 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
469 'render_type' => 'ui',
470 'condition' => [
471 '_position!' => '',
472 ],
473 ]
474 );
475
476 $this->add_control(
477 '_position',
478 [
479 'label' => __( 'Position', 'elementor' ),
480 'type' => Controls_Manager::SELECT,
481 'default' => '',
482 'options' => [
483 '' => __( 'Default', 'elementor' ),
484 'absolute' => __( 'Absolute', 'elementor' ),
485 'fixed' => __( 'Fixed', 'elementor' ),
486 ],
487 'prefix_class' => 'elementor-',
488 'frontend_available' => true,
489 ]
490 );
491
492 $start = is_rtl() ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' );
493 $end = ! is_rtl() ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' );
494
495 $this->add_control(
496 '_offset_orientation_h',
497 [
498 'label' => __( 'Horizontal Orientation', 'elementor' ),
499 'type' => Controls_Manager::CHOOSE,
500 'toggle' => false,
501 'default' => 'start',
502 'options' => [
503 'start' => [
504 'title' => $start,
505 'icon' => 'eicon-h-align-left',
506 ],
507 'end' => [
508 'title' => $end,
509 'icon' => 'eicon-h-align-right',
510 ],
511 ],
512 'classes' => 'elementor-control-start-end',
513 'render_type' => 'ui',
514 'condition' => [
515 '_position!' => '',
516 ],
517 ]
518 );
519
520 $this->add_responsive_control(
521 '_offset_x',
522 [
523 'label' => __( 'Offset', 'elementor' ),
524 'type' => Controls_Manager::SLIDER,
525 'range' => [
526 'px' => [
527 'min' => -1000,
528 'max' => 1000,
529 'step' => 1,
530 ],
531 '%' => [
532 'min' => -200,
533 'max' => 200,
534 ],
535 'vw' => [
536 'min' => -200,
537 'max' => 200,
538 ],
539 'vh' => [
540 'min' => -200,
541 'max' => 200,
542 ],
543 ],
544 'default' => [
545 'size' => '0',
546 ],
547 'size_units' => [ 'px', '%', 'vw', 'vh' ],
548 'selectors' => [
549 'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
550 'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
551 ],
552 'condition' => [
553 '_offset_orientation_h!' => 'end',
554 '_position!' => '',
555 ],
556 ]
557 );
558
559 $this->add_responsive_control(
560 '_offset_x_end',
561 [
562 'label' => __( 'Offset', 'elementor' ),
563 'type' => Controls_Manager::SLIDER,
564 'range' => [
565 'px' => [
566 'min' => -1000,
567 'max' => 1000,
568 'step' => 0.1,
569 ],
570 '%' => [
571 'min' => -200,
572 'max' => 200,
573 ],
574 'vw' => [
575 'min' => -200,
576 'max' => 200,
577 ],
578 'vh' => [
579 'min' => -200,
580 'max' => 200,
581 ],
582 ],
583 'default' => [
584 'size' => '0',
585 ],
586 'size_units' => [ 'px', '%', 'vw', 'vh' ],
587 'selectors' => [
588 'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
589 'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
590 ],
591 'condition' => [
592 '_offset_orientation_h' => 'end',
593 '_position!' => '',
594 ],
595 ]
596 );
597
598 $this->add_control(
599 '_offset_orientation_v',
600 [
601 'label' => __( 'Vertical Orientation', 'elementor' ),
602 'type' => Controls_Manager::CHOOSE,
603 'toggle' => false,
604 'default' => 'start',
605 'options' => [
606 'start' => [
607 'title' => __( 'Top', 'elementor' ),
608 'icon' => 'eicon-v-align-top',
609 ],
610 'end' => [
611 'title' => __( 'Bottom', 'elementor' ),
612 'icon' => 'eicon-v-align-bottom',
613 ],
614 ],
615 'render_type' => 'ui',
616 'condition' => [
617 '_position!' => '',
618 ],
619 ]
620 );
621
622 $this->add_responsive_control(
623 '_offset_y',
624 [
625 'label' => __( 'Offset', 'elementor' ),
626 'type' => Controls_Manager::SLIDER,
627 'range' => [
628 'px' => [
629 'min' => -1000,
630 'max' => 1000,
631 'step' => 1,
632 ],
633 '%' => [
634 'min' => -200,
635 'max' => 200,
636 ],
637 'vh' => [
638 'min' => -200,
639 'max' => 200,
640 ],
641 'vw' => [
642 'min' => -200,
643 'max' => 200,
644 ],
645 ],
646 'size_units' => [ 'px', '%', 'vh', 'vw' ],
647 'default' => [
648 'size' => '0',
649 ],
650 'selectors' => [
651 '{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
652 ],
653 'condition' => [
654 '_offset_orientation_v!' => 'end',
655 '_position!' => '',
656 ],
657 ]
658 );
659
660 $this->add_responsive_control(
661 '_offset_y_end',
662 [
663 'label' => __( 'Offset', 'elementor' ),
664 'type' => Controls_Manager::SLIDER,
665 'range' => [
666 'px' => [
667 'min' => -1000,
668 'max' => 1000,
669 'step' => 1,
670 ],
671 '%' => [
672 'min' => -200,
673 'max' => 200,
674 ],
675 'vh' => [
676 'min' => -200,
677 'max' => 200,
678 ],
679 'vw' => [
680 'min' => -200,
681 'max' => 200,
682 ],
683 ],
684 'size_units' => [ 'px', '%', 'vh', 'vw' ],
685 'default' => [
686 'size' => '0',
687 ],
688 'selectors' => [
689 '{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
690 ],
691 'condition' => [
692 '_offset_orientation_v' => 'end',
693 '_position!' => '',
694 ],
695 ]
696 );
697
698 $this->end_controls_section();
699
700 $this->start_controls_section(
701 '_section_responsive',
702 [
703 'label' => __( 'Responsive', 'elementor' ),
704 'tab' => Controls_Manager::TAB_ADVANCED,
705 ]
706 );
707
708 $this->add_control(
709 'responsive_description',
710 [
711 'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
712 'type' => Controls_Manager::RAW_HTML,
713 'content_classes' => 'elementor-descriptor',
714 ]
715 );
716
717 $this->add_control(
718 'hide_desktop',
719 [
720 'label' => __( 'Hide On Desktop', 'elementor' ),
721 'type' => Controls_Manager::SWITCHER,
722 'default' => '',
723 'prefix_class' => 'elementor-',
724 'label_on' => 'Hide',
725 'label_off' => 'Show',
726 'return_value' => 'hidden-desktop',
727 ]
728 );
729
730 $this->add_control(
731 'hide_tablet',
732 [
733 'label' => __( 'Hide On Tablet', 'elementor' ),
734 'type' => Controls_Manager::SWITCHER,
735 'default' => '',
736 'prefix_class' => 'elementor-',
737 'label_on' => 'Hide',
738 'label_off' => 'Show',
739 'return_value' => 'hidden-tablet',
740 ]
741 );
742
743 $this->add_control(
744 'hide_mobile',
745 [
746 'label' => __( 'Hide On Mobile', 'elementor' ),
747 'type' => Controls_Manager::SWITCHER,
748 'default' => '',
749 'prefix_class' => 'elementor-',
750 'label_on' => 'Hide',
751 'label_off' => 'Show',
752 'return_value' => 'hidden-phone',
753 ]
754 );
755
756 $this->end_controls_section();
757
758 Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
759
760 Plugin::$instance->controls_manager->add_custom_css_controls( $this );
761 }
762 }
763