elementor / includes / widgets / accordion.php

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

701 lines 19.3 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	'selected_icon',
162	[
163	'label' => esc_html__( 'Icon', 'elementor' ),
164	'type' => Controls_Manager::ICONS,
165	'separator' => 'before',
166	'fa4compatibility' => 'icon',
167	'default' => [
168	'value' => 'fas fa-plus',
169	'library' => 'fa-solid',
170	],
171	'recommended' => [
172	'fa-solid' => [
173	'chevron-down',
174	'angle-down',
175	'angle-double-down',
176	'caret-down',
177	'caret-square-down',
178	],
179	'fa-regular' => [
180	'caret-square-down',
181	],
182	],
183	'skin' => 'inline',
184	'label_block' => false,
185	]
186	);
187
188	$this->add_control(
189	'selected_active_icon',
190	[
191	'label' => esc_html__( 'Active Icon', 'elementor' ),
192	'type' => Controls_Manager::ICONS,
193	'fa4compatibility' => 'icon_active',
194	'default' => [
195	'value' => 'fas fa-minus',
196	'library' => 'fa-solid',
197	],
198	'recommended' => [
199	'fa-solid' => [
200	'chevron-up',
201	'angle-up',
202	'angle-double-up',
203	'caret-up',
204	'caret-square-up',
205	],
206	'fa-regular' => [
207	'caret-square-up',
208	],
209	],
210	'skin' => 'inline',
211	'label_block' => false,
212	'condition' => [
213	'selected_icon[value]!' => '',
214	],
215	]
216	);
217
218	$this->add_control(
219	'title_html_tag',
220	[
221	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
222	'type' => Controls_Manager::SELECT,
223	'options' => [
224	'h1' => 'H1',
225	'h2' => 'H2',
226	'h3' => 'H3',
227	'h4' => 'H4',
228	'h5' => 'H5',
229	'h6' => 'H6',
230	'div' => 'div',
231	],
232	'default' => 'div',
233	'separator' => 'before',
234	]
235	);
236
237	$this->add_control(
238	'faq_schema',
239	[
240	'label' => esc_html__( 'FAQ Schema', 'elementor' ),
241	'type' => Controls_Manager::SWITCHER,
242	'separator' => 'before',
243	]
244	);
245
246	$this->end_controls_section();
247
248	$this->start_controls_section(
249	'section_title_style',
250	[
251	'label' => esc_html__( 'Accordion', 'elementor' ),
252	'tab' => Controls_Manager::TAB_STYLE,
253	]
254	);
255
256	$this->add_control(
257	'border_width',
258	[
259	'label' => esc_html__( 'Border Width', 'elementor' ),
260	'type' => Controls_Manager::SLIDER,
261	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
262	'range' => [
263	'px' => [
264	'max' => 20,
265	],
266	'em' => [
267	'max' => 2,
268	],
269	],
270	'selectors' => [
271	'{{WRAPPER}} .elementor-accordion-item' => 'border-width: {{SIZE}}{{UNIT}};',
272	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
273	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-width: {{SIZE}}{{UNIT}};',
274	],
275	]
276	);
277
278	$this->add_control(
279	'border_color',
280	[
281	'label' => esc_html__( 'Border Color', 'elementor' ),
282	'type' => Controls_Manager::COLOR,
283	'selectors' => [
284	'{{WRAPPER}} .elementor-accordion-item' => 'border-color: {{VALUE}};',
285	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
286	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
287	],
288	]
289	);
290
291	$this->end_controls_section();
292
293	$this->start_controls_section(
294	'section_toggle_style_title',
295	[
296	'label' => esc_html__( 'Title', 'elementor' ),
297	'tab' => Controls_Manager::TAB_STYLE,
298	]
299	);
300
301	$this->add_control(
302	'title_background',
303	[
304	'label' => esc_html__( 'Background', 'elementor' ),
305	'type' => Controls_Manager::COLOR,
306	'selectors' => [
307	'{{WRAPPER}} .elementor-tab-title' => 'background-color: {{VALUE}};',
308	],
309	]
310	);
311
312	$this->add_control(
313	'title_color',
314	[
315	'label' => esc_html__( 'Color', 'elementor' ),
316	'type' => Controls_Manager::COLOR,
317	'selectors' => [
318	'{{WRAPPER}} .elementor-accordion-icon, {{WRAPPER}} .elementor-accordion-title' => 'color: {{VALUE}};',
319	'{{WRAPPER}} .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
320	],
321	'global' => [
322	'default' => Global_Colors::COLOR_PRIMARY,
323	],
324	]
325	);
326
327	$this->add_control(
328	'tab_active_color',
329	[
330	'label' => esc_html__( 'Active Color', 'elementor' ),
331	'type' => Controls_Manager::COLOR,
332	'selectors' => [
333	'{{WRAPPER}} .elementor-active .elementor-accordion-icon, {{WRAPPER}} .elementor-active .elementor-accordion-title' => 'color: {{VALUE}};',
334	'{{WRAPPER}} .elementor-active .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
335	],
336	'global' => [
337	'default' => Global_Colors::COLOR_ACCENT,
338	],
339	]
340	);
341
342	$this->add_group_control(
343	Group_Control_Typography::get_type(),
344	[
345	'name' => 'title_typography',
346	'selector' => '{{WRAPPER}} .elementor-accordion-title',
347	'global' => [
348	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
349	],
350	]
351	);
352
353	$this->add_group_control(
354	Group_Control_Text_Stroke::get_type(),
355	[
356	'name' => 'text_stroke',
357	'selector' => '{{WRAPPER}} .elementor-accordion-title',
358	]
359	);
360
361	$this->add_group_control(
362	Group_Control_Text_Shadow::get_type(),
363	[
364	'name' => 'title_shadow',
365	'selector' => '{{WRAPPER}} .elementor-accordion-title',
366	]
367	);
368
369	$this->add_responsive_control(
370	'title_padding',
371	[
372	'label' => esc_html__( 'Padding', 'elementor' ),
373	'type' => Controls_Manager::DIMENSIONS,
374	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
375	'selectors' => [
376	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
377	],
378	]
379	);
380
381	$this->end_controls_section();
382
383	$this->start_controls_section(
384	'section_toggle_style_icon',
385	[
386	'label' => esc_html__( 'Icon', 'elementor' ),
387	'tab' => Controls_Manager::TAB_STYLE,
388	'condition' => [
389	'selected_icon[value]!' => '',
390	],
391	]
392	);
393
394	$this->add_control(
395	'icon_align',
396	[
397	'label' => esc_html__( 'Alignment', 'elementor' ),
398	'type' => Controls_Manager::CHOOSE,
399	'options' => [
400	'left' => [
401	'title' => esc_html__( 'Start', 'elementor' ),
402	'icon' => 'eicon-h-align-left',
403	],
404	'right' => [
405	'title' => esc_html__( 'End', 'elementor' ),
406	'icon' => 'eicon-h-align-right',
407	],
408	],
409	'default' => is_rtl() ? 'right' : 'left',
410	'toggle' => false,
411	]
412	);
413
414	$this->add_control(
415	'icon_color',
416	[
417	'label' => esc_html__( 'Color', 'elementor' ),
418	'type' => Controls_Manager::COLOR,
419	'selectors' => [
420	'{{WRAPPER}} .elementor-tab-title .elementor-accordion-icon i:before' => 'color: {{VALUE}};',
421	'{{WRAPPER}} .elementor-tab-title .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
422	],
423	]
424	);
425
426	$this->add_control(
427	'icon_active_color',
428	[
429	'label' => esc_html__( 'Active Color', 'elementor' ),
430	'type' => Controls_Manager::COLOR,
431	'selectors' => [
432	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-accordion-icon i:before' => 'color: {{VALUE}};',
433	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-accordion-icon svg' => 'fill: {{VALUE}};',
434	],
435	]
436	);
437
438	$this->add_responsive_control(
439	'icon_space',
440	[
441	'label' => esc_html__( 'Spacing', 'elementor' ),
442	'type' => Controls_Manager::SLIDER,
443	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
444	'range' => [
445	'px' => [
446	'max' => 100,
447	],
448	'em' => [
449	'max' => 1,
450	],
451	'rem' => [
452	'max' => 1,
453	],
454	],
455	'selectors' => [
456	'{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
457	'{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
458	],
459	]
460	);
461
462	$this->end_controls_section();
463
464	$this->start_controls_section(
465	'section_toggle_style_content',
466	[
467	'label' => esc_html__( 'Content', 'elementor' ),
468	'tab' => Controls_Manager::TAB_STYLE,
469	]
470	);
471
472	$this->add_control(
473	'content_background_color',
474	[
475	'label' => esc_html__( 'Background', 'elementor' ),
476	'type' => Controls_Manager::COLOR,
477	'selectors' => [
478	'{{WRAPPER}} .elementor-tab-content' => 'background-color: {{VALUE}};',
479	],
480	]
481	);
482
483	$this->add_control(
484	'content_color',
485	[
486	'label' => esc_html__( 'Color', 'elementor' ),
487	'type' => Controls_Manager::COLOR,
488	'selectors' => [
489	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
490	],
491	'global' => [
492	'default' => Global_Colors::COLOR_TEXT,
493	],
494	]
495	);
496
497	$this->add_group_control(
498	Group_Control_Typography::get_type(),
499	[
500	'name' => 'content_typography',
501	'selector' => '{{WRAPPER}} .elementor-tab-content',
502	'global' => [
503	'default' => Global_Typography::TYPOGRAPHY_TEXT,
504	],
505	]
506	);
507
508	$this->add_group_control(
509	Group_Control_Text_Shadow::get_type(),
510	[
511	'name' => 'content_shadow',
512	'selector' => '{{WRAPPER}} .elementor-tab-content',
513	]
514	);
515
516	$this->add_responsive_control(
517	'content_padding',
518	[
519	'label' => esc_html__( 'Padding', 'elementor' ),
520	'type' => Controls_Manager::DIMENSIONS,
521	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
522	'selectors' => [
523	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
524	],
525	]
526	);
527
528	$this->end_controls_section();
529	}
530
531	/**
532	* Render accordion widget output on the frontend.
533	*
534	* Written in PHP and used to generate the final HTML.
535	*
536	* @since 1.0.0
537	* @access protected
538	*/
539	protected function render() {
540	$settings = $this->get_settings_for_display();
541	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
542
543	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
544	// @todo: remove when deprecated
545	// added as bc in 2.6
546	// add old default
547	$settings['icon'] = 'fa fa-plus';
548	$settings['icon_active'] = 'fa fa-minus';
549	$settings['icon_align'] = $this->get_settings( 'icon_align' );
550	}
551
552	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
553	$has_icon = ( ! $is_new \|\| ! empty( $settings['selected_icon']['value'] ) );
554	$id_int = substr( $this->get_id_int(), 0, 3 );
555	?>
556	<div class="elementor-accordion">
557	<?php
558	foreach ( $settings['tabs'] as $index => $item ) :
559	$tab_count = $index + 1;
560
561	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
562
563	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
564
565	$this->add_render_attribute( $tab_title_setting_key, [
566	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
567	'class' => [ 'elementor-tab-title' ],
568	'data-tab' => $tab_count,
569	'role' => 'button',
570	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
571	'aria-expanded' => 'false',
572	] );
573
574	$this->add_render_attribute( $tab_content_setting_key, [
575	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
576	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
577	'data-tab' => $tab_count,
578	'role' => 'region',
579	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
580	] );
581
582	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
583	?>
584	<div class="elementor-accordion-item">
585	<<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?> <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>>
586	<?php if ( $has_icon ) : ?>
587	<span class="elementor-accordion-icon elementor-accordion-icon-<?php echo esc_attr( $settings['icon_align'] ); ?>" aria-hidden="true">
588	<?php
589	if ( $is_new \|\| $migrated ) { ?>
590	<span class="elementor-accordion-icon-closed"><?php Icons_Manager::render_icon( $settings['selected_icon'] ); ?></span>
591	<span class="elementor-accordion-icon-opened"><?php Icons_Manager::render_icon( $settings['selected_active_icon'] ); ?></span>
592	<?php } else { ?>
593	<i class="elementor-accordion-icon-closed <?php echo esc_attr( $settings['icon'] ); ?>"></i>
594	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
595	<?php } ?>
596	</span>
597	<?php endif; ?>
598	<a class="elementor-accordion-title" tabindex="0"><?php
599	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
600	?></a>
601	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
602	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
603	$this->print_text_editor( $item['tab_content'] );
604	?></div>
605	</div>
606	<?php endforeach; ?>
607	<?php
608	if ( isset( $settings['faq_schema'] ) && 'yes' === $settings['faq_schema'] ) {
609	$json = [
610	'@context' => 'https://schema.org',
611	'@type' => 'FAQPage',
612	'mainEntity' => [],
613	];
614
615	foreach ( $settings['tabs'] as $index => $item ) {
616	$json['mainEntity'][] = [
617	'@type' => 'Question',
618	'name' => wp_strip_all_tags( $item['tab_title'] ),
619	'acceptedAnswer' => [
620	'@type' => 'Answer',
621	'text' => $this->parse_text_editor( $item['tab_content'] ),
622	],
623	];
624	}
625	?>
626	<script type="application/ld+json"><?php echo wp_json_encode( $json ); ?></script>
627	<?php } ?>
628	</div>
629	<?php
630	}
631
632	/**
633	* Render accordion widget output in the editor.
634	*
635	* Written as a Backbone JavaScript template and used to generate the live preview.
636	*
637	* @since 2.9.0
638	* @access protected
639	*/
640	protected function content_template() {
641	?>
642	<div class="elementor-accordion">
643	<#
644	if ( settings.tabs ) {
645	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
646	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
647	iconActiveHTML = elementor.helpers.renderIcon( view, settings.selected_active_icon, {}, 'i' , 'object' ),
648	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
649
650	_.each( settings.tabs, function( item, index ) {
651	var tabCount = index + 1,
652	tabTitleKey = view.getRepeaterSettingKey( 'tab_title', 'tabs', index ),
653	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs', index );
654
655	view.addRenderAttribute( tabTitleKey, {
656	'id': 'elementor-tab-title-' + tabindex + tabCount,
657	'class': [ 'elementor-tab-title' ],
658	'tabindex': tabindex + tabCount,
659	'data-tab': tabCount,
660	'role': 'button',
661	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
662	'aria-expanded': 'false',
663	} );
664
665	view.addRenderAttribute( tabContentKey, {
666	'id': 'elementor-tab-content-' + tabindex + tabCount,
667	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
668	'data-tab': tabCount,
669	'role': 'region',
670	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
671	} );
672
673	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
674
675	var titleHTMLTag = elementor.helpers.validateHTMLTag( settings.title_html_tag );
676	#>
677	<div class="elementor-accordion-item">
678	<{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
679	<# if ( settings.icon \|\| settings.selected_icon ) { #>
680	<span class="elementor-accordion-icon elementor-accordion-icon-{{ settings.icon_align }}" aria-hidden="true">
681	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
682	<span class="elementor-accordion-icon-closed">{{{ iconHTML.value }}}</span>
683	<span class="elementor-accordion-icon-opened">{{{ iconActiveHTML.value }}}</span>
684	<# } else { #>
685	<i class="elementor-accordion-icon-closed {{ settings.icon }}"></i>
686	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
687	<# } #>
688	</span>
689	<# } #>
690	<a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
691	</{{{ titleHTMLTag }}}>
692	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
693	</div>
694	<#
695	} );
696	} #>
697	</div>
698	<?php
699	}
700	}
701