refactor main.js into smaller pieces, and moved navbar.js to assets
This commit is contained in:
Aaron Qian
Aaron Qian
parent
fd8eeb3330
commit
177dffe553
19 changed files with 214 additions and 207 deletions
|
|
@ -16,6 +16,13 @@ Yellow: #FFC212
|
|||
body {
|
||||
background-color: #f9fafc;
|
||||
font-family: "Muli";
|
||||
|
||||
/*
|
||||
Removed smooth scrolling implementation in main.js in favor of
|
||||
simpler css approach.
|
||||
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||
*/
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
|
|||
|
|
@ -1,173 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
var projectCards;
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function detectDevice() {
|
||||
if (window.innerWidth <= 425) {
|
||||
isMobile = true;
|
||||
isTablet = false;
|
||||
isLaptop = false;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
isMobile = false;
|
||||
isTablet = true;
|
||||
isLaptop = false;
|
||||
} else {
|
||||
isMobile = false;
|
||||
isTablet = false;
|
||||
isLaptop = true;
|
||||
}
|
||||
}
|
||||
detectDevice();
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
function addSmoothScroll() {
|
||||
// ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||
// Select all links with hashes
|
||||
$('a[href*="#"]')
|
||||
// Remove links that don't actually link to anything
|
||||
.not('[href="#"]')
|
||||
.not('[href="#0"]')
|
||||
.click(function (event) {
|
||||
// On-page links
|
||||
if (
|
||||
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
|
||||
&&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
// Figure out element to scroll to
|
||||
var target = $(decodeURI(this.hash));
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
// Does a scroll target exist?
|
||||
if (target.length) {
|
||||
// Only prevent default if animation is actually gonna happen
|
||||
event.preventDefault();
|
||||
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 710;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
}
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top - offset
|
||||
}, 1000, function () {
|
||||
// Callback after animation
|
||||
// Must change focus!
|
||||
var $target = $(target);
|
||||
$target.focus();
|
||||
if ($target.is(":focus")) { // Checking if the target was focused
|
||||
return false;
|
||||
} else {
|
||||
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
|
||||
$target.focus(); // Set focus again
|
||||
};
|
||||
});
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = this.hash
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
addSmoothScroll();
|
||||
|
||||
// ===================== Video Player ==================
|
||||
function renderVideoPlayer(){
|
||||
var videos = document.getElementsByClassName("video-player");
|
||||
for (var i =0; i< videos.length; i++ ){
|
||||
const player = new Plyr("#"+videos[i].id);
|
||||
}
|
||||
|
||||
}
|
||||
renderVideoPlayer();
|
||||
|
||||
// re-render custom functions on window resize
|
||||
window.onresize = function () {
|
||||
detectDevice();
|
||||
addSmoothScroll();
|
||||
};
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
// 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.
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
// 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");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
(function ($) {
|
||||
jQuery(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();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -49,9 +49,6 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
if (isMobile) {
|
||||
elems[i].setAttribute("onclick", "toggleTOC()");
|
||||
}
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue