1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
"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 = $(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();
// 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");
}
}
|
