elementor / includes / widgets / accordion.php

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

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