easy-elements / includes / Extensions / ProgressBar / ReadingProgressBar.php

ReadingProgressBar.php in Easy Elements for Elementor – Addons & Website Templates 1.3.1, at includes/Extensions/ProgressBar/ReadingProgressBar.php

343 lines 9.5 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Extensions\ProgressBar;
3	/**
4	* Easy ReadingProgressBar
5	*
6	* @package EasyElements
7	*/
8
9	if (!defined('ABSPATH')) {
10	exit;
11	}
12
13	use \Elementor\Controls_Manager;
14
15	class ReadingProgressBar {
16
17	/**
18	* Holds the singleton instance
19	*
20	* @var Easy_readingprogressbar\|null
21	*/
22	private static $instance = null;
23
24	/**
25	* Constructor
26	*/
27	private function __construct() {
28
29	$tab_slug = 'extensions';
30	$extensions_settings = get_option('easy_element_' . $tab_slug, [] );
31
32	$enable_reading_progress_bar = isset( $extensions_settings['enable_reading_progress_bar'] ) ? $extensions_settings['enable_reading_progress_bar'] : 0;
33
34	if( (int) $enable_reading_progress_bar !== 1 ) {
35	return;
36	}
37
38	add_action('elementor/documents/register_controls', [$this, 'easyel_progressbar_controls'], 10);
39
40	add_action('wp_footer', [$this, 'easyel_render_progressbar_html']);
41
42	add_action( 'wp_enqueue_scripts', [ $this, "easy_progressbar_css" ] );
43
44	add_action( 'wp_enqueue_scripts', function() {
45
46	if ( ! did_action( 'elementor/loaded' ) ) {
47	return;
48	}
49
50	if ( \Elementor\Plugin::$instance->editor->is_edit_mode()
51	\|\| \Elementor\Plugin::$instance->preview->is_preview_mode()
52	) {
53	wp_enqueue_script(
54	'easyel-editor-script',
55	EASYELEMENTS_DIR_URL . 'includes/Extensions/ProgressBar/assets/js/progress-bar.js',
56	[ 'jquery' ],
57	EASYELEMENTS_VER,
58	true
59	);
60	}
61
62	});
63	}
64
65	/**
66	* Get instance
67	*/
68	public static function get_instance() : self {
69	if ( null === self::$instance ) {
70	self::$instance = new self();
71	}
72	return self::$instance;
73	}
74
75	public function easy_progressbar_css() {
76	wp_enqueue_style(
77	'easy-progress-bar',
78	EASYELEMENTS_DIR_URL . 'includes/Extensions/ProgressBar/assets/css/progress-bar.css',
79	[],
80	EASYELEMENTS_VER
81	);
82	}
83
84	public function easyel_progressbar_controls( $element ) {
85	$element->start_controls_section(
86	'easyel_progress_section',
87	[
88	'label' => EASY_EXTENSION_BADGE . __('Reading Progress Bar', 'easy-elements'),
89	'tab' => Controls_Manager::TAB_SETTINGS,
90	]
91	);
92
93	$element->add_control(
94	'easyel_enable_progress',
95	[
96	'label' => __('Enable Reading Progress Bar', 'easy-elements'),
97	'type' => Controls_Manager::SWITCHER,
98	'default' => 'no',
99	'label_on' => __('Yes', 'easy-elements'),
100	'label_off' => __('No', 'easy-elements'),
101	'return_value' => 'yes',
102	]
103	);
104
105	$options = [
106	'global' => esc_html__( 'Enter Site', 'easy-elements' ),
107	'current-page' => esc_html__( 'Current Page', 'easy-elements' ),
108	'all-posts' => esc_html__( 'All Posts', 'easy-elements' ),
109	'all-pages' => esc_html__( 'All Pages', 'easy-elements' ),
110	'all-pages-post' => esc_html__( 'All Pages & Post', 'easy-elements' ),
111	'front-page' => esc_html__( 'Front Pages', 'easy-elements' ),
112	'blog-page' => esc_html__( 'Blog Pages', 'easy-elements' ),
113	];
114
115	if ( ! apply_filters('easyel/pro_enabled', false) ) {
116	$options['all-posts'] = esc_html__( 'All Posts (pro)', 'easy-elements' );
117	$options['all-pages'] = esc_html__( 'All Pages (pro)', 'easy-elements' );
118	$options['all-pages-post'] = esc_html__( 'All Pages & Post (pro)', 'easy-elements' );
119	$options['front-page'] = esc_html__( 'Front Pages (pro)', 'easy-elements' );
120	$options['blog-page'] = esc_html__( 'Blog Pages (pro)', 'easy-elements' );
121
122	}
123
124	$element->add_control(
125	'easyel_indivisual_global',
126	[
127	'label' => __('Apply Settings', 'easy-elements'),
128	'type' => Controls_Manager::SELECT,
129	'default' => 'global',
130	'options' => $options,
131	'condition' => [ 'easyel_enable_progress' => 'yes' ],
132	]
133	);
134
135	$element->add_control(
136	'easyel_progress_position',
137	[
138	'label' => __('Position', 'easy-elements'),
139	'type' => Controls_Manager::SELECT,
140	'default' => 'top',
141	'options' => [
142	'top' => __('Top', 'easy-elements'),
143	'bottom' => __('Bottom', 'easy-elements'),
144	],
145	'selectors' => [
146	'.easyel-progress-wrapper' => '{{VALUE}}: 0; {{VALUE === "top" ? "bottom: auto;" : "top: auto;"}}',
147	],
148	'condition' => [ 'easyel_enable_progress' => 'yes' ],
149	]
150	);
151
152	$element->add_control(
153	'easyel_progress_color',
154	[
155	'label' => __('Bar Color', 'easy-elements'),
156	'type' => Controls_Manager::COLOR,
157	'default' => '#0073aa',
158	'selectors' => [
159	'.easyel-reading-progress-bar::-webkit-progress-value' => 'background-color: {{VALUE}};',
160	'.easyel-reading-progress-bar::-moz-progress-bar' => 'background-color: {{VALUE}};',
161	],
162	'condition' => [ 'easyel_enable_progress' => 'yes' ],
163	]
164	);
165
166	$element->add_control(
167	'easyel_progress_bg_color',
168	[
169	'label' => __('Progress Background Color', 'easy-elements'),
170	'type' => Controls_Manager::COLOR,
171	'default' => '#e0e0e0',
172	'selectors' => [
173	'.easyel-progress-wrapper' => '--easyel-progress-bg-color: {{VALUE}} !important;',
174	],
175	'condition' => [ 'easyel_enable_progress' => 'yes' ],
176	]
177	);
178
179	$element->add_control(
180	'easyel_progress_height',
181	[
182	'label' => __('Height (px)', 'easy-elements'),
183	'type' => Controls_Manager::SLIDER,
184	'size_units' => [ 'px' ],
185	'range' => [ 'px' => [ 'min' => 1, 'max' => 100 ] ],
186	'default' => [ 'size' => 8 ],
187	'selectors' => [
188	'.easyel-progress-wrapper' => 'height: {{SIZE}}{{UNIT}};',
189	],
190	'condition' => [ 'easyel_enable_progress' => 'yes' ],
191	]
192	);
193
194	$element->end_controls_section();
195	}
196
197	public function easyel_render_progressbar_html() {
198
199	$global = get_option( 'easyel_global_settings', [] );
200
201	if ( empty( $global['reading_progress']['rules'] ) ) {
202	return;
203	}
204
205	$rules = $global['reading_progress']['rules'];
206
207	/**
208	* Specific rules (non-global)
209	*/
210	foreach ( $rules as $rule ) {
211
212	if ( empty( $rule['enabled'] ) \|\| $rule['apply_to'] === 'global' ) {
213	continue;
214	}
215
216	if ( $this->should_render_rule( $rule ) ) {
217	$this->render_progressbar_html( $rule );
218	return;
219	}
220	}
221
222	/**
223	* Global rules (fallback)
224	*/
225	foreach ( $rules as $rule ) {
226
227	if ( empty( $rule['enabled'] ) \|\| $rule['apply_to'] !== 'global' ) {
228	continue;
229	}
230
231	if ( $this->should_render_rule( $rule ) ) {
232	$this->render_progressbar_html( $rule );
233	return;
234	}
235	}
236	}
237
238	private function should_render_rule( $rule ) {
239
240	$apply_to = apply_filters(
241	'easyel/reading_progress/apply_to',
242	$rule['apply_to'],
243	$rule
244	);
245
246	$show = apply_filters(
247	'easyel/reading_progress/should_render',
248	null,
249	$apply_to,
250	$rule
251	);
252
253	if ( $show !== null ) {
254	return (bool) $show;
255	}
256
257	switch ( $apply_to ) {
258
259	case 'current-page':
260	return get_queried_object_id() === (int) $rule['source_post'];
261
262	case 'global':
263	return true;
264	}
265
266	return false;
267	}
268
269	private function render_progressbar_html( $settings ) {
270
271	$pos_css = ($settings['position'] === 'bottom')
272	? 'bottom:0; top:auto;'
273	: 'top:0; bottom:auto;';
274
275	$height = isset( $settings['height'] ) ? $settings['height'] : '';
276	$color = isset( $settings['color'] ) ? $settings['color'] : '';
277	$bg_color = isset( $settings['wrapper_bg_color'] ) ? $settings['wrapper_bg_color'] : '';
278
279	echo '<div class="easyel-progress-wrapper" style="
280	position: fixed;
281	width: 100%;
282	height: ' . esc_attr( $height ). 'px;
283	' . esc_attr( $pos_css ) . '
284	background-color: ' . esc_attr( $bg_color ) . ';
285	--easyel-progress-bg-color: ' . esc_attr( $bg_color ) . ';
286	z-index: 99999999;
287	">
288	<progress id="easyel-reading-progress-bar"
289	class="easyel-reading-progress-bar"
290	value="0"
291	max="100"
292	style="
293	position: absolute;
294	top:0; left:0;
295	width: 100%;
296	height: ' . esc_attr( $height ) . 'px;
297	--easyel-progress-color:' . esc_attr( $color ) . ';
298	z-index: 999999;
299	"></progress>
300	</div>';
301	?>
302
303	<script>
304	jQuery(function ($) {
305
306	let easyprogressBar = $('#easyel-reading-progress-bar');
307	if (!easyprogressBar.length) return;
308
309	let activated = false;
310
311	function updateProgressfunc() {
312	let winHeight = $(window).height();
313	let docHeight = $(document).height();
314	let scrollTop = $(window).scrollTop();
315
316	let max = docHeight - winHeight;
317	easyprogressBar.attr('max', max);
318	easyprogressBar.val(scrollTop);
319	}
320
321	easyprogressBar
322	.val(0)
323	.css({ opacity: 0, visibility: 'hidden' });
324
325	$(window).one('scroll', function () {
326	activated = true;
327	updateProgressfunc();
328	easyprogressBar.css({ opacity: 1, visibility: 'visible' });
329	});
330
331	$(window).on('scroll resize', function () {
332	if (!activated) return;
333	window.requestAnimationFrame(updateProgressfunc);
334	});
335
336	});
337	</script>
338
339	<?php
340	}
341
342	}
343