← All changes | includes/blocks/modal/block.php +83 -28 2.9.1 → 2.14.0 View file →

		@@ -12,8 +12,10 @@
12	12	use ABlocks\Controls\Dimensions;
13	13	use ABlocks\Controls\Background;
14	14	use ABlocks\Controls\BoxShadow;
15	15	use ABlocks\Controls\Border;
	16	+use ABlocks\Classes\CssGeneratorV2;
	17	+use ABlocks\Controls\Color;
16	18
17	19
18	20	class Block extends BlockBaseAbstract {
19	21
		@@ -18,10 +20,10 @@
18	20	class Block extends BlockBaseAbstract {
19	21
20	22	protected $block_name = 'modal';
21	23
22		- public function build_css( $attributes ) {
23		- $css_generator = new CssGenerator( $attributes );
	24	+ public function build_css_v1( $attributes ) {
	25	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
24	26	if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
25	27	$css_generator->add_class_styles(
26	28	'{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
27	29	[ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
		@@ -30,21 +32,24 @@
30	32	$css_generator->add_class_styles(
31	33	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
32	34	$this->get_panel_main_wrapper_css( $attributes ),
33	35	$this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
34		- $this->get_panel_main_wrapper_css( $attributes, 'Mobile' )
	36	+ $this->get_panel_main_wrapper_css( $attributes, 'Mobile' ),
	37	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_main_wrapper_css( $attributes, $device ); } )
35	38	);
36	39	$css_generator->add_class_styles(
37	40	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
38	41	$this->get_panel_content_wrap_css( $attributes ),
39	42	$this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
40		- $this->get_panel_content_wrap_css( $attributes, 'Mobile' )
	43	+ $this->get_panel_content_wrap_css( $attributes, 'Mobile' ),
	44	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_css( $attributes, $device ); } )
41	45	);
42	46	$css_generator->add_class_styles(
43	47	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
44	48	$this->get_panel_content_wrap_hover_css( $attributes ),
45	49	$this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
46		- $this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' )
	50	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' ),
	51	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_hover_css( $attributes, $device ); } )
47	52	);
48	53	if ( empty( $attributes['disableCloseButton'] ) ) {
49	54	$css_generator->add_class_styles(
50	55	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close',
		@@ -49,9 +54,10 @@
49	54	$css_generator->add_class_styles(
50	55	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close',
51	56	$this->get_panel_close_button_css( $attributes ),
52	57	$this->get_panel_close_button_css( $attributes, 'Tablet' ),
53		- $this->get_panel_close_button_css( $attributes, 'Mobile' )
	58	+ $this->get_panel_close_button_css( $attributes, 'Mobile' ),
	59	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_close_button_css( $attributes, $device ); } )
54	60	);
55	61
56	62	if ( ! empty( $attributes['closeBtnColor'] ) ) {
57	63	$css_generator->add_class_styles(
		@@ -61,19 +67,67 @@
61	67	}
62	68	}
63	69	return $css_generator->generate_css();
64	70	}
	71	+ public function build_css_v2( $attributes ) {
	72	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	73	+ if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
	74	+ $css_generator->add_class_styles(
	75	+ '{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	76	+ [ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
	77	+ );
	78	+ }
	79	+ $css_generator->add_class_styles(
	80	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
	81	+ $this->get_panel_main_wrapper_css( $attributes ),
	82	+ $this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
	83	+ $this->get_panel_main_wrapper_css( $attributes, 'Mobile' ),
	84	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_main_wrapper_css( $attributes, $device ); } )
	85	+ );
	86	+ $css_generator->add_class_styles(
	87	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	88	+ $this->get_panel_content_wrap_css( $attributes ),
	89	+ $this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
	90	+ $this->get_panel_content_wrap_css( $attributes, 'Mobile' ),
	91	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_css( $attributes, $device ); } )
	92	+ );
	93	+ $css_generator->add_class_styles(
	94	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
	95	+ $this->get_panel_content_wrap_hover_css( $attributes ),
	96	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
	97	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' ),
	98	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_hover_css( $attributes, $device ); } )
	99	+ );
	100	+ if ( empty( $attributes['disableCloseButton'] ) ) {
	101	+ $css_generator->add_class_styles(
	102	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close',
	103	+ $this->get_panel_close_button_css( $attributes ),
	104	+ $this->get_panel_close_button_css( $attributes, 'Tablet' ),
	105	+ $this->get_panel_close_button_css( $attributes, 'Mobile' ),
	106	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_close_button_css( $attributes, $device ); } )
	107	+ );
65	108
	109	+ if ( ! empty( $attributes['closeBtnColor'] ) ) {
	110	+ $css_generator->add_class_styles(
	111	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg',
	112	+ [ 'fill' => $attributes['closeBtnColor'] ]
	113	+ );
	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	+
66	125	public function get_panel_main_wrapper_css( $attributes, $device = '' ) {
67	126	if ( ! empty( $device ) ) {
68	127	return [];
69	128	}
70		- $css = [];
71		- $backdrop_color = ! empty( $attributes['backdropColor'] ) ? $attributes['backdropColor'] : '';
72		- if ( $backdrop_color ) {
73		- $css['background-color'] = $backdrop_color;
74		- }
75		- return $css;
	129	+ return [ 'background-color' => Color::get_css( isset( $attributes['backdropColor'] ) ? $attributes['backdropColor'] : '' ) ];
76	130	}
77	131
78	132	public function get_panel_content_wrap_css( $attributes, $device = '' ) {
79	133	$css = [];
		@@ -106,11 +160,11 @@
106	160	'attributeValue' => $attributes['panelWidth'],
107	161	'attribute_object_key' => 'value',
108	162	'isResponsive' => true,
109	163	'hasUnit' => true,
110		- 'defaultValue' => '',
	164	+ 'defaultValue' => 50,
111	165	'hasUnit' => true,
112		- 'unitDefaultValue' => 'px',
	166	+ 'unitDefaultValue' => '%',
113	167	'property' => 'width',
114	168	'device' => $device,
115	169	]),
116	170	Range::get_css([
		@@ -117,11 +171,11 @@
117	171	'attributeValue' => $attributes['panelHeight'],
118	172	'attribute_object_key' => 'value',
119	173	'isResponsive' => true,
120	174	'hasUnit' => true,
121		- 'defaultValue' => '',
	175	+ 'defaultValue' => 50,
122	176	'hasUnit' => true,
123		- 'unitDefaultValue' => 'px',
	177	+ 'unitDefaultValue' => '%',
124	178	'property' => 'min-height',
125	179	'device' => $device,
126	180	]),
127	181	isset( $attributes['barBorder'] ) ? Border::get_css( $attributes['barBorder'], '', $device ) : [],
		@@ -149,21 +203,22 @@
149	203	public function get_panel_close_button_css( $attributes, $device = '' ) {
150	204	$css = [];
151	205	if ( empty( $device ) ) {
152	206	if ( ! empty( $attributes['closeBtnBackgroundColor'] ) ) {
153		- $css['background-color'] = $attributes['closeBtnBackgroundColor'];
	207	+ $css['background-color'] = Color::get_css(
	208	+ isset( $attributes['closeBtnBackgroundColor'] ) ? $attributes['closeBtnBackgroundColor'] : '');
154	209	}
155		- if ( ! empty( $attributes['closeBtnTop'] ) || 0 === $attributes['closeBtnTop'] ) {
156		- $css['top'] = $attributes['closeBtnTop'] . 'px';
157		- }
158		- if ( ! empty( $attributes['closeBtnSide'] ) || 0 === $attributes['closeBtnSide'] ) {
159		- if ( 'left' === $attributes['closePosition'] ) {
160		- $css['left'] = $attributes['closeBtnSide'] . 'px';
161		- $css['right'] = 'unset';
162		- } else {
163		- $css['right'] = $attributes['closeBtnSide'] . 'px';
164		- $css['left'] = 'unset';
165		- }
	210	+ }
	211	+ if ( ! empty( $attributes['closeBtnTop'] ) || 0 === $attributes['closeBtnTop'] ) {
	212	+ $css['top'] = $attributes['closeBtnTop'] . 'px';
	213	+ }
	214	+ if ( ! empty( $attributes['closeBtnSide'] ) || 0 === $attributes['closeBtnSide'] ) {
	215	+ if ( 'left' === $attributes['closePosition'] ) {
	216	+ $css['left'] = $attributes['closeBtnSide'] . 'px';
	217	+ $css['right'] = 'unset';
	218	+ } else {
	219	+ $css['right'] = $attributes['closeBtnSide'] . 'px';
	220	+ $css['left'] = 'unset';
166	221	}
167	222	}
168	223	return $css;
169	224	}