betterdocs / includes / Editors / Elementor / Widget / ToC.php

ToC.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 3.5.3, at includes/Editors/Elementor/Widget/ToC.php

580 lines 20.0 KB

Raw Download Zip

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