New: Reading Progress Bar

inc/class-header-footer-elementor.php

@@ -372,6 +372,7 @@ public function includes() {
 
 		// Load the widgets.
 		require HFE_DIR . 'inc/widgets-manager/class-widgets-loader.php';
+		require HFE_DIR . 'inc/widgets-manager/class-extensions-loader.php';
 	}
 
 	/**

inc/js/progress-bar.js

@@ -0,0 +1,48 @@
+(function (jQuery) {
+    jQuery(document).ready(function () {
+        // Function to calculate the scroll progress
+        function updateProgressBar() {
+            var scrollTop = jQuery(window).scrollTop(); // Current scroll position
+            var windowHeight = jQuery(window).height(); // Height of the window
+            var documentHeight = jQuery(document).height(); // Total height of the document
+
+            // Calculate the scroll percentage
+            var scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
+
+            // Log the values for debugging
+            console.log('Scroll Top:', scrollTop);
+            console.log('Window Height:', windowHeight);
+            console.log('Document Height:', documentHeight);
+            console.log('Scroll Percent:', scrollPercent + '%');
+
+            // Update the width of the progress bar
+            jQuery('.hfe-reading-progress-fill').css('width', scrollPercent + '%');
+            console.log('Progress bar updated to:', scrollPercent + '%');
+        }
+
+        // Initial call
+        updateProgressBar();
+
+        // Call the function on scroll
+        jQuery(window).on('scroll', function () {
+            console.log('Scroll event detected'); // Log when the user scrolls
+            updateProgressBar();
+        });
+
+        // Set CSS variables for colors
+        function setProgressBarColors(bgColor, fillColor) {
+            jQuery('.hfe-reading-progress').css('--progress-bar-bg-color', bgColor);
+            jQuery('.hfe-reading-progress-fill').css('--progress-bar-fill-color', fillColor);
+            console.log('Progress bar colors set: BG Color:', bgColor, 'Fill Color:', fillColor);
+        }
+
+        // Example: Set colors from user settings (replace these with actual settings)
+        const userSettings = {
+            bgColor: '#e0e0e0', // Replace with actual value from settings
+            fillColor: '#1fd18e' // Replace with actual value from settings
+        };
+
+        setProgressBarColors(userSettings.bgColor, userSettings.fillColor);
+    });
+})(jQuery);
+

inc/widgets-css/progress-bar.css

@@ -0,0 +1,30 @@
+.hfe-reading-progress-wrap {
+    position: fixed; 
+    z-index: 9999; 
+    left: 0; 
+    width: 100%; 
+    transition: top 0.3s ease, bottom 0.3s ease; 
+}
+
+/* Positioning options: */
+.hfe-reading-progress-wrap[data-position="top"] {
+    top: 0; 
+}
+
+.hfe-reading-progress-wrap[data-position="bottom"] {
+    bottom: 0; 
+}
+
+
+.hfe-reading-progress {
+    background-color: var(--progress-bar-bg-color, #eee); 
+    position: relative; 
+    width: 100%;
+}
+
+.hfe-reading-progress-fill {
+    background-color: var(--progress-bar-fill-color, #1fd18e); 
+    height: 5px; 
+    transition: width 0.5s ease; 
+}
+

inc/widgets-manager/class-extensions-loader.php

@@ -0,0 +1,96 @@
+<?php
+/**
+ * Extensions loader for Header Footer Elementor.
+ *
+ * @package     HFE
+ * @author      HFE
+ * @copyright   Copyright (c) 2018, HFE
+ * @link        http://brainstormforce.com/
+ * @since       HFE 1.2.0
+ */
+
+namespace HFE\WidgetsManager;
+
+use Elementor\Plugin;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Set up Extensions Loader class
+ */
+class Extensions_Loader {
+
+	/**
+	 * Instance of Extensions_Loader.
+	 *
+	 * @since  1.2.0
+	 * @var null
+	 */
+	private static $_instance = null;
+
+	/**
+	 * Get instance of Extensions_Loader
+	 *
+	 * @since  1.2.0
+	 * @return Extensions_Loader
+	 */
+	public static function instance() {
+		if ( ! isset( self::$_instance ) ) {
+			self::$_instance = new self();
+		}
+
+		return self::$_instance;
+	}
+
+	/**
+	 * Setup actions and filters.
+	 *
+	 * @since  1.2.0
+	 * @access private
+	 */
+	private function __construct() {
+
+		$this->include_extensions_files();
+
+	}
+
+
+	/**
+	 * Returns Script array.
+	 *
+	 * @return array()
+	 * @since 1.3.0
+	 */
+	public static function get_extensions_list() {
+		$extensions_list = [
+			'progress-bar',
+		];
+
+		return $extensions_list;
+	}
+
+	/**
+	 * Include Extensions files
+	 *
+	 * Load Extensions files
+	 *
+	 * @since 1.2.0
+	 * @access public
+	 * @return void
+	 */
+	public function include_extensions_files() {
+		$extensions_list = $this->get_extensions_list();
+
+		if ( ! empty( $extensions_list ) ) {
+			foreach ( $extensions_list as $handle => $data ) {
+				require_once HFE_DIR . '/inc/widgets-manager/extensions/class-' . $data . '.php';
+			}
+		}
+	}
+
+}
+
+/**
+ * Initiate the class.
+ */
+Extensions_Loader::instance();

inc/widgets-manager/class-widgets-loader.php

@@ -51,6 +51,7 @@ public static function instance() {
 	 * @access private
 	 */
 	private function __construct() {
+
 		// Register category.
 		add_action( 'elementor/elements/categories_registered', [ $this, 'register_widget_category' ] );
 
@@ -71,6 +72,7 @@ private function __construct() {
 
 			add_filter( 'woocommerce_add_to_cart_fragments', [ $this, 'wc_refresh_mini_cart_count' ] );
 		}
+
 	}
 
 	/**

inc/widgets-manager/extensions/class-progress-bar-render.php

@@ -0,0 +1,118 @@
+<?php
+/**
+ * Elementor Reading Progress Bar Rendering Class.
+ *
+ * @package header-footer-elementor
+ */
+
+namespace HFE\WidgetsManager\Extensions;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;   // Exit if accessed directly.
+}
+
+/**
+ * HFE Reading Progress Bar.
+ *
+ * @since x.x.x
+ */
+class Progress_Bar_Render {
+
+	/**
+	 * Instance of Progress_Bar_Render.
+	 *
+	 * @since x.x.x
+	 * @var null
+	 */
+	private static $_instance = null;
+
+	/**
+	 * Get instance of Progress_Bar_Render.
+	 *
+	 * @since x.x.x
+	 * @return Progress_Bar_Render
+	 */
+	public static function instance() {
+		if ( ! isset( self::$_instance ) ) {
+			self::$_instance = new self();
+		}
+
+		return self::$_instance;
+	}
+
+	/**
+	 * Constructor function.
+	 *
+	 * @since x.x.x
+	 */
+	private function __construct() {
+		add_action( 'wp_footer', [ $this, 'render_reading_progress_bar' ] );
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+	}
+
+	/**
+	 * Enqueue necessary scripts for reading progress bar.
+	 *
+	 * @since x.x.x
+	 */
+	public function enqueue_scripts() {
+		// Enqueue your styles and scripts here.
+		wp_enqueue_style( 'hfe-progress-bar-style', get_template_directory_uri() . '/css/progress-bar.css' );
+		wp_enqueue_script( 'hfe-progress-bar-script', get_template_directory_uri() . '/js/progress-bar.js', [ 'jquery' ], '1.0.0', true );
+	}
+
+	/**
+	 * Render the reading progress bar.
+	 *
+	 * @since x.x.x
+	 */
+	public function render_reading_progress_bar() {
+		// Check if the option to enable the progress bar is set.
+		$enable_progress_bar = get_option( 'enable_reading_progress_bar', 'no' );
+		if ( 'yes' !== $enable_progress_bar ) {
+			return;
+		}
+
+		// Position and height for the progress bar.
+		$progress_position = get_option( 'hfe_reading_progress_bar_position', 'top' );
+        var_dump($progress_position);
+		$progress_height   = get_option( 'hfe_reading_progress_bar_height', 5 );
+		$fill_color        = get_option( 'hfe_reading_progress_bar_fill_color', '#1fd18e' );
+		$bg_color          = get_option( 'hfe_reading_progress_bar_bg_color', '' );
+
+		// Inline styles for the progress bar.
+		$progress_styles = sprintf(
+			'height: %dpx; background-color: %s;',
+			esc_attr( $progress_height ),
+			esc_attr( $bg_color )
+		);
+
+		$fill_styles = sprintf(
+			'background-color: %s;',
+			esc_attr( $fill_color )
+		);
+
+		// Render the progress bar markup.
+		?>
+		<div class="hfe-reading-progress-wrap" style="<?php echo esc_attr( $progress_styles ); ?>">
+			<div class="hfe-reading-progress" style="height: <?php echo esc_attr( $progress_height ); ?>px;">
+				<div class="hfe-reading-progress-fill" style="<?php echo esc_attr( $fill_styles ); ?>"></div>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+			jQuery(document).ready(function($) {
+				var progressBar = $('.hfe-reading-progress-fill');
+				var totalHeight = $(document).height() - $(window).height();
+				$(window).on('scroll', function() {
+					var scrollTop = $(window).scrollTop();
+					var progress = (scrollTop / totalHeight) * 100;
+					progressBar.css('width', progress + '%');
+				});
+			});
+		</script>
+		<?php
+	}
+}
+
+Progress_Bar_Render::instance();