← All changes | includes/blocks/advance-list-item/block.php +277 -0 2.7.5 → 2.14.0 View file →

		@@ -1,0 +1,277 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\AdvanceListItem;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\BlockBaseAbstract;
	9	+use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Controls\Alignment;
	11	+use ABlocks\Controls\Dimensions;
	12	+use ABlocks\Controls\Typography;
	13	+use ABlocks\Controls\TextShadow;
	14	+use ABlocks\Controls\TextStroke;
	15	+use ABlocks\Controls\Width;
	16	+use ABlocks\Controls\Border;
	17	+use ABlocks\Controls\Icon;
	18	+use ABlocks\Controls\Range;
	19	+use ABlocks\Controls\Color;
	20	+
	21	+class Block extends BlockBaseAbstract {
	22	+
	23	+ protected $parent_block_name = 'advance-lists';
	24	+ protected $block_name = 'advance-list-item';
	25	+
	26	+ public function build_css( $attributes ) {
	27	+ // Generate CSS
	28	+ $css_generator = new CssGenerator( $attributes );
	29	+
	30	+ $css_generator->add_class_styles(
	31	+ '{{WRAPPER}}.ablocks-block--advance-list-item .ablocks-block-container .ablocks-advance-list-item-link',
	32	+ $this->get_container_css( $attributes, '' ),
	33	+ $this->get_container_css( $attributes, 'Tablet' ),
	34	+ $this->get_container_css( $attributes, 'Mobile' ),
	35	+ );
	36	+ // Marker
	37	+ $css_generator->add_class_styles(
	38	+ '{{WRAPPER}}.ablocks-block--advance-list-item .advance-list-item-marker',
	39	+ $this->get_marker_css( $attributes, '' ),
	40	+ $this->get_marker_css( $attributes, 'Tablet' ),
	41	+ $this->get_marker_css( $attributes, 'Mobile' ),
	42	+ );
	43	+ $css_generator->add_class_styles(
	44	+ '{{WRAPPER}}.ablocks-block--advance-list-item .advance-list-item-marker,{{WRAPPER}}.ablocks-block--advance-list-item .ablocks-icon-wrap',
	45	+ $this->get_icon_order_css( $attributes, '' ),
	46	+ $this->get_icon_order_css( $attributes, 'Tablet' ),
	47	+ $this->get_icon_order_css( $attributes, 'Mobile' ),
	48	+ );
	49	+ // Icon Style
	50	+ $css_generator->add_class_styles(
	51	+ '{{WRAPPER}} .ablocks-icon-wrap',
	52	+ Icon::get_wrapper_css( $attributes ),
	53	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	54	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	55	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	56	+ );
	57	+ $css_generator->add_class_styles(
	58	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	59	+ Icon::get_wrapper_hover_css( $attributes ),
	60	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	61	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	62	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	63	+ );
	64	+ $css_generator->add_class_styles(
	65	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
	66	+ Icon::get_element_image_css( $attributes ),
	67	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	68	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	69	+ );
	70	+ $css_generator->add_class_styles(
	71	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
	72	+ Icon::get_element_css( $attributes ),
	73	+ Icon::get_element_css( $attributes, 'Tablet' ),
	74	+ Icon::get_element_css( $attributes, 'Mobile' ),
	75	+ );
	76	+
	77	+ // text
	78	+ $css_generator->add_class_styles(
	79	+ '{{WRAPPER}} .ablocks-block-container .ablocks-advance-list-item-text,
	80	+ {{WRAPPER}} .ablocks-block-container .ablocks-advance-list-item-text a',
	81	+ $this->get_paragraph_text_css( $attributes ),
	82	+ $this->get_paragraph_text_css( $attributes, 'Tablet' ),
	83	+ $this->get_paragraph_text_css( $attributes, 'Mobile' ),
	84	+ );
	85	+ $css_generator->add_class_styles(
	86	+ '{{WRAPPER}} .ablocks-block-container .ablocks-advance-list-item-text-drop-caps::first-letter',
	87	+ $this->get_paragraph_drop_text_css( $attributes ),
	88	+ $this->get_paragraph_drop_text_css( $attributes, 'Tablet' ),
	89	+ $this->get_paragraph_drop_text_css( $attributes, 'Mobile' ),
	90	+ );
	91	+
	92	+ // Divider CSS
	93	+ $css_generator->add_class_styles(
	94	+ '{{WRAPPER}} .ablocks-advance-list-item-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
	95	+ $this->get_divider_css( $attributes, '' ),
	96	+ $this->get_divider_css( $attributes, 'Tablet' ),
	97	+ $this->get_divider_css( $attributes, 'Mobile' ),
	98	+ );
	99	+
	100	+ return $css_generator->generate_css();
	101	+ }
	102	+
	103	+
	104	+ public function get_marker_css( $attributes, $device = '' ) {
	105	+ $css = [];
	106	+
	107	+ if ( ! empty( $attributes['shapeColor'] ) && $attributes['markerType'] === 'Shapes' ) {
	108	+ $css['border-color'] = Color::get_css( isset( $attributes['shapeColor'] ) ? $attributes['shapeColor'] : '' ) . '!important';
	109	+ }
	110	+ if ( ! empty( $attributes['shapeSize'][ 'value' . $device ] ) ) {
	111	+ $shapeSize = $attributes['shapeSize'][ 'value' . $device ] . 'px';
	112	+
	113	+ if ( $attributes['markerType'] === 'Emoji' ) {
	114	+ $css['font-size'] = $shapeSize;
	115	+ } else {
	116	+ if ( in_array( $attributes['shapeType'], [ 'inset', 'outset', 'ridge' ], true ) ) {
	117	+ $css['border'] = $shapeSize . ' ' . $attributes['shapeType'];
	118	+ } else {
	119	+ $css['border-bottom'] = $shapeSize . ' ' . $attributes['shapeType'];
	120	+ $css['width'] = $shapeSize;
	121	+ }
	122	+ }
	123	+ }
	124	+ return $css;
	125	+ }
	126	+
	127	+ public function get_container_css( $attributes, $device = '' ) {
	128	+ $css = [];
	129	+ return array_merge(
	130	+ $css,
	131	+ isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-items', $device ) : [],
	132	+ Range::get_css([
	133	+ 'attributeValue' => $attributes['innerGap'],
	134	+ 'attribute_object_key' => 'value',
	135	+ 'isResponsive' => true,
	136	+ 'defaultValue' => null,
	137	+ 'hasUnit' => true,
	138	+ 'unitDefaultValue' => 'px',
	139	+ 'property' => 'gap',
	140	+ 'device' => $device,
	141	+ ]),
	142	+ );
	143	+ }
	144	+
	145	+ public function get_icon_order_css( $attributes, $device = '' ) {
	146	+ $css = [];
	147	+
	148	+ $css['margin'] = 'auto';
	149	+
	150	+ $iconAlignmentValue = $this->get_responsive_attribute_value( $attributes['iconAlignment'], $device );
	151	+ if ( $iconAlignmentValue === 'row' ) {
	152	+ $css['order'] = 1;
	153	+ } elseif ( $iconAlignmentValue === 'row-reverse' ) {
	154	+ $css['order'] = 2;
	155	+ }
	156	+
	157	+ return array_merge(
	158	+ $css,
	159	+ isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-items', $device ) : [],
	160	+ Range::get_css([
	161	+ 'attributeValue' => $attributes['innerGap'],
	162	+ 'attribute_object_key' => 'value',
	163	+ 'isResponsive' => true,
	164	+ 'defaultValue' => null,
	165	+ 'hasUnit' => true,
	166	+ 'unitDefaultValue' => 'px',
	167	+ 'property' => 'gap',
	168	+ 'device' => $device,
	169	+ ]),
	170	+ );
	171	+ }
	172	+
	173	+ public function get_paragraph_text_css( $attributes, $device = '' ) {
	174	+ $css = [];
	175	+ $iconAlignmentValue = $this->get_responsive_attribute_value( $attributes['iconAlignment'], $device );
	176	+ $typographyValueGlobal = ! empty( $attributes['listTypographyGlobal'] ) ? $attributes['listTypographyGlobal'] : '';
	177	+ $typography_value = isset( $attributes['listTypography'] ) ? $attributes['listTypography'] : [];
	178	+
	179	+ if ( $iconAlignmentValue === 'row' ) {
	180	+ $css['order'] = 2;
	181	+ } elseif ( $iconAlignmentValue === 'row-reverse' ) {
	182	+ $css['order'] = 1;
	183	+ }
	184	+ return array_merge(
	185	+ $css,
	186	+ [ 'color' => Color::get_css( isset( $attributes['textColor'] ) ? $attributes['textColor'] : '' ) ],
	187	+ Typography::get_css( $typography_value, '', $device, $typographyValueGlobal ),
	188	+ isset( $attributes['listTextStroke'] ) ? TextStroke::get_css( $attributes['listTextStroke'], '', $device ) : [],
	189	+ isset( $attributes['listTextShadow'] ) ? TextShadow::get_css( $attributes['listTextShadow'] ) : [],
	190	+ );
	191	+ }
	192	+ public function get_paragraph_drop_text_css( $attributes, $device = '' ) {
	193	+ return [ 'color' => Color::get_css( isset( $attributes['dropCapsTextColor'] ) ? $attributes['dropCapsTextColor'] : '' ) ];
	194	+ }
	195	+
	196	+ public function get_divider_css( $attributes, $device = '' ) {
	197	+ $css = [];
	198	+ $css['order'] = 3;
	199	+ $divider_width = isset( $attributes['width'][ 'value' . $device ] ) ? $attributes['width'][ 'value' . $device ] : 60;
	200	+ $default_Unit = '%';
	201	+
	202	+ if ( ! empty( $attributes['listsDirection'][ 'value' . $device ] ) && $attributes['listsDirection'][ 'value' . $device ] === 'row' ) {
	203	+ $css['display'] = 'none';
	204	+ } else {
	205	+ $css['display'] = 'block';
	206	+ }
	207	+ if ( ! empty( $attributes['color'] ) ) {
	208	+ $css['--ablocks-divider-pattern-color'] = Color::get_css( isset( $attributes['color'] ) ? $attributes['color'] : '#000000' );
	209	+ }
	210	+
	211	+ $moreRangeCSS = [];
	212	+ if ( isset( $attributes['dividerType'] ) && $attributes['dividerType'] === 'mask-style' && isset( $attributes['size'] ) && ! empty( $attributes['size'] ) ) {
	213	+ $moreRangeCSS = Range::get_css([
	214	+ 'attributeValue' => $attributes['size'],
	215	+ 'attribute_object_key' => 'value',
	216	+ 'isResponsive' => false,
	217	+ 'defaultValue' => null,
	218	+ 'hasUnit' => false,
	219	+ 'unitDefaultValue' => 'px',
	220	+ 'property' => '--ablocks-divider-pattern-height',
	221	+ ]);
	222	+ } elseif ( isset( $attributes['weight'] ) && ! empty( $attributes['weight'] ) ) {
	223	+ $moreRangeCSS = Range::get_css([
	224	+ 'attributeValue' => $attributes['weight'],
	225	+ 'attribute_object_key' => 'value',
	226	+ 'isResponsive' => false,
	227	+ 'defaultValue' => null,
	228	+ 'hasUnit' => false,
	229	+ 'unitDefaultValue' => 'px',
	230	+ 'property' => '--ablocks-divider-pattern-weight',
	231	+ ]);
	232	+ }//end if
	233	+
	234	+ if ( ! empty( $attributes['dividerPatternUrl'] ) ) {
	235	+ if ( $attributes['dividerType'] === 'mask-style' ) {
	236	+ $css['--ablocks-divider-pattern-url'] = 'url(' . $attributes['dividerPatternUrl'] . ')';
	237	+ } else {
	238	+ $css['--ablocks-divider-pattern-style'] = $attributes['dividerPatternUrl'];
	239	+ }
	240	+ }
	241	+
	242	+ return array_merge(
	243	+ $css,
	244	+ isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-self', $device ) : [],
	245	+ Range::get_css([
	246	+ 'attributeValue' => $attributes['width'],
	247	+ 'attribute_object_key' => 'value',
	248	+ 'isResponsive' => true,
	249	+ 'defaultValue' => null,
	250	+ 'hasUnit' => false,
	251	+ 'unitDefaultValue' => '%',
	252	+ 'property' => 'width',
	253	+ 'device' => $device,
	254	+ ]),
	255	+ $moreRangeCSS,
	256	+ );
	257	+ }
	258	+
	259	+ // don't delete this function, it's used in the render method to get responsive attribute values
	260	+ public function get_responsive_attribute_value( $attribute, $device ) {
	261	+
	262	+ if ( $device === 'Mobile' ) {
	263	+ return ! empty( $attribute['valueMobile'] ) ? $attribute['valueMobile']
	264	+ : ( ! empty( $attribute['valueTablet'] ) ? $attribute['valueTablet']
	265	+ : ( $attribute['value'] ?? '' ) );
	266	+ }
	267	+
	268	+ if ( $device === 'Tablet' ) {
	269	+ return ! empty( $attribute['valueTablet'] ) ? $attribute['valueTablet']
	270	+ : ( $attribute['value'] ?? '' );
	271	+ }
	272	+
	273	+ // Default (Desktop or others)
	274	+ return $attribute['value'] ?? '';
	275	+ }
	276	+
	277	+}