From 4c280ee99ab5b7360f88221a322a8519b52f30f2 Mon Sep 17 00:00:00 2001
From: Tyler Vigario <TylerVigario90@gmail.com>
Date: Tue, 4 Aug 2020 15:13:21 -0700
Subject: [PATCH] Reduce jQuery usage

---
 js/sb-admin-2.js | 127 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 92 insertions(+), 35 deletions(-)

diff --git a/js/sb-admin-2.js b/js/sb-admin-2.js
index b0412d151..ca817914a 100644
--- a/js/sb-admin-2.js
+++ b/js/sb-admin-2.js
@@ -1,56 +1,113 @@
-(function($) {
-  "use strict"; // Start of use strict
-
-  // Toggle the side navigation
-  $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
-    $("body").toggleClass("sidebar-toggled");
-    $(".sidebar").toggleClass("toggled");
-    if ($(".sidebar").hasClass("toggled")) {
-      $('.sidebar .collapse').collapse('hide');
-    };
+document.addEventListener('DOMContentLoaded', () => {
+  const body = document.querySelector('body');
+  const sideBar = document.querySelector('.sidebar');
+  const scrollToTopBtn = document.querySelector('.scroll-to-top');
+
+  // Sidebar toggle
+  document.querySelectorAll('#sidebarToggle, #sidebarToggleTop').forEach((element) => {
+    element.addEventListener('click', () => {
+      // Update body
+      body.classList.toggle('sidebar-toggled');
+
+      if (sideBar.classList.contains('toggled')) {
+        // Expand sidebar
+        sideBar.classList.remove('toggled');
+      } else {
+        collapseMenus();
+
+        // Collapse sidebar
+        sideBar.classList.add('toggled');
+      }
+    });
   });
 
   // Close any open menu accordions when window is resized below 768px
-  $(window).resize(function() {
-    if ($(window).width() < 768) {
-      $('.sidebar .collapse').collapse('hide');
-    };
-    
+  window.addEventListener('resize', () => {
+    if (window.innerWidth < 768) {
+      collapseMenus();
+    }
+
     // Toggle the side navigation when window is resized below 480px
-    if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
-      $("body").addClass("sidebar-toggled");
-      $(".sidebar").addClass("toggled");
-      $('.sidebar .collapse').collapse('hide');
-    };
+    if (window.innerWidth < 480 && !sideBar.classList.contains('toggled')) {
+      body.classList.add('sidebar-toggled');
+      sideBar.classList.add('toggled');
+      collapseMenus();
+    }
   });
 
   // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
   $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
     if ($(window).width() > 768) {
-      var e0 = e.originalEvent,
-        delta = e0.wheelDelta || -e0.detail;
-      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
       e.preventDefault();
+
+      const e0 = e.originalEvent;
+
+      const delta = e0.wheelDelta || -e0.detail;
+
+      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
     }
   });
 
   // Scroll to top button appear
-  $(document).on('scroll', function() {
-    var scrollDistance = $(this).scrollTop();
-    if (scrollDistance > 100) {
-      $('.scroll-to-top').fadeIn();
+  document.addEventListener('scroll', () => {
+    if (window.pageYOffset > 100) {
+      fadeIn(scrollToTopBtn, 'inline');
     } else {
-      $('.scroll-to-top').fadeOut();
+      fadeOut(scrollToTopBtn);
     }
   });
 
-  // Smooth scrolling using jQuery easing
-  $(document).on('click', 'a.scroll-to-top', function(e) {
-    var $anchor = $(this);
-    $('html, body').stop().animate({
-      scrollTop: ($($anchor.attr('href')).offset().top)
-    }, 1000, 'easeInOutExpo');
+  // Smooth scrolling
+  scrollToTopBtn.addEventListener('click', (e) => {
     e.preventDefault();
+
+    window.scrollTo({
+      'behavior': 'smooth',
+      'left': 0,
+      'top': 0,
+    });
   });
 
-})(jQuery); // End of use strict
+  /**
+   * Collapse open menus
+   */
+  function collapseMenus() {
+    sideBar.querySelectorAll('.collapse.show').forEach((section) => {
+      section.classList.remove('show');
+    });
+  }
+});
+
+/**
+ * Fade out and hide element.
+ *
+ * @param {Element} el Element to fade.
+ */
+function fadeOut(el) {
+  (function fade() {
+    if ((el.style.opacity -= .1) < 0) {
+      el.style.display = 'none';
+    } else {
+      requestAnimationFrame(fade);
+    }
+  })();
+}
+
+/**
+ * Show and fade in element.
+ *
+ * @param {Element} el Element to fade.
+ * @param {string} [display] Element display type.
+ */
+function fadeIn(el, display = 'block') {
+  el.style.display = display;
+
+  (function fade() {
+    let val = parseFloat(el.style.opacity);
+    if (!((val += .1) > 1)) {
+      el.style.opacity = val;
+      requestAnimationFrame(fade);
+    }
+  })();
+}
+