← All changes | includes/blocks/image/block.php +290 -0 1.1.1 → 2.14.0 View file →

		@@ -1,0 +1,290 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\Image;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\BlockBaseAbstract;
	9	+use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
	11	+use ABlocks\Controls\Alignment;
	12	+use ABlocks\Controls\Border;
	13	+use ABlocks\Controls\Dimensions;
	14	+use ABlocks\Controls\Typography;
	15	+use ABlocks\Controls\CssFilter;
	16	+use ABlocks\Controls\BoxShadow;
	17	+use ABlocks\Controls\Range;
	18	+use ABlocks\Controls\Color;
	19	+
	20	+class Block extends BlockBaseAbstract {
	21	+ protected $block_name = 'image';
	22	+
	23	+ public function build_css_v1( $attributes ) {
	24	+
	25	+ // Generate CSS
	26	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	27	+ // Image Wrapper CSS
	28	+ $css_generator->add_class_styles(
	29	+ '{{WRAPPER}}',
	30	+ $this->get_wrapper_css( $attributes ),
	31	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	32	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	33	+ );
	34	+
	35	+ // Image container css
	36	+ $css_generator->add_class_styles(
	37	+ '{{WRAPPER}}',
	38	+ $this->get_image_container_css( $attributes ),
	39	+ $this->get_image_container_css( $attributes, 'Tablet' ),
	40	+ $this->get_image_container_css( $attributes, 'Mobile' ),
	41	+ );
	42	+ // Image css
	43	+ $css_generator->add_class_styles(
	44	+ '{{WRAPPER}} .ablocks-image-figure img',
	45	+ $this->get_image_css( $attributes ),
	46	+ $this->get_image_css( $attributes, 'Tablet' ),
	47	+ $this->get_image_css( $attributes, 'Mobile' ),
	48	+ );
	49	+
	50	+ // Image hover css
	51	+ $css_generator->add_class_styles(
	52	+ '{{WRAPPER}} .ablocks-image-figure img:hover',
	53	+ $this->get_image_hover_css( $attributes ),
	54	+ $this->get_image_hover_css( $attributes, 'Tablet' ),
	55	+ $this->get_image_hover_css( $attributes, 'Mobile' ),
	56	+ );
	57	+
	58	+ return $css_generator->generate_css();
	59	+ }
	60	+ public function build_css_v2( $attributes ) {
	61	+
	62	+ // Generate CSS
	63	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	64	+ // Image Wrapper CSS
	65	+ $css_generator->add_class_styles(
	66	+ '{{WRAPPER}}',
	67	+ $this->get_wrapper_css( $attributes ),
	68	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	69	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	70	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	71	+ );
	72	+
	73	+ // Image container css
	74	+ $css_generator->add_class_styles(
	75	+ '{{WRAPPER}}',
	76	+ $this->get_image_container_css( $attributes ),
	77	+ $this->get_image_container_css( $attributes, 'Tablet' ),
	78	+ $this->get_image_container_css( $attributes, 'Mobile' ),
	79	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_container_css( $attributes, $device ); } )
	80	+ );
	81	+ // Image css
	82	+ $css_generator->add_class_styles(
	83	+ '{{WRAPPER}} .ablocks-image-figure img',
	84	+ $this->get_image_css( $attributes ),
	85	+ $this->get_image_css( $attributes, 'Tablet' ),
	86	+ $this->get_image_css( $attributes, 'Mobile' ),
	87	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_css( $attributes, $device ); } )
	88	+ );
	89	+
	90	+ // Image hover css
	91	+ $css_generator->add_class_styles(
	92	+ '{{WRAPPER}} .ablocks-image-figure img:hover',
	93	+ $this->get_image_hover_css( $attributes ),
	94	+ $this->get_image_hover_css( $attributes, 'Tablet' ),
	95	+ $this->get_image_hover_css( $attributes, 'Mobile' ),
	96	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_hover_css( $attributes, $device ); } )
	97	+ );
	98	+ // Image caption css
	99	+ $css_generator->add_class_styles(
	100	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption',
	101	+ $this->get_image_caption_css( $attributes ),
	102	+ $this->get_image_caption_css( $attributes, 'Tablet' ),
	103	+ $this->get_image_caption_css( $attributes, 'Mobile' ),
	104	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_caption_css( $attributes, $device ); } )
	105	+ );
	106	+
	107	+ // Image caption hover css
	108	+ $css_generator->add_class_styles(
	109	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption:hover',
	110	+ $this->get_image_caption_hover_css( $attributes ),
	111	+ $this->get_image_caption_hover_css( $attributes, 'Tablet' ),
	112	+ $this->get_image_caption_hover_css( $attributes, 'Mobile' ),
	113	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_caption_hover_css( $attributes, $device ); } )
	114	+ );
	115	+
	116	+ return $css_generator->generate_css();
	117	+ }
	118	+ public function build_css( $attributes ) {
	119	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	120	+ return $this->build_css_v2( $attributes );
	121	+ }
	122	+ return $this->build_css_v1( $attributes );
	123	+ }
	124	+
	125	+ public function get_wrapper_css( $attributes, $device = '' ) {
	126	+ return array_merge(
	127	+ isset( $attributes['padding'] ) ? Dimensions::get_css( $attributes['padding'], 'padding', $device ) : [],
	128	+ );
	129	+ }
	130	+
	131	+ public function get_image_css( $attributes, $device = '' ) {
	132	+ $css = [];
	133	+ if ( ! empty( $attributes[ 'imgUrl' . $device ] ) ) {
	134	+ $css['max-width'] = '100%';
	135	+ $css['transition'] = '0.3s ease';
	136	+ }
	137	+
	138	+ if ( isset( $attributes['widthHeightWidget'][ 'width' . $device ] ) ) {
	139	+ $css['width'] = $attributes['widthHeightWidget'][ 'width' . $device ] . 'px';
	140	+ } elseif ( isset( $attributes['widthHeightWidget']['imgNaturalWidth'] ) ) {
	141	+ $css['width'] = $attributes['widthHeightWidget']['imgNaturalWidth'] . 'px';
	142	+ }
	143	+
	144	+ $aspectRatioValue = empty( $attributes['aspectRatio'][ 'value' . $device ] ) ? false : $attributes['aspectRatio'][ 'value' . $device ];
	145	+ $heightValue = empty( $attributes['widthHeightWidget'][ 'height' . $device ] ) ? false : $attributes['widthHeightWidget'][ 'height' . $device ];
	146	+ $showHeight = ! empty( $attributes['widthHeightWidget'][ 'showHeight' . $device ] );
	147	+
	148	+ if ( $showHeight || ( ! $aspectRatioValue && $heightValue ) ) {
	149	+ $css['height'] = $heightValue . 'px';
	150	+ } else {
	151	+ $css['height'] = 'auto';
	152	+ }
	153	+
	154	+ if ( isset( $attributes['objectFit'][ 'value' . $device ] ) && '' !== $attributes['objectFit'][ 'value' . $device ] && 'default' !== $attributes['objectFit'][ 'value' . $device ] ) {
	155	+ $css['object-fit'] = $attributes['objectFit'][ 'value' . $device ];
	156	+ }
	157	+
	158	+ if ( $aspectRatioValue && $aspectRatioValue !== 'original' ) {
	159	+ $css['aspect-ratio'] = $aspectRatioValue;
	160	+ }
	161	+ if ( isset( $attributes['onHoverImg'] ) && 'slide' === $attributes['onHoverImg'] ) {
	162	+ $css['transform'] = 'translate3d(-40px, 0, 0)';
	163	+ $css['transition'] = 'transform 0.3s';
	164	+ }
	165	+
	166	+ return array_merge(
	167	+ $css,
	168	+ Range::get_css([
	169	+ 'attributeValue' => $attributes['opacity'],
	170	+ 'defaultValue' => 1,
	171	+ 'unitDefaultValue' => '',
	172	+ 'property' => 'opacity',
	173	+ 'device' => $device,
	174	+ ]),
	175	+ isset( $attributes['border'] ) ? Border::get_css( $attributes['border'], '', $device ) : [],
	176	+ isset( $attributes['cssFilter'] ) ? CssFilter::get_css( $attributes['cssFilter'], '', $device ) : [],
	177	+ isset( $attributes['boxShadow'] ) ? BoxShadow::get_css( $attributes['boxShadow'], $device ) : []
	178	+ );
	179	+ }
	180	+
	181	+ public function get_image_hover_css( $attributes, $device = '' ) {
	182	+ $css = [];
	183	+ $range_css = Range::get_css([
	184	+ 'attributeValue' => $attributes['opacityH'],
	185	+ 'defaultValue' => 0,
	186	+ 'unitDefaultValue' => '',
	187	+ 'property' => 'opacity',
	188	+ 'device' => $device,
	189	+ ]);
	190	+ $transitionDurationRange = Range::get_css([
	191	+ 'attributeValue' => $attributes['transitionDuration'],
	192	+ 'defaultValue' => 0.5,
	193	+ 'unitDefaultValue' => '',
	194	+ 'property' => 'transition',
	195	+ 'device' => $device,
	196	+ ]);
	197	+ $filterTransitionDurationRange = Range::get_css([
	198	+ 'attributeValue' => $attributes['filterTransitionDuration'],
	199	+ 'defaultValue' => 0.5,
	200	+ 'unitDefaultValue' => '',
	201	+ 'property' => 'filter',
	202	+ 'device' => $device,
	203	+ ]);
	204	+
	205	+ if ( isset( $attributes['onHoverImg'] ) ) {
	206	+ $on_Hover_Img = $attributes['onHoverImg'];
	207	+ if ( 'zoomin' === $on_Hover_Img ) {
	208	+ $css['transform'] = 'scale(1.1)';
	209	+ $css['transition'] = 'transform 0.3s';
	210	+ } elseif ( 'grayscale' === $on_Hover_Img ) {
	211	+ $css['filter'] = 'grayscale(100%)';
	212	+ $css['transition'] = 'transform 0.3s';
	213	+ } elseif ( 'blur' === $on_Hover_Img ) {
	214	+ $css['filter'] = 'blur(3px)';
	215	+ $css['transition'] = 'transform 0.3s';
	216	+ } elseif ( 'slide' === $on_Hover_Img ) {
	217	+ $css['transform'] = 'translate3d(0, 0, 0)';
	218	+ $css['transition'] = 'transform 0.3s';
	219	+ }
	220	+ }
	221	+ if (
	222	+ isset( $attributes['border']['transitionDuration'] ) ||
	223	+ isset( $attributes['boxShadow']['transitionDuration'] ) ||
	224	+ isset( $filterTransitionDurationRange['filter'] ) ||
	225	+ isset( $transitionDurationRange['transition'] )
	226	+ ) {
	227	+ $css['transition'] = sprintf(
	228	+ 'border %ss, box-shadow %ss, opacity %ss, filter %ss, transform 0.3s',
	229	+ ! empty( $attributes['border']['transitionDuration'] ) ? $attributes['border']['transitionDuration'] : $transitionDurationRange['transition'],
	230	+ isset( $attributes['boxShadow']['transitionDuration'] ) ? $attributes['boxShadow']['transitionDuration'] : $transitionDurationRange['transition'],
	231	+ $filterTransitionDurationRange['filter'],
	232	+ $filterTransitionDurationRange['filter']
	233	+ );
	234	+ }
	235	+
	236	+ $border_hover_css = Border::get_hover_css( isset( $attributes['border'] ) ? $attributes['border'] : null, $device );
	237	+
	238	+ return array_merge(
	239	+ $css,
	240	+ $range_css,
	241	+ $border_hover_css,
	242	+ ( isset( $attributes['boxShadow'] ) ) ? BoxShadow::get_hover_css( $attributes['boxShadow'], $device ) : [],
	243	+ ( isset( $attributes['cssHoverFilter'] ) ) ? CssFilter::get_css( $attributes['cssHoverFilter'], '', $device ) : [],
	244	+ );
	245	+ }
	246	+
	247	+ public function get_image_caption_css( $attributes, $device = '' ) {
	248	+ $css = [];
	249	+
	250	+ if ( isset( $attributes['captionColor'] ) && ! empty( $attributes['captionColor'] ) ) {
	251	+ $css['color'] = Color::get_css( isset( $attributes['captionColor'] ) ? $attributes['captionColor'] : '' );
	252	+
	253	+ }
	254	+ if ( isset( $attributes['captionBackground'] ) && ! empty( $attributes['captionBackground'] ) ) {
	255	+ $css['background'] = Color::get_css( isset( $attributes['captionBackground'] ) ? $attributes['captionBackground'] : '' );
	256	+ }
	257	+ if ( isset( $attributes['captionPosition'] ) && ! empty( $attributes['captionPosition'] && 'overlap' === $attributes['captionPosition'] ) ) {
	258	+ $css['width'] = '100%';
	259	+ $css['position'] = 'absolute';
	260	+ $css['bottom'] = 0;
	261	+ $css['left'] = 0;
	262	+ }
	263	+ $typographyGlobal = isset( $attributes['captionTypographyGlobal'] ) ? $attributes['captionTypographyGlobal'] : [];
	264	+ return array_merge(
	265	+ $css,
	266	+ ( isset( $attributes['captionPadding'] ) ) ? Dimensions::get_css( $attributes['captionPadding'], 'padding', $device ) : [],
	267	+ ( isset( $attributes['captionAlignment'] ) ) ? Alignment::get_css( $attributes['captionAlignment'], 'text-align', $device ) : [],
	268	+ ( isset( $attributes['captionTypography'] ) ) ? Typography::get_css( $attributes['captionTypography'], '', $device, $typographyGlobal ) : [],
	269	+ ( isset( $attributes['captionBorder'] ) ) ? Border::get_css( $attributes['captionBorder'], '', $device ) : [],
	270	+ );
	271	+ }
	272	+
	273	+ public function get_image_container_css( $attributes, $device = '' ) {
	274	+ $alignment_value = $attributes['alignment'][ 'value' . $device ] ?? '';
	275	+
	276	+ $css = [];
	277	+ if ( ! empty( $alignment_value ) ) {
	278	+ $css['display'] = 'flex';
	279	+ $css['justify-content'] = $alignment_value;
	280	+ }
	281	+ return $css;
	282	+ }
	283	+
	284	+ public function get_image_caption_hover_css( $attributes, $device = '' ) {
	285	+ if ( isset( $attributes['captionBorder'] ) ) {
	286	+ return Border::get_hover_css( $attributes['captionBorder'], '', $device );
	287	+ }
	288	+ return [];
	289	+ }
	290	+}