reading progress bar feature

Author: samberrry

src/BlogEtcServiceProvider.php

@@ -43,6 +43,8 @@ public function boot()
             __DIR__ . '/Views/blogetc' => base_path('resources/views/vendor/blogetc'),
             __DIR__ . '/Config/blogetc.php' => config_path('blogetc.php'),
             __DIR__ . '/css/blogetc_admin_css.css' => public_path('blogetc_admin_css.css'),
+            __DIR__ . '/css/hessam-blog.css' => public_path('hessam-blog.css'),
+            __DIR__ . '/js/hessam-blog.js' => public_path('hessam-blog.js'),
         ]);
 
 

src/Config/blogetc.php

@@ -4,9 +4,12 @@
 
 return [
 
-    //you custom User model
+    //your custom User model
     'user_model'=>\App\User::class,
 
+    // reading progress bar is the bar which shows on top of your post when you are scrolling down the page. You can disable this feature if you want
+    'reading_progress_bar' => true,
+
     'include_default_routes' => true, // set to false to not include routes.php for BlogEtcReaderController and admin related routes. Default: true. If you disable this, you will have to manually copy over the data from routes.php and add it to your web.php.
 
     'blog_prefix' => "blog", // used in routes.php. If you want to your http://yoursite.com/latest-news (or anything else), then enter that here. Default: blog
@@ -171,10 +174,8 @@
         ],
     ],
 
-
     'search' => [
-        'search_enabled' => false, // is search enabled? By default this is disabled, but you can easily turn it on.
+        'search_enabled' => true, //you can easily turn off search functionality
     ],
 
-
 ];

src/Views/blogetc/index.blade.php

@@ -1,4 +1,9 @@
 @extends("layouts.app",['title'=>$title])
+
+@section('blog-custom-css')
+    <link type="text/css" href="{{ asset('hessam-blog.css') }}" rel="stylesheet">
+@endsection
+
 @section("content")
 
     <div class='row'>

src/Views/blogetc/single_post.blade.php

@@ -1,6 +1,16 @@
 @extends("layouts.app",['title'=>$post->gen_seo_title()])
+
+@section('blog-custom-css')
+    <link type="text/css" href="{{ asset('hessam-blog.css') }}" rel="stylesheet">
+@endsection
+
 @section("content")
 
+    @if(config("blogetc.reading_progress_bar"))
+        <div id="scrollbar">
+            <div id="scrollbar-bg"></div>
+        </div>
+    @endif
 
     {{--https://webdevetc.com/laravel/packages/blogetc-blog-system-for-your-laravel-app/help-documentation/laravel-blog-package-blogetc#guide_to_views--}}
 
@@ -26,4 +36,8 @@
     </div>
     </div>
 
+@endsection
+
+@section('blog-custom-js')
+    <script src="{{asset('hessam-blog.js')}}"></script>
 @endsection

src/css/hessam-blog.css

@@ -0,0 +1,26 @@
+.cat2{
+    padding-left: 20px !important;
+}
+
+.cat3{
+    padding-left: 40px !important;
+}
+
+#scrollbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 0%;
+    height: 5px;
+    z-index: 9999;
+}
+
+#scrollbar-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #E16036;
+}

src/js/hessam-blog.js

@@ -0,0 +1,24 @@
+var bar_bg = document.getElementById("scrollbar-bg"),
+    body = document.body,
+    html = document.documentElement;
+
+bar_bg.style.minWidth = document.width + "px";
+
+document.getElementsByTagName("body")[0].onresize = function() {
+    // Update the gradient width
+    bar_bg.style.minWidth = document.width + "px";
+};
+
+window.onscroll = function() {
+    // Change the width of the progress bar
+    var bar = document.getElementById("scrollbar"),
+        dw  = document.documentElement.clientWidth,
+        dh  = Math.max( body.scrollHeight, body.offsetHeight,
+            html.clientHeight, html.scrollHeight, html.offsetHeight ),
+        wh  = window.innerHeight,
+        pos = pageYOffset || (document.documentElement.clientHeight ?
+            document.documentElement.scrollTop : document.body.scrollTop),
+        bw  = ((pos / (dh - wh)) * 100);
+
+    bar.style.width = bw + "%";
+};