common.php (25077B)
1 <?php 2 namespace Elementor; 3 4 use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager; 5 6 if ( ! defined( 'ABSPATH' ) ) { 7 exit; // Exit if accessed directly. 8 } 9 10 /** 11 * Elementor common widget. 12 * 13 * Elementor base widget that gives you all the advanced options of the basic 14 * widget. 15 * 16 * @since 1.0.0 17 */ 18 class Widget_Common extends Widget_Base { 19 20 /** 21 * Get widget name. 22 * 23 * Retrieve common widget name. 24 * 25 * @since 1.0.0 26 * @access public 27 * 28 * @return string Widget name. 29 */ 30 public function get_name() { 31 return 'common'; 32 } 33 34 /** 35 * Show in panel. 36 * 37 * Whether to show the common widget in the panel or not. 38 * 39 * @since 1.0.0 40 * @access public 41 * 42 * @return bool Whether to show the widget in the panel. 43 */ 44 public function show_in_panel() { 45 return false; 46 } 47 48 /** 49 * @param $shape String Shape name. 50 * 51 * @return string The shape path in the assets folder. 52 */ 53 private function get_shape_url( $shape ) { 54 return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg'; 55 } 56 57 /** 58 * Return a translated user-friendly list of the available masking shapes. 59 * 60 * @param bool $add_custom Determine if the output should contain `Custom` options. 61 * 62 * @return array Array of shapes with their URL as key. 63 */ 64 private function get_shapes( $add_custom = true ) { 65 $shapes = [ 66 'circle' => esc_html__( 'Circle', 'elementor' ), 67 'flower' => esc_html__( 'Flower', 'elementor' ), 68 'sketch' => esc_html__( 'Sketch', 'elementor' ), 69 'triangle' => esc_html__( 'Triangle', 'elementor' ), 70 'blob' => esc_html__( 'Blob', 'elementor' ), 71 'hexagon' => esc_html__( 'Hexagon', 'elementor' ), 72 ]; 73 74 if ( $add_custom ) { 75 $shapes['custom'] = esc_html__( 'Custom', 'elementor' ); 76 } 77 78 return $shapes; 79 } 80 81 /** 82 * Gets a string of CSS rules to apply, and returns an array of selectors with those rules. 83 * This function has been created in order to deal with masking for image widget. 84 * For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget, 85 * the `img` tag should be masked directly. So instead of writing a lot of selectors every time, 86 * this function builds both of those selectors easily. 87 * 88 * @param $rules string The CSS rules to apply. 89 * 90 * @return array Selectors with the rules applied. 91 */ 92 private function get_mask_selectors( $rules ) { 93 $mask_selectors = [ 94 'default' => '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container', 95 'image' => '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img', 96 ]; 97 98 return [ 99 $mask_selectors['default'] => $rules, 100 $mask_selectors['image'] => $rules, 101 ]; 102 } 103 104 /** 105 * Register common widget controls. 106 * 107 * Adds different input fields to allow the user to change and customize the widget settings. 108 * 109 * @since 3.1.0 110 * @access protected 111 */ 112 protected function register_controls() { 113 $this->start_controls_section( 114 '_section_style', 115 [ 116 'label' => esc_html__( 'Advanced', 'elementor' ), 117 'tab' => Controls_Manager::TAB_ADVANCED, 118 ] 119 ); 120 121 // Element Name for the Navigator 122 $this->add_control( 123 '_title', 124 [ 125 'label' => esc_html__( 'Title', 'elementor' ), 126 'type' => Controls_Manager::HIDDEN, 127 'render_type' => 'none', 128 ] 129 ); 130 131 $this->add_responsive_control( 132 '_margin', 133 [ 134 'label' => esc_html__( 'Margin', 'elementor' ), 135 'type' => Controls_Manager::DIMENSIONS, 136 'size_units' => [ 'px', 'em', '%', 'rem' ], 137 'selectors' => [ 138 '{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', 139 ], 140 ] 141 ); 142 143 $this->add_responsive_control( 144 '_padding', 145 [ 146 'label' => esc_html__( 'Padding', 'elementor' ), 147 'type' => Controls_Manager::DIMENSIONS, 148 'size_units' => [ 'px', 'em', '%', 'rem' ], 149 'selectors' => [ 150 '{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', 151 ], 152 ] 153 ); 154 155 $this->add_responsive_control( 156 '_z_index', 157 [ 158 'label' => esc_html__( 'Z-Index', 'elementor' ), 159 'type' => Controls_Manager::NUMBER, 160 'min' => 0, 161 'selectors' => [ 162 '{{WRAPPER}}' => 'z-index: {{VALUE}};', 163 ], 164 'separator' => 'before', 165 ] 166 ); 167 168 $this->add_control( 169 '_element_id', 170 [ 171 'label' => esc_html__( 'CSS ID', 'elementor' ), 172 'type' => Controls_Manager::TEXT, 173 'dynamic' => [ 174 'active' => true, 175 ], 176 'default' => '', 177 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ), 178 'style_transfer' => false, 179 'classes' => 'elementor-control-direction-ltr', 180 ] 181 ); 182 183 $this->add_control( 184 '_css_classes', 185 [ 186 'label' => esc_html__( 'CSS Classes', 'elementor' ), 187 'type' => Controls_Manager::TEXT, 188 'dynamic' => [ 189 'active' => true, 190 ], 191 'prefix_class' => '', 192 'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ), 193 'classes' => 'elementor-control-direction-ltr', 194 ] 195 ); 196 197 $this->end_controls_section(); 198 199 $this->start_controls_section( 200 'section_effects', 201 [ 202 'label' => esc_html__( 'Motion Effects', 'elementor' ), 203 'tab' => Controls_Manager::TAB_ADVANCED, 204 ] 205 ); 206 207 $this->add_responsive_control( 208 '_animation', 209 [ 210 'label' => esc_html__( 'Entrance Animation', 'elementor' ), 211 'type' => Controls_Manager::ANIMATION, 212 'frontend_available' => true, 213 ] 214 ); 215 216 $this->add_control( 217 'animation_duration', 218 [ 219 'label' => esc_html__( 'Animation Duration', 'elementor' ), 220 'type' => Controls_Manager::SELECT, 221 'default' => '', 222 'options' => [ 223 'slow' => esc_html__( 'Slow', 'elementor' ), 224 '' => esc_html__( 'Normal', 'elementor' ), 225 'fast' => esc_html__( 'Fast', 'elementor' ), 226 ], 227 'prefix_class' => 'animated-', 228 'condition' => [ 229 '_animation!' => '', 230 ], 231 ] 232 ); 233 234 $this->add_control( 235 '_animation_delay', 236 [ 237 'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)', 238 'type' => Controls_Manager::NUMBER, 239 'default' => '', 240 'min' => 0, 241 'step' => 100, 242 'condition' => [ 243 '_animation!' => '', 244 ], 245 'render_type' => 'none', 246 'frontend_available' => true, 247 ] 248 ); 249 250 $this->end_controls_section(); 251 252 $this->start_controls_section( 253 '_section_background', 254 [ 255 'label' => esc_html__( 'Background', 'elementor' ), 256 'tab' => Controls_Manager::TAB_ADVANCED, 257 ] 258 ); 259 260 $this->start_controls_tabs( '_tabs_background' ); 261 262 $this->start_controls_tab( 263 '_tab_background_normal', 264 [ 265 'label' => esc_html__( 'Normal', 'elementor' ), 266 ] 267 ); 268 269 $this->add_group_control( 270 Group_Control_Background::get_type(), 271 [ 272 'name' => '_background', 273 'selector' => '{{WRAPPER}} > .elementor-widget-container', 274 ] 275 ); 276 277 $this->end_controls_tab(); 278 279 $this->start_controls_tab( 280 '_tab_background_hover', 281 [ 282 'label' => esc_html__( 'Hover', 'elementor' ), 283 ] 284 ); 285 286 $this->add_group_control( 287 Group_Control_Background::get_type(), 288 [ 289 'name' => '_background_hover', 290 'selector' => '{{WRAPPER}}:hover .elementor-widget-container', 291 ] 292 ); 293 294 $this->add_control( 295 '_background_hover_transition', 296 [ 297 'label' => esc_html__( 'Transition Duration', 'elementor' ), 298 'type' => Controls_Manager::SLIDER, 299 'range' => [ 300 'px' => [ 301 'max' => 3, 302 'step' => 0.1, 303 ], 304 ], 305 'render_type' => 'ui', 306 'separator' => 'before', 307 'selectors' => [ 308 '{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s', 309 ], 310 ] 311 ); 312 313 $this->end_controls_tab(); 314 315 $this->end_controls_tabs(); 316 317 $this->end_controls_section(); 318 319 $this->start_controls_section( 320 '_section_border', 321 [ 322 'label' => esc_html__( 'Border', 'elementor' ), 323 'tab' => Controls_Manager::TAB_ADVANCED, 324 ] 325 ); 326 327 $this->start_controls_tabs( '_tabs_border' ); 328 329 $this->start_controls_tab( 330 '_tab_border_normal', 331 [ 332 'label' => esc_html__( 'Normal', 'elementor' ), 333 ] 334 ); 335 336 $this->add_group_control( 337 Group_Control_Border::get_type(), 338 [ 339 'name' => '_border', 340 'selector' => '{{WRAPPER}} > .elementor-widget-container', 341 ] 342 ); 343 344 $this->add_responsive_control( 345 '_border_radius', 346 [ 347 'label' => esc_html__( 'Border Radius', 'elementor' ), 348 'type' => Controls_Manager::DIMENSIONS, 349 'size_units' => [ 'px', '%' ], 350 'selectors' => [ 351 '{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', 352 ], 353 ] 354 ); 355 356 $this->add_group_control( 357 Group_Control_Box_Shadow::get_type(), 358 [ 359 'name' => '_box_shadow', 360 'selector' => '{{WRAPPER}} > .elementor-widget-container', 361 ] 362 ); 363 364 $this->end_controls_tab(); 365 366 $this->start_controls_tab( 367 '_tab_border_hover', 368 [ 369 'label' => esc_html__( 'Hover', 'elementor' ), 370 ] 371 ); 372 373 $this->add_group_control( 374 Group_Control_Border::get_type(), 375 [ 376 'name' => '_border_hover', 377 'selector' => '{{WRAPPER}}:hover .elementor-widget-container', 378 ] 379 ); 380 381 $this->add_responsive_control( 382 '_border_radius_hover', 383 [ 384 'label' => esc_html__( 'Border Radius', 'elementor' ), 385 'type' => Controls_Manager::DIMENSIONS, 386 'size_units' => [ 'px', '%' ], 387 'selectors' => [ 388 '{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', 389 ], 390 ] 391 ); 392 393 $this->add_group_control( 394 Group_Control_Box_Shadow::get_type(), 395 [ 396 'name' => '_box_shadow_hover', 397 'selector' => '{{WRAPPER}}:hover .elementor-widget-container', 398 ] 399 ); 400 401 $this->add_control( 402 '_border_hover_transition', 403 [ 404 'label' => esc_html__( 'Transition Duration', 'elementor' ), 405 'type' => Controls_Manager::SLIDER, 406 'separator' => 'before', 407 'range' => [ 408 'px' => [ 409 'max' => 3, 410 'step' => 0.1, 411 ], 412 ], 413 'selectors' => [ 414 '{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s', 415 ], 416 ] 417 ); 418 419 $this->end_controls_tab(); 420 421 $this->end_controls_tabs(); 422 423 $this->end_controls_section(); 424 425 $this->start_controls_section( 426 '_section_masking', 427 [ 428 'label' => esc_html__( 'Mask', 'elementor' ), 429 'tab' => Controls_Manager::TAB_ADVANCED, 430 ] 431 ); 432 433 $this->add_control( 434 '_mask_switch', 435 [ 436 'label' => esc_html__( 'Mask', 'elementor' ), 437 'type' => Controls_Manager::SWITCHER, 438 'label_on' => esc_html__( 'On', 'elementor' ), 439 'label_off' => esc_html__( 'Off', 'elementor' ), 440 'default' => '', 441 ] 442 ); 443 444 $this->add_control( 445 '_mask_shape', 446 [ 447 'label' => esc_html__( 'Shape', 'elementor' ), 448 'type' => Controls_Manager::SELECT, 449 'options' => $this->get_shapes(), 450 'default' => 'circle', 451 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ), 452 'condition' => [ 453 '_mask_switch!' => '', 454 ], 455 ] 456 ); 457 458 $this->add_control( 459 '_mask_image', 460 [ 461 'label' => esc_html__( 'Image', 'elementor' ), 462 'type' => Controls_Manager::MEDIA, 463 'media_type' => 'image', 464 'should_include_svg_inline_option' => true, 465 'library_type' => 'image/svg+xml', 466 'dynamic' => [ 467 'active' => true, 468 ], 469 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ), 470 'condition' => [ 471 '_mask_switch!' => '', 472 '_mask_shape' => 'custom', 473 ], 474 ] 475 ); 476 477 $this->add_control( 478 '_mask_notice', 479 [ 480 'type' => Controls_Manager::HIDDEN, 481 'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) . 482 '<br>' . 483 sprintf( 484 /* translators: %1$s Link open tag, %2$s: Link close tag. */ 485 esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ), 486 '<a target="_blank" href="https://go.elementor.com/mask-control">', 487 '</a>' 488 ), 489 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', 490 'condition' => [ 491 '_mask_switch!' => '', 492 ], 493 ] 494 ); 495 496 $this->add_responsive_control( 497 '_mask_size', 498 [ 499 'label' => esc_html__( 'Size', 'elementor' ), 500 'type' => Controls_Manager::SELECT, 501 'options' => [ 502 'contain' => esc_html__( 'Fit', 'elementor' ), 503 'cover' => esc_html__( 'Fill', 'elementor' ), 504 'custom' => esc_html__( 'Custom', 'elementor' ), 505 ], 506 'default' => 'contain', 507 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ), 508 'condition' => [ 509 '_mask_switch!' => '', 510 ], 511 ] 512 ); 513 514 $this->add_responsive_control( 515 '_mask_size_scale', 516 [ 517 'label' => esc_html__( 'Scale', 'elementor' ), 518 'type' => Controls_Manager::SLIDER, 519 'size_units' => [ 'px', 'em', '%', 'vw' ], 520 'range' => [ 521 'px' => [ 522 'min' => 0, 523 'max' => 500, 524 ], 525 'em' => [ 526 'min' => 0, 527 'max' => 100, 528 ], 529 '%' => [ 530 'min' => 0, 531 'max' => 200, 532 ], 533 'vw' => [ 534 'min' => 0, 535 'max' => 100, 536 ], 537 ], 538 'default' => [ 539 'unit' => '%', 540 'size' => 100, 541 ], 542 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ), 543 'condition' => [ 544 '_mask_switch!' => '', 545 '_mask_size' => 'custom', 546 ], 547 ] 548 ); 549 550 $this->add_responsive_control( 551 '_mask_position', 552 [ 553 'label' => esc_html__( 'Position', 'elementor' ), 554 'type' => Controls_Manager::SELECT, 555 'options' => [ 556 'center center' => esc_html__( 'Center Center', 'elementor' ), 557 'center left' => esc_html__( 'Center Left', 'elementor' ), 558 'center right' => esc_html__( 'Center Right', 'elementor' ), 559 'top center' => esc_html__( 'Top Center', 'elementor' ), 560 'top left' => esc_html__( 'Top Left', 'elementor' ), 561 'top right' => esc_html__( 'Top Right', 'elementor' ), 562 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ), 563 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ), 564 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ), 565 'custom' => esc_html__( 'Custom', 'elementor' ), 566 ], 567 'default' => 'center center', 568 'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ), 569 'condition' => [ 570 '_mask_switch!' => '', 571 ], 572 ] 573 ); 574 575 $this->add_responsive_control( 576 '_mask_position_x', 577 [ 578 'label' => esc_html__( 'X Position', 'elementor' ), 579 'type' => Controls_Manager::SLIDER, 580 'size_units' => [ 'px', 'em', '%', 'vw' ], 581 'range' => [ 582 'px' => [ 583 'min' => -500, 584 'max' => 500, 585 ], 586 'em' => [ 587 'min' => -100, 588 'max' => 100, 589 ], 590 '%' => [ 591 'min' => -100, 592 'max' => 100, 593 ], 594 'vw' => [ 595 'min' => -100, 596 'max' => 100, 597 ], 598 ], 599 'default' => [ 600 'unit' => '%', 601 'size' => 0, 602 ], 603 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ), 604 'condition' => [ 605 '_mask_switch!' => '', 606 '_mask_position' => 'custom', 607 ], 608 ] 609 ); 610 611 $this->add_responsive_control( 612 '_mask_position_y', 613 [ 614 'label' => esc_html__( 'Y Position', 'elementor' ), 615 'type' => Controls_Manager::SLIDER, 616 'size_units' => [ 'px', 'em', '%', 'vw' ], 617 'range' => [ 618 'px' => [ 619 'min' => -500, 620 'max' => 500, 621 ], 622 'em' => [ 623 'min' => -100, 624 'max' => 100, 625 ], 626 '%' => [ 627 'min' => -100, 628 'max' => 100, 629 ], 630 'vw' => [ 631 'min' => -100, 632 'max' => 100, 633 ], 634 ], 635 'default' => [ 636 'unit' => '%', 637 'size' => 0, 638 ], 639 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ), 640 'condition' => [ 641 '_mask_switch!' => '', 642 '_mask_position' => 'custom', 643 ], 644 ] 645 ); 646 647 $this->add_responsive_control( 648 '_mask_repeat', 649 [ 650 'label' => esc_html__( 'Repeat', 'elementor' ), 651 'type' => Controls_Manager::SELECT, 652 'options' => [ 653 'no-repeat' => esc_html__( 'No-Repeat', 'elementor' ), 654 'repeat' => esc_html__( 'Repeat', 'elementor' ), 655 'repeat-x' => esc_html__( 'Repeat-X', 'elementor' ), 656 'repeat-Y' => esc_html__( 'Repeat-Y', 'elementor' ), 657 'round' => esc_html__( 'Round', 'elementor' ), 658 'space' => esc_html__( 'Space', 'elementor' ), 659 ], 660 'default' => 'no-repeat', 661 'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ), 662 'condition' => [ 663 '_mask_switch!' => '', 664 '_mask_size!' => 'cover', 665 ], 666 ] 667 ); 668 669 $this->end_controls_section(); 670 671 $this->start_controls_section( 672 '_section_position', 673 [ 674 'label' => esc_html__( 'Positioning', 'elementor' ), 675 'tab' => Controls_Manager::TAB_ADVANCED, 676 ] 677 ); 678 679 $this->add_responsive_control( 680 '_element_width', 681 [ 682 'label' => esc_html__( 'Width', 'elementor' ), 683 'type' => Controls_Manager::SELECT, 684 'default' => '', 685 'options' => [ 686 '' => esc_html__( 'Default', 'elementor' ), 687 'inherit' => esc_html__( 'Full Width', 'elementor' ) . ' (100%)', 688 'auto' => esc_html__( 'Inline', 'elementor' ) . ' (auto)', 689 'initial' => esc_html__( 'Custom', 'elementor' ), 690 ], 691 'selectors_dictionary' => [ 692 'inherit' => '100%', 693 ], 694 'prefix_class' => 'elementor-widget%s__width-', 695 'selectors' => [ 696 '{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}', 697 ], 698 ] 699 ); 700 701 $this->add_responsive_control( 702 '_element_custom_width', 703 [ 704 'label' => esc_html__( 'Custom Width', 'elementor' ), 705 'type' => Controls_Manager::SLIDER, 706 'range' => [ 707 'px' => [ 708 'max' => 1000, 709 'step' => 1, 710 ], 711 '%' => [ 712 'max' => 100, 713 'step' => 1, 714 ], 715 ], 716 'condition' => [ 717 '_element_width' => 'initial', 718 ], 719 'device_args' => [ 720 Breakpoints_Manager::BREAKPOINT_KEY_TABLET => [ 721 'condition' => [ 722 '_element_width_tablet' => [ 'initial' ], 723 ], 724 ], 725 Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [ 726 'condition' => [ 727 '_element_width_mobile' => [ 'initial' ], 728 ], 729 ], 730 ], 731 'size_units' => [ 'px', '%', 'vw' ], 732 'selectors' => [ 733 '{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}', 734 ], 735 ] 736 ); 737 738 $this->add_responsive_control( 739 '_element_vertical_align', 740 [ 741 'label' => esc_html__( 'Vertical Align', 'elementor' ), 742 'type' => Controls_Manager::CHOOSE, 743 'options' => [ 744 'flex-start' => [ 745 'title' => esc_html__( 'Start', 'elementor' ), 746 'icon' => 'eicon-v-align-top', 747 ], 748 'center' => [ 749 'title' => esc_html__( 'Center', 'elementor' ), 750 'icon' => 'eicon-v-align-middle', 751 ], 752 'flex-end' => [ 753 'title' => esc_html__( 'End', 'elementor' ), 754 'icon' => 'eicon-v-align-bottom', 755 ], 756 ], 757 'condition' => [ 758 '_element_width!' => '', 759 '_position' => '', 760 ], 761 'selectors' => [ 762 '{{WRAPPER}}' => 'align-self: {{VALUE}}', 763 ], 764 ] 765 ); 766 767 $this->add_control( 768 '_position_description', 769 [ 770 'raw' => '<strong>' . esc_html__( 'Please note!', 'elementor' ) . '</strong> ' . esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ), 771 'type' => Controls_Manager::RAW_HTML, 772 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning', 773 'render_type' => 'ui', 774 'condition' => [ 775 '_position!' => '', 776 ], 777 ] 778 ); 779 780 $this->add_control( 781 '_position', 782 [ 783 'label' => esc_html__( 'Position', 'elementor' ), 784 'type' => Controls_Manager::SELECT, 785 'default' => '', 786 'options' => [ 787 '' => esc_html__( 'Default', 'elementor' ), 788 'absolute' => esc_html__( 'Absolute', 'elementor' ), 789 'fixed' => esc_html__( 'Fixed', 'elementor' ), 790 ], 791 'prefix_class' => 'elementor-', 792 'frontend_available' => true, 793 ] 794 ); 795 796 $start = is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' ); 797 $end = ! is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' ); 798 799 $this->add_control( 800 '_offset_orientation_h', 801 [ 802 'label' => esc_html__( 'Horizontal Orientation', 'elementor' ), 803 'type' => Controls_Manager::CHOOSE, 804 'toggle' => false, 805 'default' => 'start', 806 'options' => [ 807 'start' => [ 808 'title' => $start, 809 'icon' => 'eicon-h-align-left', 810 ], 811 'end' => [ 812 'title' => $end, 813 'icon' => 'eicon-h-align-right', 814 ], 815 ], 816 'classes' => 'elementor-control-start-end', 817 'render_type' => 'ui', 818 'condition' => [ 819 '_position!' => '', 820 ], 821 ] 822 ); 823 824 $this->add_responsive_control( 825 '_offset_x', 826 [ 827 'label' => esc_html__( 'Offset', 'elementor' ), 828 'type' => Controls_Manager::SLIDER, 829 'range' => [ 830 'px' => [ 831 'min' => -1000, 832 'max' => 1000, 833 'step' => 1, 834 ], 835 '%' => [ 836 'min' => -200, 837 'max' => 200, 838 ], 839 'vw' => [ 840 'min' => -200, 841 'max' => 200, 842 ], 843 'vh' => [ 844 'min' => -200, 845 'max' => 200, 846 ], 847 ], 848 'default' => [ 849 'size' => '0', 850 ], 851 'size_units' => [ 'px', '%', 'vw', 'vh' ], 852 'selectors' => [ 853 'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}', 854 'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}', 855 ], 856 'condition' => [ 857 '_offset_orientation_h!' => 'end', 858 '_position!' => '', 859 ], 860 ] 861 ); 862 863 $this->add_responsive_control( 864 '_offset_x_end', 865 [ 866 'label' => esc_html__( 'Offset', 'elementor' ), 867 'type' => Controls_Manager::SLIDER, 868 'range' => [ 869 'px' => [ 870 'min' => -1000, 871 'max' => 1000, 872 'step' => 0.1, 873 ], 874 '%' => [ 875 'min' => -200, 876 'max' => 200, 877 ], 878 'vw' => [ 879 'min' => -200, 880 'max' => 200, 881 ], 882 'vh' => [ 883 'min' => -200, 884 'max' => 200, 885 ], 886 ], 887 'default' => [ 888 'size' => '0', 889 ], 890 'size_units' => [ 'px', '%', 'vw', 'vh' ], 891 'selectors' => [ 892 'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}', 893 'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}', 894 ], 895 'condition' => [ 896 '_offset_orientation_h' => 'end', 897 '_position!' => '', 898 ], 899 ] 900 ); 901 902 $this->add_control( 903 '_offset_orientation_v', 904 [ 905 'label' => esc_html__( 'Vertical Orientation', 'elementor' ), 906 'type' => Controls_Manager::CHOOSE, 907 'toggle' => false, 908 'default' => 'start', 909 'options' => [ 910 'start' => [ 911 'title' => esc_html__( 'Top', 'elementor' ), 912 'icon' => 'eicon-v-align-top', 913 ], 914 'end' => [ 915 'title' => esc_html__( 'Bottom', 'elementor' ), 916 'icon' => 'eicon-v-align-bottom', 917 ], 918 ], 919 'render_type' => 'ui', 920 'condition' => [ 921 '_position!' => '', 922 ], 923 ] 924 ); 925 926 $this->add_responsive_control( 927 '_offset_y', 928 [ 929 'label' => esc_html__( 'Offset', 'elementor' ), 930 'type' => Controls_Manager::SLIDER, 931 'range' => [ 932 'px' => [ 933 'min' => -1000, 934 'max' => 1000, 935 'step' => 1, 936 ], 937 '%' => [ 938 'min' => -200, 939 'max' => 200, 940 ], 941 'vh' => [ 942 'min' => -200, 943 'max' => 200, 944 ], 945 'vw' => [ 946 'min' => -200, 947 'max' => 200, 948 ], 949 ], 950 'size_units' => [ 'px', '%', 'vh', 'vw' ], 951 'default' => [ 952 'size' => '0', 953 ], 954 'selectors' => [ 955 '{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}', 956 ], 957 'condition' => [ 958 '_offset_orientation_v!' => 'end', 959 '_position!' => '', 960 ], 961 ] 962 ); 963 964 $this->add_responsive_control( 965 '_offset_y_end', 966 [ 967 'label' => esc_html__( 'Offset', 'elementor' ), 968 'type' => Controls_Manager::SLIDER, 969 'range' => [ 970 'px' => [ 971 'min' => -1000, 972 'max' => 1000, 973 'step' => 1, 974 ], 975 '%' => [ 976 'min' => -200, 977 'max' => 200, 978 ], 979 'vh' => [ 980 'min' => -200, 981 'max' => 200, 982 ], 983 'vw' => [ 984 'min' => -200, 985 'max' => 200, 986 ], 987 ], 988 'size_units' => [ 'px', '%', 'vh', 'vw' ], 989 'default' => [ 990 'size' => '0', 991 ], 992 'selectors' => [ 993 '{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}', 994 ], 995 'condition' => [ 996 '_offset_orientation_v' => 'end', 997 '_position!' => '', 998 ], 999 ] 1000 ); 1001 1002 $this->end_controls_section(); 1003 1004 $this->start_controls_section( 1005 '_section_responsive', 1006 [ 1007 'label' => esc_html__( 'Responsive', 'elementor' ), 1008 'tab' => Controls_Manager::TAB_ADVANCED, 1009 ] 1010 ); 1011 1012 $this->add_control( 1013 'responsive_description', 1014 [ 1015 'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ), 1016 'type' => Controls_Manager::RAW_HTML, 1017 'content_classes' => 'elementor-descriptor', 1018 ] 1019 ); 1020 1021 $this->add_hidden_device_controls(); 1022 1023 $this->end_controls_section(); 1024 1025 Plugin::$instance->controls_manager->add_custom_attributes_controls( $this ); 1026 1027 Plugin::$instance->controls_manager->add_custom_css_controls( $this ); 1028 } 1029 }