uicore-elements / includes / widgets / custom-carousel.php

custom-carousel.php in UiCore Elements – Free widgets and templates for Elementor 1.0.9, at includes/widgets/custom-carousel.php

311 lines 9.4 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3	use Elementor\Plugin;
4	use Elementor\Controls_Manager;
5	use Elementor\Repeater;
6	use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater;
7	use UiCoreElements\Utils\Carousel_Trait;
8	use UiCoreElements\Utils\Animation_Trait;
9	use UiCoreElements\Utils\Item_Style_Component;
10
11	defined('ABSPATH') \|\| exit();
12
13	/**
14	* Custom Carousel
15	*
16	* @author Lucas Marini Falbo <lucas@uicore.co>
17	* @since 1.0.7
18	*/
19
20	class CustomCarousel extends UiCoreNestedWidget {
21
22	use Carousel_Trait;
23	use Animation_Trait;
24	use Item_Style_Component;
25
26	public function get_name()
27	{
28	return 'uicore-custom-carousel';
29	}
30	public function get_title()
31	{
32	return esc_html__('Custom Carousel', 'uicore-elements');
33	}
34	public function get_icon()
35	{
36	return 'eicon-carousel-loop ui-e-widget';
37	}
38	public function get_categories()
39	{
40	return ['uicore'];
41	}
42	public function get_keywords()
43	{
44	return ['slide', 'carousel', 'nested'];
45	}
46	public function get_styles()
47	{
48	$styles = ['custom-carousel'];
49	return $styles;
50	}
51	public function get_scripts()
52	{
53	return $this->TRAIT_get_scripts(false);
54	}
55
56	// Nested required functions
57	protected function carousel_content_container( int $index ) {
58	return [
59	'elType' => 'container',
60	'settings' => [
61	'_title' => sprintf( __( 'Item #%s', 'uicore-elements' ), $index ),
62	'content_width' => 'full',
63	'flex_justify_content' => 'center',
64	'flex_align_items' => 'center',
65	],
66	];
67	}
68	protected function get_default_children_elements() {
69	return [
70	$this->carousel_content_container( 1 ),
71	$this->carousel_content_container( 2 ),
72	$this->carousel_content_container( 3 ),
73	];
74	}
75	protected function get_default_repeater_title_setting_key() {
76	return 'carousel_item_title';
77	}
78	protected function get_default_children_title() {
79	return esc_html__( 'Item #%d', 'uicore-elements' );
80	}
81	protected function get_default_children_placeholder_selector() {
82	return '.swiper-wrapper';
83	}
84
85	/**
86	* We've set a bool variable to this function because Custom Slider extends this widget and requires one extra control.
87	*
88	* @param bool $is_slider - If the widget is a slider, it will enable the slider height control.
89	*/
90	protected function register_controls(bool $is_slider = false)
91	{
92
93	if( !Plugin::$instance->experiments->is_feature_active('nested-elements') ){
94	$this->nesting_fallback('controls');
95	return;
96	}
97
98	$this->start_controls_section(
99	'section_content',
100	[
101	'label' => __('Items', 'uicore-elements'),
102	'tab' => Controls_Manager::TAB_CONTENT,
103	]
104	);
105
106	$repeater = new Repeater();
107
108	$repeater->add_control(
109	'carousel_item_title',
110	[
111	'label' => __('Title', 'uicore-elements'),
112	'type' => Controls_Manager::TEXT,
113	'render_type' => 'template',
114	'dynamic' => [
115	'active' => true,
116	],
117	]
118	);
119
120	$this->add_control(
121	'carousel_items',
122	[
123	'type' => Control_Nested_Repeater::CONTROL_TYPE,
124	'fields' => $repeater->get_controls(),
125	'default' => [
126	[ 'carousel_item_title' => __( 'Item #1', 'uicore-elements' ) ],
127	[ 'carousel_item_title' => __( 'Item #2', 'uicore-elements' ) ],
128	[ 'carousel_item_title' => __( 'Item #3', 'uicore-elements' ) ],
129	]
130	]
131	);
132
133	$this->end_controls_section();
134
135	// Additional Carousel Controls
136	$this->start_controls_section(
137	'section_additional_settings',
138	[
139	'label' => __('Additional Settings', 'uicore-elements'),
140	'tab' => Controls_Manager::TAB_CONTENT,
141	]
142	);
143
144	$this->TRAIT_register_carousel_additional_controls($is_slider); // Carousel Additionals
145
146	$this->end_controls_section();
147
148	$this->start_controls_section(
149	'section_carousel_settings',
150	[
151	'label' => __('Carousel Settings', 'uicore-elements'),
152	]
153	);
154
155	$this->TRAIT_register_carousel_settings_controls(); // Carousel settings
156
157	$this->end_controls_section();
158
159	$this->TRAIT_register_navigation_controls(); // Navigation settings
160
161	$this->start_controls_section(
162	'section_style_review_items',
163	[
164	'label' => esc_html__( 'Items', 'uicore-elements' ),
165	'tab' => Controls_Manager::TAB_STYLE,
166	]
167	);
168
169	$this->TRAIT_register_all_item_style_controls();
170
171	$this->end_controls_section();
172
173	$this->TRAIT_register_navigation_style_controls(); // Carousel Navigation Styles
174
175	// Decrease default item padding
176	$this->update_control('item_padding', [
177	'default' => [
178	'top' => 25,
179	'right' => 25,
180	'bottom' => 25,
181	'left' => 25,
182	'unit' => 'px',
183	'isLinked' => true,
184	],
185	]);
186
187	// Adds description to loop
188	$this->update_control('loop', [
189	'description' => esc_html__('Loop preview is disabled here on the editor, due to compatibility issues. But you can test on the front-end, since it works outside the editor.', 'uicore-elements'),
190	]);
191
192	}
193
194	public function render()
195	{
196	if( Plugin::$instance->experiments->is_feature_active('nested-elements') == false ){
197	$this->nesting_fallback();
198	return;
199	}
200
201	$items = $this->get_settings_for_display('carousel_items');
202	$carousel_items = '';
203
204	foreach ( $items as $index => $item ) {
205	ob_start();
206	$this->render_item($index);
207	$carousel_items .= ob_get_clean();
208	}
209	?>
210	<div class="ui-e-carousel swiper">
211
212	<div class='swiper-wrapper'>
213	<?php echo $carousel_items; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
214	</div>
215
216	<?php $this->TRAIT_render_carousel_navigations(); ?>
217	</div>
218	<?php
219	}
220
221	public function render_item( $index ) {
222	?>
223	<div class="ui-e-wrp swiper-slide">
224	<?php $this->print_child( $index ); ?>
225	</div>
226	<?php
227	}
228
229	public function print_child( $index ) {
230	$children = $this->get_children();
231	$child_ids = [];
232
233	if( empty( $children )){
234	return;
235	}
236
237	foreach ( $children as $child ) {
238	$child_ids[] = $child->get_id();
239	}
240
241	// Add the `ui-e-item` class directly on the item container
242	$add_attribute_to_container = function ( $should_render, $container ) use ( $child_ids ) {
243	if ( in_array( $container->get_id(), $child_ids ) ) {
244	$container->add_render_attribute( '_wrapper', [
245	'class' => 'ui-e-item',
246	] );
247	}
248
249	return $should_render;
250	};
251
252	add_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3 );
253	$children[ $index ]->print_element();
254	remove_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container );
255	}
256
257	protected function get_initial_config(): array {
258	if ( Plugin::$instance->experiments->is_feature_active( 'e_nested_atomic_repeaters' ) ) {
259	return array_merge( parent::get_initial_config(), [
260	'support_improved_repeaters' => true,
261	'node' => 'button',
262	] );
263	}
264
265	return parent::get_initial_config();
266	}
267
268	protected function content_template() {
269
270	if( Plugin::$instance->experiments->is_feature_active('nested-elements') == false ){
271	return;
272	}
273
274	?>
275	<#
276	var carouselItems = settings.carousel_items,
277	navigationDots = settings.navigation.includes('dots'),
278	navigationArrows = settings.navigation.includes('arrows'),
279	navigationFraction = settings.navigation.includes('fraction');
280
281	var prev = elementor.helpers.renderIcon( view, settings.previous_arrow, { 'aria-hidden': true }, 'i' , 'object' ),
282	next = elementor.helpers.renderIcon( view, settings.next_arrow, { 'aria-hidden': true }, 'i' , 'object' );
283	#>
284	<div class="ui-e-carousel swiper {{ elementorFrontend.config.swiperClass }}">
285
286	<div class='swiper-wrapper'> </div>
287
288	<# if ( navigationDots ) { #>
289	<div class="swiper-pagination ui-e-dots"></div>
290	<# } #>
291	<# if ( navigationArrows ) { #>
292	<div class="ui-e-button ui-e-previous" role="button" aria-label="Previous slide">
293	{{{ prev.value }}}
294	</div>
295	<div class="ui-e-button ui-e-next" role="button" aria-label="Next slide">
296	{{{ next.value }}}
297	</div>
298	<# } #>
299	<# if ( navigationFraction ) { #>
300	<div class="ui-e-fraction">
301	<span class="ui-e-current"></span>
302	/
303	<span class="ui-e-total"></span>
304	</div>
305	<# } #>
306	</div>
307	<?php
308	}
309
310	}
311	\Elementor\Plugin::instance()->widgets_manager->register(new CustomCarousel());