elementor / includes / widgets / accordion.php

accordion.php in Elementor Website Builder – more than just a page builder 3.18.3, at includes/widgets/accordion.php

704 lines 19.4 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor accordion widget.
13	*
14	* Elementor widget that displays a collapsible display of content in an
15	* accordion style, showing only one item at a time.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Accordion extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve accordion widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'accordion';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve accordion widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Accordion', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve accordion widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-accordion';
61	}
62
63	/**
64	* Get widget keywords.
65	*
66	* Retrieve the list of keywords the widget belongs to.
67	*
68	* @since 2.1.0
69	* @access public
70	*
71	* @return array Widget keywords.
72	*/
73	public function get_keywords() {
74	return [ 'accordion', 'tabs', 'toggle' ];
75	}
76
77	/**
78	* Hide widget from panel.
79	*
80	* Hide the toggle widget from the panel if nested-accordion experiment is active.
81	*
82	* @since 3.15.0
83	* @return bool
84	*/
85	public function show_in_panel(): bool {
86	return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements' );
87	}
88
89	/**
90	* Register accordion widget controls.
91	*
92	* Adds different input fields to allow the user to change and customize the widget settings.
93	*
94	* @since 3.1.0
95	* @access protected
96	*/
97	protected function register_controls() {
98	$this->start_controls_section(
99	'section_title',
100	[
101	'label' => esc_html__( 'Accordion', 'elementor' ),
102	]
103	);
104
105	$repeater = new Repeater();
106
107	$repeater->add_control(
108	'tab_title',
109	[
110	'label' => esc_html__( 'Title', 'elementor' ),
111	'type' => Controls_Manager::TEXT,
112	'default' => esc_html__( 'Accordion Title', 'elementor' ),
113	'dynamic' => [
114	'active' => true,
115	],
116	'label_block' => true,
117	]
118	);
119
120	$repeater->add_control(
121	'tab_content',
122	[
123	'label' => esc_html__( 'Content', 'elementor' ),
124	'type' => Controls_Manager::WYSIWYG,
125	'default' => esc_html__( 'Accordion Content', 'elementor' ),
126	]
127	);
128
129	if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
130	$this->add_deprecation_message(
131	'3.15.0',
132	esc_html__(
133	'You are currently editing an Accordion Widget in its old version. Any new Accordion widget dragged into the canvas will be the new Accordion widget, with the improved Nested capabilities.',
134	'elementor'
135	),
136	'nested-accordion'
137	);
138	}
139
140	$this->add_control(
141	'tabs',
142	[
143	'label' => esc_html__( 'Accordion Items', 'elementor' ),
144	'type' => Controls_Manager::REPEATER,
145	'fields' => $repeater->get_controls(),
146	'default' => [
147	[
148	'tab_title' => esc_html__( 'Accordion #1', 'elementor' ),
149	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
150	],
151	[
152	'tab_title' => esc_html__( 'Accordion #2', 'elementor' ),
153	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
154	],
155	],
156	'title_field' => '{{{ tab_title }}}',
157	]
158	);
159
160	$this->add_control(
161	'view',
162	[
163	'label' => esc_html__( 'View', 'elementor' ),
164	'type' => Controls_Manager::HIDDEN,
165	'default' => 'traditional',
166	]
167	);
168
169	$this->add_control(
170	'selected_icon',
171	[
172	'label' => esc_html__( 'Icon', 'elementor' ),
173	'type' => Controls_Manager::ICONS,
174	'separator' => 'before',
175	'fa4compatibility' => 'icon',
176	'default' => [
177	'value' => 'fas fa-plus',
178	'library' => 'fa-solid',
179	],
180	'recommended' => [
181	'fa-solid' => [
182	'chevron-down',
183	'angle-down',
184	'angle-double-down',
185	'caret-down',
186	'caret-square-down',
187	],
188	'fa-regular' => [
189	'caret-square-down',
190	],
191	],
192	'skin' => 'inline',
193	'label_block' => false,
194	]
195	);
196
197	$this->add_control(
198	'selected_active_icon',
199	[
200	'label' => esc_html__( 'Active Icon', 'elementor' ),
201	'type' => Controls_Manager::ICONS,
202	'fa4compatibility' => 'icon_active',
203	'default' => [
204	'value' => 'fas fa-minus',
205	'library' => 'fa-solid',
206	],
207	'recommended' => [
208	'fa-solid' => [
209	'chevron-up',
210	'angle-up',
211	'angle-double-up',
212	'caret-up',
213	'caret-square-up',
214	],
215	'fa-regular' => [
216	'caret-square-up',
217	],
218	],
219	'skin' => 'inline',
220	'label_block' => false,
221	'condition' => [
222	'selected_icon[value]!' => '',
223	],
224	]
225	);
226
227	$this->add_control(
228	'title_html_tag',
229	[
230	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
231	'type' => Controls_Manager::SELECT,
232	'options' => [
233	'h1' => 'H1',
234	'h2' => 'H2',
235	'h3' => 'H3',
236	'h4' => 'H4',
237	'h5' => 'H5',
238	'h6' => 'H6',
239	'div' => 'div',
240	],
241	'default' => 'div',
242	'separator' => 'before',
243	]
244	);
245
246	$this->add_control(
247	'faq_schema',
248	[
249	'label' => esc_html__( 'FAQ Schema', 'elementor' ),
250	'type' => Controls_Manager::SWITCHER,
251	'separator' => 'before',
252	]
253	);
254
255	$this->end_controls_section();
256
257	$this->start_controls_section(
258	'section_title_style',
259	[
260	'label' => esc_html__( 'Accordion', 'elementor' ),
261	'tab' => Controls_Manager::TAB_STYLE,
262	]
263	);
264
265	$this->add_control(
266	'border_width',
267	[
268	'label' => esc_html__( 'Border Width', 'elementor' ),
269	'type' => Controls_Manager::SLIDER,
270	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
271	'range' => [
272	'px' => [
273	'max' => 20,
274	],
275	'em' => [
276	'max' => 2,
277	],
278	],
279	'selectors' => [
280	'{{WRAPPER}} .elementor-accordion-item' => 'border-width: {{SIZE}}{{UNIT}};',
281	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
282	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-width: {{SIZE}}{{UNIT}};',
283	],
284	]
285	);
286
287	$this->add_control(
288	'border_color',
289	[
290	'label' => esc_html__( 'Border Color', 'elementor' ),
291	'type' => Controls_Manager::COLOR,
292	'selectors' => [
293	'{{WRAPPER}} .elementor-accordion-item' => 'border-color: {{VALUE}};',
294	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
295	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
296	],
297	]
298	);
299
300	$this->end_controls_section();
301
302	$this->start_controls_section(
303	'section_toggle_style_title',
304	[
305	'label' => esc_html__( 'Title', 'elementor' ),
306	'tab' => Controls_Manager::TAB_STYLE,
307	]
308	);
309
310	$this->add_control(
311	'title_background',
312	[
313	'label' => esc_html__( 'Background', 'elementor' ),
314	'type' => Controls_Manager::COLOR,
315	'selectors' => [
316	'{{WRAPPER}} .elementor-tab-title' => 'background-color: {{VALUE}};',
317	],
318	]
319	);
320
321	$this->add_control(
322	'title_color',
323	[
324	'label' => esc_html__( 'Color', 'elementor' ),
325	'type' => Controls_Manager::COLOR,
326	'selectors' => [
327	'{{WRAPPER}} .elementor-accordion-icon, {{WRAPPER}} .elementor-accordion-title' => 'color: {{VALUE}};',
328	'{{WRAPPER}} .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
329	],
330	'global' => [
331	'default' => Global_Colors::COLOR_PRIMARY,
332	],
333	]
334	);
335
336	$this->add_control(
337	'tab_active_color',
338	[
339	'label' => esc_html__( 'Active Color', 'elementor' ),
340	'type' => Controls_Manager::COLOR,
341	'selectors' => [
342	'{{WRAPPER}} .elementor-active .elementor-accordion-icon, {{WRAPPER}} .elementor-active .elementor-accordion-title' => 'color: {{VALUE}};',
343	'{{WRAPPER}} .elementor-active .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
344	],
345	'global' => [
346	'default' => Global_Colors::COLOR_ACCENT,
347	],
348	]
349	);
350
351	$this->add_group_control(
352	Group_Control_Typography::get_type(),
353	[
354	'name' => 'title_typography',
355	'selector' => '{{WRAPPER}} .elementor-accordion-title',
356	'global' => [
357	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
358	],
359	]
360	);
361
362	$this->add_group_control(
363	Group_Control_Text_Stroke::get_type(),
364	[
365	'name' => 'text_stroke',
366	'selector' => '{{WRAPPER}} .elementor-accordion-title',
367	]
368	);
369
370	$this->add_group_control(
371	Group_Control_Text_Shadow::get_type(),
372	[
373	'name' => 'title_shadow',
374	'selector' => '{{WRAPPER}} .elementor-accordion-title',
375	]
376	);
377
378	$this->add_responsive_control(
379	'title_padding',
380	[
381	'label' => esc_html__( 'Padding', 'elementor' ),
382	'type' => Controls_Manager::DIMENSIONS,
383	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
384	'selectors' => [
385	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
386	],
387	]
388	);
389
390	$this->end_controls_section();
391
392	$this->start_controls_section(
393	'section_toggle_style_icon',
394	[
395	'label' => esc_html__( 'Icon', 'elementor' ),
396	'tab' => Controls_Manager::TAB_STYLE,
397	'condition' => [
398	'selected_icon[value]!' => '',
399	],
400	]
401	);
402
403	$this->add_control(
404	'icon_align',
405	[
406	'label' => esc_html__( 'Alignment', 'elementor' ),
407	'type' => Controls_Manager::CHOOSE,
408	'options' => [
409	'left' => [
410	'title' => esc_html__( 'Start', 'elementor' ),
411	'icon' => 'eicon-h-align-left',
412	],
413	'right' => [
414	'title' => esc_html__( 'End', 'elementor' ),
415	'icon' => 'eicon-h-align-right',
416	],
417	],
418	'default' => is_rtl() ? 'right' : 'left',
419	'toggle' => false,
420	]
421	);
422
423	$this->add_control(
424	'icon_color',
425	[
426	'label' => esc_html__( 'Color', 'elementor' ),
427	'type' => Controls_Manager::COLOR,
428	'selectors' => [
429	'{{WRAPPER}} .elementor-tab-title .elementor-accordion-icon i:before' => 'color: {{VALUE}};',
430	'{{WRAPPER}} .elementor-tab-title .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
431	],
432	]
433	);
434
435	$this->add_control(
436	'icon_active_color',
437	[
438	'label' => esc_html__( 'Active Color', 'elementor' ),
439	'type' => Controls_Manager::COLOR,
440	'selectors' => [
441	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-accordion-icon i:before' => 'color: {{VALUE}};',
442	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
443	],
444	]
445	);
446
447	$this->add_responsive_control(
448	'icon_space',
449	[
450	'label' => esc_html__( 'Spacing', 'elementor' ),
451	'type' => Controls_Manager::SLIDER,
452	'range' => [
453	'px' => [
454	'min' => 0,
455	'max' => 100,
456	],
457	],
458	'selectors' => [
459	'{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
460	'{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
461	],
462	]
463	);
464
465	$this->end_controls_section();
466
467	$this->start_controls_section(
468	'section_toggle_style_content',
469	[
470	'label' => esc_html__( 'Content', 'elementor' ),
471	'tab' => Controls_Manager::TAB_STYLE,
472	]
473	);
474
475	$this->add_control(
476	'content_background_color',
477	[
478	'label' => esc_html__( 'Background', 'elementor' ),
479	'type' => Controls_Manager::COLOR,
480	'selectors' => [
481	'{{WRAPPER}} .elementor-tab-content' => 'background-color: {{VALUE}};',
482	],
483	]
484	);
485
486	$this->add_control(
487	'content_color',
488	[
489	'label' => esc_html__( 'Color', 'elementor' ),
490	'type' => Controls_Manager::COLOR,
491	'selectors' => [
492	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
493	],
494	'global' => [
495	'default' => Global_Colors::COLOR_TEXT,
496	],
497	]
498	);
499
500	$this->add_group_control(
501	Group_Control_Typography::get_type(),
502	[
503	'name' => 'content_typography',
504	'selector' => '{{WRAPPER}} .elementor-tab-content',
505	'global' => [
506	'default' => Global_Typography::TYPOGRAPHY_TEXT,
507	],
508	]
509	);
510
511	$this->add_group_control(
512	Group_Control_Text_Shadow::get_type(),
513	[
514	'name' => 'content_shadow',
515	'selector' => '{{WRAPPER}} .elementor-tab-content',
516	]
517	);
518
519	$this->add_responsive_control(
520	'content_padding',
521	[
522	'label' => esc_html__( 'Padding', 'elementor' ),
523	'type' => Controls_Manager::DIMENSIONS,
524	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
525	'selectors' => [
526	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
527	],
528	]
529	);
530
531	$this->end_controls_section();
532	}
533
534	/**
535	* Render accordion widget output on the frontend.
536	*
537	* Written in PHP and used to generate the final HTML.
538	*
539	* @since 1.0.0
540	* @access protected
541	*/
542	protected function render() {
543	$settings = $this->get_settings_for_display();
544	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
545
546	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
547	// @todo: remove when deprecated
548	// added as bc in 2.6
549	// add old default
550	$settings['icon'] = 'fa fa-plus';
551	$settings['icon_active'] = 'fa fa-minus';
552	$settings['icon_align'] = $this->get_settings( 'icon_align' );
553	}
554
555	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
556	$has_icon = ( ! $is_new \|\| ! empty( $settings['selected_icon']['value'] ) );
557	$id_int = substr( $this->get_id_int(), 0, 3 );
558	?>
559	<div class="elementor-accordion">
560	<?php
561	foreach ( $settings['tabs'] as $index => $item ) :
562	$tab_count = $index + 1;
563
564	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
565
566	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
567
568	$this->add_render_attribute( $tab_title_setting_key, [
569	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
570	'class' => [ 'elementor-tab-title' ],
571	'data-tab' => $tab_count,
572	'role' => 'button',
573	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
574	'aria-expanded' => 'false',
575	] );
576
577	$this->add_render_attribute( $tab_content_setting_key, [
578	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
579	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
580	'data-tab' => $tab_count,
581	'role' => 'region',
582	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
583	] );
584
585	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
586	?>
587	<div class="elementor-accordion-item">
588	<<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?> <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>>
589	<?php if ( $has_icon ) : ?>
590	<span class="elementor-accordion-icon elementor-accordion-icon-<?php echo esc_attr( $settings['icon_align'] ); ?>" aria-hidden="true">
591	<?php
592	if ( $is_new \|\| $migrated ) { ?>
593	<span class="elementor-accordion-icon-closed"><?php Icons_Manager::render_icon( $settings['selected_icon'] ); ?></span>
594	<span class="elementor-accordion-icon-opened"><?php Icons_Manager::render_icon( $settings['selected_active_icon'] ); ?></span>
595	<?php } else { ?>
596	<i class="elementor-accordion-icon-closed <?php echo esc_attr( $settings['icon'] ); ?>"></i>
597	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
598	<?php } ?>
599	</span>
600	<?php endif; ?>
601	<a class="elementor-accordion-title" tabindex="0"><?php
602	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
603	?></a>
604	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
605	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
606	$this->print_text_editor( $item['tab_content'] );
607	?></div>
608	</div>
609	<?php endforeach; ?>
610	<?php
611	if ( isset( $settings['faq_schema'] ) && 'yes' === $settings['faq_schema'] ) {
612	$json = [
613	'@context' => 'https://schema.org',
614	'@type' => 'FAQPage',
615	'mainEntity' => [],
616	];
617
618	foreach ( $settings['tabs'] as $index => $item ) {
619	$json['mainEntity'][] = [
620	'@type' => 'Question',
621	'name' => wp_strip_all_tags( $item['tab_title'] ),
622	'acceptedAnswer' => [
623	'@type' => 'Answer',
624	'text' => $this->parse_text_editor( $item['tab_content'] ),
625	],
626	];
627	}
628	?>
629	<script type="application/ld+json"><?php echo wp_json_encode( $json ); ?></script>
630	<?php } ?>
631	</div>
632	<?php
633	}
634
635	/**
636	* Render accordion widget output in the editor.
637	*
638	* Written as a Backbone JavaScript template and used to generate the live preview.
639	*
640	* @since 2.9.0
641	* @access protected
642	*/
643	protected function content_template() {
644	?>
645	<div class="elementor-accordion">
646	<#
647	if ( settings.tabs ) {
648	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
649	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
650	iconActiveHTML = elementor.helpers.renderIcon( view, settings.selected_active_icon, {}, 'i' , 'object' ),
651	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
652
653	_.each( settings.tabs, function( item, index ) {
654	var tabCount = index + 1,
655	tabTitleKey = view.getRepeaterSettingKey( 'tab_title', 'tabs', index ),
656	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs', index );
657
658	view.addRenderAttribute( tabTitleKey, {
659	'id': 'elementor-tab-title-' + tabindex + tabCount,
660	'class': [ 'elementor-tab-title' ],
661	'tabindex': tabindex + tabCount,
662	'data-tab': tabCount,
663	'role': 'button',
664	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
665	'aria-expanded': 'false',
666	} );
667
668	view.addRenderAttribute( tabContentKey, {
669	'id': 'elementor-tab-content-' + tabindex + tabCount,
670	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
671	'data-tab': tabCount,
672	'role': 'region',
673	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
674	} );
675
676	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
677
678	var titleHTMLTag = elementor.helpers.validateHTMLTag( settings.title_html_tag );
679	#>
680	<div class="elementor-accordion-item">
681	<{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
682	<# if ( settings.icon \|\| settings.selected_icon ) { #>
683	<span class="elementor-accordion-icon elementor-accordion-icon-{{ settings.icon_align }}" aria-hidden="true">
684	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
685	<span class="elementor-accordion-icon-closed">{{{ iconHTML.value }}}</span>
686	<span class="elementor-accordion-icon-opened">{{{ iconActiveHTML.value }}}</span>
687	<# } else { #>
688	<i class="elementor-accordion-icon-closed {{ settings.icon }}"></i>
689	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
690	<# } #>
691	</span>
692	<# } #>
693	<a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
694	</{{{ titleHTMLTag }}}>
695	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
696	</div>
697	<#
698	} );
699	} #>
700	</div>
701	<?php
702	}
703	}
704