remove jquery all together
This commit is contained in:
Aaron Qian
parent
b0f5b0b059
commit
8580a1f463
61 changed files with 4113 additions and 684 deletions
|
|
@ -1,221 +1,220 @@
|
|||
import { getDeviceState } from '../core';
|
||||
import { getDeviceState } from '../core'
|
||||
|
||||
function fourColumRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function fourColumRow (gallery, entries, i) {
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-lg-6', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-3", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
i++;
|
||||
const entry2 = document.createElement('div')
|
||||
entry2.classList.add('col-lg-3', 'm-0', 'p-0')
|
||||
entry2.appendChild(entries[i].cloneNode(true))
|
||||
entry2.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry2)
|
||||
i++
|
||||
|
||||
let entry3 = document.createElement("div");
|
||||
entry3.classList.add("col-lg-3", "m-0", "p-0");
|
||||
entry3.appendChild(entries[i].cloneNode(true));
|
||||
entry3.children[0].classList.add("img-type-2");
|
||||
i++;
|
||||
entry3.appendChild(entries[i].cloneNode(true));
|
||||
entry3.children[1].classList.add("img-type-2");
|
||||
gallery.appendChild(entry3);
|
||||
i++;
|
||||
const entry3 = document.createElement('div')
|
||||
entry3.classList.add('col-lg-3', 'm-0', 'p-0')
|
||||
entry3.appendChild(entries[i].cloneNode(true))
|
||||
entry3.children[0].classList.add('img-type-2')
|
||||
i++
|
||||
entry3.appendChild(entries[i].cloneNode(true))
|
||||
entry3.children[1].classList.add('img-type-2')
|
||||
gallery.appendChild(entry3)
|
||||
i++
|
||||
}
|
||||
|
||||
function fourColumnReversedRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-3", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-2");
|
||||
i++;
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[1].classList.add("img-type-2");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function fourColumnReversedRow (gallery, entries, i) {
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-lg-3', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-2')
|
||||
i++
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[1].classList.add('img-type-2')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-3", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
i++;
|
||||
const entry2 = document.createElement('div')
|
||||
entry2.classList.add('col-lg-3', 'm-0', 'p-0')
|
||||
entry2.appendChild(entries[i].cloneNode(true))
|
||||
entry2.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry2)
|
||||
i++
|
||||
|
||||
let entry3 = document.createElement("div");
|
||||
entry3.classList.add("col-lg-6", "m-0", "p-0");
|
||||
entry3.appendChild(entries[i].cloneNode(true));
|
||||
entry3.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry3);
|
||||
i++;
|
||||
const entry3 = document.createElement('div')
|
||||
entry3.classList.add('col-lg-6', 'm-0', 'p-0')
|
||||
entry3.appendChild(entries[i].cloneNode(true))
|
||||
entry3.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry3)
|
||||
i++
|
||||
}
|
||||
|
||||
function threeColumnRow(gallery, entries, i) {
|
||||
console.log(i);
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function threeColumnRow (gallery, entries, i) {
|
||||
console.log(i)
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-lg-6', 'col-md-6', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
i++;
|
||||
const entry2 = document.createElement('div')
|
||||
entry2.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
|
||||
entry2.appendChild(entries[i].cloneNode(true))
|
||||
entry2.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry2)
|
||||
i++
|
||||
|
||||
let entry3 = document.createElement("div");
|
||||
entry3.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
|
||||
entry3.appendChild(entries[i].cloneNode(true));
|
||||
entry3.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry3);
|
||||
i++;
|
||||
const entry3 = document.createElement('div')
|
||||
entry3.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
|
||||
entry3.appendChild(entries[i].cloneNode(true))
|
||||
entry3.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry3)
|
||||
i++
|
||||
}
|
||||
|
||||
function threeColumnReversedRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function threeColumnReversedRow (gallery, entries, i) {
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
i++;
|
||||
const entry2 = document.createElement('div')
|
||||
entry2.classList.add('col-lg-3', 'col-md-3', 'm-0', 'p-0')
|
||||
entry2.appendChild(entries[i].cloneNode(true))
|
||||
entry2.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry2)
|
||||
i++
|
||||
|
||||
let entry3 = document.createElement("div");
|
||||
entry3.classList.add("col-lg-6", "col-md-3", "m-0", "p-0");
|
||||
entry3.appendChild(entries[i].cloneNode(true));
|
||||
entry3.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry3);
|
||||
i++;
|
||||
const entry3 = document.createElement('div')
|
||||
entry3.classList.add('col-lg-6', 'col-md-3', 'm-0', 'p-0')
|
||||
entry3.appendChild(entries[i].cloneNode(true))
|
||||
entry3.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry3)
|
||||
i++
|
||||
}
|
||||
|
||||
function twoColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function twoColumnRow (gallery, entries, i) {
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-6', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-6", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
i++;
|
||||
const entry2 = document.createElement('div')
|
||||
entry2.classList.add('col-6', 'm-0', 'p-0')
|
||||
entry2.appendChild(entries[i].cloneNode(true))
|
||||
entry2.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry2)
|
||||
i++
|
||||
}
|
||||
|
||||
function singleColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-12", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
function singleColumnRow (gallery, entries, i) {
|
||||
const entry1 = document.createElement('div')
|
||||
entry1.classList.add('col-12', 'm-0', 'p-0')
|
||||
entry1.appendChild(entries[i].cloneNode(true))
|
||||
entry1.children[0].classList.add('img-type-1')
|
||||
gallery.appendChild(entry1)
|
||||
i++
|
||||
}
|
||||
|
||||
function showAchievements() {
|
||||
function showAchievements () {
|
||||
const { isLaptop, isTablet } = getDeviceState()
|
||||
// show achievements from achievements-holder div
|
||||
let gallery = document.getElementById("gallery");
|
||||
const gallery = document.getElementById('gallery')
|
||||
if (gallery == null) {
|
||||
return
|
||||
}
|
||||
gallery.innerHTML = "";
|
||||
const entries = document.getElementById("achievements-holder").children;
|
||||
let len = entries.length;
|
||||
let i = 0;
|
||||
let rowNumber = 1;
|
||||
gallery.innerHTML = ''
|
||||
const entries = document.getElementById('achievements-holder').children
|
||||
let len = entries.length
|
||||
let i = 0
|
||||
let rowNumber = 1
|
||||
while (i < len) {
|
||||
if (isLaptop) {
|
||||
if (i + 4 <= len) {
|
||||
if (rowNumber % 2) {
|
||||
fourColumRow(gallery, entries, i);
|
||||
fourColumRow(gallery, entries, i)
|
||||
} else {
|
||||
fourColumnReversedRow(gallery, entries, i);
|
||||
fourColumnReversedRow(gallery, entries, i)
|
||||
}
|
||||
i += 4;
|
||||
|
||||
i += 4
|
||||
} else if (i + 3 <= len) {
|
||||
if (rowNumber % 2) {
|
||||
threeColumnRow(gallery, entries, i);
|
||||
threeColumnRow(gallery, entries, i)
|
||||
} else {
|
||||
threeColumnReversedRow(gallery, entries, i);
|
||||
threeColumnReversedRow(gallery, entries, i)
|
||||
}
|
||||
i += 3;
|
||||
i += 3
|
||||
} else if (i + 2 <= len) {
|
||||
twoColumnRow(gallery, entries, i);
|
||||
i += 2;
|
||||
twoColumnRow(gallery, entries, i)
|
||||
i += 2
|
||||
} else {
|
||||
singleColumnRow(gallery, entries, i);
|
||||
i++;
|
||||
singleColumnRow(gallery, entries, i)
|
||||
i++
|
||||
}
|
||||
} else if (isTablet) {
|
||||
if (i + 2 <= len) {
|
||||
twoColumnRow(gallery, entries, i);
|
||||
i += 2;
|
||||
twoColumnRow(gallery, entries, i)
|
||||
i += 2
|
||||
} else {
|
||||
singleColumnRow(gallery, entries, i);
|
||||
i++;
|
||||
singleColumnRow(gallery, entries, i)
|
||||
i++
|
||||
}
|
||||
} else {
|
||||
singleColumnRow(gallery, entries, i);
|
||||
i++;
|
||||
singleColumnRow(gallery, entries, i)
|
||||
i++
|
||||
}
|
||||
rowNumber++;
|
||||
rowNumber++
|
||||
}
|
||||
|
||||
// show full image on click
|
||||
let elements = document.getElementsByClassName("achievement-entry");
|
||||
len = elements.length;
|
||||
const elements = document.getElementsByClassName('achievement-entry')
|
||||
len = elements.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
elements[i].onclick = function () {
|
||||
let achievements = document.getElementsByClassName("achievement-entry");
|
||||
let len2 = achievements.length;
|
||||
const achievements = document.getElementsByClassName('achievement-entry')
|
||||
const len2 = achievements.length
|
||||
for (let j = 0; j < len2; j++) {
|
||||
achievements[j].classList.toggle("hidden");
|
||||
achievements[j].classList.toggle('hidden')
|
||||
}
|
||||
this.classList.toggle("achievement-details");
|
||||
this.classList.toggle("hidden");
|
||||
this.parentElement.classList.toggle("col-lg-12");
|
||||
this.parentElement.classList.toggle("col-md-12");
|
||||
this.parentElement.classList.toggle("col-sm-12");
|
||||
if (this.children["SmallImage"].hasAttribute("active")) {
|
||||
let mainLogo = this.children["LargeImage"].getAttribute("Style");
|
||||
this.children["LargeImage"].setAttribute("active", true);
|
||||
this.children["SmallImage"].removeAttribute("active");
|
||||
this.classList.toggle('achievement-details')
|
||||
this.classList.toggle('hidden')
|
||||
this.parentElement.classList.toggle('col-lg-12')
|
||||
this.parentElement.classList.toggle('col-md-12')
|
||||
this.parentElement.classList.toggle('col-sm-12')
|
||||
if (this.children.SmallImage.hasAttribute('active')) {
|
||||
const mainLogo = this.children.LargeImage.getAttribute('Style')
|
||||
this.children.LargeImage.setAttribute('active', true)
|
||||
this.children.SmallImage.removeAttribute('active')
|
||||
|
||||
this.setAttribute("Style", mainLogo);
|
||||
this.setAttribute('Style', mainLogo)
|
||||
} else {
|
||||
let mainLogo = this.children["SmallImage"].getAttribute("Style");
|
||||
this.children["SmallImage"].setAttribute("active", true);
|
||||
this.children["LargeImage"].removeAttribute("active");
|
||||
this.setAttribute("Style", mainLogo);
|
||||
const mainLogo = this.children.SmallImage.getAttribute('Style')
|
||||
this.children.SmallImage.setAttribute('active', true)
|
||||
this.children.LargeImage.removeAttribute('active')
|
||||
this.setAttribute('Style', mainLogo)
|
||||
}
|
||||
|
||||
if (this.children["caption"] != undefined) {
|
||||
this.children["caption"].classList.toggle("hidden");
|
||||
if (this.children.caption !== undefined) {
|
||||
this.children.caption.classList.toggle('hidden')
|
||||
}
|
||||
if (this.children["enlarge-icon"] != undefined) {
|
||||
this.getElementsByClassName('fa-xmark')[0].classList.toggle('hidden');
|
||||
this.getElementsByClassName('fa-magnifying-glass-plus')[0].classList.toggle('hidden');
|
||||
if (this.children['enlarge-icon'] !== undefined) {
|
||||
this.getElementsByClassName('fa-xmark')[0].classList.toggle('hidden')
|
||||
this.getElementsByClassName('fa-magnifying-glass-plus')[0].classList.toggle('hidden')
|
||||
}
|
||||
if (this.children["achievement-title"] != undefined) {
|
||||
this.children["achievement-title"].classList.toggle("hidden");
|
||||
if (this.children['achievement-title'] !== undefined) {
|
||||
this.children['achievement-title'].classList.toggle('hidden')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
['DOMContentLoaded', 'resize'].forEach((event) =>
|
||||
document.addEventListener(event, showAchievements));
|
||||
['DOMContentLoaded', 'resize'].forEach((event) =>
|
||||
document.addEventListener(event, showAchievements))
|
||||
|
|
|
|||
|
|
@ -1,34 +1,33 @@
|
|||
// Show more rows in the taken courses table
|
||||
function toggleCourseVisibility(elem) {
|
||||
|
||||
function toggleCourseVisibility (elem) {
|
||||
// find the courses
|
||||
let courses = elem.parentNode.getElementsByClassName("course");
|
||||
const 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");
|
||||
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");
|
||||
const buttonsToToggle = elem.parentNode.getElementsByClassName('show-more-btn')
|
||||
for (const buttonToToggle of buttonsToToggle) {
|
||||
buttonToToggle.classList.toggle("hidden");
|
||||
buttonToToggle.classList.toggle('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const $els = [
|
||||
const els = [
|
||||
document.getElementById('show-more-btn'),
|
||||
document.getElementById('show-less-btn'),
|
||||
];
|
||||
document.getElementById('show-less-btn')
|
||||
]
|
||||
|
||||
$els.filter(($el) => $el != null).forEach(($el) =>
|
||||
$el.addEventListener('click', ({target}) =>
|
||||
toggleCourseVisibility(target)));
|
||||
});
|
||||
els.filter((el) => el != null).forEach((el) =>
|
||||
el.addEventListener('click', ({ target }) =>
|
||||
toggleCourseVisibility(target)))
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import './navbar';
|
||||
import './sidebar';
|
||||
import './navbar'
|
||||
import './sidebar'
|
||||
|
||||
import './education';
|
||||
import './achievements';
|
||||
import './projects';
|
||||
import './publications';
|
||||
import './education'
|
||||
import './achievements'
|
||||
import './projects'
|
||||
import './publications'
|
||||
|
|
|
|||
|
|
@ -1,61 +1,60 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
const updateNavBar = () => {
|
||||
if ($(document).scrollTop() > 40) {
|
||||
$('#top-navbar').removeClass('initial-navbar');
|
||||
$('#top-navbar').addClass('final-navbar shadow');
|
||||
const topNavbar = document.getElementById('top-navbar')
|
||||
const navbarToggler = document.getElementById('navbar-toggler')
|
||||
const themeIcon = document.getElementById('navbar-theme-icon-svg')
|
||||
|
||||
$('#navbar-toggler').removeClass('navbar-dark');
|
||||
$('#navbar-toggler').addClass('navbar-light');
|
||||
if (window.scrollY > 40) {
|
||||
topNavbar.classList.remove('initial-navbar')
|
||||
topNavbar.classList.add('final-navbar', 'shadow')
|
||||
|
||||
navbarToggler.classList.remove('navbar-dark')
|
||||
navbarToggler.classList.add('navbar-light')
|
||||
|
||||
// color theme selector a.k.a. dark mode
|
||||
$('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
|
||||
themeIcon.classList.remove('navbar-icon-svg-dark')
|
||||
|
||||
// get the main logo from hidden img tag
|
||||
let mainLogo = document.getElementById("main-logo")
|
||||
const mainLogo = document.getElementById('main-logo')
|
||||
if (mainLogo !== null) {
|
||||
let logoURL = mainLogo.getAttribute("src");
|
||||
$('#logo').attr("src", logoURL);
|
||||
const logoURL = mainLogo.getAttribute('src')
|
||||
document.getElementById('logo').setAttribute('src', logoURL)
|
||||
}
|
||||
|
||||
} else {
|
||||
$('#top-navbar').removeClass('final-navbar shadow');
|
||||
$('#top-navbar').addClass('initial-navbar');
|
||||
topNavbar.classList.remove('final-navbar', 'shadow')
|
||||
topNavbar.classList.add('initial-navbar')
|
||||
|
||||
$('#navbar-toggler').removeClass('navbar-light');
|
||||
$('#navbar-toggler').addClass('navbar-dark');
|
||||
navbarToggler.classList.remove('navbar-light')
|
||||
navbarToggler.classList.add('navbar-dark')
|
||||
|
||||
// color theme selector a.k.a. dark mode
|
||||
$('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
|
||||
themeIcon.classList.add('navbar-icon-svg-dark')
|
||||
|
||||
// get the inverted logo from hidden img tag
|
||||
let invertedLogo = document.getElementById("inverted-logo")
|
||||
const invertedLogo = document.getElementById('inverted-logo')
|
||||
if (invertedLogo !== null) {
|
||||
let logoURL = invertedLogo.getAttribute("src");
|
||||
$('#logo').attr("src", logoURL);
|
||||
const logoURL = invertedLogo.getAttribute('src')
|
||||
document.getElementById('logo').setAttribute('src', logoURL)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', 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();
|
||||
});
|
||||
// When the user scrolls down 80px from the top of the document,
|
||||
// resize the navbar's padding and the logo's font size
|
||||
document.addEventListener('scroll', 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');
|
||||
});
|
||||
const navMain = document.getElementsByClassName('navbar-collapse')
|
||||
for (const el of navMain) {
|
||||
el.addEventListener('click', function (e) {
|
||||
if (e.target.tagName === 'A') {
|
||||
navMain.collapse('hide')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
updateNavBar();
|
||||
});
|
||||
|
||||
updateNavBar()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
import Filterizr from 'filterizr';
|
||||
import Filterizr from 'filterizr'
|
||||
import { insertScript } from '../core'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// ================== Project cards =====================
|
||||
|
||||
// setup project filter buttons
|
||||
var projectCardHolder = document.getElementById("project-card-holder");
|
||||
if (projectCardHolder != null && projectCardHolder.children.length != 0) {
|
||||
new Filterizr(".filtr-projects", {
|
||||
const projectCardHolder = document.getElementById('project-card-holder')
|
||||
if (projectCardHolder != null && projectCardHolder.children.length !== 0) {
|
||||
// eslint-disable-next-line no-new
|
||||
new Filterizr('.filtr-projects', {
|
||||
layout: 'sameWidth',
|
||||
controlsSelector: '.project-filtr-control',
|
||||
});
|
||||
controlsSelector: '.project-filtr-control'
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// dynamically insert github buttons script.
|
||||
insertScript('github-buttons', 'https://buttons.github.io/buttons.js');
|
||||
insertScript('github-buttons', 'https://buttons.github.io/buttons.js')
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import Filterizr from 'filterizr';
|
||||
import Filterizr from 'filterizr'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
var publicationCardHolder = document.getElementById("publication-card-holder");
|
||||
if (publicationCardHolder != null && publicationCardHolder.children.length != 0) {
|
||||
new Filterizr(".filtr-publications", {
|
||||
const publicationCardHolder = document.getElementById('publication-card-holder')
|
||||
if (publicationCardHolder != null && publicationCardHolder.children.length !== 0) {
|
||||
// eslint-disable-next-line no-new
|
||||
new Filterizr('.filtr-publications', {
|
||||
layout: 'sameWidth',
|
||||
gridItemsSelector: '.pub-filtr-item',
|
||||
controlsSelector: '.pub-filtr-control',
|
||||
});
|
||||
controlsSelector: '.pub-filtr-control'
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,39 +1,38 @@
|
|||
import { getDeviceState } from '../core/device';
|
||||
import { getDeviceState } from '../core/device'
|
||||
|
||||
// Toggle sidebar on click. Here, class "hide" open the sidebar
|
||||
function toggleSidebar() {
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
function toggleSidebar () {
|
||||
const sidebar = document.getElementById('sidebar-section')
|
||||
if (sidebar == null) {
|
||||
return
|
||||
}
|
||||
if (sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide")
|
||||
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");
|
||||
const toc = document.getElementById('toc-section')
|
||||
if (toc != null && toc.classList.contains('hide')) {
|
||||
toc.classList.remove('hide')
|
||||
}
|
||||
// add "hide" class
|
||||
sidebar.classList.add("hide");
|
||||
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");
|
||||
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");
|
||||
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);
|
||||
});
|
||||
|
||||
const toggle = document.getElementById('sidebar-toggler')
|
||||
if (toggle) toggle.addEventListener('click', toggleSidebar)
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue