← All changes | includes/controls/background.php +281 -0 1.0 → 2.14.0 View file →

		@@ -1,0 +1,281 @@
	1	+<?php
	2	+namespace ABlocks\Controls;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\ControlBaseAbstract;
	9	+use ABlocks\Controls\Color;
	10	+use ABlocks\Helper;
	11	+
	12	+class Background extends ControlBaseAbstract {
	13	+ public static function get_attribute_default_value( $is_responsive = false ) {
	14	+ if ( $is_responsive ) {
	15	+ return [
	16	+ 'backgroundType' => 'none',
	17	+ 'backgroundTypeH' => 'none',
	18	+ 'backgroundColor' => '',
	19	+ 'backgroundColorH' => '',
	20	+ 'imgId' => '',
	21	+ 'imgIdTablet' => '',
	22	+ 'imgIdMobile' => '',
	23	+ 'imgUrl' => '',
	24	+ 'imgUrlTablet' => '',
	25	+ 'imgUrlMobile' => '',
	26	+ 'imgSize' => '',
	27	+ 'imgSizeTablet' => '',
	28	+ 'imgSizeMobile' => '',
	29	+ 'imgPosition' => '',
	30	+ 'imgPositionTablet' => '',
	31	+ 'imgPositionMobile' => '',
	32	+ 'imgXPositionUnit' => 'px',
	33	+ 'imgXPositionUnitTablet' => '',
	34	+ 'imgXPositionUnitMobile' => '',
	35	+ 'imgXPosition' => '',
	36	+ 'imgXPositionTablet' => '',
	37	+ 'imgXPositionMobile' => '',
	38	+ 'imgYPositionUnit' => 'px',
	39	+ 'imgYPositionUnitTablet' => '',
	40	+ 'imgYPositionUnitMobile' => '',
	41	+ 'imgYPosition' => '',
	42	+ 'imgYPositionTablet' => '',
	43	+ 'imgYPositionMobile' => '',
	44	+ 'imgAttachment' => '',
	45	+ 'imgRepeat' => '',
	46	+ 'imgRepeatTablet' => '',
	47	+ 'imgRepeatMobile' => '',
	48	+ 'imgDisplaySize' => '',
	49	+ 'imgDisplaySizeTablet' => '',
	50	+ 'imgDisplaySizeMobile' => '',
	51	+ 'imgDisplaySizeWidth' => '',
	52	+ 'imgDisplaySizeWidthTablet' => '',
	53	+ 'imgDisplaySizeWidthMobile' => '',
	54	+ 'imgDisplaySizeWidthUnit' => 'px',
	55	+ 'imgDisplaySizeWidthUnitTablet' => '',
	56	+ 'imgDisplaySizeWidthUnitMobile' => '',
	57	+ // Background image - Hover
	58	+ 'imgIdH' => '',
	59	+ 'imgIdTabletH' => '',
	60	+ 'imgIdMobileH' => '',
	61	+ 'imgUrlH' => '',
	62	+ 'imgUrlHTablet' => '',
	63	+ 'imgUrlHMobile' => '',
	64	+ 'imgSizeH' => '',
	65	+ 'imgSizeHTablet' => '',
	66	+ 'imgSizeHMobile' => '',
	67	+ 'imgPositionH' => '',
	68	+ 'imgPositionHTablet' => '',
	69	+ 'imgPositionHMobile' => '',
	70	+ 'imgXPositionUnitH' => 'px',
	71	+ 'imgXPositionUnitHTablet' => '',
	72	+ 'imgXPositionUnitHMobile' => '',
	73	+ 'imgXPositionH' => '',
	74	+ 'imgXPositionHTablet' => '',
	75	+ 'imgXPositionHMobile' => '',
	76	+ 'imgYPositionUnitH' => 'px',
	77	+ 'imgYPositionUnitHTablet' => '',
	78	+ 'imgYPositionUnitHMobile' => '',
	79	+ 'imgYPositionH' => '',
	80	+ 'imgYPositionHTablet' => '',
	81	+ 'imgYPositionHMobile' => '',
	82	+ 'imgAttachmentH' => '',
	83	+ 'imgRepeatH' => '',
	84	+ 'imgRepeatHTablet' => '',
	85	+ 'imgRepeatHMobile' => '',
	86	+ 'imgDisplaySizeH' => '',
	87	+ 'imgDisplaySizeHTablet' => '',
	88	+ 'imgDisplaySizeHMobile' => '',
	89	+ 'imgDisplaySizeWidthH' => '',
	90	+ 'imgDisplaySizeWidthHTablet' => '',
	91	+ 'imgDisplaySizeWidthHMobile' => '',
	92	+ 'imgDisplaySizeWidthHUnit' => 'px',
	93	+ 'imgDisplaySizeWidthHUnitTablet' => '',
	94	+ 'imgDisplaySizeWidthHUnitMobile' => '',
	95	+ // Background image transition
	96	+ 'transitionDuration' => '',
	97	+ // Background video
	98	+ 'videoUrl' => '',
	99	+ 'youtubeURL' => '',
	100	+ 'vimeoURL' => '',
	101	+ 'selfHostedURL' => '',
	102	+ 'externalLink' => false,
	103	+ 'videoSource' => 'none',
	104	+ 'videoPlayOnce' => '',
	105	+ 'videoStartTime' => '',
	106	+ 'videoEndTime' => '',
	107	+ 'playOnMobile' => '',
	108	+ 'videoPrivacyMode' => '',
	109	+ 'fallbackImageUrl' => '',
	110	+ ];
	111	+ }//end if
	112	+ return [
	113	+ 'backgroundType' => 'none',
	114	+ 'backgroundTypeH' => 'none',
	115	+ 'backgroundColor' => '',
	116	+ 'backgroundColorH' => '',
	117	+ // Background image - Normal
	118	+ 'imgId' => '',
	119	+ 'imgUrl' => '',
	120	+ 'imgSize' => '',
	121	+ 'imgPosition' => '',
	122	+ 'imgAttachment' => '',
	123	+ 'imgRepeat' => '',
	124	+ 'imgDisplaySize' => '',
	125	+ 'imgdisplaySizeWidth' => '',
	126	+ 'imgDisplaySizeWidthUnit' => 'px',
	127	+ 'imgXPositionUnit' => 'px',
	128	+ 'imgXPosition' => '',
	129	+ 'imgYPositionUnit' => 'px',
	130	+ 'imgYPosition' => '',
	131	+ // Background image - Hover
	132	+ 'imgIdH' => '',
	133	+ 'imgUrlH' => '',
	134	+ 'imgSizeH' => '',
	135	+ 'imgPositionH' => '',
	136	+ 'imgXPositionUnitH' => 'px',
	137	+ 'imgXPositionH' => '',
	138	+ 'imgYPositionUnitH' => 'px',
	139	+ 'imgYPositionH' => '',
	140	+ 'imgAttachmentH' => '',
	141	+ 'imgRepeatH' => '',
	142	+ 'imgDisplaySizeH' => '',
	143	+ 'imgDisplaySizeWidthH' => '',
	144	+ 'imgDisplaySizeWidthHUnit' => 'px',
	145	+ // Background image transition
	146	+ 'transitionDuration' => '',
	147	+ // Background video
	148	+ 'videoUrl' => '',
	149	+ 'youtubeURL' => '',
	150	+ 'vimeoURL' => '',
	151	+ 'selfHostedURL' => '',
	152	+ 'externalLink' => false,
	153	+ 'videoSource' => 'none',
	154	+ 'videoPlayOnce' => '',
	155	+ 'videoStartTime' => '',
	156	+ 'videoEndTime' => '',
	157	+ 'playOnMobile' => '',
	158	+ 'videoPrivacyMode' => '',
	159	+ 'fallbackImageUrl' => '',
	160	+ ];
	161	+ }
	162	+
	163	+ public static function get_attribute( $attribute_name, $is_responsive = false ) {
	164	+ return [
	165	+ $attribute_name => [
	166	+ 'type' => 'object',
	167	+ 'default' => self::get_attribute_default_value( $is_responsive ),
	168	+ ]
	169	+ ];
	170	+ }
	171	+
	172	+ public static function get_css( $attribute_value, $property = '', $device = '' ) {
	173	+ $value = wp_parse_args( $attribute_value, self::get_attribute_default_value( (bool) $device ) );
	174	+ $css = [];
	175	+
	176	+ if ( $device ) {
	177	+ $unitXPositionUnit = Helper::get_responsive_value( $value, 'imgXPositionUnit', $device );
	178	+ $unitYPositionUnit = Helper::get_responsive_value( $value, 'imgYPositionUnit', $device );
	179	+ $imgDisplaySizeWidthUnit = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthUnit', $device );
	180	+ } else {
	181	+ $unitXPositionUnit = isset( $value['imgXPositionUnit'] ) ? $value['imgXPositionUnit'] : '';
	182	+ $unitYPositionUnit = isset( $value['imgYPositionUnit'] ) ? $value['imgYPositionUnit'] : '';
	183	+ $imgDisplaySizeWidthUnit = isset( $value['imgDisplaySizeWidthUnit'] ) ? $value['imgDisplaySizeWidthUnit'] : '';
	184	+ }//end if
	185	+
	186	+ if ( 'image' === $value['backgroundType'] && '' !== $value[ 'imgUrl' . $device ] ) {
	187	+ // background image
	188	+ $css[ $property . '-image' ] = 'url("' . $value[ 'imgUrl' . $device ] . '")';
	189	+ // background-position css
	190	+ if ( '' !== $value[ 'imgPosition' . $device ] ) {
	191	+ if ( 'custom' === $value[ 'imgPosition' . $device ] ) {
	192	+ $imgXPosition = isset( $value[ 'imgXPosition' . $device ] ) ? $value[ 'imgXPosition' . $device ] : '0';
	193	+ $imgYPosition = isset( $value[ 'imgYPosition' . $device ] ) ? $value[ 'imgYPosition' . $device ] : '0';
	194	+ $css[ $property . '-position' ] = $imgXPosition . $unitXPositionUnit . $imgYPosition . $unitYPositionUnit;
	195	+ } else {
	196	+ $css[ $property . '-position' ] = $value[ 'imgPosition' . $device ];
	197	+ }
	198	+ }
	199	+ // background-attachments css
	200	+ if ( isset( $value[ 'imgAttachment' . $device ] ) && '' !== $value[ 'imgAttachment' . $device ] ) {
	201	+ $css[ $property . '-attachment' ] = $value[ 'imgAttachment' . $device ];
	202	+ }
	203	+ // background-repeat css
	204	+ if ( '' !== $value[ 'imgRepeat' . $device ] ) {
	205	+ $css[ $property . '-repeat' ] = $value[ 'imgRepeat' . $device ];
	206	+ }
	207	+ // background-size css
	208	+ if ( '' !== $value[ 'imgDisplaySize' . $device ] ) {
	209	+ if ( 'custom' === $value[ 'imgDisplaySize' . $device ] ) {
	210	+ $css[ $property . '-size' ] = isset( $value[ 'imgDisplaySizeWidth' . $device ] ) ? $value[ 'imgDisplaySizeWidth' . $device ] . $imgDisplaySizeWidthUnit . ' auto' : '';
	211	+ } else {
	212	+ $css[ $property . '-size' ] = $value[ 'imgDisplaySize' . $device ];
	213	+ }
	214	+ }
	215	+ } elseif ( 'video' === $value['backgroundType'] && '' !== $value['fallbackImageUrl'] && ( $value['videoSource'] == 'none' || ( $value['videoSource'] == 'selfHosted' && empty( $value['videoUrl'] ) ) || ( $value['videoSource'] == 'youtube' && empty( $value['youtubeURL'] ) ) || ( $value['videoSource'] == 'vimeo' && empty( $value['vimeoURL'] ) ) ) ) {
	216	+ $css[ $property . '-image' ] = 'url("' . $value['fallbackImageUrl'] . '")';
	217	+ $css[ $property . '-size' ] = 'cover';
	218	+ } elseif ( 'color' === $value['backgroundType'] && $value['backgroundColor'] ) {
	219	+ $css[ $property ] = Color::get_css( $value['backgroundColor'] );
	220	+ }//end if
	221	+
	222	+ if ( '' !== $value['transitionDuration'] ) {
	223	+ $css['transition'] = $property . ' ' . $value['transitionDuration'] . 's ease';
	224	+ }
	225	+
	226	+ return $css;
	227	+ }
	228	+
	229	+ public static function get_hover_css( $attribute_value, $property = '', $device = '' ) {
	230	+ $value = wp_parse_args( $attribute_value, self::get_attribute_default_value( (bool) $device ) );
	231	+ $css = [];
	232	+
	233	+ if ( $device ) {
	234	+ $unitXPositionUnitH = Helper::get_responsive_value( $value, 'imgXPositionUnitH', $device );
	235	+ $unitYPositionUnitH = Helper::get_responsive_value( $value, 'imgYPositionUnitH', $device );
	236	+ $imgDisplaySizeWidthUnitH = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthHUnit', $device );
	237	+ } else {
	238	+ $unitXPositionUnitH = isset( $value['imgXPositionUnitH'] ) ? $value['imgXPositionUnitH'] : '';
	239	+ $unitYPositionUnitH = isset( $value['imgYPositionUnitH'] ) ? $value['imgYPositionUnitH'] : '';
	240	+ $imgDisplaySizeWidthUnitH = isset( $value['imgDisplaySizeWidthHUnit'] ) ? $value['imgDisplaySizeWidthHUnit'] : '';
	241	+ }//end if
	242	+
	243	+ if ( 'image' === $value['backgroundTypeH'] && '' !== $value[ 'imgUrlH' . $device ] ) {
	244	+ // background image
	245	+ $css[ $property . '-image' ] = 'url("' . $value[ 'imgUrlH' . $device ] . '")';
	246	+ // background-position css
	247	+ if ( '' !== $value[ 'imgPositionH' . $device ] ) {
	248	+ if ( 'custom' === $value[ 'imgPositionH' . $device ] ) {
	249	+ $imgXPosition = isset( $value[ 'imgXPositionH' . $device ] ) ? $value[ 'imgXPositionH' . $device ] : '0';
	250	+ $imgYPosition = isset( $value[ 'imgYPositionH' . $device ] ) ? $value[ 'imgYPositionH' . $device ] : '0';
	251	+ $css[ $property . '-position' ] = $imgXPosition . $unitXPositionUnitH . $imgYPosition . $unitYPositionUnitH;
	252	+ } else {
	253	+ $css[ $property . '-position' ] = $value[ 'imgPositionH' . $device ];
	254	+ }
	255	+ }
	256	+ // background-attachments css
	257	+ if ( '' !== isset( $value[ 'imgAttachmentH' . $device ] ) ) {
	258	+ $css[ $property . '-attachment' ] = $value[ 'imgAttachmentH' . $device ];
	259	+ }
	260	+ // background-repeat css
	261	+ if ( '' !== $value[ 'imgRepeatH' . $device ] ) {
	262	+ $css[ $property . '-repeat' ] = $value[ 'imgRepeatH' . $device ];
	263	+ }
	264	+ // background-size css
	265	+ if ( '' !== $value[ 'imgDisplaySizeH' . $device ] ) {
	266	+ if ( 'custom' === $value[ 'imgDisplaySizeH' . $device ] ) {
	267	+ $css[ $property . '-size' ] = isset( $value[ 'imgDisplaySizeWidthH' . $device ] ) ? $value[ 'imgDisplaySizeWidthH' . $device ] . $imgDisplaySizeWidthUnitH . ' auto' : '';
	268	+ } else {
	269	+ $css[ $property . '-size' ] = $value[ 'imgDisplaySizeH' . $device ];
	270	+ }
	271	+ }
	272	+ } elseif ( 'video' === $value['backgroundTypeH'] ) {
	273	+
	274	+ } elseif ( 'color' === $value['backgroundTypeH'] && $value['backgroundColorH'] ) {
	275	+ $css[ $property ] = Color::get_css( $value['backgroundColorH'] );
	276	+ }//end if
	277	+
	278	+ return $css;
	279	+ }
	280	+
	281	+}