Merge remote-tracking branch 'origin/main' into main

Frontend/Index.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="Styles/SpinningWheel.css" />
     <link rel="stylesheet" href="Styles/minibar.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/css/OverlayScrollbars.css" />
     <!-- CSS end -->
     <!-- Header scripts -->
     <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
@@ -22,6 +23,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/js/jquery.overlayScrollbars.js"></script>
     <!-- Header scripts end -->
 </head>
 
@@ -697,14 +699,13 @@
     </footer>
     <!-- Footer end -->
     <!-- Body scripts -->
-    <script src="Javascript/LoginFunctionality.js"></script>
+    <script src="Javascript/OverlayScrollbar.js"></script>
     <script src="Javascript/Collapsible.js"></script>
     <script src="Javascript/PasswordValidation.js"></script>
     <script src="Javascript/Kalender.js"></script>
     <script src="Javascript/SpinningWheel.js"></script>
     <script src="Javascript/minibar.min.js"></script>
-    <script src="Javascript/HeaderFunctionality.js"></script>
+    <script src="Javascript/LoginFunctionality.js"></script>
-    <script src="Javascript/swipe.js"></script>
     <!-- Body scripts end -->
 </body>
 

Frontend/Javascript/HeaderFunctionality.js

@@ -1,145 +0,0 @@
-$(document).ready(function() {
-    const scrollableObj = document.getElementById('content');
-
-    var scrollBar = new MiniBar('#content', {
-        barType: "default",
-        scrollX: false,
-        scrollY: true,
-        scrollAmount: 20,
-        onScroll: function() {
-            // Resize header on scroll.
-            if($('.smart-scroll').length > 0) {
-                scrollableObj.addEventListener('wheel', ScrollDirection);
-
-                const NavCollapse = document.getElementById('navbarSupportedContent');
-
-                const BackToTop = $('#return-to-top');
-                const nav = $('.smart-scroll');
-                const body = $('body');
-
-                const container = document.querySelector('.mb-content');
-
-                if (container.scrollTop <= 0)
-                {
-                    body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-                    nav.removeClass('scrolled-down').addClass('scrolled-up');
-                    BackToTop.fadeOut(300);
-                    scrollBar.update();
-                }
-
-
-                function ScrollDirection(event) {
-                    var delta;
-
-                    if (event.wheelDelta) 
-                    {
-                        delta = event.wheelDelta;
-                    } 
-                    else 
-                    {
-                        delta = -1 * event.deltaY;
-                    }
-
-                    if (delta < 0) 
-                    {
-                        body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
-                        nav.removeClass('scrolled-up').addClass('scrolled-down');
-                        BackToTop.fadeIn(300);
-                        NavCollapse.classList.remove('show');
-                        scrollBar.update();
-                    } 
-                    else if (delta > 0) 
-                    {
-                        body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-                        nav.removeClass('scrolled-down').addClass('scrolled-up');
-                        BackToTop.fadeOut(300);
-                        scrollBar.update();
-                    }
-                }
-            }
-        }
-    });
-
-    $('body').onSwipe(function(results) {
-        const NavCollapse = document.getElementById('navbarSupportedContent');
-
-        const BackToTop = $('#return-to-top');
-        const nav = $('.smart-scroll');
-        const body = $('body');
-
-        if (results.up)
-        {
-            body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
-            nav.removeClass('scrolled-up').addClass('scrolled-down');
-            BackToTop.fadeIn(300);
-            NavCollapse.classList.remove('show');
-        }
-
-        if (results.down)
-        {
-            body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-            nav.removeClass('scrolled-down').addClass('scrolled-up');
-            BackToTop.fadeOut(300);
-        }
-    })
-
-    GoToTop = function() {
-        scrollBar.scrollToTop();
-
-        // Show the Navbar on click.
-        $('#header').removeClass('scrolled-down').addClass('scrolled-up');
-        $('body').removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-
-        $('#return-to-top').fadeOut(300);
-    }
-
-    // Floating button functionality
-    $('#return-to-top').click(function() {
-        GoToTop();
-    });
-    
-    // Smooth scrolling when click to nav
-    $('.NavLink').click(function(e) {
-        // Target element id.
-        var id = $(this).attr('href');
-
-        // Target element.
-        var $id = $(id);
-
-        // If no id was provided, return nothing.
-        if ($id.length === 0) 
-        {
-            return;
-        }
-
-        // Prevent standard hash navigation (avoid blinking in IE).
-        e.preventDefault();
-
-        // Top position relative to the document.
-        var pos = $id.position().top;
-
-        if (pos >= 0)
-        {
-            $('#return-to-top').fadeIn(300);
-        }
-
-        // Animated top scrolling.
-        if (pos === 0)
-        {
-            scrollBar.scrollTo(pos, 'y');
-        }
-        else if (pos > 0)
-        {
-            scrollBar.scrollBy(pos, 'y');
-        }
-        else if (pos < 0)
-        {
-            scrollBar.scrollBy(pos, 'y');
-        }
-
-        // Hide the Navbar on click.
-        $('#header').addClass('scrolled-down');
-        $('body').addClass('bodyScrolled-down');
-        return;
-    });
-});

Frontend/Javascript/OverlayScrollbar.js

@@ -0,0 +1,47 @@
+let instance;
+
+document.addEventListener("DOMContentLoaded", function() {
+    //The first argument are the elements to which the plugin shall be initialized
+    //The second argument has to be at least a empty object or a object with your desired options
+    instance = OverlayScrollbars(document.querySelectorAll('body'), { });
+});
+
+$(function() {
+
+    var prevScrollpos = instance.scroll().position.y;
+    const BackToTop = $('#return-to-top');
+
+    instance.options("callbacks.onScroll", function(e) {
+
+        var currentScrollPos = instance.scroll().position.y;
+        if (prevScrollpos > currentScrollPos) {
+            //Scroll down
+            $("#header").css({"top" : "0"});
+        } else {
+            //Scroll up
+            $("#header").css({"top" : "-50px"});
+        }
+
+        if (currentScrollPos <= 50) {
+            //Scroll down
+            BackToTop.fadeOut(300);
+        } else {
+            //Scroll up
+            BackToTop.fadeIn(300);
+        }
+
+        prevScrollpos = currentScrollPos;
+    });
+
+    GoToTop = function() {
+        instance.scroll({ y : "0%"  });
+
+        $("#header").css({"top" : "0"});
+        BackToTop.fadeOut(300);
+    }
+
+    // Floating button functionality
+    $('#return-to-top').click(function() {
+        GoToTop();
+    });
+});