1 files changed, 81 insertions, 0 deletions
diff --git a/www/scripts/scroll.js b/www/scripts/scroll.js
new file mode 100644
index 0000000..d7ab5da
--- /dev/null
+++ b/www/scripts/scroll.js
@@ -0,0 +1,81 @@
+document.addEventListener('scroll', function () {
+	progress();
+	// hideSidebar();
+});
+
+window.addEventListener("load", function () {
+	progress();
+});
+
+nodeBigSize = "25px";
+nodeDefaultSize = "16px";
+
+function progress() {
+	const sections = document.getElementsByTagName("section");
+	const nodes = document.getElementsByClassName("node");
+
+	if (nodes[0]) {
+		for (var i = 0; i < sections.length; i++) {
+			if (isInViewport(sections[i])) {
+				nodes[i].style.width = nodeBigSize;
+				nodes[i].style.height = nodeBigSize;
+				nodes[i].style.backgroundColor = "black";
+			}
+			else {
+				nodes[i].style.width = nodeDefaultSize;
+				nodes[i].style.height = nodeDefaultSize;
+				nodes[i].style.backgroundColor = "#555";
+			}
+		}
+	}
+}
+
+function hideSidebar() {
+	const sidebar = document.getElementById("sidebar");
+	const progressContainer = document.getElementById("progressContainer");
+	const sections = document.getElementsByTagName("section");
+
+	if (!progressContainer) {
+	return;
+	}
+
+	if (screen.width <= 600) {
+		if (window.scrollY >= 100) {
+			sidebar.style.left = "-80px";
+
+			for (var i = 0; i < sections.length; i++) {
+				sections[i].style.marginLeft = 0;
+			}
+
+			if (progressContainer) {
+				progressContainer.style.left = "-11px";
+			}
+		}
+		else {
+			sidebar.style.left = "0";
+
+			for (var i = 0; i < sections.length; i++) {
+				sections[i].style.marginLeft = "70px";
+			}
+
+			if (progressContainer) {
+				progressContainer.style.left = "61px";
+			}
+		}
+	}
+	else {
+		sidebar.style.left = "0";
+		progressContainer.style.left = "61px";
+	}
+}
+
+// Imagine a line in the middle of your viewport.
+// Hence, it moves along gas you scroll.
+// If this line is inside the element, returns true, else false.
+function isInViewport(element) {
+	const rect = element.getBoundingClientRect();
+	const scroll = window.scrollY;
+	const position = window.scrollY + window.innerHeight / 2;
+	if (position < rect.bottom + scroll && position > rect.top + scroll) return true;
+	else return false;
+}