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

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

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