← All changes | includes/base/element-base.php +0 -547 3.9.2 → 3.10.0-dev1 View file →

		@@ -1,9 +1,7 @@
1	1	<?php
2	2	namespace Elementor;
3	3
4		-use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5		-
6	4	if ( ! defined( 'ABSPATH' ) ) {
7	5	exit; // Exit if accessed directly.
8	6	}
9	7
		@@ -719,553 +717,8 @@
719	717	*
720	718	* @param Element_Base $this The element.
721	719	*/
722	720	do_action( 'elementor/element/after_add_attributes', $this );
723		- }
724		-
725		- /**
726		- * Register the Transform controls in the advanced tab of the element.
727		- *
728		- * Previously registered under the Widget_Common class, but registered a more fundamental level now to enable access from other widgets.
729		- *
730		- * @since 3.9.0
731		- * @access protected
732		- * @return void
733		- */
734		- protected function register_transform_section( $element_selector = '' ) {
735		- $default_unit_values_deg = [];
736		- $default_unit_values_ms = [];
737		-
738		- // Set the default unit sizes for all active breakpoints.
739		- foreach ( Breakpoints_Manager::get_default_config() as $breakpoint_name => $breakpoint_config ) {
740		- $default_unit_values_deg[ $breakpoint_name ] = [
741		- 'default' => [
742		- 'unit' => 'deg',
743		- ],
744		- ];
745		-
746		- $default_unit_values_ms[ $breakpoint_name ] = [
747		- 'default' => [
748		- 'unit' => 'ms',
749		- ],
750		- ];
751		- }
752		-
753		- $this->start_controls_section(
754		- '_section_transform',
755		- [
756		- 'label' => esc_html__( 'Transform', 'elementor' ),
757		- 'tab' => Controls_Manager::TAB_ADVANCED,
758		- ]
759		- );
760		-
761		- $this->start_controls_tabs( '_tabs_positioning' );
762		-
763		- $transform_prefix_class = 'e-';
764		- $transform_return_value = 'transform';
765		- $transform_selector_class = ' > .elementor-widget-container';
766		- $transform_css_modifier = '';
767		-
768		- if ( 'con' === $element_selector ) {
769		- $transform_selector_class = '.e-' . $element_selector;
770		- $transform_css_modifier = $element_selector . '-';
771		- }
772		-
773		- foreach ( [ '', '_hover' ] as $tab ) {
774		- $state = '_hover' === $tab ? ':hover' : '';
775		-
776		- $this->start_controls_tab(
777		- "_tab_positioning{$tab}",
778		- [
779		- 'label' => '' === $tab ? esc_html__( 'Normal', 'elementor' ) : esc_html__( 'Hover', 'elementor' ),
780		- ]
781		- );
782		-
783		- $this->add_control(
784		- "_transform_rotate_popover{$tab}",
785		- [
786		- 'label' => esc_html__( 'Rotate', 'elementor' ),
787		- 'type' => Controls_Manager::POPOVER_TOGGLE,
788		- 'prefix_class' => $transform_prefix_class,
789		- 'return_value' => $transform_return_value,
790		- ]
791		- );
792		-
793		- $this->start_popover();
794		-
795		- $this->add_responsive_control(
796		- "_transform_rotateZ_effect{$tab}",
797		- [
798		- 'label' => esc_html__( 'Rotate', 'elementor' ),
799		- 'type' => Controls_Manager::SLIDER,
800		- 'device_args' => $default_unit_values_deg,
801		- 'range' => [
802		- 'px' => [
803		- 'min' => -360,
804		- 'max' => 360,
805		- ],
806		- ],
807		- 'selectors' => [
808		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateZ: {{SIZE}}deg',
809		- ],
810		- 'condition' => [
811		- "_transform_rotate_popover{$tab}!" => '',
812		- ],
813		- 'frontend_available' => true,
814		- ]
815		- );
816		-
817		- $this->add_control(
818		- "_transform_rotate_3d{$tab}",
819		- [
820		- 'label' => esc_html__( '3D Rotate', 'elementor' ),
821		- 'type' => Controls_Manager::SWITCHER,
822		- 'label_on' => esc_html__( 'On', 'elementor' ),
823		- 'label_off' => esc_html__( 'Off', 'elementor' ),
824		- 'selectors' => [
825		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateX: 1{{UNIT}}; --e-' . $transform_css_modifier . 'transform-perspective: 20px;',
826		- ],
827		- 'condition' => [
828		- "_transform_rotate_popover{$tab}!" => '',
829		- ],
830		- ]
831		- );
832		-
833		- $this->add_responsive_control(
834		- "_transform_rotateX_effect{$tab}",
835		- [
836		- 'label' => esc_html__( 'Rotate X', 'elementor' ),
837		- 'type' => Controls_Manager::SLIDER,
838		- 'device_args' => $default_unit_values_deg,
839		- 'range' => [
840		- 'px' => [
841		- 'min' => -360,
842		- 'max' => 360,
843		- ],
844		- ],
845		- 'condition' => [
846		- "_transform_rotate_3d{$tab}!" => '',
847		- "_transform_rotate_popover{$tab}!" => '',
848		- ],
849		- 'selectors' => [
850		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateX: {{SIZE}}deg;',
851		- ],
852		- 'frontend_available' => true,
853		- ]
854		- );
855		-
856		- $this->add_responsive_control(
857		- "_transform_rotateY_effect{$tab}",
858		- [
859		- 'label' => esc_html__( 'Rotate Y', 'elementor' ),
860		- 'type' => Controls_Manager::SLIDER,
861		- 'device_args' => $default_unit_values_deg,
862		- 'range' => [
863		- 'px' => [
864		- 'min' => -360,
865		- 'max' => 360,
866		- ],
867		- ],
868		- 'condition' => [
869		- "_transform_rotate_3d{$tab}!" => '',
870		- "_transform_rotate_popover{$tab}!" => '',
871		- ],
872		- 'selectors' => [
873		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateY: {{SIZE}}deg;',
874		- ],
875		- 'frontend_available' => true,
876		- ]
877		- );
878		-
879		- $this->add_responsive_control(
880		- "_transform_perspective_effect{$tab}",
881		- [
882		- 'label' => esc_html__( 'Perspective', 'elementor' ),
883		- 'type' => Controls_Manager::SLIDER,
884		- 'range' => [
885		- 'px' => [
886		- 'min' => 0,
887		- 'max' => 1000,
888		- ],
889		- ],
890		- 'condition' => [
891		- "_transform_rotate_popover{$tab}!" => '',
892		- "_transform_rotate_3d{$tab}!" => '',
893		- ],
894		- 'selectors' => [
895		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-perspective: {{SIZE}}px',
896		- ],
897		- 'frontend_available' => true,
898		- ]
899		- );
900		-
901		- $this->end_popover();
902		-
903		- $this->add_control(
904		- "_transform_translate_popover{$tab}",
905		- [
906		- 'label' => esc_html__( 'Offset', 'elementor' ),
907		- 'type' => Controls_Manager::POPOVER_TOGGLE,
908		- 'prefix_class' => $transform_prefix_class,
909		- 'return_value' => $transform_return_value,
910		- ]
911		- );
912		-
913		- $this->start_popover();
914		-
915		- $this->add_responsive_control(
916		- "_transform_translateX_effect{$tab}",
917		- [
918		- 'label' => esc_html__( 'Offset X', 'elementor' ),
919		- 'type' => Controls_Manager::SLIDER,
920		- 'size_units' => [ '%', 'px' ],
921		- 'range' => [
922		- '%' => [
923		- 'min' => -100,
924		- 'max' => 100,
925		- ],
926		- 'px' => [
927		- 'min' => -1000,
928		- 'max' => 1000,
929		- ],
930		- ],
931		- 'condition' => [
932		- "_transform_translate_popover{$tab}!" => '',
933		- ],
934		- 'selectors' => [
935		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-translateX: {{SIZE}}{{UNIT}};',
936		- ],
937		- 'frontend_available' => true,
938		- ]
939		- );
940		-
941		- $this->add_responsive_control(
942		- "_transform_translateY_effect{$tab}",
943		- [
944		- 'label' => esc_html__( 'Offset Y', 'elementor' ),
945		- 'type' => Controls_Manager::SLIDER,
946		- 'size_units' => [ '%', 'px' ],
947		- 'range' => [
948		- '%' => [
949		- 'min' => -100,
950		- 'max' => 100,
951		- ],
952		- 'px' => [
953		- 'min' => -1000,
954		- 'max' => 1000,
955		- ],
956		- ],
957		- 'condition' => [
958		- "_transform_translate_popover{$tab}!" => '',
959		- ],
960		- 'selectors' => [
961		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-translateY: {{SIZE}}{{UNIT}};',
962		- ],
963		- 'frontend_available' => true,
964		- ]
965		- );
966		-
967		- $this->end_popover();
968		-
969		- $this->add_control(
970		- "_transform_scale_popover{$tab}",
971		- [
972		- 'label' => esc_html__( 'Scale', 'elementor' ),
973		- 'type' => Controls_Manager::POPOVER_TOGGLE,
974		- 'prefix_class' => $transform_prefix_class,
975		- 'return_value' => $transform_return_value,
976		- ]
977		- );
978		-
979		- $this->start_popover();
980		-
981		- $this->add_control(
982		- "_transform_keep_proportions{$tab}",
983		- [
984		- 'label' => esc_html__( 'Keep Proportions', 'elementor' ),
985		- 'type' => Controls_Manager::SWITCHER,
986		- 'label_on' => esc_html__( 'On', 'elementor' ),
987		- 'label_off' => esc_html__( 'Off', 'elementor' ),
988		- 'default' => 'yes',
989		- ]
990		- );
991		-
992		- $this->add_responsive_control(
993		- "_transform_scale_effect{$tab}",
994		- [
995		- 'label' => esc_html__( 'Scale', 'elementor' ),
996		- 'type' => Controls_Manager::SLIDER,
997		- 'range' => [
998		- 'px' => [
999		- 'min' => 0,
1000		- 'max' => 2,
1001		- 'step' => 0.1,
1002		- ],
1003		- ],
1004		- 'condition' => [
1005		- "_transform_scale_popover{$tab}!" => '',
1006		- "_transform_keep_proportions{$tab}!" => '',
1007		- ],
1008		- 'selectors' => [
1009		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scale: {{SIZE}};',
1010		- ],
1011		- 'frontend_available' => true,
1012		- ]
1013		- );
1014		-
1015		- $this->add_responsive_control(
1016		- "_transform_scaleX_effect{$tab}",
1017		- [
1018		- 'label' => esc_html__( 'Scale X', 'elementor' ),
1019		- 'type' => Controls_Manager::SLIDER,
1020		- 'range' => [
1021		- 'px' => [
1022		- 'min' => 0,
1023		- 'max' => 2,
1024		- 'step' => 0.1,
1025		- ],
1026		- ],
1027		- 'condition' => [
1028		- "_transform_scale_popover{$tab}!" => '',
1029		- "_transform_keep_proportions{$tab}" => '',
1030		- ],
1031		- 'selectors' => [
1032		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scaleX: {{SIZE}};',
1033		- ],
1034		- 'frontend_available' => true,
1035		- ]
1036		- );
1037		-
1038		- $this->add_responsive_control(
1039		- "_transform_scaleY_effect{$tab}",
1040		- [
1041		- 'label' => esc_html__( 'Scale Y', 'elementor' ),
1042		- 'type' => Controls_Manager::SLIDER,
1043		- 'range' => [
1044		- 'px' => [
1045		- 'min' => 0,
1046		- 'max' => 2,
1047		- 'step' => 0.1,
1048		- ],
1049		- ],
1050		- 'condition' => [
1051		- "_transform_scale_popover{$tab}!" => '',
1052		- "_transform_keep_proportions{$tab}" => '',
1053		- ],
1054		- 'selectors' => [
1055		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scaleY: {{SIZE}};',
1056		- ],
1057		- 'frontend_available' => true,
1058		- ]
1059		- );
1060		-
1061		- $this->end_popover();
1062		-
1063		- $this->add_control(
1064		- "_transform_skew_popover{$tab}",
1065		- [
1066		- 'label' => esc_html__( 'Skew', 'elementor' ),
1067		- 'type' => Controls_Manager::POPOVER_TOGGLE,
1068		- 'prefix_class' => $transform_prefix_class,
1069		- 'return_value' => $transform_return_value,
1070		- ]
1071		- );
1072		-
1073		- $this->start_popover();
1074		-
1075		- $this->add_responsive_control(
1076		- "_transform_skewX_effect{$tab}",
1077		- [
1078		- 'label' => esc_html__( 'Skew X', 'elementor' ),
1079		- 'type' => Controls_Manager::SLIDER,
1080		- 'device_args' => $default_unit_values_deg,
1081		- 'range' => [
1082		- 'px' => [
1083		- 'min' => -360,
1084		- 'max' => 360,
1085		- ],
1086		- ],
1087		- 'condition' => [
1088		- "_transform_skew_popover{$tab}!" => '',
1089		- ],
1090		- 'selectors' => [
1091		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-skewX: {{SIZE}}deg;',
1092		- ],
1093		- 'frontend_available' => true,
1094		- ]
1095		- );
1096		-
1097		- $this->add_responsive_control(
1098		- "_transform_skewY_effect{$tab}",
1099		- [
1100		- 'label' => esc_html__( 'Skew Y', 'elementor' ),
1101		- 'type' => Controls_Manager::SLIDER,
1102		- 'device_args' => $default_unit_values_deg,
1103		- 'range' => [
1104		- 'px' => [
1105		- 'min' => -360,
1106		- 'max' => 360,
1107		- ],
1108		- ],
1109		- 'condition' => [
1110		- "_transform_skew_popover{$tab}!" => '',
1111		- ],
1112		- 'selectors' => [
1113		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-skewY: {{SIZE}}deg;',
1114		- ],
1115		- 'frontend_available' => true,
1116		- ]
1117		- );
1118		-
1119		- $this->end_popover();
1120		-
1121		- $this->add_control(
1122		- "_transform_flipX_effect{$tab}",
1123		- [
1124		- 'label' => esc_html__( 'Flip Horizontal', 'elementor' ),
1125		- 'type' => Controls_Manager::CHOOSE,
1126		- 'options' => [
1127		- 'transform' => [
1128		- 'title' => esc_html__( 'Flip Horizontal', 'elementor' ),
1129		- 'icon' => 'eicon-flip eicon-tilted',
1130		- ],
1131		- ],
1132		- 'prefix_class' => $transform_prefix_class,
1133		- 'selectors' => [
1134		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-flipX: -1',
1135		- ],
1136		- 'frontend_available' => true,
1137		- ]
1138		- );
1139		-
1140		- $this->add_control(
1141		- "_transform_flipY_effect{$tab}",
1142		- [
1143		- 'label' => esc_html__( 'Flip Vertical', 'elementor' ),
1144		- 'type' => Controls_Manager::CHOOSE,
1145		- 'options' => [
1146		- 'transform' => [
1147		- 'title' => esc_html__( 'Flip Vertical', 'elementor' ),
1148		- 'icon' => 'eicon-flip',
1149		- ],
1150		- ],
1151		- 'prefix_class' => $transform_prefix_class,
1152		- 'selectors' => [
1153		- "{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-flipY: -1',
1154		- ],
1155		- 'frontend_available' => true,
1156		- ]
1157		- );
1158		-
1159		- if ( '_hover' === $tab ) {
1160		- $this->add_control(
1161		- '_transform_transition_hover',
1162		- [
1163		- 'label' => esc_html__( 'Transition Duration (ms)', 'elementor' ),
1164		- 'type' => Controls_Manager::SLIDER,
1165		- 'device_args' => $default_unit_values_ms,
1166		- 'range' => [
1167		- 'px' => [
1168		- 'min' => 100,
1169		- 'max' => 10000,
1170		- ],
1171		- ],
1172		- 'selectors' => [
1173		- '{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-transition-duration: {{SIZE}}ms',
1174		- ],
1175		- ]
1176		- );
1177		- }
1178		-
1179		- ${"transform_origin_conditions{$tab}"} = [
1180		- [
1181		- 'name' => "_transform_scale_popover{$tab}",
1182		- 'operator' => '!=',
1183		- 'value' => '',
1184		- ],
1185		- [
1186		- 'name' => "_transform_rotate_popover{$tab}",
1187		- 'operator' => '!=',
1188		- 'value' => '',
1189		- ],
1190		- [
1191		- 'name' => "_transform_flipX_effect{$tab}",
1192		- 'operator' => '!=',
1193		- 'value' => '',
1194		- ],
1195		- [
1196		- 'name' => "_transform_flipY_effect{$tab}",
1197		- 'operator' => '!=',
1198		- 'value' => '',
1199		- ],
1200		- ];
1201		-
1202		- $this->end_controls_tab();
1203		- }
1204		-
1205		- $this->end_controls_tabs();
1206		-
1207		- $transform_origin_conditions = [
1208		- 'relation' => 'or',
1209		- 'terms' => array_merge( $transform_origin_conditions, $transform_origin_conditions_hover ),
1210		- ];
1211		-
1212		- // Will override motion effect transform-origin
1213		- $this->add_responsive_control(
1214		- 'motion_fx_transform_x_anchor_point',
1215		- [
1216		- 'label' => esc_html__( 'X Anchor Point', 'elementor' ),
1217		- 'type' => Controls_Manager::CHOOSE,
1218		- 'options' => [
1219		- 'left' => [
1220		- 'title' => esc_html__( 'Left', 'elementor' ),
1221		- 'icon' => 'eicon-h-align-left',
1222		- ],
1223		- 'center' => [
1224		- 'title' => esc_html__( 'Center', 'elementor' ),
1225		- 'icon' => 'eicon-h-align-center',
1226		- ],
1227		- 'right' => [
1228		- 'title' => esc_html__( 'Right', 'elementor' ),
1229		- 'icon' => 'eicon-h-align-right',
1230		- ],
1231		- ],
1232		- 'conditions' => $transform_origin_conditions,
1233		- 'separator' => 'before',
1234		- 'selectors' => [
1235		- '{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-origin-x: {{VALUE}}',
1236		- ],
1237		- ]
1238		- );
1239		-
1240		- // Will override motion effect transform-origin
1241		- $this->add_responsive_control(
1242		- 'motion_fx_transform_y_anchor_point',
1243		- [
1244		- 'label' => esc_html__( 'Y Anchor Point', 'elementor' ),
1245		- 'type' => Controls_Manager::CHOOSE,
1246		- 'options' => [
1247		- 'top' => [
1248		- 'title' => esc_html__( 'Top', 'elementor' ),
1249		- 'icon' => 'eicon-v-align-top',
1250		- ],
1251		- 'center' => [
1252		- 'title' => esc_html__( 'Center', 'elementor' ),
1253		- 'icon' => 'eicon-v-align-middle',
1254		- ],
1255		- 'bottom' => [
1256		- 'title' => esc_html__( 'Bottom', 'elementor' ),
1257		- 'icon' => 'eicon-v-align-bottom',
1258		- ],
1259		- ],
1260		- 'conditions' => $transform_origin_conditions,
1261		- 'selectors' => [
1262		- '{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-origin-y: {{VALUE}}',
1263		- ],
1264		- ]
1265		- );
1266		-
1267		- $this->end_controls_section();
1268	721	}
1269	722
1270	723	/**
1271	724	* Add Hidden Device Controls