← All changes | includes/blocks/image/block.php +284 -0 2.7.6 → 2.13.0 View file →

		@@ -1,0 +1,284 @@
	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	+ );
	71	+
	72	+ // Image container css
	73	+ $css_generator->add_class_styles(
	74	+ '{{WRAPPER}}',
	75	+ $this->get_image_container_css( $attributes ),
	76	+ $this->get_image_container_css( $attributes, 'Tablet' ),
	77	+ $this->get_image_container_css( $attributes, 'Mobile' ),
	78	+ );
	79	+ // Image css
	80	+ $css_generator->add_class_styles(
	81	+ '{{WRAPPER}} .ablocks-image-figure img',
	82	+ $this->get_image_css( $attributes ),
	83	+ $this->get_image_css( $attributes, 'Tablet' ),
	84	+ $this->get_image_css( $attributes, 'Mobile' ),
	85	+ );
	86	+
	87	+ // Image hover css
	88	+ $css_generator->add_class_styles(
	89	+ '{{WRAPPER}} .ablocks-image-figure img:hover',
	90	+ $this->get_image_hover_css( $attributes ),
	91	+ $this->get_image_hover_css( $attributes, 'Tablet' ),
	92	+ $this->get_image_hover_css( $attributes, 'Mobile' ),
	93	+ );
	94	+ // Image caption css
	95	+ $css_generator->add_class_styles(
	96	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption',
	97	+ $this->get_image_caption_css( $attributes ),
	98	+ $this->get_image_caption_css( $attributes, 'Tablet' ),
	99	+ $this->get_image_caption_css( $attributes, 'Mobile' ),
	100	+ );
	101	+
	102	+ // Image caption hover css
	103	+ $css_generator->add_class_styles(
	104	+ '{{WRAPPER}} .ablocks-image-figure .ablocks-image-caption:hover',
	105	+ $this->get_image_caption_hover_css( $attributes ),
	106	+ $this->get_image_caption_hover_css( $attributes, 'Tablet' ),
	107	+ $this->get_image_caption_hover_css( $attributes, 'Mobile' )
	108	+ );
	109	+
	110	+ return $css_generator->generate_css();
	111	+ }
	112	+ public function build_css( $attributes ) {
	113	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	114	+ return $this->build_css_v2( $attributes );
	115	+ }
	116	+ return $this->build_css_v1( $attributes );
	117	+ }
	118	+
	119	+ public function get_wrapper_css( $attributes, $device = '' ) {
	120	+ return array_merge(
	121	+ isset( $attributes['padding'] ) ? Dimensions::get_css( $attributes['padding'], 'padding', $device ) : [],
	122	+ );
	123	+ }
	124	+
	125	+ public function get_image_css( $attributes, $device = '' ) {
	126	+ $css = [];
	127	+ if ( ! empty( $attributes[ 'imgUrl' . $device ] ) ) {
	128	+ $css['max-width'] = '100%';
	129	+ $css['transition'] = '0.3s ease';
	130	+ }
	131	+
	132	+ if ( isset( $attributes['widthHeightWidget'][ 'width' . $device ] ) ) {
	133	+ $css['width'] = $attributes['widthHeightWidget'][ 'width' . $device ] . 'px';
	134	+ } elseif ( isset( $attributes['widthHeightWidget']['imgNaturalWidth'] ) ) {
	135	+ $css['width'] = $attributes['widthHeightWidget']['imgNaturalWidth'] . 'px';
	136	+ }
	137	+
	138	+ $aspectRatioValue = empty( $attributes['aspectRatio'][ 'value' . $device ] ) ? false : $attributes['aspectRatio'][ 'value' . $device ];
	139	+ $heightValue = empty( $attributes['widthHeightWidget'][ 'height' . $device ] ) ? false : $attributes['widthHeightWidget'][ 'height' . $device ];
	140	+ $showHeight = ! empty( $attributes['widthHeightWidget'][ 'showHeight' . $device ] );
	141	+
	142	+ if ( $showHeight || ( ! $aspectRatioValue && $heightValue ) ) {
	143	+ $css['height'] = $heightValue . 'px';
	144	+ } else {
	145	+ $css['height'] = 'auto';
	146	+ }
	147	+
	148	+ if ( isset( $attributes['objectFit'][ 'value' . $device ] ) && '' !== $attributes['objectFit'][ 'value' . $device ] && 'default' !== $attributes['objectFit'][ 'value' . $device ] ) {
	149	+ $css['object-fit'] = $attributes['objectFit'][ 'value' . $device ];
	150	+ }
	151	+
	152	+ if ( $aspectRatioValue && $aspectRatioValue !== 'original' ) {
	153	+ $css['aspect-ratio'] = $aspectRatioValue;
	154	+ }
	155	+ if ( isset( $attributes['onHoverImg'] ) && 'slide' === $attributes['onHoverImg'] ) {
	156	+ $css['transform'] = 'translate3d(-40px, 0, 0)';
	157	+ $css['transition'] = 'transform 0.3s';
	158	+ }
	159	+
	160	+ return array_merge(
	161	+ $css,
	162	+ Range::get_css([
	163	+ 'attributeValue' => $attributes['opacity'],
	164	+ 'defaultValue' => 1,
	165	+ 'unitDefaultValue' => '',
	166	+ 'property' => 'opacity',
	167	+ 'device' => $device,
	168	+ ]),
	169	+ isset( $attributes['border'] ) ? Border::get_css( $attributes['border'], '', $device ) : [],
	170	+ isset( $attributes['cssFilter'] ) ? CssFilter::get_css( $attributes['cssFilter'], '', $device ) : [],
	171	+ isset( $attributes['boxShadow'] ) ? BoxShadow::get_css( $attributes['boxShadow'], $device ) : []
	172	+ );
	173	+ }
	174	+
	175	+ public function get_image_hover_css( $attributes, $device = '' ) {
	176	+ $css = [];
	177	+ $range_css = Range::get_css([
	178	+ 'attributeValue' => $attributes['opacityH'],
	179	+ 'defaultValue' => 0,
	180	+ 'unitDefaultValue' => '',
	181	+ 'property' => 'opacity',
	182	+ 'device' => $device,
	183	+ ]);
	184	+ $transitionDurationRange = Range::get_css([
	185	+ 'attributeValue' => $attributes['transitionDuration'],
	186	+ 'defaultValue' => 0.5,
	187	+ 'unitDefaultValue' => '',
	188	+ 'property' => 'transition',
	189	+ 'device' => $device,
	190	+ ]);
	191	+ $filterTransitionDurationRange = Range::get_css([
	192	+ 'attributeValue' => $attributes['filterTransitionDuration'],
	193	+ 'defaultValue' => 0.5,
	194	+ 'unitDefaultValue' => '',
	195	+ 'property' => 'filter',
	196	+ 'device' => $device,
	197	+ ]);
	198	+
	199	+ if ( isset( $attributes['onHoverImg'] ) ) {
	200	+ $on_Hover_Img = $attributes['onHoverImg'];
	201	+ if ( 'zoomin' === $on_Hover_Img ) {
	202	+ $css['transform'] = 'scale(1.1)';
	203	+ $css['transition'] = 'transform 0.3s';
	204	+ } elseif ( 'grayscale' === $on_Hover_Img ) {
	205	+ $css['filter'] = 'grayscale(100%)';
	206	+ $css['transition'] = 'transform 0.3s';
	207	+ } elseif ( 'blur' === $on_Hover_Img ) {
	208	+ $css['filter'] = 'blur(3px)';
	209	+ $css['transition'] = 'transform 0.3s';
	210	+ } elseif ( 'slide' === $on_Hover_Img ) {
	211	+ $css['transform'] = 'translate3d(0, 0, 0)';
	212	+ $css['transition'] = 'transform 0.3s';
	213	+ }
	214	+ }
	215	+ if (
	216	+ isset( $attributes['border']['transitionDuration'] ) ||
	217	+ isset( $attributes['boxShadow']['transitionDuration'] ) ||
	218	+ isset( $filterTransitionDurationRange['filter'] ) ||
	219	+ isset( $transitionDurationRange['transition'] )
	220	+ ) {
	221	+ $css['transition'] = sprintf(
	222	+ 'border %ss, box-shadow %ss, opacity %ss, filter %ss, transform 0.3s',
	223	+ ! empty( $attributes['border']['transitionDuration'] ) ? $attributes['border']['transitionDuration'] : $transitionDurationRange['transition'],
	224	+ isset( $attributes['boxShadow']['transitionDuration'] ) ? $attributes['boxShadow']['transitionDuration'] : $transitionDurationRange['transition'],
	225	+ $filterTransitionDurationRange['filter'],
	226	+ $filterTransitionDurationRange['filter']
	227	+ );
	228	+ }
	229	+
	230	+ $border_hover_css = Border::get_hover_css( isset( $attributes['border'] ) ? $attributes['border'] : null, $device );
	231	+
	232	+ return array_merge(
	233	+ $css,
	234	+ $range_css,
	235	+ $border_hover_css,
	236	+ ( isset( $attributes['boxShadow'] ) ) ? BoxShadow::get_hover_css( $attributes['boxShadow'], $device ) : [],
	237	+ ( isset( $attributes['cssHoverFilter'] ) ) ? CssFilter::get_css( $attributes['cssHoverFilter'], '', $device ) : [],
	238	+ );
	239	+ }
	240	+
	241	+ public function get_image_caption_css( $attributes, $device = '' ) {
	242	+ $css = [];
	243	+
	244	+ if ( isset( $attributes['captionColor'] ) && ! empty( $attributes['captionColor'] ) ) {
	245	+ $css['color'] = Color::get_css( isset( $attributes['captionColor'] ) ? $attributes['captionColor'] : '' );
	246	+
	247	+ }
	248	+ if ( isset( $attributes['captionBackground'] ) && ! empty( $attributes['captionBackground'] ) ) {
	249	+ $css['background'] = Color::get_css( isset( $attributes['captionBackground'] ) ? $attributes['captionBackground'] : '' );
	250	+ }
	251	+ if ( isset( $attributes['captionPosition'] ) && ! empty( $attributes['captionPosition'] && 'overlap' === $attributes['captionPosition'] ) ) {
	252	+ $css['width'] = '100%';
	253	+ $css['position'] = 'absolute';
	254	+ $css['bottom'] = 0;
	255	+ $css['left'] = 0;
	256	+ }
	257	+ $typographyGlobal = isset( $attributes['captionTypographyGlobal'] ) ? $attributes['captionTypographyGlobal'] : [];
	258	+ return array_merge(
	259	+ $css,
	260	+ ( isset( $attributes['captionPadding'] ) ) ? Dimensions::get_css( $attributes['captionPadding'], 'padding', $device ) : [],
	261	+ ( isset( $attributes['captionAlignment'] ) ) ? Alignment::get_css( $attributes['captionAlignment'], 'text-align', $device ) : [],
	262	+ ( isset( $attributes['captionTypography'] ) ) ? Typography::get_css( $attributes['captionTypography'], '', $device, $typographyGlobal ) : [],
	263	+ ( isset( $attributes['captionBorder'] ) ) ? Border::get_css( $attributes['captionBorder'], '', $device ) : [],
	264	+ );
	265	+ }
	266	+
	267	+ public function get_image_container_css( $attributes, $device = '' ) {
	268	+ $alignment_value = $attributes['alignment'][ 'value' . $device ] ?? '';
	269	+
	270	+ $css = [];
	271	+ if ( ! empty( $alignment_value ) ) {
	272	+ $css['display'] = 'flex';
	273	+ $css['justify-content'] = $alignment_value;
	274	+ }
	275	+ return $css;
	276	+ }
	277	+
	278	+ public function get_image_caption_hover_css( $attributes, $device = '' ) {
	279	+ if ( isset( $attributes['captionBorder'] ) ) {
	280	+ return Border::get_hover_css( $attributes['captionBorder'], '', $device );
	281	+ }
	282	+ return [];
	283	+ }
	284	+}