WordPress.org
Get WordPress

Plugin Directory

Changeset 3327758


Ignore:
Timestamp:
07/14/2025 06:39:28 PM (9 months ago)
Author:
ifatwp
Message:

Update to version 2.0.0 from GitHub

Location:
blog-reading-progress-bar
Files:
4 added
12 edited
1 copied

Legend:

Unmodified
Added
Removed

  • blog-reading-progress-bar/tags/2.0.0/README.md

    r3176866 r3327758  
    1 === Reading Progress Bar ===
     1# Reading Progress Bar
    22
    3 Contributors: ifatwp
    4 Tags: progress bar, reading progress, blog, posts
    5 Requires PHP : 7.3
    6 Tested up to: WordPress 6.3.3
    7 Stable tag: 1.0.5
    8 License: GPLv2 or later
    9 License URI: http://www.gnu.org/licenses/gpl-2.0.txt
     3A modern, feature-rich WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options and enhanced user experience.
    104
     5## 🚀 Features
    116
    12 Adds a reading progress bar to blog posts.
     7### Core Functionality
     8- **Reading Progress Tracking**: Real-time progress bar that shows how much of the post has been read
     9- **Per-Post Control**: Enable/disable progress bar for individual posts
     10- **Reading Time Estimation**: Display estimated reading time for posts
     11- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
    1312
    14 == Description ==
     13### Advanced Customization
     14- **Color Options**:
     15  - Solid color picker
     16  - Gradient color support with start and end colors
     17  - Custom shadow colors
     18  - Border color customization
    1519
    16 The Reading Progress Bar plugin adds a progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     20### Visual Effects
     21- **Position Control**: Place progress bar at top or bottom of screen
     22- **Size Customization**: Adjustable height (1-20px)
     23- **Border Radius**: Rounded corners (0-50px)
     24- **Opacity Control**: Adjust transparency (0.1-1.0)
     25- **Shadow Effects**: Customizable shadow with color and blur options
     26- **Border Styling**: Optional border with custom color and width
    1727
    18 == Features ==
     28### User Experience
     29- **Smooth Animations**: Fluid progress updates with CSS transitions
     30- **Performance Optimized**: Uses requestAnimationFrame for smooth scrolling
     31- **Keyboard Navigation**: Space bar and arrow key support
     32- **Touch Gestures**: Swipe support for mobile devices
     33- **Accessibility**: High contrast mode and reduced motion support
    1934
    20 - Automatically adds a reading progress bar to blog posts.
    21 - Customizable options to control the appearance and behavior of the progress bar.
    22 - Option to enable or disable the progress bar on specific posts.
    23 - Lightweight and easy to use.
     35### Dashboard Features
     36- **Modern Admin Interface**: Beautiful, responsive dashboard
     37- **Live Preview**: See changes in real-time as you adjust settings
     38- **Statistics**: View posts with progress bar enabled vs total posts
     39- **Organized Settings**: Grouped options for easy configuration
    2440
    25 == Installation ==
     41## 📋 Requirements
    2642
    27 1. Upload the `reading-progress-bar` folder to the `/wp-content/plugins/` directory.
    28 2. Activate the plugin through the 'Plugins' menu in WordPress.
    29 3. Go to 'Reading Progress Bar' in the WordPress dashboard to configure the plugin settings.
     43- WordPress 5.6 or higher
     44- PHP 7.3 or higher
     45- jQuery (included with WordPress)
    3046
    31 == Configuration ==
     47## 🛠️ Installation
    3248
    33 1. Navigate to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard.
    34 2. Customize the options according to your preference, such as the color and height of the progress bar.
    35 3. Choose whether to display the progress bar on all posts or specific posts.
    36 4. Save your changes.
     491. Upload the plugin files to `/wp-content/plugins/blog-reading-progress-bar/`
     502. Activate the plugin through the 'Plugins' screen in WordPress
     513. Go to Settings > Reading Progress Bar to configure options
    3752
    38 == Frequently Asked Questions ==
     53## ⚙️ Configuration
    3954
    40 = How can I customize the appearance of the progress bar? =
     55### Basic Settings
     561. Navigate to **Settings > Reading Progress Bar**
     572. Configure appearance options:
     58   - **Color**: Choose solid color or enable gradient
     59   - **Height**: Set progress bar height (1-20px)
     60   - **Position**: Top or bottom of screen
     61   - **Border Radius**: Add rounded corners
     62   - **Opacity**: Adjust transparency
    4163
    42 You can modify the color and height of the progress bar by navigating to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard. Use the provided options to adjust the settings to your liking.
     64### Advanced Effects
     65- **Shadow**: Enable shadow with custom color and blur
     66- **Border**: Add border with custom color and width
     67- **Gradient**: Use gradient colors instead of solid color
    4368
    44 = Can I enable the progress bar on specific posts only?
     69### Display Settings
     70- **Show on Posts**: Enable/disable for blog posts
     71- **Show on Pages**: Enable/disable for pages
     72- **Show Reading Time**: Display estimated reading time
    4573
    46 Yes, you have the option to enable or disable the progress bar on individual posts. Edit a post and look for the "Reading Progress Bar" meta box in the sidebar. Check the box to display the progress bar on that post, or uncheck it to hide the progress bar.
     74### Per-Post Settings
     75- Edit any post and look for the "Reading Progress Bar" meta box
     76- Check/uncheck to enable/disable for that specific post
    4777
    48 == Changelog ==
     78## 🎨 Customization
    4979
    50 = 1.0.0 =
    51 * Initial release.
     80### CSS Customization
     81You can add custom CSS to further style the progress bar:
    5282
    53 == Upgrade Notice ==
     83```css
     84#reading-progress-bar {
     85    /* Your custom styles */
     86}
    5487
    55 = 1.0.0 =
    56 Initial release of the Reading Progress Bar plugin.
     88#reading-time {
     89    /* Custom reading time styles */
     90}
     91```
    5792
    58 == Screenshots ==
     93### JavaScript Hooks
     94The plugin provides several JavaScript events you can hook into:
    5995
    60 1. Progress bar displayed on a blog post.
    61 2. Plugin settings page in the WordPress dashboard.
     96```javascript
     97// Progress update event
     98$(document).on('brp_progress_update', function(e, progress) {
     99    console.log('Progress:', progress + '%');
     100});
    62101
    63 == Upgrade Notice ==
     102// Reading time calculation event
     103$(document).on('brp_reading_time_calculated', function(e, time) {
     104    console.log('Reading time:', time);
     105});
     106```
    64107
    65 = 1.0.0 =
    66 Initial release of the Reading Progress Bar plugin.
     108## 🔧 Developer Features
    67109
    68 == License ==
     110### Filters
     111- `brp_progress_bar_color`: Modify the default color
     112- `brp_reading_time_text`: Customize reading time text
     113- `brp_should_display_bar`: Control when to show the progress bar
    69114
    70 This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the `license.txt` file or visit [http://www.gnu.org/licenses/gpl-2.0.txt](http://www.gnu.org/licenses/gpl-2.0.txt) for more information.
     115### Actions
     116- `brp_before_progress_bar`: Fires before progress bar is rendered
     117- `brp_after_progress_bar`: Fires after progress bar is rendered
     118- `brp_progress_updated`: Fires when progress is updated
     119
     120## 📊 Performance
     121
     122The plugin is optimized for performance:
     123- Uses `requestAnimationFrame` for smooth scrolling
     124- Intersection Observer for efficient tracking
     125- Debounced event handlers
     126- Minimal DOM queries
     127- Efficient CSS transitions
     128
     129## 🌟 Changelog
     130
     131### Version 2.0.0
     132- ✨ **NEW**: Modern admin dashboard with live preview
     133- ✨ **NEW**: Gradient color support
     134- ✨ **NEW**: Shadow and border effects
     135- ✨ **NEW**: Position options (top/bottom)
     136- ✨ **NEW**: Opacity and border radius controls
     137- ✨ **NEW**: Reading time display
     138- ✨ **NEW**: Enhanced JavaScript with performance optimizations
     139- ✨ **NEW**: Touch gesture support for mobile
     140- ✨ **NEW**: Keyboard navigation support
     141- ✨ **NEW**: Accessibility improvements
     142- ✨ **NEW**: Statistics dashboard
     143- 🎨 **IMPROVED**: Modern UI/UX design
     144- 🚀 **IMPROVED**: Better performance and responsiveness
     145
     146### Version 1.0.7
     147- Initial release with basic progress bar functionality
     148
     149## 🤝 Contributing
     150
     151Contributions are welcome! Please feel free to submit a Pull Request.
     152
     153## 📄 License
     154
     155This plugin is licensed under the GPL v2 or later.
     156
     157## 👨‍💻 Author
     158
     159**ifatwp** - [WordPress Blog](https://ifatwp.wordpress.com/)
     160
     161## 🙏 Support
     162
     163For support, feature requests, or bug reports, please visit the [plugin page](https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/) or create an issue on GitHub.
     164
     165---

  • blog-reading-progress-bar/tags/2.0.0/assets/script.js

    r3009602 r3327758  
    1 jQuery(document).ready(
    2     function ($) {
    3         var progressBar  = $('#reading-progress-bar');
    4         var postContent  = $('.entry-content');
    5         var postHeight   = postContent.height();
    6         var windowHeight = $(window).height();
    7         var scrollPercent;
     1jQuery(document).ready(function($) {
     2    'use strict';
    83
    9         $(window).scroll(
    10             function () {
    11                 var scrollPosition = $(this).scrollTop();
    12                 scrollPercent      = (scrollPosition / (postHeight - windowHeight)) * 100;
    13                 progressBar.width(scrollPercent + '%');
     4    var progressBar = $('#reading-progress-bar');
     5    var postContent = $('.entry-content');
     6    var readingTime = $('#reading-time');
     7   
     8    // Only proceed if we have the required elements
     9    if (progressBar.length === 0 || postContent.length === 0) {
     10        return;
     11    }
     12
     13    var postHeight = postContent.height();
     14    var windowHeight = $(window).height();
     15    var scrollPercent;
     16    var lastScrollTop = 0;
     17    var ticking = false;
     18
     19    // Enhanced scroll handler with performance optimization
     20    function updateProgress() {
     21        var scrollPosition = $(window).scrollTop();
     22        var postOffset = postContent.offset().top;
     23        var postBottom = postOffset + postHeight;
     24       
     25        // Calculate progress more accurately
     26        if (scrollPosition < postOffset) {
     27            scrollPercent = 0;
     28        } else if (scrollPosition > postBottom - windowHeight) {
     29            scrollPercent = 100;
     30        } else {
     31            var scrollableDistance = postHeight - windowHeight;
     32            var scrolledDistance = scrollPosition - postOffset;
     33            scrollPercent = Math.min(100, Math.max(0, (scrolledDistance / scrollableDistance) * 100));
     34        }
     35
     36        // Update progress bar with smooth animation
     37        progressBar.css('width', scrollPercent + '%');
     38
     39        // Add animation class when progress is high
     40        if (scrollPercent > 90) {
     41            progressBar.addClass('animated');
     42        } else {
     43            progressBar.removeClass('animated');
     44        }
     45
     46        // Update reading time position if it exists
     47        if (readingTime.length > 0) {
     48            var timeOpacity = Math.max(0.3, Math.min(1, scrollPercent / 100));
     49            readingTime.css('opacity', timeOpacity);
     50        }
     51
     52        ticking = false;
     53    }
     54
     55    // Throttled scroll handler for better performance
     56    function requestTick() {
     57        if (!ticking) {
     58            requestAnimationFrame(updateProgress);
     59            ticking = true;
     60        }
     61    }
     62
     63    // Bind scroll event
     64    $(window).on('scroll', requestTick);
     65
     66    // Handle window resize
     67    $(window).on('resize', function() {
     68        // Recalculate dimensions after a short delay
     69        setTimeout(function() {
     70            postHeight = postContent.height();
     71            windowHeight = $(window).height();
     72        }, 100);
     73    });
     74
     75    // Enhanced reading time calculation
     76    function calculateReadingTime() {
     77        var content = postContent.text();
     78        var wordCount = content.trim().split(/\s+/).length;
     79        var readingTimeMinutes = Math.ceil(wordCount / 200); // Average reading speed: 200 words per minute
     80       
     81        if (readingTimeMinutes < 1) {
     82            return 'Less than 1 min read';
     83        } else if (readingTimeMinutes === 1) {
     84            return '1 min read';
     85        } else {
     86            return readingTimeMinutes + ' min read';
     87        }
     88    }
     89
     90    // Update reading time if element exists
     91    if (readingTime.length > 0) {
     92        readingTime.text(calculateReadingTime());
     93    }
     94
     95    // Add keyboard navigation support
     96    $(document).keydown(function(e) {
     97        // Space bar to scroll down
     98        if (e.keyCode === 32 && e.target === document.body) {
     99            e.preventDefault();
     100            $('html, body').animate({
     101                scrollTop: $(window).scrollTop() + windowHeight * 0.8
     102            }, 300);
     103        }
     104       
     105        // Arrow keys for navigation
     106        if (e.keyCode === 40) { // Down arrow
     107            e.preventDefault();
     108            $('html, body').animate({
     109                scrollTop: $(window).scrollTop() + 100
     110            }, 200);
     111        }
     112       
     113        if (e.keyCode === 38) { // Up arrow
     114            e.preventDefault();
     115            $('html, body').animate({
     116                scrollTop: $(window).scrollTop() - 100
     117            }, 200);
     118        }
     119    });
     120
     121    // Add touch gesture support for mobile
     122    var touchStartY = 0;
     123    var touchEndY = 0;
     124
     125    $(document).on('touchstart', function(e) {
     126        touchStartY = e.originalEvent.touches[0].clientY;
     127    });
     128
     129    $(document).on('touchend', function(e) {
     130        touchEndY = e.originalEvent.changedTouches[0].clientY;
     131        handleSwipe();
     132    });
     133
     134    function handleSwipe() {
     135        var swipeDistance = touchStartY - touchEndY;
     136        var minSwipeDistance = 50;
     137
     138        if (Math.abs(swipeDistance) > minSwipeDistance) {
     139            if (swipeDistance > 0) {
     140                // Swipe up - scroll down
     141                $('html, body').animate({
     142                    scrollTop: $(window).scrollTop() + windowHeight * 0.5
     143                }, 300);
     144            } else {
     145                // Swipe down - scroll up
     146                $('html, body').animate({
     147                    scrollTop: $(window).scrollTop() - windowHeight * 0.5
     148                }, 300);
    14149            }
    15         );
     150        }
    16151    }
    17 );
     152
     153    // Add intersection observer for better performance
     154    if ('IntersectionObserver' in window) {
     155        var observer = new IntersectionObserver(function(entries) {
     156            entries.forEach(function(entry) {
     157                if (entry.isIntersecting) {
     158                    // Post content is visible, enable progress tracking
     159                    $(window).on('scroll', requestTick);
     160                } else {
     161                    // Post content is not visible, disable progress tracking
     162                    $(window).off('scroll', requestTick);
     163                }
     164            });
     165        });
     166
     167        observer.observe(postContent[0]);
     168    }
     169
     170    // Initial progress calculation
     171    updateProgress();
     172});

  • blog-reading-progress-bar/tags/2.0.0/assets/style.css

    r3009602 r3327758  
    88    z-index: 9999;
    99    transition: width 0.2s ease;
    10   }
     10}
     11
     12/* Enhanced styling for new features */
     13#reading-progress-bar {
     14    /* Default styles that can be overridden by admin settings */
     15    border-radius: 0;
     16    opacity: 1;
     17    box-shadow: none;
     18    border: none;
     19}
     20
     21/* Reading time display */
     22#reading-time {
     23    position: fixed;
     24    top: 42px;
     25    right: 20px;
     26    background: rgba(0, 0, 0, 0.8);
     27    color: white;
     28    padding: 8px 12px;
     29    border-radius: 4px;
     30    font-size: 12px;
     31    font-weight: 500;
     32    z-index: 9998;
     33    backdrop-filter: blur(10px);
     34    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     35    transition: opacity 0.3s ease;
     36}
     37
     38/* Responsive adjustments */
     39@media (max-width: 768px) {
     40    #reading-progress-bar {
     41        top: 46px; /* Account for mobile admin bar */
     42    }
     43   
     44    #reading-time {
     45        top: 56px;
     46        right: 10px;
     47        font-size: 11px;
     48        padding: 6px 10px;
     49    }
     50}
     51
     52/* Animation for progress bar */
     53@keyframes progress-glow {
     54    0% { box-shadow: 0 0 5px currentColor; }
     55    50% { box-shadow: 0 0 20px currentColor; }
     56    100% { box-shadow: 0 0 5px currentColor; }
     57}
     58
     59#reading-progress-bar.animated {
     60    animation: progress-glow 2s ease-in-out infinite;
     61}
     62
     63/* High contrast mode support */
     64@media (prefers-contrast: high) {
     65    #reading-progress-bar {
     66        border: 2px solid #000;
     67    }
     68   
     69    #reading-time {
     70        border: 2px solid #000;
     71        background: #000;
     72    }
     73}
     74
     75/* Reduced motion support */
     76@media (prefers-reduced-motion: reduce) {
     77    #reading-progress-bar {
     78        transition: none;
     79    }
     80   
     81    #reading-time {
     82        transition: none;
     83    }
     84}

  • blog-reading-progress-bar/tags/2.0.0/blog-reading-progress.php

    r3239424 r3327758  
    33 * Plugin Name:       Reading Progress Bar
    44 * Plugin URI:        https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/
    5  * Description:       Adds a reading progress bar to blog posts.
    6  * Version:           1.0.7
     5 * Description:       Adds a reading progress bar to blog posts with advanced customization options.
     6 * Version:           2.0.0
    77 * Requires at least: 5.6
    88 * Requires PHP:      7.3
    … …  
    3535         * @var version.
    3636         */
    37         protected static $version = '1.0.6';
     37        protected static $version = '2.0.0';
    3838
    3939        /**
    … …  
    6969            add_action('add_meta_boxes', array($this, 'reading_progress_bar_meta_box'));
    7070            add_action('plugins_loaded', array($this, 'brp_load_plugin_textdomain'));
     71            add_action('admin_enqueue_scripts', array($this, 'admin_scripts'));
    7172        }
    7273
    … …  
    7778        {
    7879            load_plugin_textdomain('brp', false, dirname(plugin_basename(__FILE__)) . '/languages/');
     80        }
     81
     82        /**
     83         * Load admin scripts and styles
     84         */
     85        public function admin_scripts($hook)
     86        {
     87            if ('settings_page_brp-reading-progress-bar-settings' !== $hook) {
     88                return;
     89            }
     90
     91            wp_enqueue_style('wp-color-picker');
     92            wp_enqueue_script('wp-color-picker');
     93            wp_enqueue_script('brp-admin-script', plugin_dir_url(__FILE__) . 'assets/admin.js', array('jquery', 'wp-color-picker'), self::$version, true);
     94            wp_enqueue_style('brp-admin-style', plugin_dir_url(__FILE__) . 'assets/admin.css', array(), self::$version);
    7995        }
    8096
    … …  
    94110            $options = get_option('brp_reading_progress_bar_options');
    95111
    96             // Set the custom color if provided.
    97             $progress_bar_color = isset($options['color']) ? $options['color'] : '#000';
    98             wp_add_inline_style('brp_reading-progress-bar-style', '#reading-progress-bar { background-color: ' . $progress_bar_color . '; }');
     112            // Build custom CSS
     113            $custom_css = $this->build_custom_css($options);
     114            wp_add_inline_style('brp_reading-progress-bar-style', $custom_css);
     115        }
     116
     117        /**
     118         * Build custom CSS based on options
     119         */
     120        private function build_custom_css($options)
     121        {
     122            $css = '#reading-progress-bar {';
     123           
     124            // Background color or gradient
     125            $color_type = isset($options['color_type']) ? $options['color_type'] : 'solid';
     126            $use_gradient = isset($options['use_gradient']) ? $options['use_gradient'] : false;
     127           
     128            if (($color_type === 'gradient' || $use_gradient) && !empty($options['gradient_start']) && !empty($options['gradient_end'])) {
     129                $css .= 'background: linear-gradient(90deg, ' . esc_attr($options['gradient_start']) . ' 0%, ' . esc_attr($options['gradient_end']) . ' 100%);';
     130            } else {
     131                $progress_bar_color = isset($options['color']) ? $options['color'] : '#667eea';
     132                $css .= 'background-color: ' . esc_attr($progress_bar_color) . ';';
     133            }
     134
     135            // Height
     136            $height = isset($options['height']) ? $options['height'] : '4';
     137            $css .= 'height: ' . esc_attr($height) . 'px;';
     138
     139            // Position
     140            $position = isset($options['position']) ? $options['position'] : 'top';
     141            if ($position === 'bottom') {
     142                $css .= 'top: auto; bottom: 0;';
     143            }
     144
     145            // Border radius
     146            if (!empty($options['border_radius'])) {
     147                $css .= 'border-radius: ' . esc_attr($options['border_radius']) . 'px;';
     148            }
     149
     150            // Shadow
     151            if (!empty($options['shadow_enabled'])) {
     152                $shadow_color = isset($options['shadow_color']) ? $options['shadow_color'] : 'rgba(0,0,0,0.3)';
     153                $shadow_blur = isset($options['shadow_blur']) ? $options['shadow_blur'] : '5';
     154                $css .= 'box-shadow: 0 2px ' . esc_attr($shadow_blur) . 'px ' . esc_attr($shadow_color) . ';';
     155            }
     156
     157            // Opacity
     158            if (!empty($options['opacity'])) {
     159                $css .= 'opacity: ' . esc_attr($options['opacity']) . ';';
     160            }
     161
     162            // Border
     163            if (!empty($options['border_enabled'])) {
     164                $border_color = isset($options['border_color']) ? $options['border_color'] : '#000';
     165                $border_width = isset($options['border_width']) ? $options['border_width'] : '1';
     166                $css .= 'border: ' . esc_attr($border_width) . 'px solid ' . esc_attr($border_color) . ';';
     167            }
     168
     169            $css .= '}';
     170
     171            return $css;
    99172        }
    100173
    … …  
    109182            // Determine where to display the progress bar.
    110183            $show_on_posts = isset($options['show_on_posts']) ? $options['show_on_posts'] : false;
    111 
    112             // Get the height option.
    113             $progress_bar_height = isset($options['height']) ? $options['height'] : '2';
    114 
    115             if ($this->should_display_reading_progress_bar() && is_singular('post') && ($show_on_posts)) {
     184            $show_on_pages = isset($options['show_on_pages']) ? $options['show_on_pages'] : false;
     185
     186            if ($this->should_display_reading_progress_bar() &&
     187                (($show_on_posts && is_singular('post')) || ($show_on_pages && is_singular('page')))) {
     188               
    116189                $admin_bar_height = is_admin_bar_showing() ? $this->get_admin_bar_height() : 0;
    117                 echo '<div id="reading-progress-bar" style="top: ' . esc_attr($admin_bar_height) . 'px; height: ' . esc_attr($progress_bar_height) . 'px;"></div>';
    118             }
     190                $position = isset($options['position']) ? $options['position'] : 'top';
     191               
     192                $style = '';
     193                if ($position === 'top') {
     194                    $style = 'top: ' . esc_attr($admin_bar_height) . 'px;';
     195                } elseif ($position === 'bottom') {
     196                    $style = 'bottom: 0;';
     197                }
     198
     199                echo '<div id="reading-progress-bar" style="' . $style . '"></div>';
     200               
     201                // Add reading time if enabled
     202                if (!empty($options['show_reading_time'])) {
     203                    $reading_time = $this->calculate_reading_time();
     204                    echo '<div id="reading-time" style="position: fixed; top: ' . esc_attr($admin_bar_height + 10) . 'px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; z-index: 9998;">' . esc_html($reading_time) . '</div>';
     205                }
     206            }
     207        }
     208
     209        /**
     210         * Calculate reading time
     211         */
     212        private function calculate_reading_time()
     213        {
     214            $content = get_the_content();
     215            $word_count = str_word_count(strip_tags($content));
     216            $reading_time = ceil($word_count / 200); // Average reading speed: 200 words per minute
     217           
     218            return sprintf(__('%d min read', 'blog-reading-progress'), $reading_time);
    119219        }
    120220
    … …  
    139239                'brp_reading_progress_bar_options',
    140240                array(
    141                     'color' => '#000',
     241                    'color' => '#667eea',
     242                    'color_type' => 'solid',
     243                    'gradient_start' => '#667eea',
     244                    'gradient_end' => '#764ba2',
     245                    'use_gradient' => false,
     246                    'height' => '4',
     247                    'position' => 'top',
     248                    'border_radius' => '0',
     249                    'shadow_enabled' => false,
     250                    'shadow_color' => 'rgba(0,0,0,0.3)',
     251                    'shadow_blur' => '5',
     252                    'opacity' => '1',
     253                    'border_enabled' => false,
     254                    'border_color' => '#000',
     255                    'border_width' => '1',
    142256                    'show_on_posts' => true,
     257                    'show_on_pages' => false,
     258                    'show_reading_time' => false,
    143259                )
    144260            );
    … …  
    151267        public function reading_progress_bar_options_page()
    152268        {
    153             add_options_page(__('Reading Progress Bar Settings', 'blog-reading-progres'), __('Reading Progress Bar', 'blog-reading-progress'), 'manage_options', 'brp-reading-progress-bar-settings', array($this, 'reading_progress_bar_render_options_page'));
     269            add_options_page(__('Reading Progress Bar Settings', 'blog-reading-progress'), __('Reading Progress Bar', 'blog-reading-progress'), 'manage_options', 'brp-reading-progress-bar-settings', array($this, 'reading_progress_bar_render_options_page'));
    154270        }
    155271
    … …  
    169285            add_meta_box(
    170286                'brp_reading_progress_bar_meta_box',
    171                 __('Reading Progress Bar', 'blog-reading-progres'),
     287                __('Reading Progress Bar', 'blog-reading-progress'),
    172288                array($this, 'reading_progress_bar_meta_box_callback'),
    173289                'post',
    … …  
    189305                <label for="brp_reading-progress-bar-checkbox">
    190306                    <input type="checkbox" name="brp_reading_progress_bar_display" id="brp_reading-progress-bar-checkbox" value="1" <?php checked($checked);?> />
    191                     <span> <?php esc_html_e('Display reading progress bar on this post', 'blog-reading-progres');?> </span>
     307                    <span> <?php esc_html_e('Display reading progress bar on this post', 'blog-reading-progress');?> </span>
    192308                </label>
    193309            <?php
    194 }
     310        }
    195311
    196312        /**
    … …  
    206322
    207323            if (!wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['brp_reading_progress_bar_meta_box_nonce'])), 'brp_reading_progress_bar_meta_box')) {
    208 
    209324                return;
    210325            }
    … …  
    239354        }
    240355
     356        /**
     357         * Get number of posts with progress bar enabled
     358         */
     359        public function get_posts_with_progress_bar()
     360        {
     361            $args = array(
     362                'post_type' => 'post',
     363                'post_status' => 'publish',
     364                'meta_query' => array(
     365                    array(
     366                        'key' => 'brp_reading_progress_bar_display',
     367                        'value' => '1',
     368                        'compare' => '='
     369                    )
     370                ),
     371                'posts_per_page' => -1,
     372                'fields' => 'ids'
     373            );
     374           
     375            $posts = get_posts($args);
     376            return count($posts);
     377        }
     378
     379        /**
     380         * Get total number of posts
     381         */
     382        public function get_total_posts()
     383        {
     384            $args = array(
     385                'post_type' => 'post',
     386                'post_status' => 'publish',
     387                'posts_per_page' => -1,
     388                'fields' => 'ids'
     389            );
     390           
     391            $posts = get_posts($args);
     392            return count($posts);
     393        }
     394
    241395    }
    242396

  • blog-reading-progress-bar/tags/2.0.0/inc/reader-options.php

    r3176866 r3327758  
    1 <div class="wrap">
    2     <h2><?php esc_html_e('Reading Progress Bar Settings', 'blog-reading-progress');?></h2>
    3     <form method="post" action="options.php">
    4         <?php settings_fields('brp_reading_progress_bar_options_group');?>
    5         <?php $options = get_option('brp_reading_progress_bar_options');?>
    6 
    7         <h3><?php esc_html_e('Appearance', 'blog-reading-progress');?> </h3>
    8         <table class="form-table">
    9             <tr valign="top">
    10                 <th scope="row"><?php esc_html_e('Color', 'blog-reading-progress');?> :</th>
    11                 <td><input type="color" name="brp_reading_progress_bar_options[color]" value="<?php echo esc_attr($options['color']); ?>" /></td>
    12             </tr>
    13             <tr valign="top">
    14                 <th scope="row"><?php esc_html_e('Height', 'blog-reading-progress');?>:</th>
    15                 <td><input type="number" name="brp_reading_progress_bar_options[height]" min="1" step="1" value="<?php echo esc_attr($options['height'] ?? ''); ?>" /> <?php esc_html_e('pixels', 'blog-reading-progress');?></td>
    16             </tr>
    17         </table>
    18 
    19         <h3><?php esc_html_e('Visibility', 'blog-reading-progres');?> </h3>
    20         <table class="form-table">
    21             <tr valign="top">
    22                 <th scope="row"> <?php esc_html_e('Show on Posts', 'blog-reading-progress');?> :</th>
    23                 <td><input type="checkbox" name="brp_reading_progress_bar_options[show_on_posts]" value="1" <?php checked($options['show_on_posts'] ?? '', true);?> /></td>
    24             </tr>
    25         </table>
    26         <?php submit_button();?>
    27     </form>
     1<?php
     2// Prevent direct access
     3if (!defined('ABSPATH')) {
     4    exit;
     5}
     6
     7$options = get_option('brp_reading_progress_bar_options');
     8?>
     9
     10<div class="wrap brp-dashboard">
     11    <div class="brp-header">
     12        <div class="brp-header-content">
     13            <h1><?php esc_html_e('Reading Progress Bar', 'blog-reading-progress'); ?></h1>
     14            <p class="description"><?php esc_html_e('Customize your reading progress bar with an intuitive interface', 'blog-reading-progress'); ?></p>
     15        </div>
     16        <div class="brp-header-actions">
     17            <button type="button" class="button button-primary brp-save-btn" onclick="document.getElementById('brp-settings-form').submit();">
     18                <span class="dashicons dashicons-saved"></span>
     19                <?php esc_html_e('Save Changes', 'blog-reading-progress'); ?>
     20            </button>
     21        </div>
     22    </div>
     23
     24    <div class="brp-main-container">
     25        <!-- Settings Form -->
     26        <div class="brp-settings-panel">
     27            <form method="post" action="options.php" id="brp-settings-form" class="brp-form">
     28                <?php settings_fields('brp_reading_progress_bar_options_group'); ?>
     29               
     30                <!-- Tab Navigation -->
     31                <div class="brp-tabs">
     32                    <button type="button" class="brp-tab-btn active" data-tab="appearance">
     33                        <span class="dashicons dashicons-admin-appearance"></span>
     34                        <?php esc_html_e('Appearance', 'blog-reading-progress'); ?>
     35                    </button>
     36                    <button type="button" class="brp-tab-btn" data-tab="display">
     37                        <span class="dashicons dashicons-visibility"></span>
     38                        <?php esc_html_e('Display', 'blog-reading-progress'); ?>
     39                    </button>
     40                    <button type="button" class="brp-tab-btn" data-tab="advanced">
     41                        <span class="dashicons dashicons-admin-tools"></span>
     42                        <?php esc_html_e('Advanced', 'blog-reading-progress'); ?>
     43                    </button>
     44                </div>
     45
     46                <!-- Tab Content -->
     47                <div class="brp-tab-content">
     48                    <!-- Appearance Tab -->
     49                    <div id="appearance" class="brp-tab-panel active">
     50                        <div class="brp-section">
     51                            <h3><?php esc_html_e('Color & Style', 'blog-reading-progress'); ?></h3>
     52                           
     53                            <div class="brp-option-row">
     54                                <div class="brp-option-col">
     55                                    <label class="brp-label"><?php esc_html_e('Color Type', 'blog-reading-progress'); ?></label>
     56                                    <div class="brp-radio-group">
     57                                        <label class="brp-radio">
     58                                            <input type="radio" name="brp_reading_progress_bar_options[color_type]" value="solid" <?php checked(($options['use_gradient'] ?? false) ? 'gradient' : 'solid', 'solid'); ?> />
     59                                            <span class="radio-custom"></span>
     60                                            <?php esc_html_e('Solid Color', 'blog-reading-progress'); ?>
     61                                        </label>
     62                                        <label class="brp-radio">
     63                                            <input type="radio" name="brp_reading_progress_bar_options[color_type]" value="gradient" <?php checked(($options['use_gradient'] ?? false) ? 'gradient' : 'solid', 'gradient'); ?> />
     64                                            <span class="radio-custom"></span>
     65                                            <?php esc_html_e('Gradient', 'blog-reading-progress'); ?>
     66                                        </label>
     67                                    </div>
     68                                </div>
     69                            </div>
     70
     71                            <div class="brp-option-row" id="solid-color-options">
     72                                <div class="brp-option-col">
     73                                    <label class="brp-label"><?php esc_html_e('Color', 'blog-reading-progress'); ?></label>
     74                                    <input type="color" name="brp_reading_progress_bar_options[color]" value="<?php echo esc_attr($options['color'] ?? '#667eea'); ?>" class="brp-color-picker" />
     75                                </div>
     76                            </div>
     77
     78                            <div class="brp-option-row" id="gradient-options" style="display: <?php echo ($options['use_gradient'] ?? false) ? 'flex' : 'none'; ?>;">
     79                                <div class="brp-option-col">
     80                                    <label class="brp-label"><?php esc_html_e('Start Color', 'blog-reading-progress'); ?></label>
     81                                    <input type="color" name="brp_reading_progress_bar_options[gradient_start]" value="<?php echo esc_attr($options['gradient_start'] ?? '#667eea'); ?>" class="brp-color-picker" />
     82                                </div>
     83                                <div class="brp-option-col">
     84                                    <label class="brp-label"><?php esc_html_e('End Color', 'blog-reading-progress'); ?></label>
     85                                    <input type="color" name="brp_reading_progress_bar_options[gradient_end]" value="<?php echo esc_attr($options['gradient_end'] ?? '#764ba2'); ?>" class="brp-color-picker" />
     86                                </div>
     87                            </div>
     88                        </div>
     89
     90                        <div class="brp-section">
     91                            <h3><?php esc_html_e('Size & Position', 'blog-reading-progress'); ?></h3>
     92                           
     93                            <div class="brp-option-row">
     94                                <div class="brp-option-col">
     95                                    <label class="brp-label"><?php esc_html_e('Height', 'blog-reading-progress'); ?></label>
     96                                    <div class="brp-slider-container">
     97                                        <input type="range" name="brp_reading_progress_bar_options[height]" min="1" max="20" step="1" value="<?php echo esc_attr($options['height'] ?? '4'); ?>" class="brp-range" />
     98                                        <span class="brp-range-value"><?php echo esc_html($options['height'] ?? '4'); ?>px</span>
     99                                    </div>
     100                                </div>
     101                                <div class="brp-option-col">
     102                                    <label class="brp-label"><?php esc_html_e('Position', 'blog-reading-progress'); ?></label>
     103                                    <div class="brp-button-group">
     104                                        <button type="button" class="brp-btn <?php echo ($options['position'] ?? 'top') === 'top' ? 'active' : ''; ?>" data-value="top">
     105                                            <?php esc_html_e('Top', 'blog-reading-progress'); ?>
     106                                        </button>
     107                                        <button type="button" class="brp-btn <?php echo ($options['position'] ?? 'top') === 'bottom' ? 'active' : ''; ?>" data-value="bottom">
     108                                            <?php esc_html_e('Bottom', 'blog-reading-progress'); ?>
     109                                        </button>
     110                                        <input type="hidden" name="brp_reading_progress_bar_options[position]" value="<?php echo esc_attr($options['position'] ?? 'top'); ?>" />
     111                                    </div>
     112                                </div>
     113                            </div>
     114
     115                            <div class="brp-option-row">
     116                                <div class="brp-option-col">
     117                                    <label class="brp-label"><?php esc_html_e('Border Radius', 'blog-reading-progress'); ?></label>
     118                                    <div class="brp-slider-container">
     119                                        <input type="range" name="brp_reading_progress_bar_options[border_radius]" min="0" max="50" step="1" value="<?php echo esc_attr($options['border_radius'] ?? '0'); ?>" class="brp-range" />
     120                                        <span class="brp-range-value"><?php echo esc_html($options['border_radius'] ?? '0'); ?>px</span>
     121                                    </div>
     122                                </div>
     123                                <div class="brp-option-col">
     124                                    <label class="brp-label"><?php esc_html_e('Opacity', 'blog-reading-progress'); ?></label>
     125                                    <div class="brp-slider-container">
     126                                        <input type="range" name="brp_reading_progress_bar_options[opacity]" min="0.1" max="1" step="0.1" value="<?php echo esc_attr($options['opacity'] ?? '1'); ?>" class="brp-range" />
     127                                        <span class="brp-range-value"><?php echo esc_html($options['opacity'] ?? '1'); ?></span>
     128                                    </div>
     129                                </div>
     130                            </div>
     131                        </div>
     132                    </div>
     133
     134                    <!-- Display Tab -->
     135                    <div id="display" class="brp-tab-panel">
     136                        <div class="brp-section">
     137                            <h3><?php esc_html_e('Where to Show', 'blog-reading-progress'); ?></h3>
     138                           
     139                            <div class="brp-toggle-group">
     140                                <div class="brp-toggle">
     141                                    <div class="brp-switch">
     142                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_on_posts]" value="1" <?php checked($options['show_on_posts'] ?? true); ?> />
     143                                        <span class="brp-slider"></span>
     144                                    </div>
     145                                    <div class="brp-toggle-content">
     146                                        <span class="brp-toggle-label"><?php esc_html_e('Show on Posts', 'blog-reading-progress'); ?></span>
     147                                        <span class="brp-toggle-desc"><?php esc_html_e('Display progress bar on blog posts', 'blog-reading-progress'); ?></span>
     148                                    </div>
     149                                </div>
     150
     151                                <div class="brp-toggle">
     152                                    <div class="brp-switch">
     153                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_on_pages]" value="1" <?php checked($options['show_on_pages'] ?? false); ?> />
     154                                        <span class="brp-slider"></span>
     155                                    </div>
     156                                    <div class="brp-toggle-content">
     157                                        <span class="brp-toggle-label"><?php esc_html_e('Show on Pages', 'blog-reading-progress'); ?></span>
     158                                        <span class="brp-toggle-desc"><?php esc_html_e('Display progress bar on pages', 'blog-reading-progress'); ?></span>
     159                                    </div>
     160                                </div>
     161
     162                                <div class="brp-toggle">
     163                                    <div class="brp-switch">
     164                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_reading_time]" value="1" <?php checked($options['show_reading_time'] ?? false); ?> />
     165                                        <span class="brp-slider"></span>
     166                                    </div>
     167                                    <div class="brp-toggle-content">
     168                                        <span class="brp-toggle-label"><?php esc_html_e('Show Reading Time', 'blog-reading-progress'); ?></span>
     169                                        <span class="brp-toggle-desc"><?php esc_html_e('Display estimated reading time', 'blog-reading-progress'); ?></span>
     170                                    </div>
     171                                </div>
     172                            </div>
     173                        </div>
     174
     175                        <div class="brp-section">
     176                            <h3><?php esc_html_e('Per-Post Settings', 'blog-reading-progress'); ?></h3>
     177                            <div class="brp-info-box">
     178                                <span class="dashicons dashicons-info"></span>
     179                                <p><?php esc_html_e('You can enable or disable the progress bar for individual posts by editing each post and looking for the "Reading Progress Bar" option in the sidebar.', 'blog-reading-progress'); ?></p>
     180                            </div>
     181                        </div>
     182                    </div>
     183
     184                    <!-- Advanced Tab -->
     185                    <div id="advanced" class="brp-tab-panel">
     186                        <div class="brp-section">
     187                            <h3><?php esc_html_e('Effects', 'blog-reading-progress'); ?></h3>
     188                           
     189                            <div class="brp-toggle-group">
     190                                <div class="brp-toggle">
     191                                    <div class="brp-switch">
     192                                        <input type="checkbox" name="brp_reading_progress_bar_options[shadow_enabled]" value="1" <?php checked($options['shadow_enabled'] ?? false); ?> />
     193                                        <span class="brp-slider"></span>
     194                                    </div>
     195                                    <div class="brp-toggle-content">
     196                                        <span class="brp-toggle-label"><?php esc_html_e('Enable Shadow', 'blog-reading-progress'); ?></span>
     197                                        <span class="brp-toggle-desc"><?php esc_html_e('Add a shadow effect to the progress bar', 'blog-reading-progress'); ?></span>
     198                                    </div>
     199                                </div>
     200
     201                                <div class="brp-toggle">
     202                                    <div class="brp-switch">
     203                                        <input type="checkbox" name="brp_reading_progress_bar_options[border_enabled]" value="1" <?php checked($options['border_enabled'] ?? false); ?> />
     204                                        <span class="brp-slider"></span>
     205                                    </div>
     206                                    <div class="brp-toggle-content">
     207                                        <span class="brp-toggle-label"><?php esc_html_e('Enable Border', 'blog-reading-progress'); ?></span>
     208                                        <span class="brp-toggle-desc"><?php esc_html_e('Add a border around the progress bar', 'blog-reading-progress'); ?></span>
     209                                    </div>
     210                                </div>
     211                            </div>
     212
     213                            <div class="brp-option-row" id="shadow-options" style="display: <?php echo ($options['shadow_enabled'] ?? false) ? 'flex' : 'none'; ?>;">
     214                                <div class="brp-option-col">
     215                                    <label class="brp-label"><?php esc_html_e('Shadow Color', 'blog-reading-progress'); ?></label>
     216                                    <input type="color" name="brp_reading_progress_bar_options[shadow_color]" value="<?php echo esc_attr($options['shadow_color'] ?? 'rgba(0,0,0,0.3)'); ?>" class="brp-color-picker" />
     217                                </div>
     218                                <div class="brp-option-col">
     219                                    <label class="brp-label"><?php esc_html_e('Shadow Blur', 'blog-reading-progress'); ?></label>
     220                                    <div class="brp-slider-container">
     221                                        <input type="range" name="brp_reading_progress_bar_options[shadow_blur]" min="1" max="20" step="1" value="<?php echo esc_attr($options['shadow_blur'] ?? '5'); ?>" class="brp-range" />
     222                                        <span class="brp-range-value"><?php echo esc_html($options['shadow_blur'] ?? '5'); ?>px</span>
     223                                    </div>
     224                                </div>
     225                            </div>
     226
     227                            <div class="brp-option-row" id="border-options" style="display: <?php echo ($options['border_enabled'] ?? false) ? 'flex' : 'none'; ?>;">
     228                                <div class="brp-option-col">
     229                                    <label class="brp-label"><?php esc_html_e('Border Color', 'blog-reading-progress'); ?></label>
     230                                    <input type="color" name="brp_reading_progress_bar_options[border_color]" value="<?php echo esc_attr($options['border_color'] ?? '#000'); ?>" class="brp-color-picker" />
     231                                </div>
     232                                <div class="brp-option-col">
     233                                    <label class="brp-label"><?php esc_html_e('Border Width', 'blog-reading-progress'); ?></label>
     234                                    <div class="brp-slider-container">
     235                                        <input type="range" name="brp_reading_progress_bar_options[border_width]" min="1" max="10" step="1" value="<?php echo esc_attr($options['border_width'] ?? '1'); ?>" class="brp-range" />
     236                                        <span class="brp-range-value"><?php echo esc_html($options['border_width'] ?? '1'); ?>px</span>
     237                                    </div>
     238                                </div>
     239                            </div>
     240                        </div>
     241                    </div>
     242                </div>
     243            </form>
     244        </div>
     245
     246        <!-- Live Preview Sidebar -->
     247        <div class="brp-preview-sidebar">
     248            <div class="brp-preview-card">
     249                <h3><?php esc_html_e('Live Preview', 'blog-reading-progress'); ?></h3>
     250                <div class="brp-preview-container">
     251                    <div class="brp-preview-header">
     252                        <span class="brp-preview-title"><?php esc_html_e('Sample Blog Post', 'blog-reading-progress'); ?></span>
     253                    </div>
     254                    <div id="brp-preview-bar" class="brp-preview-bar"></div>
     255                    <div class="brp-preview-content">
     256                        <div class="brp-preview-text">
     257                            <p><?php esc_html_e('This is a sample blog post content. The progress bar above shows how your customized progress bar will look on your actual posts.', 'blog-reading-progress'); ?></p>
     258                            <p><?php esc_html_e('As you scroll through the content, the progress bar will fill up to show reading progress.', 'blog-reading-progress'); ?></p>
     259                        </div>
     260                    </div>
     261                </div>
     262            </div>
     263
     264            <div class="brp-stats-card">
     265                <h3><?php esc_html_e('Quick Stats', 'blog-reading-progress'); ?></h3>
     266                <div class="brp-stats-grid">
     267                    <div class="brp-stat-item">
     268                        <div class="brp-stat-icon">
     269                            <span class="dashicons dashicons-chart-bar"></span>
     270                        </div>
     271                        <div class="brp-stat-content">
     272                            <span class="brp-stat-number"><?php echo esc_html($this->get_posts_with_progress_bar()); ?></span>
     273                            <span class="brp-stat-label"><?php esc_html_e('Posts with Progress Bar', 'blog-reading-progress'); ?></span>
     274                        </div>
     275                    </div>
     276                    <div class="brp-stat-item">
     277                        <div class="brp-stat-icon">
     278                            <span class="dashicons dashicons-admin-post"></span>
     279                        </div>
     280                        <div class="brp-stat-content">
     281                            <span class="brp-stat-number"><?php echo esc_html($this->get_total_posts()); ?></span>
     282                            <span class="brp-stat-label"><?php esc_html_e('Total Posts', 'blog-reading-progress'); ?></span>
     283                        </div>
     284                    </div>
     285                </div>
     286            </div>
     287        </div>
     288    </div>
    28289</div>
     290
     291<script>
     292jQuery(document).ready(function($) {
     293    // Initialize color pickers
     294    $('.brp-color-picker').wpColorPicker({
     295        change: function(event, ui) {
     296            updatePreview();
     297        }
     298    });
     299
     300    // Tab functionality
     301    $('.brp-tab-btn').on('click', function() {
     302        var tabId = $(this).data('tab');
     303       
     304        // Update active tab button
     305        $('.brp-tab-btn').removeClass('active');
     306        $(this).addClass('active');
     307       
     308        // Update active tab panel
     309        $('.brp-tab-panel').removeClass('active');
     310        $('#' + tabId).addClass('active');
     311    });
     312
     313    // Color type radio buttons
     314    $('input[name="brp_reading_progress_bar_options[color_type]"]').on('change', function() {
     315        var colorType = $(this).val();
     316        if (colorType === 'solid') {
     317            $('#solid-color-options').show();
     318            $('#gradient-options').hide();
     319        } else {
     320            $('#solid-color-options').hide();
     321            $('#gradient-options').show();
     322        }
     323        updatePreview();
     324    });
     325
     326    // Toggle effects
     327    $('input[name="brp_reading_progress_bar_options[shadow_enabled]"]').on('change', function() {
     328        $('#shadow-options').slideToggle(this.checked);
     329        updatePreview();
     330    });
     331
     332    $('input[name="brp_reading_progress_bar_options[border_enabled]"]').on('change', function() {
     333        $('#border-options').slideToggle(this.checked);
     334        updatePreview();
     335    });
     336
     337    // Position buttons
     338    $('.brp-btn').on('click', function() {
     339        var value = $(this).data('value');
     340        $(this).siblings().removeClass('active');
     341        $(this).addClass('active');
     342        $(this).siblings('input[type="hidden"]').val(value);
     343        updatePreview();
     344    });
     345
     346    // Range sliders
     347    $('.brp-range').on('input', function() {
     348        $(this).next('.brp-range-value').text($(this).val() + ($(this).attr('name').includes('height') || $(this).attr('name').includes('border_width') || $(this).attr('name').includes('shadow_blur') ? 'px' : ''));
     349        updatePreview();
     350    });
     351
     352    // Enhanced preview function
     353    function updatePreview() {
     354        var colorType = $('input[name="brp_reading_progress_bar_options[color_type]"]:checked').val();
     355        var color = $('input[name="brp_reading_progress_bar_options[color]"]').val();
     356        var gradientStart = $('input[name="brp_reading_progress_bar_options[gradient_start]"]').val();
     357        var gradientEnd = $('input[name="brp_reading_progress_bar_options[gradient_end]"]').val();
     358        var height = $('input[name="brp_reading_progress_bar_options[height]"]').val();
     359        var borderRadius = $('input[name="brp_reading_progress_bar_options[border_radius]"]').val();
     360        var opacity = $('input[name="brp_reading_progress_bar_options[opacity]"]').val();
     361        var position = $('input[name="brp_reading_progress_bar_options[position]"]').val();
     362        var shadowEnabled = $('input[name="brp_reading_progress_bar_options[shadow_enabled]"]').is(':checked');
     363        var shadowColor = $('input[name="brp_reading_progress_bar_options[shadow_color]"]').val();
     364        var shadowBlur = $('input[name="brp_reading_progress_bar_options[shadow_blur]"]').val();
     365        var borderEnabled = $('input[name="brp_reading_progress_bar_options[border_enabled]"]').is(':checked');
     366        var borderColor = $('input[name="brp_reading_progress_bar_options[border_color]"]').val();
     367        var borderWidth = $('input[name="brp_reading_progress_bar_options[border_width]"]').val();
     368
     369        var css = {
     370            'height': height + 'px',
     371            'border-radius': borderRadius + 'px',
     372            'opacity': opacity
     373        };
     374
     375        // Background
     376        if (colorType === 'gradient') {
     377            css['background'] = 'linear-gradient(90deg, ' + gradientStart + ' 0%, ' + gradientEnd + ' 100%)';
     378        } else {
     379            css['background-color'] = color;
     380        }
     381
     382        // Shadow
     383        if (shadowEnabled) {
     384            css['box-shadow'] = '0 2px ' + shadowBlur + 'px ' + shadowColor;
     385        }
     386
     387        // Border
     388        if (borderEnabled) {
     389            css['border'] = borderWidth + 'px solid ' + borderColor;
     390        }
     391
     392        $('#brp-preview-bar').css(css);
     393    }
     394
     395    // Bind preview updates
     396    $('.brp-form input, .brp-form select').on('change input', updatePreview);
     397   
     398    // Initial preview
     399    updatePreview();
     400});
     401</script>

  • blog-reading-progress-bar/tags/2.0.0/readme.txt

    r3239424 r3327758  
    22
    33Contributors: ifatwp
    4 Tags: progress bar, reading progress, blog, posts
    5 Requires PHP : 7.3
    6 Tested up to: WordPress 6.7.2
    7 Stable tag: 1.0.6
     4Tags: progress bar, blog, posts, reading time, user experience
     5Requires at least: 5.6
     6Requires PHP: 7.3
     7Tested up to: WordPress 6.8.1
     8Stable tag: 2.0.0
    89License: GPLv2 or later
    910License URI: http://www.gnu.org/licenses/gpl-2.0.txt
    1011
    11 
    12 Adds a reading progress bar to blog posts.
     12A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options.
    1313
    1414== Description ==
    1515
    16 The Reading Progress Bar plugin adds a progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     16The Reading Progress Bar plugin adds a beautiful, customizable progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     17
     18**Key Features:**
     19- 🎨 **Modern Dashboard**: Beautiful, intuitive admin interface with live preview
     20- 🌈 **Advanced Customization**: Gradient colors, shadows, borders, and effects
     21- 📱 **Responsive Design**: Works perfectly on desktop, tablet, and mobile
     22- ⚡ **Performance Optimized**: Smooth animations and efficient code
     23- 🎯 **Per-Post Control**: Enable/disable for individual posts
     24- 📊 **Reading Time**: Display estimated reading time
     25- 🎪 **Live Preview**: See changes in real-time as you adjust settings
    1726
    1827== Features ==
    1928
    20 - Automatically adds a reading progress bar to blog posts.
    21 - Customizable options to control the appearance and behavior of the progress bar.
    22 - Option to enable or disable the progress bar on specific posts.
    23 - Lightweight and easy to use.
     29### Core Functionality
     30- **Reading Progress Tracking**: Real-time progress bar that shows how much of the post has been read
     31- **Per-Post Control**: Enable/disable progress bar for individual posts
     32- **Reading Time Estimation**: Display estimated reading time for posts
     33- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
     34
     35### Advanced Customization
     36- **Color Options**:
     37  - Solid color picker with WordPress native color picker
     38  - Gradient color support with start and end colors
     39  - Custom shadow colors and effects
     40  - Border color and width customization
     41
     42### Visual Effects
     43- **Position Control**: Place progress bar at top or bottom of screen
     44- **Size Customization**: Adjustable height (1-20px)
     45- **Border Radius**: Rounded corners (0-50px)
     46- **Opacity Control**: Adjust transparency (0.1-1.0)
     47- **Shadow Effects**: Customizable shadow with color and blur options
     48- **Border Styling**: Optional border with custom color and width
     49
     50### User Experience
     51- **Smooth Animations**: Fluid progress updates with CSS transitions
     52- **Performance Optimized**: Uses requestAnimationFrame for smooth scrolling
     53- **Keyboard Navigation**: Space bar and arrow key support
     54- **Touch Gestures**: Swipe support for mobile devices
     55- **Accessibility**: High contrast mode and reduced motion support
     56
     57### Dashboard Features
     58- **Modern Admin Interface**: Beautiful, responsive dashboard with tabs
     59- **Live Preview**: See changes in real-time as you adjust settings
     60- **Statistics**: View posts with progress bar enabled vs total posts
     61- **Organized Settings**: Grouped options for easy configuration
    2462
    2563== Installation ==
    2664
    27 1. Upload the `reading-progress-bar` folder to the `/wp-content/plugins/` directory.
    28 2. Activate the plugin through the 'Plugins' menu in WordPress.
    29 3. Go to 'Reading Progress Bar' in the WordPress dashboard to configure the plugin settings.
     651. Upload the `blog-reading-progress-bar` folder to the `/wp-content/plugins/` directory.
     662. Activate the plugin through the 'Plugins' screen in WordPress.
     673. Go to Settings > Reading Progress Bar to configure options.
    3068
    3169== Configuration ==
    3270
    33 1. Navigate to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard.
    34 2. Customize the options according to your preference, such as the color and height of the progress bar.
    35 3. Choose whether to display the progress bar on all posts or specific posts.
    36 4. Save your changes.
     71### Basic Settings
     721. Navigate to **Settings > Reading Progress Bar**
     732. Configure appearance options:
     74   - **Color**: Choose solid color or enable gradient
     75   - **Height**: Set progress bar height (1-20px)
     76   - **Position**: Top or bottom of screen
     77   - **Border Radius**: Add rounded corners
     78   - **Opacity**: Adjust transparency
     79
     80### Advanced Effects
     81- **Shadow**: Enable shadow with custom color and blur
     82- **Border**: Add border with custom color and width
     83- **Gradient**: Use gradient colors instead of solid color
     84
     85### Display Settings
     86- **Show on Posts**: Enable/disable for blog posts
     87- **Show on Pages**: Enable/disable for pages
     88- **Show Reading Time**: Display estimated reading time
     89
     90### Per-Post Settings
     91- Edit any post and look for the "Reading Progress Bar" meta box
     92- Check/uncheck to enable/disable for that specific post
    3793
    3894== Frequently Asked Questions ==
    … …  
    4096= How can I customize the appearance of the progress bar? =
    4197
    42 You can modify the color and height of the progress bar by navigating to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard. Use the provided options to adjust the settings to your liking.
     98You can customize the progress bar through the modern dashboard interface. Navigate to 'Settings' > 'Reading Progress Bar' and use the tabbed interface to configure colors, effects, position, and more. The live preview shows changes instantly.
    4399
    44 = Can I enable the progress bar on specific posts only?
     100= Can I enable the progress bar on specific posts only? =
    45101
    46102Yes, you have the option to enable or disable the progress bar on individual posts. Edit a post and look for the "Reading Progress Bar" meta box in the sidebar. Check the box to display the progress bar on that post, or uncheck it to hide the progress bar.
    47103
     104= What new features are available in version 2.0.0? =
     105
     106Version 2.0.0 includes a complete redesign with:
     107- Modern tabbed dashboard interface
     108- Live preview functionality
     109- Gradient color support
     110- Shadow and border effects
     111- Reading time display
     112- Enhanced performance optimizations
     113- Better mobile responsiveness
     114- Improved accessibility features
     115
     116= Is the plugin mobile-friendly? =
     117
     118Yes! The plugin is fully responsive and includes touch gesture support for mobile devices. The progress bar adapts to different screen sizes and provides smooth interactions on touch devices.
     119
     120= Can I use gradient colors? =
     121
     122Absolutely! Version 2.0.0 includes full gradient support. You can choose between solid colors and gradients, with custom start and end colors for beautiful visual effects.
     123
    48124== Changelog ==
    49125
    50 = 1.0.7 =
     126= 2.0.0 - Major Update =
    51127
    52 = v1.0.7 - Feb 12, 2025 =
     128**New Features:**
     129- ✨ Modern admin dashboard with tabbed interface
     130- ✨ Live preview functionality
     131- ✨ Gradient color support with start/end colors
     132- ✨ Shadow effects with customizable color and blur
     133- ✨ Border effects with customizable color and width
     134- ✨ Position options (top/bottom)
     135- ✨ Opacity and border radius controls
     136- ✨ Reading time display
     137- ✨ Enhanced JavaScript with performance optimizations
     138- ✨ Touch gesture support for mobile
     139- ✨ Keyboard navigation support
     140- ✨ Accessibility improvements
     141- ✨ Statistics dashboard
     142- ✨ Improved UI/UX design
    53143
    54 **Added:** Tested upto 6.7.2
     144**Improvements:**
     145- 🎨 Complete redesign of admin interface
     146- 🚀 Better performance and responsiveness
     147- 📱 Enhanced mobile experience
     148- ♿ Better accessibility support
     149- 🎯 More intuitive user experience
     150
     151= 1.0.7 - Feb 12, 2025 =
     152
     153**Added:** Tested up to WordPress 6.7.2
    55154
    56155= 1.0.0 =
    57 * Initial release.
     156
     157* Initial release with basic progress bar functionality.
    58158
    59159== Upgrade Notice ==
    60160
     161= 2.0.0 =
     162
     163This is a major update with a completely redesigned interface and new features. The admin dashboard has been modernized with a tabbed interface, live preview, and advanced customization options. All existing settings will be preserved during the upgrade.
     164
    61165= 1.0.0 =
     166
    62167Initial release of the Reading Progress Bar plugin.
    63168
    64169== Screenshots ==
    65170
    66 1. Progress bar displayed on a blog post.
    67 2. Plugin settings page in the WordPress dashboard.
     1711. Modern admin dashboard with tabbed interface
     1722. Live preview showing progress bar customization
     1733. Advanced effects configuration (shadows, borders)
     1744. Progress bar displayed on a blog post
     1755. Mobile-responsive design
    68176
    69 == Upgrade Notice ==
     177== Requirements ==
    70178
    71 = 1.0.0 =
    72 Initial release of the Reading Progress Bar plugin.
     179- WordPress 5.6 or higher
     180- PHP 7.3 or higher
     181- jQuery (included with WordPress)
    73182
    74183== License ==
    75184
    76185This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the `license.txt` file or visit [http://www.gnu.org/licenses/gpl-2.0.txt](http://www.gnu.org/licenses/gpl-2.0.txt) for more information.
     186
     187== Support ==
     188
     189For support, feature requests, or bug reports, please visit the [plugin page](https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/) or create an issue on GitHub.
     190
     191---
     192
     193**Made with ❤️ for the WordPress community**

  • blog-reading-progress-bar/trunk/README.md

    r3176866 r3327758  
    1 === Reading Progress Bar ===
     1# Reading Progress Bar
    22
    3 Contributors: ifatwp
    4 Tags: progress bar, reading progress, blog, posts
    5 Requires PHP : 7.3
    6 Tested up to: WordPress 6.3.3
    7 Stable tag: 1.0.5
    8 License: GPLv2 or later
    9 License URI: http://www.gnu.org/licenses/gpl-2.0.txt
     3A modern, feature-rich WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options and enhanced user experience.
    104
     5## 🚀 Features
    116
    12 Adds a reading progress bar to blog posts.
     7### Core Functionality
     8- **Reading Progress Tracking**: Real-time progress bar that shows how much of the post has been read
     9- **Per-Post Control**: Enable/disable progress bar for individual posts
     10- **Reading Time Estimation**: Display estimated reading time for posts
     11- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
    1312
    14 == Description ==
     13### Advanced Customization
     14- **Color Options**:
     15  - Solid color picker
     16  - Gradient color support with start and end colors
     17  - Custom shadow colors
     18  - Border color customization
    1519
    16 The Reading Progress Bar plugin adds a progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     20### Visual Effects
     21- **Position Control**: Place progress bar at top or bottom of screen
     22- **Size Customization**: Adjustable height (1-20px)
     23- **Border Radius**: Rounded corners (0-50px)
     24- **Opacity Control**: Adjust transparency (0.1-1.0)
     25- **Shadow Effects**: Customizable shadow with color and blur options
     26- **Border Styling**: Optional border with custom color and width
    1727
    18 == Features ==
     28### User Experience
     29- **Smooth Animations**: Fluid progress updates with CSS transitions
     30- **Performance Optimized**: Uses requestAnimationFrame for smooth scrolling
     31- **Keyboard Navigation**: Space bar and arrow key support
     32- **Touch Gestures**: Swipe support for mobile devices
     33- **Accessibility**: High contrast mode and reduced motion support
    1934
    20 - Automatically adds a reading progress bar to blog posts.
    21 - Customizable options to control the appearance and behavior of the progress bar.
    22 - Option to enable or disable the progress bar on specific posts.
    23 - Lightweight and easy to use.
     35### Dashboard Features
     36- **Modern Admin Interface**: Beautiful, responsive dashboard
     37- **Live Preview**: See changes in real-time as you adjust settings
     38- **Statistics**: View posts with progress bar enabled vs total posts
     39- **Organized Settings**: Grouped options for easy configuration
    2440
    25 == Installation ==
     41## 📋 Requirements
    2642
    27 1. Upload the `reading-progress-bar` folder to the `/wp-content/plugins/` directory.
    28 2. Activate the plugin through the 'Plugins' menu in WordPress.
    29 3. Go to 'Reading Progress Bar' in the WordPress dashboard to configure the plugin settings.
     43- WordPress 5.6 or higher
     44- PHP 7.3 or higher
     45- jQuery (included with WordPress)
    3046
    31 == Configuration ==
     47## 🛠️ Installation
    3248
    33 1. Navigate to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard.
    34 2. Customize the options according to your preference, such as the color and height of the progress bar.
    35 3. Choose whether to display the progress bar on all posts or specific posts.
    36 4. Save your changes.
     491. Upload the plugin files to `/wp-content/plugins/blog-reading-progress-bar/`
     502. Activate the plugin through the 'Plugins' screen in WordPress
     513. Go to Settings > Reading Progress Bar to configure options
    3752
    38 == Frequently Asked Questions ==
     53## ⚙️ Configuration
    3954
    40 = How can I customize the appearance of the progress bar? =
     55### Basic Settings
     561. Navigate to **Settings > Reading Progress Bar**
     572. Configure appearance options:
     58   - **Color**: Choose solid color or enable gradient
     59   - **Height**: Set progress bar height (1-20px)
     60   - **Position**: Top or bottom of screen
     61   - **Border Radius**: Add rounded corners
     62   - **Opacity**: Adjust transparency
    4163
    42 You can modify the color and height of the progress bar by navigating to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard. Use the provided options to adjust the settings to your liking.
     64### Advanced Effects
     65- **Shadow**: Enable shadow with custom color and blur
     66- **Border**: Add border with custom color and width
     67- **Gradient**: Use gradient colors instead of solid color
    4368
    44 = Can I enable the progress bar on specific posts only?
     69### Display Settings
     70- **Show on Posts**: Enable/disable for blog posts
     71- **Show on Pages**: Enable/disable for pages
     72- **Show Reading Time**: Display estimated reading time
    4573
    46 Yes, you have the option to enable or disable the progress bar on individual posts. Edit a post and look for the "Reading Progress Bar" meta box in the sidebar. Check the box to display the progress bar on that post, or uncheck it to hide the progress bar.
     74### Per-Post Settings
     75- Edit any post and look for the "Reading Progress Bar" meta box
     76- Check/uncheck to enable/disable for that specific post
    4777
    48 == Changelog ==
     78## 🎨 Customization
    4979
    50 = 1.0.0 =
    51 * Initial release.
     80### CSS Customization
     81You can add custom CSS to further style the progress bar:
    5282
    53 == Upgrade Notice ==
     83```css
     84#reading-progress-bar {
     85    /* Your custom styles */
     86}
    5487
    55 = 1.0.0 =
    56 Initial release of the Reading Progress Bar plugin.
     88#reading-time {
     89    /* Custom reading time styles */
     90}
     91```
    5792
    58 == Screenshots ==
     93### JavaScript Hooks
     94The plugin provides several JavaScript events you can hook into:
    5995
    60 1. Progress bar displayed on a blog post.
    61 2. Plugin settings page in the WordPress dashboard.
     96```javascript
     97// Progress update event
     98$(document).on('brp_progress_update', function(e, progress) {
     99    console.log('Progress:', progress + '%');
     100});
    62101
    63 == Upgrade Notice ==
     102// Reading time calculation event
     103$(document).on('brp_reading_time_calculated', function(e, time) {
     104    console.log('Reading time:', time);
     105});
     106```
    64107
    65 = 1.0.0 =
    66 Initial release of the Reading Progress Bar plugin.
     108## 🔧 Developer Features
    67109
    68 == License ==
     110### Filters
     111- `brp_progress_bar_color`: Modify the default color
     112- `brp_reading_time_text`: Customize reading time text
     113- `brp_should_display_bar`: Control when to show the progress bar
    69114
    70 This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the `license.txt` file or visit [http://www.gnu.org/licenses/gpl-2.0.txt](http://www.gnu.org/licenses/gpl-2.0.txt) for more information.
     115### Actions
     116- `brp_before_progress_bar`: Fires before progress bar is rendered
     117- `brp_after_progress_bar`: Fires after progress bar is rendered
     118- `brp_progress_updated`: Fires when progress is updated
     119
     120## 📊 Performance
     121
     122The plugin is optimized for performance:
     123- Uses `requestAnimationFrame` for smooth scrolling
     124- Intersection Observer for efficient tracking
     125- Debounced event handlers
     126- Minimal DOM queries
     127- Efficient CSS transitions
     128
     129## 🌟 Changelog
     130
     131### Version 2.0.0
     132- ✨ **NEW**: Modern admin dashboard with live preview
     133- ✨ **NEW**: Gradient color support
     134- ✨ **NEW**: Shadow and border effects
     135- ✨ **NEW**: Position options (top/bottom)
     136- ✨ **NEW**: Opacity and border radius controls
     137- ✨ **NEW**: Reading time display
     138- ✨ **NEW**: Enhanced JavaScript with performance optimizations
     139- ✨ **NEW**: Touch gesture support for mobile
     140- ✨ **NEW**: Keyboard navigation support
     141- ✨ **NEW**: Accessibility improvements
     142- ✨ **NEW**: Statistics dashboard
     143- 🎨 **IMPROVED**: Modern UI/UX design
     144- 🚀 **IMPROVED**: Better performance and responsiveness
     145
     146### Version 1.0.7
     147- Initial release with basic progress bar functionality
     148
     149## 🤝 Contributing
     150
     151Contributions are welcome! Please feel free to submit a Pull Request.
     152
     153## 📄 License
     154
     155This plugin is licensed under the GPL v2 or later.
     156
     157## 👨‍💻 Author
     158
     159**ifatwp** - [WordPress Blog](https://ifatwp.wordpress.com/)
     160
     161## 🙏 Support
     162
     163For support, feature requests, or bug reports, please visit the [plugin page](https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/) or create an issue on GitHub.
     164
     165---

  • blog-reading-progress-bar/trunk/assets/script.js

    r3009602 r3327758  
    1 jQuery(document).ready(
    2     function ($) {
    3         var progressBar  = $('#reading-progress-bar');
    4         var postContent  = $('.entry-content');
    5         var postHeight   = postContent.height();
    6         var windowHeight = $(window).height();
    7         var scrollPercent;
     1jQuery(document).ready(function($) {
     2    'use strict';
    83
    9         $(window).scroll(
    10             function () {
    11                 var scrollPosition = $(this).scrollTop();
    12                 scrollPercent      = (scrollPosition / (postHeight - windowHeight)) * 100;
    13                 progressBar.width(scrollPercent + '%');
     4    var progressBar = $('#reading-progress-bar');
     5    var postContent = $('.entry-content');
     6    var readingTime = $('#reading-time');
     7   
     8    // Only proceed if we have the required elements
     9    if (progressBar.length === 0 || postContent.length === 0) {
     10        return;
     11    }
     12
     13    var postHeight = postContent.height();
     14    var windowHeight = $(window).height();
     15    var scrollPercent;
     16    var lastScrollTop = 0;
     17    var ticking = false;
     18
     19    // Enhanced scroll handler with performance optimization
     20    function updateProgress() {
     21        var scrollPosition = $(window).scrollTop();
     22        var postOffset = postContent.offset().top;
     23        var postBottom = postOffset + postHeight;
     24       
     25        // Calculate progress more accurately
     26        if (scrollPosition < postOffset) {
     27            scrollPercent = 0;
     28        } else if (scrollPosition > postBottom - windowHeight) {
     29            scrollPercent = 100;
     30        } else {
     31            var scrollableDistance = postHeight - windowHeight;
     32            var scrolledDistance = scrollPosition - postOffset;
     33            scrollPercent = Math.min(100, Math.max(0, (scrolledDistance / scrollableDistance) * 100));
     34        }
     35
     36        // Update progress bar with smooth animation
     37        progressBar.css('width', scrollPercent + '%');
     38
     39        // Add animation class when progress is high
     40        if (scrollPercent > 90) {
     41            progressBar.addClass('animated');
     42        } else {
     43            progressBar.removeClass('animated');
     44        }
     45
     46        // Update reading time position if it exists
     47        if (readingTime.length > 0) {
     48            var timeOpacity = Math.max(0.3, Math.min(1, scrollPercent / 100));
     49            readingTime.css('opacity', timeOpacity);
     50        }
     51
     52        ticking = false;
     53    }
     54
     55    // Throttled scroll handler for better performance
     56    function requestTick() {
     57        if (!ticking) {
     58            requestAnimationFrame(updateProgress);
     59            ticking = true;
     60        }
     61    }
     62
     63    // Bind scroll event
     64    $(window).on('scroll', requestTick);
     65
     66    // Handle window resize
     67    $(window).on('resize', function() {
     68        // Recalculate dimensions after a short delay
     69        setTimeout(function() {
     70            postHeight = postContent.height();
     71            windowHeight = $(window).height();
     72        }, 100);
     73    });
     74
     75    // Enhanced reading time calculation
     76    function calculateReadingTime() {
     77        var content = postContent.text();
     78        var wordCount = content.trim().split(/\s+/).length;
     79        var readingTimeMinutes = Math.ceil(wordCount / 200); // Average reading speed: 200 words per minute
     80       
     81        if (readingTimeMinutes < 1) {
     82            return 'Less than 1 min read';
     83        } else if (readingTimeMinutes === 1) {
     84            return '1 min read';
     85        } else {
     86            return readingTimeMinutes + ' min read';
     87        }
     88    }
     89
     90    // Update reading time if element exists
     91    if (readingTime.length > 0) {
     92        readingTime.text(calculateReadingTime());
     93    }
     94
     95    // Add keyboard navigation support
     96    $(document).keydown(function(e) {
     97        // Space bar to scroll down
     98        if (e.keyCode === 32 && e.target === document.body) {
     99            e.preventDefault();
     100            $('html, body').animate({
     101                scrollTop: $(window).scrollTop() + windowHeight * 0.8
     102            }, 300);
     103        }
     104       
     105        // Arrow keys for navigation
     106        if (e.keyCode === 40) { // Down arrow
     107            e.preventDefault();
     108            $('html, body').animate({
     109                scrollTop: $(window).scrollTop() + 100
     110            }, 200);
     111        }
     112       
     113        if (e.keyCode === 38) { // Up arrow
     114            e.preventDefault();
     115            $('html, body').animate({
     116                scrollTop: $(window).scrollTop() - 100
     117            }, 200);
     118        }
     119    });
     120
     121    // Add touch gesture support for mobile
     122    var touchStartY = 0;
     123    var touchEndY = 0;
     124
     125    $(document).on('touchstart', function(e) {
     126        touchStartY = e.originalEvent.touches[0].clientY;
     127    });
     128
     129    $(document).on('touchend', function(e) {
     130        touchEndY = e.originalEvent.changedTouches[0].clientY;
     131        handleSwipe();
     132    });
     133
     134    function handleSwipe() {
     135        var swipeDistance = touchStartY - touchEndY;
     136        var minSwipeDistance = 50;
     137
     138        if (Math.abs(swipeDistance) > minSwipeDistance) {
     139            if (swipeDistance > 0) {
     140                // Swipe up - scroll down
     141                $('html, body').animate({
     142                    scrollTop: $(window).scrollTop() + windowHeight * 0.5
     143                }, 300);
     144            } else {
     145                // Swipe down - scroll up
     146                $('html, body').animate({
     147                    scrollTop: $(window).scrollTop() - windowHeight * 0.5
     148                }, 300);
    14149            }
    15         );
     150        }
    16151    }
    17 );
     152
     153    // Add intersection observer for better performance
     154    if ('IntersectionObserver' in window) {
     155        var observer = new IntersectionObserver(function(entries) {
     156            entries.forEach(function(entry) {
     157                if (entry.isIntersecting) {
     158                    // Post content is visible, enable progress tracking
     159                    $(window).on('scroll', requestTick);
     160                } else {
     161                    // Post content is not visible, disable progress tracking
     162                    $(window).off('scroll', requestTick);
     163                }
     164            });
     165        });
     166
     167        observer.observe(postContent[0]);
     168    }
     169
     170    // Initial progress calculation
     171    updateProgress();
     172});

  • blog-reading-progress-bar/trunk/assets/style.css

    r3009602 r3327758  
    88    z-index: 9999;
    99    transition: width 0.2s ease;
    10   }
     10}
     11
     12/* Enhanced styling for new features */
     13#reading-progress-bar {
     14    /* Default styles that can be overridden by admin settings */
     15    border-radius: 0;
     16    opacity: 1;
     17    box-shadow: none;
     18    border: none;
     19}
     20
     21/* Reading time display */
     22#reading-time {
     23    position: fixed;
     24    top: 42px;
     25    right: 20px;
     26    background: rgba(0, 0, 0, 0.8);
     27    color: white;
     28    padding: 8px 12px;
     29    border-radius: 4px;
     30    font-size: 12px;
     31    font-weight: 500;
     32    z-index: 9998;
     33    backdrop-filter: blur(10px);
     34    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     35    transition: opacity 0.3s ease;
     36}
     37
     38/* Responsive adjustments */
     39@media (max-width: 768px) {
     40    #reading-progress-bar {
     41        top: 46px; /* Account for mobile admin bar */
     42    }
     43   
     44    #reading-time {
     45        top: 56px;
     46        right: 10px;
     47        font-size: 11px;
     48        padding: 6px 10px;
     49    }
     50}
     51
     52/* Animation for progress bar */
     53@keyframes progress-glow {
     54    0% { box-shadow: 0 0 5px currentColor; }
     55    50% { box-shadow: 0 0 20px currentColor; }
     56    100% { box-shadow: 0 0 5px currentColor; }
     57}
     58
     59#reading-progress-bar.animated {
     60    animation: progress-glow 2s ease-in-out infinite;
     61}
     62
     63/* High contrast mode support */
     64@media (prefers-contrast: high) {
     65    #reading-progress-bar {
     66        border: 2px solid #000;
     67    }
     68   
     69    #reading-time {
     70        border: 2px solid #000;
     71        background: #000;
     72    }
     73}
     74
     75/* Reduced motion support */
     76@media (prefers-reduced-motion: reduce) {
     77    #reading-progress-bar {
     78        transition: none;
     79    }
     80   
     81    #reading-time {
     82        transition: none;
     83    }
     84}

  • blog-reading-progress-bar/trunk/blog-reading-progress.php

    r3239424 r3327758  
    33 * Plugin Name:       Reading Progress Bar
    44 * Plugin URI:        https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/
    5  * Description:       Adds a reading progress bar to blog posts.
    6  * Version:           1.0.7
     5 * Description:       Adds a reading progress bar to blog posts with advanced customization options.
     6 * Version:           2.0.0
    77 * Requires at least: 5.6
    88 * Requires PHP:      7.3
    … …  
    3535         * @var version.
    3636         */
    37         protected static $version = '1.0.6';
     37        protected static $version = '2.0.0';
    3838
    3939        /**
    … …  
    6969            add_action('add_meta_boxes', array($this, 'reading_progress_bar_meta_box'));
    7070            add_action('plugins_loaded', array($this, 'brp_load_plugin_textdomain'));
     71            add_action('admin_enqueue_scripts', array($this, 'admin_scripts'));
    7172        }
    7273
    … …  
    7778        {
    7879            load_plugin_textdomain('brp', false, dirname(plugin_basename(__FILE__)) . '/languages/');
     80        }
     81
     82        /**
     83         * Load admin scripts and styles
     84         */
     85        public function admin_scripts($hook)
     86        {
     87            if ('settings_page_brp-reading-progress-bar-settings' !== $hook) {
     88                return;
     89            }
     90
     91            wp_enqueue_style('wp-color-picker');
     92            wp_enqueue_script('wp-color-picker');
     93            wp_enqueue_script('brp-admin-script', plugin_dir_url(__FILE__) . 'assets/admin.js', array('jquery', 'wp-color-picker'), self::$version, true);
     94            wp_enqueue_style('brp-admin-style', plugin_dir_url(__FILE__) . 'assets/admin.css', array(), self::$version);
    7995        }
    8096
    … …  
    94110            $options = get_option('brp_reading_progress_bar_options');
    95111
    96             // Set the custom color if provided.
    97             $progress_bar_color = isset($options['color']) ? $options['color'] : '#000';
    98             wp_add_inline_style('brp_reading-progress-bar-style', '#reading-progress-bar { background-color: ' . $progress_bar_color . '; }');
     112            // Build custom CSS
     113            $custom_css = $this->build_custom_css($options);
     114            wp_add_inline_style('brp_reading-progress-bar-style', $custom_css);
     115        }
     116
     117        /**
     118         * Build custom CSS based on options
     119         */
     120        private function build_custom_css($options)
     121        {
     122            $css = '#reading-progress-bar {';
     123           
     124            // Background color or gradient
     125            $color_type = isset($options['color_type']) ? $options['color_type'] : 'solid';
     126            $use_gradient = isset($options['use_gradient']) ? $options['use_gradient'] : false;
     127           
     128            if (($color_type === 'gradient' || $use_gradient) && !empty($options['gradient_start']) && !empty($options['gradient_end'])) {
     129                $css .= 'background: linear-gradient(90deg, ' . esc_attr($options['gradient_start']) . ' 0%, ' . esc_attr($options['gradient_end']) . ' 100%);';
     130            } else {
     131                $progress_bar_color = isset($options['color']) ? $options['color'] : '#667eea';
     132                $css .= 'background-color: ' . esc_attr($progress_bar_color) . ';';
     133            }
     134
     135            // Height
     136            $height = isset($options['height']) ? $options['height'] : '4';
     137            $css .= 'height: ' . esc_attr($height) . 'px;';
     138
     139            // Position
     140            $position = isset($options['position']) ? $options['position'] : 'top';
     141            if ($position === 'bottom') {
     142                $css .= 'top: auto; bottom: 0;';
     143            }
     144
     145            // Border radius
     146            if (!empty($options['border_radius'])) {
     147                $css .= 'border-radius: ' . esc_attr($options['border_radius']) . 'px;';
     148            }
     149
     150            // Shadow
     151            if (!empty($options['shadow_enabled'])) {
     152                $shadow_color = isset($options['shadow_color']) ? $options['shadow_color'] : 'rgba(0,0,0,0.3)';
     153                $shadow_blur = isset($options['shadow_blur']) ? $options['shadow_blur'] : '5';
     154                $css .= 'box-shadow: 0 2px ' . esc_attr($shadow_blur) . 'px ' . esc_attr($shadow_color) . ';';
     155            }
     156
     157            // Opacity
     158            if (!empty($options['opacity'])) {
     159                $css .= 'opacity: ' . esc_attr($options['opacity']) . ';';
     160            }
     161
     162            // Border
     163            if (!empty($options['border_enabled'])) {
     164                $border_color = isset($options['border_color']) ? $options['border_color'] : '#000';
     165                $border_width = isset($options['border_width']) ? $options['border_width'] : '1';
     166                $css .= 'border: ' . esc_attr($border_width) . 'px solid ' . esc_attr($border_color) . ';';
     167            }
     168
     169            $css .= '}';
     170
     171            return $css;
    99172        }
    100173
    … …  
    109182            // Determine where to display the progress bar.
    110183            $show_on_posts = isset($options['show_on_posts']) ? $options['show_on_posts'] : false;
    111 
    112             // Get the height option.
    113             $progress_bar_height = isset($options['height']) ? $options['height'] : '2';
    114 
    115             if ($this->should_display_reading_progress_bar() && is_singular('post') && ($show_on_posts)) {
     184            $show_on_pages = isset($options['show_on_pages']) ? $options['show_on_pages'] : false;
     185
     186            if ($this->should_display_reading_progress_bar() &&
     187                (($show_on_posts && is_singular('post')) || ($show_on_pages && is_singular('page')))) {
     188               
    116189                $admin_bar_height = is_admin_bar_showing() ? $this->get_admin_bar_height() : 0;
    117                 echo '<div id="reading-progress-bar" style="top: ' . esc_attr($admin_bar_height) . 'px; height: ' . esc_attr($progress_bar_height) . 'px;"></div>';
    118             }
     190                $position = isset($options['position']) ? $options['position'] : 'top';
     191               
     192                $style = '';
     193                if ($position === 'top') {
     194                    $style = 'top: ' . esc_attr($admin_bar_height) . 'px;';
     195                } elseif ($position === 'bottom') {
     196                    $style = 'bottom: 0;';
     197                }
     198
     199                echo '<div id="reading-progress-bar" style="' . $style . '"></div>';
     200               
     201                // Add reading time if enabled
     202                if (!empty($options['show_reading_time'])) {
     203                    $reading_time = $this->calculate_reading_time();
     204                    echo '<div id="reading-time" style="position: fixed; top: ' . esc_attr($admin_bar_height + 10) . 'px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; z-index: 9998;">' . esc_html($reading_time) . '</div>';
     205                }
     206            }
     207        }
     208
     209        /**
     210         * Calculate reading time
     211         */
     212        private function calculate_reading_time()
     213        {
     214            $content = get_the_content();
     215            $word_count = str_word_count(strip_tags($content));
     216            $reading_time = ceil($word_count / 200); // Average reading speed: 200 words per minute
     217           
     218            return sprintf(__('%d min read', 'blog-reading-progress'), $reading_time);
    119219        }
    120220
    … …  
    139239                'brp_reading_progress_bar_options',
    140240                array(
    141                     'color' => '#000',
     241                    'color' => '#667eea',
     242                    'color_type' => 'solid',
     243                    'gradient_start' => '#667eea',
     244                    'gradient_end' => '#764ba2',
     245                    'use_gradient' => false,
     246                    'height' => '4',
     247                    'position' => 'top',
     248                    'border_radius' => '0',
     249                    'shadow_enabled' => false,
     250                    'shadow_color' => 'rgba(0,0,0,0.3)',
     251                    'shadow_blur' => '5',
     252                    'opacity' => '1',
     253                    'border_enabled' => false,
     254                    'border_color' => '#000',
     255                    'border_width' => '1',
    142256                    'show_on_posts' => true,
     257                    'show_on_pages' => false,
     258                    'show_reading_time' => false,
    143259                )
    144260            );
    … …  
    151267        public function reading_progress_bar_options_page()
    152268        {
    153             add_options_page(__('Reading Progress Bar Settings', 'blog-reading-progres'), __('Reading Progress Bar', 'blog-reading-progress'), 'manage_options', 'brp-reading-progress-bar-settings', array($this, 'reading_progress_bar_render_options_page'));
     269            add_options_page(__('Reading Progress Bar Settings', 'blog-reading-progress'), __('Reading Progress Bar', 'blog-reading-progress'), 'manage_options', 'brp-reading-progress-bar-settings', array($this, 'reading_progress_bar_render_options_page'));
    154270        }
    155271
    … …  
    169285            add_meta_box(
    170286                'brp_reading_progress_bar_meta_box',
    171                 __('Reading Progress Bar', 'blog-reading-progres'),
     287                __('Reading Progress Bar', 'blog-reading-progress'),
    172288                array($this, 'reading_progress_bar_meta_box_callback'),
    173289                'post',
    … …  
    189305                <label for="brp_reading-progress-bar-checkbox">
    190306                    <input type="checkbox" name="brp_reading_progress_bar_display" id="brp_reading-progress-bar-checkbox" value="1" <?php checked($checked);?> />
    191                     <span> <?php esc_html_e('Display reading progress bar on this post', 'blog-reading-progres');?> </span>
     307                    <span> <?php esc_html_e('Display reading progress bar on this post', 'blog-reading-progress');?> </span>
    192308                </label>
    193309            <?php
    194 }
     310        }
    195311
    196312        /**
    … …  
    206322
    207323            if (!wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['brp_reading_progress_bar_meta_box_nonce'])), 'brp_reading_progress_bar_meta_box')) {
    208 
    209324                return;
    210325            }
    … …  
    239354        }
    240355
     356        /**
     357         * Get number of posts with progress bar enabled
     358         */
     359        public function get_posts_with_progress_bar()
     360        {
     361            $args = array(
     362                'post_type' => 'post',
     363                'post_status' => 'publish',
     364                'meta_query' => array(
     365                    array(
     366                        'key' => 'brp_reading_progress_bar_display',
     367                        'value' => '1',
     368                        'compare' => '='
     369                    )
     370                ),
     371                'posts_per_page' => -1,
     372                'fields' => 'ids'
     373            );
     374           
     375            $posts = get_posts($args);
     376            return count($posts);
     377        }
     378
     379        /**
     380         * Get total number of posts
     381         */
     382        public function get_total_posts()
     383        {
     384            $args = array(
     385                'post_type' => 'post',
     386                'post_status' => 'publish',
     387                'posts_per_page' => -1,
     388                'fields' => 'ids'
     389            );
     390           
     391            $posts = get_posts($args);
     392            return count($posts);
     393        }
     394
    241395    }
    242396

  • blog-reading-progress-bar/trunk/inc/reader-options.php

    r3176866 r3327758  
    1 <div class="wrap">
    2     <h2><?php esc_html_e('Reading Progress Bar Settings', 'blog-reading-progress');?></h2>
    3     <form method="post" action="options.php">
    4         <?php settings_fields('brp_reading_progress_bar_options_group');?>
    5         <?php $options = get_option('brp_reading_progress_bar_options');?>
    6 
    7         <h3><?php esc_html_e('Appearance', 'blog-reading-progress');?> </h3>
    8         <table class="form-table">
    9             <tr valign="top">
    10                 <th scope="row"><?php esc_html_e('Color', 'blog-reading-progress');?> :</th>
    11                 <td><input type="color" name="brp_reading_progress_bar_options[color]" value="<?php echo esc_attr($options['color']); ?>" /></td>
    12             </tr>
    13             <tr valign="top">
    14                 <th scope="row"><?php esc_html_e('Height', 'blog-reading-progress');?>:</th>
    15                 <td><input type="number" name="brp_reading_progress_bar_options[height]" min="1" step="1" value="<?php echo esc_attr($options['height'] ?? ''); ?>" /> <?php esc_html_e('pixels', 'blog-reading-progress');?></td>
    16             </tr>
    17         </table>
    18 
    19         <h3><?php esc_html_e('Visibility', 'blog-reading-progres');?> </h3>
    20         <table class="form-table">
    21             <tr valign="top">
    22                 <th scope="row"> <?php esc_html_e('Show on Posts', 'blog-reading-progress');?> :</th>
    23                 <td><input type="checkbox" name="brp_reading_progress_bar_options[show_on_posts]" value="1" <?php checked($options['show_on_posts'] ?? '', true);?> /></td>
    24             </tr>
    25         </table>
    26         <?php submit_button();?>
    27     </form>
     1<?php
     2// Prevent direct access
     3if (!defined('ABSPATH')) {
     4    exit;
     5}
     6
     7$options = get_option('brp_reading_progress_bar_options');
     8?>
     9
     10<div class="wrap brp-dashboard">
     11    <div class="brp-header">
     12        <div class="brp-header-content">
     13            <h1><?php esc_html_e('Reading Progress Bar', 'blog-reading-progress'); ?></h1>
     14            <p class="description"><?php esc_html_e('Customize your reading progress bar with an intuitive interface', 'blog-reading-progress'); ?></p>
     15        </div>
     16        <div class="brp-header-actions">
     17            <button type="button" class="button button-primary brp-save-btn" onclick="document.getElementById('brp-settings-form').submit();">
     18                <span class="dashicons dashicons-saved"></span>
     19                <?php esc_html_e('Save Changes', 'blog-reading-progress'); ?>
     20            </button>
     21        </div>
     22    </div>
     23
     24    <div class="brp-main-container">
     25        <!-- Settings Form -->
     26        <div class="brp-settings-panel">
     27            <form method="post" action="options.php" id="brp-settings-form" class="brp-form">
     28                <?php settings_fields('brp_reading_progress_bar_options_group'); ?>
     29               
     30                <!-- Tab Navigation -->
     31                <div class="brp-tabs">
     32                    <button type="button" class="brp-tab-btn active" data-tab="appearance">
     33                        <span class="dashicons dashicons-admin-appearance"></span>
     34                        <?php esc_html_e('Appearance', 'blog-reading-progress'); ?>
     35                    </button>
     36                    <button type="button" class="brp-tab-btn" data-tab="display">
     37                        <span class="dashicons dashicons-visibility"></span>
     38                        <?php esc_html_e('Display', 'blog-reading-progress'); ?>
     39                    </button>
     40                    <button type="button" class="brp-tab-btn" data-tab="advanced">
     41                        <span class="dashicons dashicons-admin-tools"></span>
     42                        <?php esc_html_e('Advanced', 'blog-reading-progress'); ?>
     43                    </button>
     44                </div>
     45
     46                <!-- Tab Content -->
     47                <div class="brp-tab-content">
     48                    <!-- Appearance Tab -->
     49                    <div id="appearance" class="brp-tab-panel active">
     50                        <div class="brp-section">
     51                            <h3><?php esc_html_e('Color & Style', 'blog-reading-progress'); ?></h3>
     52                           
     53                            <div class="brp-option-row">
     54                                <div class="brp-option-col">
     55                                    <label class="brp-label"><?php esc_html_e('Color Type', 'blog-reading-progress'); ?></label>
     56                                    <div class="brp-radio-group">
     57                                        <label class="brp-radio">
     58                                            <input type="radio" name="brp_reading_progress_bar_options[color_type]" value="solid" <?php checked(($options['use_gradient'] ?? false) ? 'gradient' : 'solid', 'solid'); ?> />
     59                                            <span class="radio-custom"></span>
     60                                            <?php esc_html_e('Solid Color', 'blog-reading-progress'); ?>
     61                                        </label>
     62                                        <label class="brp-radio">
     63                                            <input type="radio" name="brp_reading_progress_bar_options[color_type]" value="gradient" <?php checked(($options['use_gradient'] ?? false) ? 'gradient' : 'solid', 'gradient'); ?> />
     64                                            <span class="radio-custom"></span>
     65                                            <?php esc_html_e('Gradient', 'blog-reading-progress'); ?>
     66                                        </label>
     67                                    </div>
     68                                </div>
     69                            </div>
     70
     71                            <div class="brp-option-row" id="solid-color-options">
     72                                <div class="brp-option-col">
     73                                    <label class="brp-label"><?php esc_html_e('Color', 'blog-reading-progress'); ?></label>
     74                                    <input type="color" name="brp_reading_progress_bar_options[color]" value="<?php echo esc_attr($options['color'] ?? '#667eea'); ?>" class="brp-color-picker" />
     75                                </div>
     76                            </div>
     77
     78                            <div class="brp-option-row" id="gradient-options" style="display: <?php echo ($options['use_gradient'] ?? false) ? 'flex' : 'none'; ?>;">
     79                                <div class="brp-option-col">
     80                                    <label class="brp-label"><?php esc_html_e('Start Color', 'blog-reading-progress'); ?></label>
     81                                    <input type="color" name="brp_reading_progress_bar_options[gradient_start]" value="<?php echo esc_attr($options['gradient_start'] ?? '#667eea'); ?>" class="brp-color-picker" />
     82                                </div>
     83                                <div class="brp-option-col">
     84                                    <label class="brp-label"><?php esc_html_e('End Color', 'blog-reading-progress'); ?></label>
     85                                    <input type="color" name="brp_reading_progress_bar_options[gradient_end]" value="<?php echo esc_attr($options['gradient_end'] ?? '#764ba2'); ?>" class="brp-color-picker" />
     86                                </div>
     87                            </div>
     88                        </div>
     89
     90                        <div class="brp-section">
     91                            <h3><?php esc_html_e('Size & Position', 'blog-reading-progress'); ?></h3>
     92                           
     93                            <div class="brp-option-row">
     94                                <div class="brp-option-col">
     95                                    <label class="brp-label"><?php esc_html_e('Height', 'blog-reading-progress'); ?></label>
     96                                    <div class="brp-slider-container">
     97                                        <input type="range" name="brp_reading_progress_bar_options[height]" min="1" max="20" step="1" value="<?php echo esc_attr($options['height'] ?? '4'); ?>" class="brp-range" />
     98                                        <span class="brp-range-value"><?php echo esc_html($options['height'] ?? '4'); ?>px</span>
     99                                    </div>
     100                                </div>
     101                                <div class="brp-option-col">
     102                                    <label class="brp-label"><?php esc_html_e('Position', 'blog-reading-progress'); ?></label>
     103                                    <div class="brp-button-group">
     104                                        <button type="button" class="brp-btn <?php echo ($options['position'] ?? 'top') === 'top' ? 'active' : ''; ?>" data-value="top">
     105                                            <?php esc_html_e('Top', 'blog-reading-progress'); ?>
     106                                        </button>
     107                                        <button type="button" class="brp-btn <?php echo ($options['position'] ?? 'top') === 'bottom' ? 'active' : ''; ?>" data-value="bottom">
     108                                            <?php esc_html_e('Bottom', 'blog-reading-progress'); ?>
     109                                        </button>
     110                                        <input type="hidden" name="brp_reading_progress_bar_options[position]" value="<?php echo esc_attr($options['position'] ?? 'top'); ?>" />
     111                                    </div>
     112                                </div>
     113                            </div>
     114
     115                            <div class="brp-option-row">
     116                                <div class="brp-option-col">
     117                                    <label class="brp-label"><?php esc_html_e('Border Radius', 'blog-reading-progress'); ?></label>
     118                                    <div class="brp-slider-container">
     119                                        <input type="range" name="brp_reading_progress_bar_options[border_radius]" min="0" max="50" step="1" value="<?php echo esc_attr($options['border_radius'] ?? '0'); ?>" class="brp-range" />
     120                                        <span class="brp-range-value"><?php echo esc_html($options['border_radius'] ?? '0'); ?>px</span>
     121                                    </div>
     122                                </div>
     123                                <div class="brp-option-col">
     124                                    <label class="brp-label"><?php esc_html_e('Opacity', 'blog-reading-progress'); ?></label>
     125                                    <div class="brp-slider-container">
     126                                        <input type="range" name="brp_reading_progress_bar_options[opacity]" min="0.1" max="1" step="0.1" value="<?php echo esc_attr($options['opacity'] ?? '1'); ?>" class="brp-range" />
     127                                        <span class="brp-range-value"><?php echo esc_html($options['opacity'] ?? '1'); ?></span>
     128                                    </div>
     129                                </div>
     130                            </div>
     131                        </div>
     132                    </div>
     133
     134                    <!-- Display Tab -->
     135                    <div id="display" class="brp-tab-panel">
     136                        <div class="brp-section">
     137                            <h3><?php esc_html_e('Where to Show', 'blog-reading-progress'); ?></h3>
     138                           
     139                            <div class="brp-toggle-group">
     140                                <div class="brp-toggle">
     141                                    <div class="brp-switch">
     142                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_on_posts]" value="1" <?php checked($options['show_on_posts'] ?? true); ?> />
     143                                        <span class="brp-slider"></span>
     144                                    </div>
     145                                    <div class="brp-toggle-content">
     146                                        <span class="brp-toggle-label"><?php esc_html_e('Show on Posts', 'blog-reading-progress'); ?></span>
     147                                        <span class="brp-toggle-desc"><?php esc_html_e('Display progress bar on blog posts', 'blog-reading-progress'); ?></span>
     148                                    </div>
     149                                </div>
     150
     151                                <div class="brp-toggle">
     152                                    <div class="brp-switch">
     153                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_on_pages]" value="1" <?php checked($options['show_on_pages'] ?? false); ?> />
     154                                        <span class="brp-slider"></span>
     155                                    </div>
     156                                    <div class="brp-toggle-content">
     157                                        <span class="brp-toggle-label"><?php esc_html_e('Show on Pages', 'blog-reading-progress'); ?></span>
     158                                        <span class="brp-toggle-desc"><?php esc_html_e('Display progress bar on pages', 'blog-reading-progress'); ?></span>
     159                                    </div>
     160                                </div>
     161
     162                                <div class="brp-toggle">
     163                                    <div class="brp-switch">
     164                                        <input type="checkbox" name="brp_reading_progress_bar_options[show_reading_time]" value="1" <?php checked($options['show_reading_time'] ?? false); ?> />
     165                                        <span class="brp-slider"></span>
     166                                    </div>
     167                                    <div class="brp-toggle-content">
     168                                        <span class="brp-toggle-label"><?php esc_html_e('Show Reading Time', 'blog-reading-progress'); ?></span>
     169                                        <span class="brp-toggle-desc"><?php esc_html_e('Display estimated reading time', 'blog-reading-progress'); ?></span>
     170                                    </div>
     171                                </div>
     172                            </div>
     173                        </div>
     174
     175                        <div class="brp-section">
     176                            <h3><?php esc_html_e('Per-Post Settings', 'blog-reading-progress'); ?></h3>
     177                            <div class="brp-info-box">
     178                                <span class="dashicons dashicons-info"></span>
     179                                <p><?php esc_html_e('You can enable or disable the progress bar for individual posts by editing each post and looking for the "Reading Progress Bar" option in the sidebar.', 'blog-reading-progress'); ?></p>
     180                            </div>
     181                        </div>
     182                    </div>
     183
     184                    <!-- Advanced Tab -->
     185                    <div id="advanced" class="brp-tab-panel">
     186                        <div class="brp-section">
     187                            <h3><?php esc_html_e('Effects', 'blog-reading-progress'); ?></h3>
     188                           
     189                            <div class="brp-toggle-group">
     190                                <div class="brp-toggle">
     191                                    <div class="brp-switch">
     192                                        <input type="checkbox" name="brp_reading_progress_bar_options[shadow_enabled]" value="1" <?php checked($options['shadow_enabled'] ?? false); ?> />
     193                                        <span class="brp-slider"></span>
     194                                    </div>
     195                                    <div class="brp-toggle-content">
     196                                        <span class="brp-toggle-label"><?php esc_html_e('Enable Shadow', 'blog-reading-progress'); ?></span>
     197                                        <span class="brp-toggle-desc"><?php esc_html_e('Add a shadow effect to the progress bar', 'blog-reading-progress'); ?></span>
     198                                    </div>
     199                                </div>
     200
     201                                <div class="brp-toggle">
     202                                    <div class="brp-switch">
     203                                        <input type="checkbox" name="brp_reading_progress_bar_options[border_enabled]" value="1" <?php checked($options['border_enabled'] ?? false); ?> />
     204                                        <span class="brp-slider"></span>
     205                                    </div>
     206                                    <div class="brp-toggle-content">
     207                                        <span class="brp-toggle-label"><?php esc_html_e('Enable Border', 'blog-reading-progress'); ?></span>
     208                                        <span class="brp-toggle-desc"><?php esc_html_e('Add a border around the progress bar', 'blog-reading-progress'); ?></span>
     209                                    </div>
     210                                </div>
     211                            </div>
     212
     213                            <div class="brp-option-row" id="shadow-options" style="display: <?php echo ($options['shadow_enabled'] ?? false) ? 'flex' : 'none'; ?>;">
     214                                <div class="brp-option-col">
     215                                    <label class="brp-label"><?php esc_html_e('Shadow Color', 'blog-reading-progress'); ?></label>
     216                                    <input type="color" name="brp_reading_progress_bar_options[shadow_color]" value="<?php echo esc_attr($options['shadow_color'] ?? 'rgba(0,0,0,0.3)'); ?>" class="brp-color-picker" />
     217                                </div>
     218                                <div class="brp-option-col">
     219                                    <label class="brp-label"><?php esc_html_e('Shadow Blur', 'blog-reading-progress'); ?></label>
     220                                    <div class="brp-slider-container">
     221                                        <input type="range" name="brp_reading_progress_bar_options[shadow_blur]" min="1" max="20" step="1" value="<?php echo esc_attr($options['shadow_blur'] ?? '5'); ?>" class="brp-range" />
     222                                        <span class="brp-range-value"><?php echo esc_html($options['shadow_blur'] ?? '5'); ?>px</span>
     223                                    </div>
     224                                </div>
     225                            </div>
     226
     227                            <div class="brp-option-row" id="border-options" style="display: <?php echo ($options['border_enabled'] ?? false) ? 'flex' : 'none'; ?>;">
     228                                <div class="brp-option-col">
     229                                    <label class="brp-label"><?php esc_html_e('Border Color', 'blog-reading-progress'); ?></label>
     230                                    <input type="color" name="brp_reading_progress_bar_options[border_color]" value="<?php echo esc_attr($options['border_color'] ?? '#000'); ?>" class="brp-color-picker" />
     231                                </div>
     232                                <div class="brp-option-col">
     233                                    <label class="brp-label"><?php esc_html_e('Border Width', 'blog-reading-progress'); ?></label>
     234                                    <div class="brp-slider-container">
     235                                        <input type="range" name="brp_reading_progress_bar_options[border_width]" min="1" max="10" step="1" value="<?php echo esc_attr($options['border_width'] ?? '1'); ?>" class="brp-range" />
     236                                        <span class="brp-range-value"><?php echo esc_html($options['border_width'] ?? '1'); ?>px</span>
     237                                    </div>
     238                                </div>
     239                            </div>
     240                        </div>
     241                    </div>
     242                </div>
     243            </form>
     244        </div>
     245
     246        <!-- Live Preview Sidebar -->
     247        <div class="brp-preview-sidebar">
     248            <div class="brp-preview-card">
     249                <h3><?php esc_html_e('Live Preview', 'blog-reading-progress'); ?></h3>
     250                <div class="brp-preview-container">
     251                    <div class="brp-preview-header">
     252                        <span class="brp-preview-title"><?php esc_html_e('Sample Blog Post', 'blog-reading-progress'); ?></span>
     253                    </div>
     254                    <div id="brp-preview-bar" class="brp-preview-bar"></div>
     255                    <div class="brp-preview-content">
     256                        <div class="brp-preview-text">
     257                            <p><?php esc_html_e('This is a sample blog post content. The progress bar above shows how your customized progress bar will look on your actual posts.', 'blog-reading-progress'); ?></p>
     258                            <p><?php esc_html_e('As you scroll through the content, the progress bar will fill up to show reading progress.', 'blog-reading-progress'); ?></p>
     259                        </div>
     260                    </div>
     261                </div>
     262            </div>
     263
     264            <div class="brp-stats-card">
     265                <h3><?php esc_html_e('Quick Stats', 'blog-reading-progress'); ?></h3>
     266                <div class="brp-stats-grid">
     267                    <div class="brp-stat-item">
     268                        <div class="brp-stat-icon">
     269                            <span class="dashicons dashicons-chart-bar"></span>
     270                        </div>
     271                        <div class="brp-stat-content">
     272                            <span class="brp-stat-number"><?php echo esc_html($this->get_posts_with_progress_bar()); ?></span>
     273                            <span class="brp-stat-label"><?php esc_html_e('Posts with Progress Bar', 'blog-reading-progress'); ?></span>
     274                        </div>
     275                    </div>
     276                    <div class="brp-stat-item">
     277                        <div class="brp-stat-icon">
     278                            <span class="dashicons dashicons-admin-post"></span>
     279                        </div>
     280                        <div class="brp-stat-content">
     281                            <span class="brp-stat-number"><?php echo esc_html($this->get_total_posts()); ?></span>
     282                            <span class="brp-stat-label"><?php esc_html_e('Total Posts', 'blog-reading-progress'); ?></span>
     283                        </div>
     284                    </div>
     285                </div>
     286            </div>
     287        </div>
     288    </div>
    28289</div>
     290
     291<script>
     292jQuery(document).ready(function($) {
     293    // Initialize color pickers
     294    $('.brp-color-picker').wpColorPicker({
     295        change: function(event, ui) {
     296            updatePreview();
     297        }
     298    });
     299
     300    // Tab functionality
     301    $('.brp-tab-btn').on('click', function() {
     302        var tabId = $(this).data('tab');
     303       
     304        // Update active tab button
     305        $('.brp-tab-btn').removeClass('active');
     306        $(this).addClass('active');
     307       
     308        // Update active tab panel
     309        $('.brp-tab-panel').removeClass('active');
     310        $('#' + tabId).addClass('active');
     311    });
     312
     313    // Color type radio buttons
     314    $('input[name="brp_reading_progress_bar_options[color_type]"]').on('change', function() {
     315        var colorType = $(this).val();
     316        if (colorType === 'solid') {
     317            $('#solid-color-options').show();
     318            $('#gradient-options').hide();
     319        } else {
     320            $('#solid-color-options').hide();
     321            $('#gradient-options').show();
     322        }
     323        updatePreview();
     324    });
     325
     326    // Toggle effects
     327    $('input[name="brp_reading_progress_bar_options[shadow_enabled]"]').on('change', function() {
     328        $('#shadow-options').slideToggle(this.checked);
     329        updatePreview();
     330    });
     331
     332    $('input[name="brp_reading_progress_bar_options[border_enabled]"]').on('change', function() {
     333        $('#border-options').slideToggle(this.checked);
     334        updatePreview();
     335    });
     336
     337    // Position buttons
     338    $('.brp-btn').on('click', function() {
     339        var value = $(this).data('value');
     340        $(this).siblings().removeClass('active');
     341        $(this).addClass('active');
     342        $(this).siblings('input[type="hidden"]').val(value);
     343        updatePreview();
     344    });
     345
     346    // Range sliders
     347    $('.brp-range').on('input', function() {
     348        $(this).next('.brp-range-value').text($(this).val() + ($(this).attr('name').includes('height') || $(this).attr('name').includes('border_width') || $(this).attr('name').includes('shadow_blur') ? 'px' : ''));
     349        updatePreview();
     350    });
     351
     352    // Enhanced preview function
     353    function updatePreview() {
     354        var colorType = $('input[name="brp_reading_progress_bar_options[color_type]"]:checked').val();
     355        var color = $('input[name="brp_reading_progress_bar_options[color]"]').val();
     356        var gradientStart = $('input[name="brp_reading_progress_bar_options[gradient_start]"]').val();
     357        var gradientEnd = $('input[name="brp_reading_progress_bar_options[gradient_end]"]').val();
     358        var height = $('input[name="brp_reading_progress_bar_options[height]"]').val();
     359        var borderRadius = $('input[name="brp_reading_progress_bar_options[border_radius]"]').val();
     360        var opacity = $('input[name="brp_reading_progress_bar_options[opacity]"]').val();
     361        var position = $('input[name="brp_reading_progress_bar_options[position]"]').val();
     362        var shadowEnabled = $('input[name="brp_reading_progress_bar_options[shadow_enabled]"]').is(':checked');
     363        var shadowColor = $('input[name="brp_reading_progress_bar_options[shadow_color]"]').val();
     364        var shadowBlur = $('input[name="brp_reading_progress_bar_options[shadow_blur]"]').val();
     365        var borderEnabled = $('input[name="brp_reading_progress_bar_options[border_enabled]"]').is(':checked');
     366        var borderColor = $('input[name="brp_reading_progress_bar_options[border_color]"]').val();
     367        var borderWidth = $('input[name="brp_reading_progress_bar_options[border_width]"]').val();
     368
     369        var css = {
     370            'height': height + 'px',
     371            'border-radius': borderRadius + 'px',
     372            'opacity': opacity
     373        };
     374
     375        // Background
     376        if (colorType === 'gradient') {
     377            css['background'] = 'linear-gradient(90deg, ' + gradientStart + ' 0%, ' + gradientEnd + ' 100%)';
     378        } else {
     379            css['background-color'] = color;
     380        }
     381
     382        // Shadow
     383        if (shadowEnabled) {
     384            css['box-shadow'] = '0 2px ' + shadowBlur + 'px ' + shadowColor;
     385        }
     386
     387        // Border
     388        if (borderEnabled) {
     389            css['border'] = borderWidth + 'px solid ' + borderColor;
     390        }
     391
     392        $('#brp-preview-bar').css(css);
     393    }
     394
     395    // Bind preview updates
     396    $('.brp-form input, .brp-form select').on('change input', updatePreview);
     397   
     398    // Initial preview
     399    updatePreview();
     400});
     401</script>

  • blog-reading-progress-bar/trunk/readme.txt

    r3239424 r3327758  
    22
    33Contributors: ifatwp
    4 Tags: progress bar, reading progress, blog, posts
    5 Requires PHP : 7.3
    6 Tested up to: WordPress 6.7.2
    7 Stable tag: 1.0.6
     4Tags: progress bar, blog, posts, reading time, user experience
     5Requires at least: 5.6
     6Requires PHP: 7.3
     7Tested up to: WordPress 6.8.1
     8Stable tag: 2.0.0
    89License: GPLv2 or later
    910License URI: http://www.gnu.org/licenses/gpl-2.0.txt
    1011
    11 
    12 Adds a reading progress bar to blog posts.
     12A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options.
    1313
    1414== Description ==
    1515
    16 The Reading Progress Bar plugin adds a progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     16The Reading Progress Bar plugin adds a beautiful, customizable progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user's progress.
     17
     18**Key Features:**
     19- 🎨 **Modern Dashboard**: Beautiful, intuitive admin interface with live preview
     20- 🌈 **Advanced Customization**: Gradient colors, shadows, borders, and effects
     21- 📱 **Responsive Design**: Works perfectly on desktop, tablet, and mobile
     22- ⚡ **Performance Optimized**: Smooth animations and efficient code
     23- 🎯 **Per-Post Control**: Enable/disable for individual posts
     24- 📊 **Reading Time**: Display estimated reading time
     25- 🎪 **Live Preview**: See changes in real-time as you adjust settings
    1726
    1827== Features ==
    1928
    20 - Automatically adds a reading progress bar to blog posts.
    21 - Customizable options to control the appearance and behavior of the progress bar.
    22 - Option to enable or disable the progress bar on specific posts.
    23 - Lightweight and easy to use.
     29### Core Functionality
     30- **Reading Progress Tracking**: Real-time progress bar that shows how much of the post has been read
     31- **Per-Post Control**: Enable/disable progress bar for individual posts
     32- **Reading Time Estimation**: Display estimated reading time for posts
     33- **Responsive Design**: Works perfectly on desktop, tablet, and mobile devices
     34
     35### Advanced Customization
     36- **Color Options**:
     37  - Solid color picker with WordPress native color picker
     38  - Gradient color support with start and end colors
     39  - Custom shadow colors and effects
     40  - Border color and width customization
     41
     42### Visual Effects
     43- **Position Control**: Place progress bar at top or bottom of screen
     44- **Size Customization**: Adjustable height (1-20px)
     45- **Border Radius**: Rounded corners (0-50px)
     46- **Opacity Control**: Adjust transparency (0.1-1.0)
     47- **Shadow Effects**: Customizable shadow with color and blur options
     48- **Border Styling**: Optional border with custom color and width
     49
     50### User Experience
     51- **Smooth Animations**: Fluid progress updates with CSS transitions
     52- **Performance Optimized**: Uses requestAnimationFrame for smooth scrolling
     53- **Keyboard Navigation**: Space bar and arrow key support
     54- **Touch Gestures**: Swipe support for mobile devices
     55- **Accessibility**: High contrast mode and reduced motion support
     56
     57### Dashboard Features
     58- **Modern Admin Interface**: Beautiful, responsive dashboard with tabs
     59- **Live Preview**: See changes in real-time as you adjust settings
     60- **Statistics**: View posts with progress bar enabled vs total posts
     61- **Organized Settings**: Grouped options for easy configuration
    2462
    2563== Installation ==
    2664
    27 1. Upload the `reading-progress-bar` folder to the `/wp-content/plugins/` directory.
    28 2. Activate the plugin through the 'Plugins' menu in WordPress.
    29 3. Go to 'Reading Progress Bar' in the WordPress dashboard to configure the plugin settings.
     651. Upload the `blog-reading-progress-bar` folder to the `/wp-content/plugins/` directory.
     662. Activate the plugin through the 'Plugins' screen in WordPress.
     673. Go to Settings > Reading Progress Bar to configure options.
    3068
    3169== Configuration ==
    3270
    33 1. Navigate to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard.
    34 2. Customize the options according to your preference, such as the color and height of the progress bar.
    35 3. Choose whether to display the progress bar on all posts or specific posts.
    36 4. Save your changes.
     71### Basic Settings
     721. Navigate to **Settings > Reading Progress Bar**
     732. Configure appearance options:
     74   - **Color**: Choose solid color or enable gradient
     75   - **Height**: Set progress bar height (1-20px)
     76   - **Position**: Top or bottom of screen
     77   - **Border Radius**: Add rounded corners
     78   - **Opacity**: Adjust transparency
     79
     80### Advanced Effects
     81- **Shadow**: Enable shadow with custom color and blur
     82- **Border**: Add border with custom color and width
     83- **Gradient**: Use gradient colors instead of solid color
     84
     85### Display Settings
     86- **Show on Posts**: Enable/disable for blog posts
     87- **Show on Pages**: Enable/disable for pages
     88- **Show Reading Time**: Display estimated reading time
     89
     90### Per-Post Settings
     91- Edit any post and look for the "Reading Progress Bar" meta box
     92- Check/uncheck to enable/disable for that specific post
    3793
    3894== Frequently Asked Questions ==
    … …  
    4096= How can I customize the appearance of the progress bar? =
    4197
    42 You can modify the color and height of the progress bar by navigating to 'Settings' > 'Reading Progress Bar' in the WordPress dashboard. Use the provided options to adjust the settings to your liking.
     98You can customize the progress bar through the modern dashboard interface. Navigate to 'Settings' > 'Reading Progress Bar' and use the tabbed interface to configure colors, effects, position, and more. The live preview shows changes instantly.
    4399
    44 = Can I enable the progress bar on specific posts only?
     100= Can I enable the progress bar on specific posts only? =
    45101
    46102Yes, you have the option to enable or disable the progress bar on individual posts. Edit a post and look for the "Reading Progress Bar" meta box in the sidebar. Check the box to display the progress bar on that post, or uncheck it to hide the progress bar.
    47103
     104= What new features are available in version 2.0.0? =
     105
     106Version 2.0.0 includes a complete redesign with:
     107- Modern tabbed dashboard interface
     108- Live preview functionality
     109- Gradient color support
     110- Shadow and border effects
     111- Reading time display
     112- Enhanced performance optimizations
     113- Better mobile responsiveness
     114- Improved accessibility features
     115
     116= Is the plugin mobile-friendly? =
     117
     118Yes! The plugin is fully responsive and includes touch gesture support for mobile devices. The progress bar adapts to different screen sizes and provides smooth interactions on touch devices.
     119
     120= Can I use gradient colors? =
     121
     122Absolutely! Version 2.0.0 includes full gradient support. You can choose between solid colors and gradients, with custom start and end colors for beautiful visual effects.
     123
    48124== Changelog ==
    49125
    50 = 1.0.7 =
     126= 2.0.0 - Major Update =
    51127
    52 = v1.0.7 - Feb 12, 2025 =
     128**New Features:**
     129- ✨ Modern admin dashboard with tabbed interface
     130- ✨ Live preview functionality
     131- ✨ Gradient color support with start/end colors
     132- ✨ Shadow effects with customizable color and blur
     133- ✨ Border effects with customizable color and width
     134- ✨ Position options (top/bottom)
     135- ✨ Opacity and border radius controls
     136- ✨ Reading time display
     137- ✨ Enhanced JavaScript with performance optimizations
     138- ✨ Touch gesture support for mobile
     139- ✨ Keyboard navigation support
     140- ✨ Accessibility improvements
     141- ✨ Statistics dashboard
     142- ✨ Improved UI/UX design
    53143
    54 **Added:** Tested upto 6.7.2
     144**Improvements:**
     145- 🎨 Complete redesign of admin interface
     146- 🚀 Better performance and responsiveness
     147- 📱 Enhanced mobile experience
     148- ♿ Better accessibility support
     149- 🎯 More intuitive user experience
     150
     151= 1.0.7 - Feb 12, 2025 =
     152
     153**Added:** Tested up to WordPress 6.7.2
    55154
    56155= 1.0.0 =
    57 * Initial release.
     156
     157* Initial release with basic progress bar functionality.
    58158
    59159== Upgrade Notice ==
    60160
     161= 2.0.0 =
     162
     163This is a major update with a completely redesigned interface and new features. The admin dashboard has been modernized with a tabbed interface, live preview, and advanced customization options. All existing settings will be preserved during the upgrade.
     164
    61165= 1.0.0 =
     166
    62167Initial release of the Reading Progress Bar plugin.
    63168
    64169== Screenshots ==
    65170
    66 1. Progress bar displayed on a blog post.
    67 2. Plugin settings page in the WordPress dashboard.
     1711. Modern admin dashboard with tabbed interface
     1722. Live preview showing progress bar customization
     1733. Advanced effects configuration (shadows, borders)
     1744. Progress bar displayed on a blog post
     1755. Mobile-responsive design
    68176
    69 == Upgrade Notice ==
     177== Requirements ==
    70178
    71 = 1.0.0 =
    72 Initial release of the Reading Progress Bar plugin.
     179- WordPress 5.6 or higher
     180- PHP 7.3 or higher
     181- jQuery (included with WordPress)
    73182
    74183== License ==
    75184
    76185This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the `license.txt` file or visit [http://www.gnu.org/licenses/gpl-2.0.txt](http://www.gnu.org/licenses/gpl-2.0.txt) for more information.
     186
     187== Support ==
     188
     189For support, feature requests, or bug reports, please visit the [plugin page](https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/) or create an issue on GitHub.
     190
     191---
     192
     193**Made with ❤️ for the WordPress community**
Note: See TracChangeset for help on using the changeset viewer.