refactor main.js into smaller pieces, and moved navbar.js to assets

assets/scripts/application.js

@@ -2,3 +2,7 @@ import 'jquery';
 import 'popper.js';
 import 'bootstrap';
 import '@fortawesome/fontawesome-free';
+
+import './core';
+import './features';
+import './sections';

assets/scripts/core/device.js

@@ -0,0 +1,36 @@
+let deviceState = {
+  isMobile: false,
+  isTablet: false,
+  isLaptop: false,
+};
+
+function detectDeviceState() {
+  if (window.innerWidth <= 425) {
+    deviceState = {
+      isMobile: true,
+      isTablet: false,
+      isLaptop: false,
+    };
+  } else if (window.innerWidth <= 768) {
+    deviceState = {
+      isMobile: false,
+      isTablet: true,
+      isLaptop: false,
+    };
+  } else {
+    deviceState = {
+      isMobile: false,
+      isTablet: false,
+      isLaptop: true,
+    };
+  }
+}
+
+detectDeviceState();
+window.addEventListener('resize', detectDeviceState);
+
+// returns a copy of the device state
+// so other parts of code can't override this.
+export function getDeviceState() {
+  return { ... deviceState };
+}

assets/scripts/core/index.js

@@ -0,0 +1 @@
+export * from './device';

assets/scripts/features/index.js

@@ -0,0 +1,7 @@
+if (process.env.FEATURE_VIDEOPLAYER) {
+  import('./videoplayer');
+}
+
+if (process.env.FEATURE_TOC) {
+  import('./toc');
+}

assets/scripts/features/toc/index.js

@@ -0,0 +1,48 @@
+import { getDeviceState } from '../../core';
+
+// Toggle Table of Contents on click. Here, class "hide" open the toc
+function toggleTOC() {
+  let toc = document.getElementById("toc-section");
+  if (toc == null) {
+    return
+  }
+
+  if (toc.classList.contains("hide")) {
+    toc.classList.remove("hide");
+  } else {
+    // if sidebar-section is open, then close it first
+    let sidebar = document.getElementById("sidebar-section");
+    if (sidebar != null && sidebar.classList.contains("hide")) {
+      sidebar.classList.remove("hide");
+    }
+    // add "hide" class
+    toc.classList.add("hide");
+    // if it is mobile device. then scroll to top.
+    const { isMobile } = getDeviceState();
+    if (isMobile && toc.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
+  }
+  if (document.getElementById("hero-area") != null) {
+    document.getElementById("hero-area").classList.toggle("hide");
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  // bind click event to #toc-toggle in navbar-2.html
+  const $toggle = document.getElementById('toc-toggler');
+  if ($toggle) $toggle.addEventListener('click', toggleTOC);
+
+  // hide TOC when user clicks on a TOC link. 
+  // Only applies if it's mobile.
+  const $toc = document.getElementById("TableOfContents");
+  if ($toc) {
+    $toc.addEventListener('click', (event) => {
+      const { isMobile } = getDeviceState();
+      if (isMobile && event.target.nodeName === 'A') {
+        toggleTOC();
+      }
+    });
+  }
+});

assets/scripts/features/videoplayer/index.js

@@ -0,0 +1,3 @@
+if (process.env.FEATURE_VIDEOPLAYER_PLYR) {
+  import('./plyr');
+}

assets/scripts/features/videoplayer/plyr.js

@@ -0,0 +1,5 @@
+import Plyr from 'plyr';
+import { videoplayer } from '@params';
+
+const { plyr: options } = videoplayer;
+window.addEventListener('DOMContentLoaded', () => Plyr.setup('.js-player', options));

assets/scripts/sections/education.js

@@ -0,0 +1,34 @@
+// Show more rows in the taken courses table
+function toggleCourseVisibility(elem) {
+
+  // find the courses
+  let courses = elem.parentNode.getElementsByClassName("course");
+  if (courses == null) {
+    return
+  }
+
+  // toggle hidden-course class from the third elements
+  for (const course of courses) {
+    if (course.classList.contains("hidden-course") || course.classList.contains("toggled-hidden-course")) {
+      course.classList.toggle("hidden-course");
+      course.classList.add("toggled-hidden-course");
+    }
+  }
+
+  // toggle the buttons visibility
+  let buttonsToToggle = elem.parentNode.getElementsByClassName("show-more-btn");
+  for (const buttonToToggle of buttonsToToggle) {
+    buttonToToggle.classList.toggle("hidden");
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  const $els = [
+    document.getElementById('show-more-btn'),
+    document.getElementById('show-less-btn'),
+  ];
+
+  $els.filter(($el) => $el != null).forEach(($el) => 
+    $el.addEventListener('click', ({target}) => 
+      toggleCourseVisibility(target)));
+});

assets/scripts/sections/index.js

@@ -0,0 +1,4 @@
+import './navbar';
+import './sidebar';
+
+import './education';

assets/scripts/sections/navbar.js

@@ -0,0 +1,61 @@
+import $ from 'jquery';
+
+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
+$(document).ready(function () {
+
+  // change navbar style on scroll
+  // ==================================================
+  // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
+  // $.onscroll = function() {scrollFunction()};
+  $(document).scroll(function () {
+    updateNavBar();
+  });
+
+  // Creates a click handler to collapse the navigation when
+  // anchors in the mobile nav pop up are clicked
+  var navMain = $(".navbar-collapse");
+  if (navMain) {
+    navMain.on("click", "a", null, function (e) {
+      $('.navbar-collapse').collapse('hide');
+    });
+  }
+
+  updateNavBar();
+});
+

assets/scripts/sections/sidebar.js

@@ -0,0 +1,39 @@
+import { getDeviceState } from '../core/device';
+
+// Toggle sidebar on click. Here, class "hide" open the sidebar
+function toggleSidebar() {
+  let sidebar = document.getElementById("sidebar-section");
+  if (sidebar == null) {
+    return
+  }
+  if (sidebar.classList.contains("hide")) {
+    sidebar.classList.remove("hide")
+  } else {
+    // if toc-section is open, then close it first
+    let toc = document.getElementById("toc-section");
+    if (toc != null && toc.classList.contains("hide")) {
+      toc.classList.remove("hide");
+    }
+    // add "hide" class
+    sidebar.classList.add("hide");
+    // if it is mobile device. then scroll to top.
+    const { isMobile } = getDeviceState();
+    if (isMobile && sidebar.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      if (document.getElementById("hero-area") != null) {
+        document.getElementById("hero-area").classList.toggle("hide");
+      }
+    }
+  }
+  if (document.getElementById("content-section") != null) {
+    document.getElementById("content-section").classList.toggle("hide");
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  // bind click event to #sidebar-toggler in navbar-2.html
+  const $toggle = document.getElementById('sidebar-toggler');
+  if ($toggle) $toggle.addEventListener('click', toggleSidebar);
+});
+