king-addons / includes / widgets / Reading_Progress_Bar / Reading_Progress_Bar.php

Reading_Progress_Bar.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Reading_Progress_Bar/Reading_Progress_Bar.php

153 lines 5.0 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Background;
7	use Elementor\Widget_Base;
8
9	/** @noinspection SpellCheckingInspection */
10	if (!defined('ABSPATH')) {
11	exit; // Exit if accessed directly.
12	}
13
14
15
16	class Reading_Progress_Bar extends Widget_Base
17	{
18
19
20	public function get_name(): string
21	{
22	return 'king-addons-reading-progress-bar';
23	}
24
25	public function get_title(): string
26	{
27	return esc_html__('Reading Progress Bar', 'king-addons');
28	}
29
30	public function get_icon(): string
31	{
32	/** @noinspection SpellCheckingInspection */
33	return 'king-addons-icon king-addons-reading-progress-bar';
34	}
35
36	public function get_style_depends(): array
37	{
38	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-reading-progress-bar-style'];
39	}
40
41	public function get_categories(): array
42	{
43	return ['king-addons'];
44	}
45
46	public function get_keywords(): array
47	{
48	return ['reading', 'progress', 'bar', 'reading bar', 'reading progress', 'reading progress bar', 'line', 'slider', 'scroll',
49	'top', 'bottom', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
50	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'article', 'king', 'addons', 'mouseover',
51	'slide', 'blog', 'page', 'read', 'kingaddons', 'king-addons'];
52	}
53
54	public function get_custom_help_url()
55	{
56	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
57	}
58
59	protected function register_controls(): void
60	{
61	$this->start_controls_section(
62	'kng_reading_progress_bar_section_general',
63	[
64	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
65	]
66	);
67
68	// bar position - top, bottom
69	$this->add_control(
70	'kng_reading_progress_bar_position',
71	[
72	'label' => esc_html__('Position', 'king-addons'),
73	'type' => Controls_Manager::SELECT,
74	'options' => [
75	'top' => esc_html__('Top', 'king-addons'),
76	'bottom' => esc_html__('Bottom', 'king-addons'),
77	],
78	'default' => 'top',
79	]
80	);
81
82	// height - desktop, mobile
83	$this->add_responsive_control(
84	'kng_reading_progress_bar_height',
85	[
86	'label' => esc_html__('Height (px)', 'king-addons'),
87	'type' => Controls_Manager::NUMBER,
88	'step' => 1,
89	'min' => 1,
90	'default' => 5,
91	'selectors' => [
92	'{{WRAPPER}} .king-addons-reading-progress-bar-container, {{WRAPPER}} .king-addons-reading-progress-bar' => 'height: {{SIZE}}px;',
93	],
94	]
95	);
96
97	// background - simple, gradient
98	$this->add_group_control(
99	Group_Control_Background::get_type(),
100	[
101	'name' => 'kng_reading_progress_bar_bg',
102	'types' => ['classic', 'gradient', 'image'],
103	'fields_options' => [
104	'color' => [
105	'default' => '#574ff7',
106	],
107	'background' => [
108	'default' => 'classic',
109	],
110	],
111	'selector' => '{{WRAPPER}} .king-addons-reading-progress-bar'
112	]
113	);
114
115	// z-index - 999
116	$this->add_responsive_control(
117	'kng_reading_progress_bar_z_index',
118	[
119	'label' => esc_html__('Z-Index', 'king-addons'),
120	'type' => Controls_Manager::NUMBER,
121	'step' => 1,
122	'default' => 999,
123	'selectors' => [
124	'{{WRAPPER}} .king-addons-reading-progress-bar-container' => 'z-index: {{SIZE}};',
125	],
126	]
127	);
128
129
130
131
132	$this->end_controls_section();
133
134
135	}
136
137	protected function render(): void
138	{
139	$settings = $this->get_settings();
140	$this_ID = $this->get_id();
141
142	echo '<div class="king-addons-reading-progress-bar-container king-addons-reading-progress-bar-container-position-' . esc_attr($settings['kng_reading_progress_bar_position']) . '"><div class="king-addons-reading-progress-bar" id="king-addons-reading-progress-bar-' . esc_attr($this_ID) . '"></div></div>';
143
144	$js = 'document.addEventListener("scroll", function() {
145	let winScroll = document.body.scrollTop \|\| document.documentElement.scrollTop;
146	let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
147	let scrolled = (winScroll / height) * 100;
148	document.getElementById("king-addons-reading-progress-bar-' . esc_attr($this_ID) . '").style.width = scrolled + "%";
149	});';
150
151	wp_print_inline_script_tag($js);
152	}
153	}