← All changes | includes/blocks/modal/block.php +217 -0 2.7.7 → 2.13.0 View file →

		@@ -1,0 +1,217 @@
	1	+<?php
	2	+
	3	+namespace ABlocks\Blocks\Modal;
	4	+
	5	+if ( ! defined( 'ABSPATH' ) ) {
	6	+ exit;
	7	+}
	8	+
	9	+use ABlocks\Classes\BlockBaseAbstract;
	10	+use ABlocks\Classes\CssGenerator;
	11	+use ABlocks\Controls\Range;
	12	+use ABlocks\Controls\Dimensions;
	13	+use ABlocks\Controls\Background;
	14	+use ABlocks\Controls\BoxShadow;
	15	+use ABlocks\Controls\Border;
	16	+use ABlocks\Classes\CssGeneratorV2;
	17	+use ABlocks\Controls\Color;
	18	+
	19	+
	20	+class Block extends BlockBaseAbstract {
	21	+
	22	+ protected $block_name = 'modal';
	23	+
	24	+ public function build_css_v1( $attributes ) {
	25	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	26	+ if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
	27	+ $css_generator->add_class_styles(
	28	+ '{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	29	+ [ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
	30	+ );
	31	+ }
	32	+ $css_generator->add_class_styles(
	33	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
	34	+ $this->get_panel_main_wrapper_css( $attributes ),
	35	+ $this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
	36	+ $this->get_panel_main_wrapper_css( $attributes, 'Mobile' )
	37	+ );
	38	+ $css_generator->add_class_styles(
	39	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	40	+ $this->get_panel_content_wrap_css( $attributes ),
	41	+ $this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
	42	+ $this->get_panel_content_wrap_css( $attributes, 'Mobile' )
	43	+ );
	44	+ $css_generator->add_class_styles(
	45	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
	46	+ $this->get_panel_content_wrap_hover_css( $attributes ),
	47	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
	48	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' )
	49	+ );
	50	+ if ( empty( $attributes['disableCloseButton'] ) ) {
	51	+ $css_generator->add_class_styles(
	52	+ '{{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',
	53	+ $this->get_panel_close_button_css( $attributes ),
	54	+ $this->get_panel_close_button_css( $attributes, 'Tablet' ),
	55	+ $this->get_panel_close_button_css( $attributes, 'Mobile' )
	56	+ );
	57	+
	58	+ if ( ! empty( $attributes['closeBtnColor'] ) ) {
	59	+ $css_generator->add_class_styles(
	60	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg',
	61	+ [ 'fill' => $attributes['closeBtnColor'] ]
	62	+ );
	63	+ }
	64	+ }
	65	+ return $css_generator->generate_css();
	66	+ }
	67	+ public function build_css_v2( $attributes ) {
	68	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	69	+ if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
	70	+ $css_generator->add_class_styles(
	71	+ '{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	72	+ [ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
	73	+ );
	74	+ }
	75	+ $css_generator->add_class_styles(
	76	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
	77	+ $this->get_panel_main_wrapper_css( $attributes ),
	78	+ $this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
	79	+ $this->get_panel_main_wrapper_css( $attributes, 'Mobile' )
	80	+ );
	81	+ $css_generator->add_class_styles(
	82	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
	83	+ $this->get_panel_content_wrap_css( $attributes ),
	84	+ $this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
	85	+ $this->get_panel_content_wrap_css( $attributes, 'Mobile' )
	86	+ );
	87	+ $css_generator->add_class_styles(
	88	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
	89	+ $this->get_panel_content_wrap_hover_css( $attributes ),
	90	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
	91	+ $this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' )
	92	+ );
	93	+ if ( empty( $attributes['disableCloseButton'] ) ) {
	94	+ $css_generator->add_class_styles(
	95	+ '{{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',
	96	+ $this->get_panel_close_button_css( $attributes ),
	97	+ $this->get_panel_close_button_css( $attributes, 'Tablet' ),
	98	+ $this->get_panel_close_button_css( $attributes, 'Mobile' )
	99	+ );
	100	+
	101	+ if ( ! empty( $attributes['closeBtnColor'] ) ) {
	102	+ $css_generator->add_class_styles(
	103	+ '{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg',
	104	+ [ 'fill' => $attributes['closeBtnColor'] ]
	105	+ );
	106	+ }
	107	+ }
	108	+ return $css_generator->generate_css();
	109	+ }
	110	+ public function build_css( $attributes ) {
	111	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	112	+ return $this->build_css_v2( $attributes );
	113	+ }
	114	+ return $this->build_css_v1( $attributes );
	115	+ }
	116	+
	117	+ public function get_panel_main_wrapper_css( $attributes, $device = '' ) {
	118	+ if ( ! empty( $device ) ) {
	119	+ return [];
	120	+ }
	121	+ return [ 'background-color' => Color::get_css( isset( $attributes['backdropColor'] ) ? $attributes['backdropColor'] : '' ) ];
	122	+ }
	123	+
	124	+ public function get_panel_content_wrap_css( $attributes, $device = '' ) {
	125	+ $css = [];
	126	+
	127	+ if ( empty( $device ) && ! empty( $attributes['panelContentPosition'] ) ) {
	128	+ $css['align-items'] = $attributes['panelContentPosition'];
	129	+ }
	130	+
	131	+ $Background_css = Background::get_css( $attributes['panelBackground'], 'background', $device );
	132	+ $Border_css = Border::get_css( $attributes['panelBorder'], '', $device );
	133	+ $BoxShadow_css = BoxShadow::get_css( $attributes['panelShadow'], 'box-shadow' );
	134	+
	135	+ $transition_css = [];
	136	+ if ( ! $device ) {
	137	+ $transition_value = 'all 1s';
	138	+ if ( ! empty( $Background_css['transition'] ) ) {
	139	+ $transition_value = $transition_value . ',' . $Background_css['transition'];
	140	+ }
	141	+ if ( ! empty( $Border_css['transition'] ) ) {
	142	+ $transition_value = $transition_value . ',' . $Border_css['transition'];
	143	+ }
	144	+ if ( ! empty( $BoxShadow_css['transition'] ) ) {
	145	+ $transition_value = $transition_value . ',' . $BoxShadow_css['transition'];
	146	+ }
	147	+ $transition_css['transition'] = $transition_value;
	148	+ }
	149	+
	150	+ return array_merge(
	151	+ Range::get_css([
	152	+ 'attributeValue' => $attributes['panelWidth'],
	153	+ 'attribute_object_key' => 'value',
	154	+ 'isResponsive' => true,
	155	+ 'hasUnit' => true,
	156	+ 'defaultValue' => 50,
	157	+ 'hasUnit' => true,
	158	+ 'unitDefaultValue' => '%',
	159	+ 'property' => 'width',
	160	+ 'device' => $device,
	161	+ ]),
	162	+ Range::get_css([
	163	+ 'attributeValue' => $attributes['panelHeight'],
	164	+ 'attribute_object_key' => 'value',
	165	+ 'isResponsive' => true,
	166	+ 'hasUnit' => true,
	167	+ 'defaultValue' => 50,
	168	+ 'hasUnit' => true,
	169	+ 'unitDefaultValue' => '%',
	170	+ 'property' => 'min-height',
	171	+ 'device' => $device,
	172	+ ]),
	173	+ isset( $attributes['barBorder'] ) ? Border::get_css( $attributes['barBorder'], '', $device ) : [],
	174	+ $css,
	175	+ $css,
	176	+ Dimensions::get_css( $attributes['panelPadding'], 'padding', $device ),
	177	+ $Background_css,
	178	+ $Border_css,
	179	+ $BoxShadow_css,
	180	+ $transition_css,
	181	+ );
	182	+ }
	183	+
	184	+ public function get_panel_content_wrap_hover_css( $attributes, $device = '' ) {
	185	+ $css = [];
	186	+ return array_merge(
	187	+ $css,
	188	+ Dimensions::get_css( $attributes['panelPadding'], 'padding', $device ),
	189	+ Background::get_hover_css( $attributes['panelBackground'], 'background', $device ),
	190	+ Border::get_hover_css( $attributes['panelBorder'], $device ),
	191	+ BoxShadow::get_hover_css( $attributes['panelShadow'] ),
	192	+ );
	193	+ }
	194	+
	195	+ public function get_panel_close_button_css( $attributes, $device = '' ) {
	196	+ $css = [];
	197	+ if ( empty( $device ) ) {
	198	+ if ( ! empty( $attributes['closeBtnBackgroundColor'] ) ) {
	199	+ $css['background-color'] = Color::get_css(
	200	+ isset( $attributes['closeBtnBackgroundColor'] ) ? $attributes['closeBtnBackgroundColor'] : '');
	201	+ }
	202	+ }
	203	+ if ( ! empty( $attributes['closeBtnTop'] ) || 0 === $attributes['closeBtnTop'] ) {
	204	+ $css['top'] = $attributes['closeBtnTop'] . 'px';
	205	+ }
	206	+ if ( ! empty( $attributes['closeBtnSide'] ) || 0 === $attributes['closeBtnSide'] ) {
	207	+ if ( 'left' === $attributes['closePosition'] ) {
	208	+ $css['left'] = $attributes['closeBtnSide'] . 'px';
	209	+ $css['right'] = 'unset';
	210	+ } else {
	211	+ $css['right'] = $attributes['closeBtnSide'] . 'px';
	212	+ $css['left'] = 'unset';
	213	+ }
	214	+ }
	215	+ return $css;
	216	+ }
	217	+}