elementor / includes / widgets / accordion.php

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

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