← All changes | includes/controls/transform.php +398 -0 1.0 → 2.13.0 View file →

		@@ -1,0 +1,398 @@
	1	+<?php
	2	+namespace ABlocks\Controls;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\ControlBaseAbstract;
	9	+
	10	+class Transform extends ControlBaseAbstract {
	11	+ public static function get_attribute_default_value( $is_responsive = false ) {
	12	+ if ( $is_responsive ) {
	13	+ return [
	14	+ 'rotate' => '',
	15	+ 'rotateTablet' => '',
	16	+ 'rotateMobile' => '',
	17	+ 'rotate3D' => false,
	18	+ 'rotate3DTablet' => false,
	19	+ 'rotate3DMobile' => false,
	20	+ 'rotateX' => '',
	21	+ 'rotateXTablet' => '',
	22	+ 'rotateXMobile' => '',
	23	+ 'rotateY' => '',
	24	+ 'rotateYTablet' => '',
	25	+ 'rotateYMobile' => '',
	26	+ 'rotateP' => '',
	27	+ 'rotatePTablet' => '',
	28	+ 'rotatePMobile' => '',
	29	+ // Offset
	30	+ 'offsetX' => '',
	31	+ 'offsetXTablet' => '',
	32	+ 'offsetXMobile' => '',
	33	+ 'offsetXUnit' => 'px',
	34	+ 'offsetXUnitTablet' => 'px',
	35	+ 'offsetXUnitMobile' => 'px',
	36	+ 'offsetY' => '',
	37	+ 'offsetYTablet' => '',
	38	+ 'offsetYMobile' => '',
	39	+ 'offsetYUnit' => 'px',
	40	+ 'offsetYUnitTablet' => 'px',
	41	+ 'offsetYUnitMobile' => 'px',
	42	+ // Scale
	43	+ 'scaleProportions' => false,
	44	+ 'scale' => '',
	45	+ 'scaleTablet' => '',
	46	+ 'scaleMobile' => '',
	47	+ 'scaleX' => '',
	48	+ 'scaleXTablet' => '',
	49	+ 'scaleXMobile' => '',
	50	+ 'scaleY' => '',
	51	+ 'scaleYTablet' => '',
	52	+ 'scaleYMobile' => '',
	53	+ // Skew
	54	+ 'skewX' => '',
	55	+ 'skewXTablet' => '',
	56	+ 'skewXMobile' => '',
	57	+ 'skewY' => '',
	58	+ 'skewYTablet' => '',
	59	+ 'skewYMobile' => '',
	60	+ // Flip
	61	+ 'flipHorizontal' => false,
	62	+ 'flipVertical' => false,
	63	+ // X Anchor
	64	+ 'xAnchorPoint' => '',
	65	+ 'xAnchorPointTablet' => '',
	66	+ 'xAnchorPointMobile' => '',
	67	+ // Y Anchor
	68	+ 'yAnchorPoint' => '',
	69	+ 'yAnchorPointTablet' => '',
	70	+ 'yAnchorPointMobile' => '',
	71	+
	72	+ // Rotate - Hover
	73	+ 'rotateH' => '',
	74	+ 'rotateHTablet' => '',
	75	+ 'rotateHMobile' => '',
	76	+ 'rotate3DH' => false,
	77	+ 'rotate3DHTablet' => false,
	78	+ 'rotate3DHMobile' => false,
	79	+ 'rotateXH' => '',
	80	+ 'rotateXHTablet' => '',
	81	+ 'rotateXHMobile' => '',
	82	+ 'rotateYH' => '',
	83	+ 'rotateYHTablet' => '',
	84	+ 'rotateYHMobile' => '',
	85	+ 'rotatePH' => '',
	86	+ 'rotatePHTablet' => '',
	87	+ 'rotatePHMobile' => '',
	88	+ // Offset - Hover
	89	+ 'offsetXH' => '',
	90	+ 'offsetXHTablet' => '',
	91	+ 'offsetXHMobile' => '',
	92	+ 'offsetXHUnit' => 'px',
	93	+ 'offsetXHUnitTablet' => 'px',
	94	+ 'offsetXHUnitMobile' => 'px',
	95	+ 'offsetYH' => '',
	96	+ 'offsetYHTablet' => '',
	97	+ 'offsetYHMobile' => '',
	98	+ 'offsetYHUnit' => 'px',
	99	+ 'offsetYHUnitTablet' => 'px',
	100	+ 'offsetYHUnitMobile' => 'px',
	101	+ // Scale - Hover
	102	+ 'scaleProportionsH' => false,
	103	+ 'scaleH' => '',
	104	+ 'scaleHTablet' => '',
	105	+ 'scaleHMobile' => '',
	106	+ 'scaleXH' => '',
	107	+ 'scaleXHTablet' => '',
	108	+ 'scaleXHMobile' => '',
	109	+ 'scaleYH' => '',
	110	+ 'scaleYHTablet' => '',
	111	+ 'scaleYHMobile' => '',
	112	+ // Skew - Hover
	113	+ 'skewXH' => '',
	114	+ 'skewXHTablet' => '',
	115	+ 'skewXHMobile' => '',
	116	+ 'skewYH' => '',
	117	+ 'skewYHTablet' => '',
	118	+ 'skewYHMobile' => '',
	119	+ // Flip - Hover
	120	+ 'flipHorizontalH' => false,
	121	+ 'flipVerticalH' => false,
	122	+ // X Anchor - Hover
	123	+ 'xAnchorPointH' => '',
	124	+ 'xAnchorPointHTablet' => '',
	125	+ 'xAnchorPointHMobile' => '',
	126	+ // Y Anchor - Hover
	127	+ 'yAnchorPointH' => '',
	128	+ 'yAnchorPointHTablet' => '',
	129	+ 'yAnchorPointHMobile' => '',
	130	+
	131	+ // Transition
	132	+ 'transitionH' => '',
	133	+ ];
	134	+ }//end if
	135	+ return [
	136	+ 'rotate' => '',
	137	+ 'rotate3D' => '',
	138	+ 'rotateX' => '',
	139	+ 'rotateY' => '',
	140	+ 'rotateP' => '',
	141	+ 'offsetX' => '',
	142	+ 'offsetXUnit' => 'px',
	143	+ 'offsetY' => '',
	144	+ 'offsetYUnit' => 'px',
	145	+ 'scaleProportions' => false,
	146	+ 'scale' => '',
	147	+ 'scaleX' => '',
	148	+ 'scaleY' => '',
	149	+ 'skewX' => '',
	150	+ 'skewY' => '',
	151	+ 'flipHorizontal' => false,
	152	+ 'flipVertical' => false,
	153	+ 'xAnchorPoint' => '',
	154	+ 'yAnchorPoint' => '',
	155	+ 'rotateH' => '',
	156	+ 'rotate3DH' => false,
	157	+ 'rotateXH' => '',
	158	+ 'rotateYH' => '',
	159	+ 'rotatePH' => '',
	160	+ 'offsetXH' => '',
	161	+ 'offsetXHUnit' => 'px',
	162	+ 'offsetYH' => '',
	163	+ 'offsetYHUnit' => 'px',
	164	+ 'scaleH' => '',
	165	+ 'scaleXH' => '',
	166	+ 'scaleYH' => '',
	167	+ 'skewXH' => '',
	168	+ 'skewYH' => '',
	169	+ 'flipHorizontalH' => false,
	170	+ 'flipVerticalH' => false,
	171	+ 'xAnchorPointH' => '',
	172	+ 'yAnchorPointH' => '',
	173	+ 'transitionH' => '',
	174	+ ];
	175	+
	176	+ }
	177	+
	178	+ public static function get_attribute( $attributeName, $isResponsive = false ) {
	179	+
	180	+ return [
	181	+ $attributeName => [
	182	+ 'type' => 'object',
	183	+ 'default' => self::get_attribute_default_value( $isResponsive ),
	184	+ ]
	185	+ ];
	186	+ }
	187	+
	188	+ public static function get_css( $attributeValue, $property = '', $device = '' ) {
	189	+ $value = wp_parse_args(
	190	+ $attributeValue,
	191	+ $device ? self::responsive_defaults() : self::get_attribute_default_value( false )
	192	+ );
	193	+
	194	+ $css = [];
	195	+ $transformations = [];
	196	+ $transformOrigin = '';
	197	+
	198	+ $x_offset_unit = self::get_unit(
	199	+ [
	200	+ 'unit' => ! empty( $value['offsetXUnit'] ) ? $value['offsetXUnit'] : 'px',
	201	+ 'unitTablet' => ! empty( $value['offsetXUnitTablet'] ) ? $value['offsetXUnitTablet'] : 'px',
	202	+ 'unitMobile' => ! empty( $value['offsetXUnitMobile'] ) ? $value['offsetXUnitMobile'] : 'px',
	203	+ ],
	204	+ $device
	205	+ );
	206	+ $y_offset_unit = self::get_unit(
	207	+ [
	208	+ 'unit' => ! empty( $value['offsetYUnit'] ) ? $value['offsetYUnit'] : 'px',
	209	+ 'unitTablet' => ! empty( $value['offsetYUnitTablet'] ) ? $value['offsetYUnitTablet'] : 'px',
	210	+ 'unitMobile' => ! empty( $value['offsetYUnitMobile'] ) ? $value['offsetYUnitMobile'] : 'px',
	211	+ ],
	212	+ $device
	213	+ );
	214	+
	215	+ if ( ! empty( $value[ 'rotate' . $device ] ) ) {
	216	+ $transformations[] = 'rotate(' . $value[ 'rotate' . $device ] . 'deg)';
	217	+ }
	218	+
	219	+ if ( ! empty( $value[ 'rotateX' . $device ] ) ) {
	220	+ $transformations[] = 'rotateX(' . $value[ 'rotateX' . $device ] . 'deg)';
	221	+ }
	222	+
	223	+ if ( ! empty( $value[ 'rotateY' . $device ] ) ) {
	224	+ $transformations[] = 'rotateY(' . $value[ 'rotateY' . $device ] . 'deg)';
	225	+ }
	226	+
	227	+ if ( $value[ 'rotate3D' . $device ] !== false ) {
	228	+ $rotation = ! empty( $value[ 'rotate' . $device ] ) ? $value[ 'rotate' . $device ] : 0;
	229	+ $transformations[] = 'rotateZ(' . $rotation . 'deg)';
	230	+ }
	231	+
	232	+ if ( ! empty( $value[ 'rotateP' . $device ] ) ) {
	233	+ $perspective = ! empty( $value[ 'rotateP' . $device ] ) ? $value[ 'rotateP' . $device ] : 0;
	234	+ $transformations[] = 'perspective(' . $perspective . 'px)';
	235	+ }
	236	+
	237	+ if ( ! empty( $value[ 'scale' . $device ] ) ) {
	238	+ $transformations[] = 'scale(' . $value[ 'scale' . $device ] . ')';
	239	+ }
	240	+
	241	+ if ( ! empty( $value[ 'scaleX' . $device ] ) ) {
	242	+ $transformations[] = 'scaleX(' . $value[ 'scaleX' . $device ] . ')';
	243	+ }
	244	+
	245	+ if ( ! empty( $value[ 'scaleY' . $device ] ) ) {
	246	+ $transformations[] = 'scaleY(' . $value[ 'scaleY' . $device ] . ')';
	247	+ }
	248	+
	249	+ if ( isset( $value['flipHorizontal'] ) && $value['flipHorizontal'] !== false ) {
	250	+ $transformations[] = 'scaleX(-1)';
	251	+ }
	252	+
	253	+ if ( isset( $value['flipVertical'] ) && $value['flipVertical'] !== false ) {
	254	+ $transformations[] = 'scaleY(-1)';
	255	+ }
	256	+
	257	+ if ( ! empty( $value[ 'offsetX' . $device ] ) ) {
	258	+ $transformations[] = 'translateX(' . $value[ 'offsetX' . $device ] . $x_offset_unit . ')';
	259	+ }
	260	+
	261	+ if ( ! empty( $value[ 'offsetY' . $device ] ) ) {
	262	+ $transformations[] = 'translateY(' . $value[ 'offsetY' . $device ] . $y_offset_unit . ')';
	263	+ }
	264	+
	265	+ if ( ! empty( $value[ 'skewX' . $device ] ) ) {
	266	+ $transformations[] = 'skewX(' . $value[ 'skewX' . $device ] . 'deg)';
	267	+ }
	268	+
	269	+ if ( ! empty( $value[ 'skewY' . $device ] ) ) {
	270	+ $transformations[] = 'skewY(' . $value[ 'skewY' . $device ] . 'deg)';
	271	+ }
	272	+
	273	+ if ( ! empty( $value[ 'xAnchorPoint' . $device ] ) ) {
	274	+ $transformOrigin = $value[ 'yAnchorPoint' . $device ] . ' ' . $value[ 'xAnchorPoint' . $device ];
	275	+ }
	276	+
	277	+ if ( ! empty( $value[ 'yAnchorPoint' . $device ] ) ) {
	278	+ $transformOrigin = $value[ 'yAnchorPoint' . $device ] . ' ' . $value[ 'xAnchorPoint' . $device ];
	279	+ }
	280	+
	281	+ if ( $transformOrigin ) {
	282	+ $css['transform-origin'] = $transformOrigin;
	283	+ }
	284	+
	285	+ if ( ! empty( $transformations ) ) {
	286	+ $css[ $property ] = implode( ' ', $transformations );
	287	+ }
	288	+
	289	+ return $css;
	290	+ }
	291	+
	292	+ public static function get_hover_css( $attribute_value, $property = '', $device = '' ) {
	293	+ $value = wp_parse_args( $attribute_value, $device ? self::responsive_defaults() : self::get_attribute_default_value( false ) );
	294	+ $transformations = [];
	295	+ $transformOrigin = '';
	296	+ $x_offset_hover_unit = self::get_unit(
	297	+ [
	298	+ 'unit' => ! empty( $value['offsetXHUnit'] ) ? $value['offsetXHUnit'] : 'px',
	299	+ 'unitTablet' => ! empty( $value['offsetXHUnitTablet'] ) ? $value['offsetXHUnitTablet'] : 'px',
	300	+ 'unitMobile' => ! empty( $value['offsetXHUnitMobile'] ) ? $value['offsetXHUnitMobile'] : 'px',
	301	+ ],
	302	+ $device
	303	+ );
	304	+ $y_offset_hover_unit = self::get_unit(
	305	+ [
	306	+ 'unit' => ! empty( $value['offsetYHUnit'] ) ? $value['offsetYHUnit'] : 'px',
	307	+ 'unitTablet' => ! empty( $value['offsetYHUnitTablet'] ) ? $value['offsetYHUnitTablet'] : 'px',
	308	+ 'unitMobile' => ! empty( $value['offsetYHUnitMobile'] ) ? $value['offsetYHUnitMobile'] : 'px',
	309	+ ],
	310	+ $device
	311	+ );
	312	+
	313	+ if ( '' !== $value[ 'rotateH' . $device ] ) {
	314	+ $rotateH = isset( $value[ 'rotateH' . $device ] ) ? $value[ 'rotateH' . $device ] : 0;
	315	+ $transformations[] = 'rotate(' . $rotateH . 'deg)';
	316	+ }
	317	+
	318	+ if ( '' !== $value[ 'rotateXH' . $device ] ) {
	319	+ $transformations[] = 'rotateX(' . $value[ 'rotateXH' . $device ] . 'deg)';
	320	+ }
	321	+
	322	+ if ( '' !== $value[ 'rotateYH' . $device ] ) {
	323	+ $transformations[] = 'rotateY(' . $value[ 'rotateYH' . $device ] . 'deg)';
	324	+ }
	325	+
	326	+ if ( $value[ 'rotate3DH' . $device ] !== false && isset( $value[ 'rotateH' . $device ] ) && $value[ 'rotateH' . $device ] >= 0 ) {
	327	+ $rotateH = isset( $value[ 'rotateH' . $device ] ) ? $value[ 'rotateH' . $device ] : 0;
	328	+ $transformations[] = 'rotateZ(' . $rotateH . 'deg)';
	329	+ }
	330	+
	331	+ if ( '' !== $value[ 'rotatePH' . $device ] ) {
	332	+ $rotatePH = isset( $value[ 'rotatePH' . $device ] ) ? $value[ 'rotatePH' . $device ] : 0;
	333	+ $transformations[] = 'perspective(' . $rotatePH . 'px)';
	334	+ }
	335	+
	336	+ if ( '' !== $value[ 'scaleH' . $device ] ) {
	337	+ $transformations[] = 'scale(' . $value[ 'scaleH' . $device ] . ')';
	338	+ }
	339	+
	340	+ if ( '' !== $value[ 'scaleXH' . $device ] ) {
	341	+ $transformations[] = 'scaleX(' . $value[ 'scaleXH' . $device ] . ')';
	342	+ }
	343	+
	344	+ if ( '' !== $value[ 'scaleYH' . $device ] ) {
	345	+ $transformations[] = 'scaleY(' . $value[ 'scaleYH' . $device ] . ')';
	346	+ }
	347	+
	348	+ if ( '' !== $value[ 'offsetXH' . $device ] ) {
	349	+ $transformations[] = 'translateX(' . $value[ 'offsetXH' . $device ] . $x_offset_hover_unit . ')';
	350	+ }
	351	+
	352	+ if ( '' !== $value[ 'offsetYH' . $device ] ) {
	353	+ $transformations[] = 'translateY(' . $value[ 'offsetYH' . $device ] . $y_offset_hover_unit . ')';
	354	+ }
	355	+
	356	+ if ( '' !== $value[ 'skewXH' . $device ] ) {
	357	+ $transformations[] = 'skewX(' . $value[ 'skewXH' . $device ] . 'deg)';
	358	+ }
	359	+
	360	+ if ( '' !== $value[ 'skewYH' . $device ] ) {
	361	+ $transformations[] = 'skewY(' . $value[ 'skewYH' . $device ] . 'deg)';
	362	+ }
	363	+
	364	+ if ( $value[ 'xAnchorPointH' . $device ] || $value[ 'yAnchorPointH' . $device ] ) {
	365	+ $transformOrigin = $value[ 'yAnchorPointH' . $device ] . ' ' . $value[ 'xAnchorPointH' . $device ];
	366	+ }
	367	+
	368	+ if ( count( $transformations ) ) {
	369	+ if ( false !== $value['flipHorizontalH'] ) {
	370	+ $transformations[] = 'scaleX(-1)';
	371	+ }
	372	+
	373	+ if ( false !== $value['flipVerticalH'] ) {
	374	+ $transformations[] = 'scaleY(-1)';
	375	+ }
	376	+ }
	377	+
	378	+ $css = [];
	379	+
	380	+ if ( 0 !== count( $transformations ) ) {
	381	+ $css[ $property ] = implode( ' ', $transformations );
	382	+ }
	383	+
	384	+ if ( $transformOrigin ) {
	385	+ $css['transform-origin'] = $transformOrigin;
	386	+ }
	387	+
	388	+ if ( ! empty( $transformations ) ) {
	389	+ $css[ $property ] = implode( ' ', $transformations );
	390	+ }
	391	+
	392	+ if ( isset( $value[ 'transitionH' . $device ] ) && $value[ 'transitionH' . $device ] !== '' ) {
	393	+ $css['transition-duration'] = "{$value['transitionH' . $device]}s";
	394	+ }
	395	+
	396	+ return $css;
	397	+ }
	398	+}