elementor / includes / widgets / accordion.php

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

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