b-blocks / inc / slider.php

slider.php in bBlocks – Essential Gutenberg Blocks & Patterns Collection 1.5.3, at inc/slider.php

157 lines 9.3 KB

Raw Download Zip

1	<?php
2	class BBlocksSlider extends BBlocks{
3	public function __construct(){
4	add_action( 'init', [$this, 'register'] );
5	}
6
7	function register(){
8	$this::registerScripts( 'slider', array(
9	'attributes' => $this->attributes(),
10	'render_callback' => [$this, 'render']
11	) );
12	}
13
14	function attributes(){
15	return array(
16	'align' => array( 'type' => 'string', 'default' => '' ),
17	'cId' => array( 'type' => 'string', 'default' => '' ),
18
19	'slides' => array( 'type' => 'array', 'default' => array(
20	array(
21	'background' => array( 'color' => '#00000080' ),
22	'position' => 'center center',
23	'title' => 'Slide Title 1',
24	'description' => 'This content area describes slider 1 descriptions/details.',
25	'btnText' => 'Button 1', 'btnLink' => '#'
26	),
27	array(
28	'background' => array( 'color' => '#00000080' ),
29	'position' => 'center center',
30	'title' => 'Slide Title 2',
31	'description' => 'This content area describes slider 2 descriptions/details.',
32	'btnText' => 'Button 2', 'btnLink' => '#'
33	)
34	) ),
35
36	'columns' => array( 'type' => 'object', 'default' => array( 'desktop' => 1, 'tablet' => 1, 'mobile' => 1 ) ),
37	'columnGap' => array( 'type' => 'string', 'default' => 15 ),
38	'sliderWidth' => array( 'type' => 'string', 'default' => '100%' ),
39	'sliderHeight' => array( 'type' => 'string', 'default' => '400px' ),
40	'sliderAlign' => array( 'type' => 'string', 'default' => 'center' ),
41
42	'isLoop' => array( 'type' => 'boolean', 'default' => true ),
43	'isTouchMove' => array( 'type' => 'boolean', 'default' => false ),
44	'isAutoplay' => array( 'type' => 'boolean', 'default' => true ),
45	'speed' => array( 'type' => 'number', 'default' => 1.5 ),
46	'effect' => array( 'type' => 'string', 'default' => 'slide' ),
47	'isPage' => array( 'type' => 'boolean', 'default' => true ),
48	'isPageClickable' => array( 'type' => 'boolean', 'default' => true ),
49	'isPageDynamic' => array( 'type' => 'boolean', 'default' => true ),
50	'pageColor' => array( 'type' => 'string', 'default' => '#fff' ),
51	'pageWidth' => array( 'type' => 'string', 'default' => '15px' ),
52	'pageHeight' => array( 'type' => 'string', 'default' => '15px' ),
53	'pageBorder' => array( 'type' => 'object', 'default' => array( 'radius' => '50%' ) ),
54	'isPrevNext' => array( 'type' => 'boolean', 'default' => true ),
55	'prevNextColor' => array( 'type' => 'string', 'default' => '#fff' ),
56
57	'isTitle' => array( 'type' => 'boolean', 'default' => true ),
58	'titleTypo' => array( 'type' => 'object', 'default' => array( 'fontSize' => 25 ) ),
59	'titleColor' => array( 'type' => 'string', 'default' => '#fff' ),
60	'titleMargin' => array( 'type' => 'object', 'default' => array( 'bottom' => '15px' ) ),
61
62	'isDesc' => array( 'type' => 'boolean', 'default' => true ),
63	'descTypo' => array( 'type' => 'object', 'default' => array( 'fontSize' => 15 ) ),
64	'descColor' => array( 'type' => 'string', 'default' => '#fff' ),
65	'descMargin' => array( 'type' => 'object', 'default' => array( 'bottom' => '15px' ) ),
66
67	'isBtn' => array( 'type' => 'boolean', 'default' => true ),
68	'btnTypo' => array( 'type' => 'object', 'default' => array( 'fontSize' => 16 ) ),
69	'btnColors' => array( 'type' => 'object', 'default' => array( 'color' => '#fff', 'bg' => '#4527a4' ) ),
70	'btnHovColors' => array( 'type' => 'object', 'default' => array( 'color' => '#fff', 'bg' => '#8344c5' ) ),
71	'btnPadding' => array( 'type' => 'object', 'default' => array( 'vertical' => '12px', 'horizontal' => '35px' ) ),
72	'btnBorder' => array( 'type' => 'object', 'default' => array( 'radius' => '3px' ) )
73	);
74	}
75
76	function render( $attributes ){
77	extract( $attributes );
78
79	// Generate Styles
80	$sliderStyle = new BBlocksStyleGenerator();
81	$sliderStyle::addStyle( "#bBlocksSlider-$cId", array( 'text-align' => $sliderAlign ) );
82	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider", array(
83	'width' => $sliderWidth,
84	'height' => $sliderHeight
85	) );
86	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .slide", array( 'height' => $sliderHeight ) );
87	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .slide .sliderTitle", array(
88	'color' => $titleColor,
89	$titleTypo['styles'] ?? 'font-size: 25px;' => '',
90	'margin' => $titleMargin['styles'] ?? '0 0 15px 0'
91	) );
92	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .slide .sliderDescription", array(
93	'color' => $descColor,
94	$descTypo['styles'] ?? 'font-size: 15px;' => '',
95	'margin' => $descMargin['styles'] ?? '0 0 15px 0'
96	) );
97	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .slide .sliderBtn", array(
98	$btnColors['styles'] ?? 'color: #fff; background: #4527a4;' => '',
99	$btnTypo['styles'] ?? 'font-size: 16px;' => '',
100	'padding' => $btnPadding['styles'] ?? '12px 35px',
101	$btnBorder['styles'] ?? 'border-radius: 3px;' => ''
102	) );
103	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .slide .sliderBtn:hover", array( $btnHovColors['styles'] ?? 'color: #fff; background: #8344c5;' => '' ) );
104
105	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .swiper-pagination .swiper-pagination-bullet", array(
106	'background' => $pageColor,
107	'width' => $pageWidth,
108	'height' => $pageHeight,
109	$pageBorder['styles'] ?? 'border-radius: 50%;' => ''
110	) );
111	$sliderStyle::addStyle( "#bBlocksSlider-$cId .bBlocksSlider .swiper-button-prev, #bBlocksSlider-$cId .bBlocksSlider .swiper-button-next", array( 'color' => $prevNextColor ) );
112
113	$jsonData = json_encode( array( 'columns' => $columns ?? array( 'desktop' => 1, 'tablet' => 1, 'mobile' => 1 ), 'columnGap' => $columnGap ?? 15, 'isLoop' => $isLoop ?? true, 'isTouchMove' => $isTouchMove ?? false, 'isAutoplay' => $isAutoplay ?? true, 'speed' => $speed ?? 1.5, 'effect' => $effect ?? 'slide', 'isPageClickable' => $isPageClickable ?? true, 'isPageDynamic' => $isPageDynamic ?? true ) );
114
115	ob_start(); ?>
116	<div class='wp-block-b-blocks-slider <?php echo 'align' . esc_attr( $align ); ?>' id='bBlocksSlider-<?php echo esc_attr( $cId ); ?>' data-swiper='<?php echo esc_attr( $jsonData ); ?>'>
117	<style>
118	@import url(<?php echo esc_url( $titleTypo['googleFontLink'] ?? '' ); ?>);
119	@import url(<?php echo esc_url( $descTypo['googleFontLink'] ?? '' ); ?>);
120	@import url(<?php echo esc_url( $btnTypo['googleFontLink'] ?? '' ); ?>);
121	<?php echo wp_kses( $sliderStyle::renderStyle(), array() ); ?>
122	</style>
123
124	<div class='bBlocksSlider'>
125	<div class='swiper-wrapper'>
126	<?php foreach ( $slides as $index => $slide ) {
127	$slideBGStyle = $slide['background']['styles'] ?? 'background-color: #00000080;';
128	$slidePosition = $slide['position'] ?? 'center center';
129	$slideTitle = $slide['title'] ?? '';
130	$slideDesc = $slide['description'] ?? '';
131	$slideBtnText = $slide['btnText'] ?? '';
132	$slideBtnLink = $slide['btnLink'] ?? ''; ?>
133
134	<div class='slide slide-<?php echo esc_attr( $index ); ?> swiper-slide'>
135	<style><?php echo "#bBlocksSlider-". esc_attr( $cId ) ." .bBlocksSlider .slide-$index{". wp_kses( $slideBGStyle, array() ) ."}"; ?></style>
136
137	<div class='sliderContent <?php echo esc_attr( str_replace( ' ', '-', $slidePosition ) ); ?>'>
138	<?php echo $isTitle && $slideTitle ? "<h2 class='sliderTitle'>". wp_kses_post( $slideTitle ) ."</h2>" : ''; ?>
139
140	<?php echo $isDesc && $slideDesc ? "<p class='sliderDescription'>". wp_kses_post( $slideDesc ) ."</p>" : ''; ?>
141
142	<?php echo $isBtn && $slideBtnText ? "<a href='$slideBtnLink' class='sliderBtn' target='_blank' rel='noreferrer'>". wp_kses_post( $slideBtnText ) ."</a>" : ''; ?>
143	</div>
144	</div>
145	<?php } ?>
146	</div>
147
148	<?php echo $isPage ? "<div class='swiper-pagination'></div>" : ''; ?>
149	<?php echo $isPrevNext ? "<div class='swiper-button-prev'></div><div class='swiper-button-next'></div>" : ''; ?>
150	</div>
151	</div>
152
153	<?php $sliderStyle::$styles = array(); // Empty styles
154	return ob_get_clean();
155	}
156	}
157	new BBlocksSlider();