betterdocs / includes / elementor / widgets / betterdocs-elementor-toc.php

betterdocs-elementor-toc.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 2.3.6, at includes/elementor/widgets/betterdocs-elementor-toc.php

586 lines 18.8 KB

Raw Download Zip

1	<?php
2
3	use Elementor\Controls_Manager;
4	use Elementor\Group_Control_Typography;
5	use Elementor\Widget_Base;
6	use Elementor\Core\Schemes;
7	use Elementor\Group_Control_Text_Shadow;
8	use ElementorPro\Plugin;
9
10	if (!defined('ABSPATH')) {
11	exit; // Exit if accessed directly
12	}
13
14	class BetterDocs_Elementor_Toc extends Widget_Base
15	{
16
17	public function get_name()
18	{
19	return 'betterdocs-toc';
20	}
21
22	public function get_title()
23	{
24	return __('Doc Table of Contents', 'betterdocs');
25	}
26
27	public function get_icon()
28	{
29	return 'betterdocs-icon-Sidebar';
30	}
31
32	public function get_categories()
33	{
34	return ['betterdocs-elements-single'];
35	}
36
37	public function get_keywords()
38	{
39	return ['betterdocs-elements', 'toc', 'table-of-content', 'betterdocs', 'docs'];
40	}
41
42	public function get_custom_help_url()
43	{
44	return 'https://betterdocs.co/docs/single-doc-in-elementor';
45	}
46
47	protected function register_controls()
48	{
49	$this->list_options();
50
51	$this->box_setting_style();
52
53	$this->title_settings();
54
55	$this->list_settings();
56	}
57
58	public function list_options()
59	{
60	$this->start_controls_section(
61	'section_options',
62	[
63	'label' => __('Controls', 'betterdocs')
64	]
65	);
66
67	$this->add_control(
68	'toc_title',
69	[
70	'label' => __('TOC Title', 'betterdocs'),
71	'type' => Controls_Manager::TEXT,
72	'default' => esc_html__('Table of contents', 'betterdocs')
73	]
74	);
75
76	$this->add_control(
77	'htags',
78	[
79	'label' => __('Supported Heading Tags', 'betterdocs'),
80	'type' => Controls_Manager::SELECT2,
81	'multiple' => true,
82	'options' => [
83	'1' => __('H1', 'betterdocs'),
84	'2' => __('H2', 'betterdocs'),
85	'3' => __('H3', 'betterdocs'),
86	'4' => __('H4', 'betterdocs'),
87	'5' => __('H5', 'betterdocs'),
88	'6' => __('H6', 'betterdocs'),
89	],
90	'default' => ['1', '2', '3', '4', '5', '6'],
91	]
92	);
93
94	$this->add_responsive_control(
95	'list_hierarchy',
96	[
97	'label' => __('List Hierarchy', 'betterdocs'),
98	'type' => Controls_Manager::SWITCHER,
99	'label_on' => __('Show', 'betterdocs'),
100	'label_off' => __('Hide', 'betterdocs'),
101	'return_value' => '1',
102	'default' => '1',
103	]
104	);
105
106	$this->add_responsive_control(
107	'list_number',
108	[
109	'label' => __('List Number', 'betterdocs'),
110	'type' => Controls_Manager::SWITCHER,
111	'label_on' => __('Show', 'betterdocs'),
112	'label_off' => __('Hide', 'betterdocs'),
113	'return_value' => '1',
114	'default' => '1',
115	]
116	);
117
118	$this->add_responsive_control(
119	'collapsible_toc_mobile',
120	[
121	'label' => __('Collapsible on small devices', 'betterdocs'),
122	'type' => Controls_Manager::SWITCHER,
123	'label_on' => __('Show', 'betterdocs'),
124	'label_off' => __('Hide', 'betterdocs'),
125	'return_value' => '1',
126	'default' => '',
127	]
128	);
129
130	$this->end_controls_section();
131	}
132
133	public function box_setting_style()
134	{
135	/**
136	* ----------------------------------------------------------
137	* Section: Box Styles
138	* ----------------------------------------------------------
139	*/
140	$this->start_controls_section(
141	'section_card_settings',
142	[
143	'label' => __('Box', 'betterdocs'),
144	'tab' => Controls_Manager::TAB_STYLE,
145	]
146	);
147
148	$this->add_responsive_control(
149	'column_width', // Legacy control id but new control
150	[
151	'label' => __('Box Width (%)', 'betterdocs'),
152	'type' => Controls_Manager::NUMBER,
153	'min' => 0,
154	'max' => 100,
155	'step' => 5,
156	'default' => 100,
157	'selectors' => [
158	'{{WRAPPER}} .betterdocs-toc' => 'width: {{VALUE}}%;',
159	]
160	]
161	);
162
163	$this->add_responsive_control(
164	'column_background',
165	[
166	'label' => esc_html__('Background Color', 'betterdocs'),
167	'type' => Controls_Manager::COLOR,
168	'selectors' => [
169	'{{WRAPPER}} .betterdocs-toc' => 'background-color: {{VALUE}};'
170	],
171	]
172	);
173
174	$this->add_responsive_control(
175	'column_space', // Legacy control id but new control
176	[
177	'label' => __('Box Spacing', 'betterdocs'),
178	'type' => Controls_Manager::DIMENSIONS,
179	'size_units' => ['px', '%', 'em'],
180	'selectors' => [
181	'{{WRAPPER}} .betterdocs-toc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
182	]
183	]
184	);
185
186	$this->add_responsive_control(
187	'column_padding',
188	[
189	'label' => __('Box Padding', 'betterdocs'),
190	'type' => Controls_Manager::DIMENSIONS,
191	'size_units' => ['px', 'em', '%'],
192	'selectors' => [
193	'{{WRAPPER}} .betterdocs-toc' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
194	],
195	]
196	);
197
198	$this->add_responsive_control(
199	'column_border_radius',
200	[
201	'label' => esc_html__('Box Border Radius', 'betterdocs'),
202	'type' => Controls_Manager::DIMENSIONS,
203	'size_units' => ['px', 'em', '%'],
204	'selectors' => [
205	'{{WRAPPER}} .betterdocs-toc' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
206	],
207	]
208	);
209
210	$this->add_responsive_control(
211	'align',
212	[
213	'label' => __('Alignment', 'betterdocs'),
214	'type' => Controls_Manager::CHOOSE,
215	'options' => [
216	'left' => [
217	'title' => __('Left', 'betterdocs'),
218	'icon' => 'eicon-text-align-left',
219	],
220	'center' => [
221	'title' => __('Center', 'betterdocs'),
222	'icon' => 'eicon-text-align-center',
223	],
224	'right' => [
225	'title' => __('Right', 'betterdocs'),
226	'icon' => 'eicon-text-align-right',
227	],
228	'justify' => [
229	'title' => __('Justified', 'betterdocs'),
230	'icon' => 'eicon-text-align-justify',
231	],
232	],
233	'default' => '',
234	'selectors' => [
235	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
236	],
237	]
238	);
239
240	$this->end_controls_section(); # end of 'Card Settings'
241	}
242
243	public function title_settings()
244	{
245	$this->start_controls_section(
246	'section_title',
247	[
248	'label' => __('Title', 'betterdocs'),
249	'tab' => Controls_Manager::TAB_STYLE,
250	]
251	);
252
253	$this->add_control(
254	'title_color',
255	[
256	'label' => __('Text Color', 'betterdocs'),
257	'type' => Controls_Manager::COLOR,
258	'scheme' => [
259	'type' => Schemes\Color::get_type(),
260	'value' => Schemes\Color::COLOR_1,
261	],
262	'selectors' => [
263	'{{WRAPPER}} .betterdocs-toc .toc-title' => 'color: {{VALUE}};',
264	],
265	]
266	);
267
268	$this->add_group_control(
269	Group_Control_Typography::get_type(),
270	[
271	'name' => 'typography',
272	'scheme' => Schemes\Typography::TYPOGRAPHY_1,
273	'selector' => '{{WRAPPER}} .betterdocs-toc .toc-title',
274	]
275	);
276
277	$this->add_group_control(
278	Group_Control_Text_Shadow::get_type(),
279	[
280	'name' => 'text_shadow',
281	'selector' => '{{WRAPPER}} .betterdocs-toc .toc-title',
282	]
283	);
284
285	$this->add_control(
286	'blend_mode',
287	[
288	'label' => __('Blend Mode', 'betterdocs'),
289	'type' => Controls_Manager::SELECT,
290	'options' => [
291	'' => __('Normal', 'betterdocs'),
292	'multiply' => 'Multiply',
293	'screen' => 'Screen',
294	'overlay' => 'Overlay',
295	'darken' => 'Darken',
296	'lighten' => 'Lighten',
297	'color-dodge' => 'Color Dodge',
298	'saturation' => 'Saturation',
299	'color' => 'Color',
300	'difference' => 'Difference',
301	'exclusion' => 'Exclusion',
302	'hue' => 'Hue',
303	'luminosity' => 'Luminosity',
304	],
305	'selectors' => [
306	'{{WRAPPER}} .betterdocs-toc .toc-title' => 'mix-blend-mode: {{VALUE}}',
307	],
308	'separator' => 'none',
309	]
310	);
311
312
313	$this->add_responsive_control(
314	'title_padding',
315	[
316	'label' => esc_html__('Title Padding', 'betterdocs'),
317	'type' => Controls_Manager::DIMENSIONS,
318	'size_units' => ['px', 'em', '%'],
319	'selectors' => [
320	'{{WRAPPER}} .betterdocs-toc .toc-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
321	],
322	]
323	);
324
325	$this->add_responsive_control(
326	'title_margin',
327	[
328	'label' => esc_html__('Title Margin', 'betterdocs'),
329	'type' => Controls_Manager::DIMENSIONS,
330	'size_units' => ['px', 'em', '%'],
331	'selectors' => [
332	'{{WRAPPER}} .betterdocs-toc .toc-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333	],
334	]
335	);
336
337
338	$this->end_controls_section();
339
340	$this->update_control(
341	'title',
342	[
343	'dynamic' => [
344	'default' => Plugin::elementor()->dynamic_tags->tag_data_to_tag_text(null, 'betterdocs-title-tag'),
345	],
346	],
347	[
348	'recursive' => true,
349	]
350	);
351	}
352
353	public function list_settings()
354	{
355	/**
356	* ----------------------------------------------------------
357	* Section: List Settinggs
358	* ----------------------------------------------------------
359	*/
360	$this->start_controls_section(
361	'section_article_settings',
362	[
363	'label' => __('Toc List', 'betterdocs'),
364	'tab' => Controls_Manager::TAB_STYLE
365	]
366	);
367
368
369	$this->add_group_control(
370	Group_Control_Typography::get_type(),
371	[
372	'name' => 'list_item_typography',
373	'selector' => '{{WRAPPER}} .betterdocs-toc ul li a',
374	]
375	);
376
377	$this->add_control(
378	'list_word_wrap',
379	[
380	'label' => __('Word Wrap', 'betterdocs'),
381	'type' => Controls_Manager::SELECT2,
382	'multiple' => false,
383	'options' => [
384	'normal' => 'normal',
385	'break-word' => 'break-word',
386	'initial' => 'initial',
387	'inherit' => 'inherit',
388	],
389	'default' => 'normal',
390	'selectors' => [
391	'{{WRAPPER}} .betterdocs-toc ul li a' => 'word-wrap: {{VALUE}};',
392	],
393	]
394	);
395
396	$this->add_responsive_control(
397	'list_border_left_full',
398	[
399	'label' => __( 'Left Border Line', 'betterodcs' ),
400	'type' => Controls_Manager::SLIDER,
401	'size_units' => [ 'px', '%' ],
402	'range' => [
403	'px' => [
404	'min' => 0,
405	'max' => 1000,
406	'step' => 1,
407	],
408	'%' => [
409	'min' => 0,
410	'max' => 100,
411	],
412	],
413	'default' => [
414	'unit' => 'px',
415	'size' => 1,
416	],
417	'selectors' => [
418	'{{WRAPPER}} .betterdocs-toc ul.betterdocs-hierarchial-toc' => 'border-left: {{SIZE}}{{UNIT}} solid #D2D2D2; position:relative;'
419	],
420	]
421	);
422
423	$this->add_responsive_control(
424	'list_border_left_full_space',
425	[
426	'label' => esc_html__('Left Border Line Space', 'betterdocs'),
427	'type' => Controls_Manager::DIMENSIONS,
428	'size_units' => ['px', 'em', '%'],
429	'default' => [
430	"top" => '0',
431	"right" => '0',
432	"bottom" => '0',
433	"left" => '0',
434	"isLinked" => false,
435	],
436	'selectors' => [
437	'{{WRAPPER}} .betterdocs-toc > .toc-list li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
438	],
439	]
440	);
441
442	$this->add_responsive_control(
443	'list_border_left_positioning',
444	[
445	'label' => esc_html__('Left Border Line Positioning', 'betterdocs'),
446	'type' => Controls_Manager::DIMENSIONS,
447	'size_units' => ['px', 'em', '%'],
448	'default' => [
449	"top" => '0',
450	"right" => '0',
451	"bottom" => '0',
452	"left" => '0',
453	"isLinked" => false,
454	],
455	'selectors' => [
456	'{{WRAPPER}} .betterdocs-toc ul.betterdocs-hierarchial-toc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
457	],
458	]
459	);
460
461	$this->add_control(
462	'list_border_left_full_color',
463	[
464	'label' => __('Left Border Line Color', 'betterdocs'),
465	'type' => Controls_Manager::COLOR,
466	'selectors' => [
467	'{{WRAPPER}} .betterdocs-toc ul.betterdocs-hierarchial-toc' => 'border-color: {{VALUE}};',
468	],
469	]
470	);
471
472	$this->add_responsive_control(
473	'list_border_left',
474	[
475	'label' => __( 'Active List Left Border Width', 'betterodcs' ),
476	'type' => Controls_Manager::SLIDER,
477	'size_units' => [ 'px', '%' ],
478	'range' => [
479	'px' => [
480	'min' => 0,
481	'max' => 1000,
482	'step' => 1,
483	],
484	'%' => [
485	'min' => 0,
486	'max' => 100,
487	],
488	],
489	'default' => [
490	'unit' => 'px',
491	'size' => 2,
492	],
493	'selectors' => [
494	'{{WRAPPER}} .betterdocs-toc ul.betterdocs-hierarchial-toc a.active:after' => 'width: {{SIZE}}{{UNIT}}; content:""; position: absolute; height: 1.6em; left: -1px ',
495	],
496	]
497	);
498
499	$this->add_control(
500	'list_border_left_color',
501	[
502	'label' => __('Active Color Left Border', 'betterdocs'),
503	'type' => Controls_Manager::COLOR,
504	'selectors' => [
505	'{{WRAPPER}} .betterdocs-toc > .toc-list a.active:after' => 'background-color: {{VALUE}};',
506	],
507	]
508	);
509
510	$this->add_control(
511	'list_color',
512	[
513	'label' => esc_html__('List Color', 'betterdocs'),
514	'type' => Controls_Manager::COLOR,
515	'selectors' => [
516	'{{WRAPPER}} .betterdocs-toc ul li a' => 'color: {{VALUE}};',
517	'{{WRAPPER}} .betterdocs-toc > .toc-list a.active:before' => 'color: {{VALUE}};'
518	],
519	]
520	);
521
522	$this->add_control(
523	'list_hover_color',
524	[
525	'label' => esc_html__('List Hover Color', 'betterdocs'),
526	'type' => Controls_Manager::COLOR,
527	'selectors' => [
528	'{{WRAPPER}} .betterdocs-toc ul li a:hover' => 'color: {{VALUE}};',
529	],
530	]
531	);
532
533	$this->add_responsive_control(
534	'list_margin',
535	[
536	'label' => esc_html__('List Item Spacing', 'betterdocs'),
537	'type' => Controls_Manager::DIMENSIONS,
538	'size_units' => ['px', 'em', '%'],
539	'selectors' => [
540	'{{WRAPPER}} .betterdocs-toc ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
541	],
542	]
543	);
544
545	$this->add_responsive_control(
546	'list_padding',
547	[
548	'label' => esc_html__('List Item Padding', 'betterdocs'),
549	'type' => Controls_Manager::DIMENSIONS,
550	'size_units' => ['px', 'em', '%'],
551	'selectors' => [
552	'{{WRAPPER}} .betterdocs-toc ul' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; display: inline-block;',
553	],
554	]
555	);
556
557
558	$this->end_controls_section(); # end of 'Column Settings'
559
560	}
561
562	protected function render()
563	{
564	$settings = $this->get_settings_for_display();
565	$toc_setting = [
566	'htags' => $settings['htags'],
567	'hierarchy' => $settings['list_hierarchy'],
568	'list_number' => $settings['list_number'],
569	];
570	if (\Elementor\Plugin::$instance->editor->is_edit_mode()) {
571	set_transient('betterdocs_toc_setting', $toc_setting);
572	}
573	$htags = implode(',', $settings['htags']);
574	$shortcode = do_shortcode(
575	"[betterdocs_toc
576	htags='{$htags}'
577	hierarchy='{$settings['list_hierarchy']}'
578	list_number='{$settings['list_number']}'
579	collapsible_on_mobile='{$settings['collapsible_toc_mobile']}'
580	toc_title='{$settings['toc_title']}']"
581	);
582
583	echo apply_filters('betterdocs_elementor_toc', $shortcode);
584	}
585	}
586