From 98fa18117e32b30f1ded7e0745fe91f340fc1806 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Sun, 13 Aug 2023 21:46:33 +0700 Subject: Initial commit for NEWER site --- scripts/onload.js | 8 ++++++ scripts/scroll.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 scripts/onload.js create mode 100644 scripts/scroll.js (limited to 'scripts') diff --git a/scripts/onload.js b/scripts/onload.js new file mode 100644 index 0000000..5c63f35 --- /dev/null +++ b/scripts/onload.js @@ -0,0 +1,8 @@ +function addNodes() { + const collection = document.getElementsByTagName("section"); + const container = document.getElementById("progressContainer"); + + for (var i = 0; i < collection.length; i++) { + container.innerHTML += "\n"; + } +} \ No newline at end of file diff --git a/scripts/scroll.js b/scripts/scroll.js new file mode 100644 index 0000000..b7a6fa0 --- /dev/null +++ b/scripts/scroll.js @@ -0,0 +1,74 @@ +document.addEventListener('scroll', function () { + progress(); + hideSidebar(); +}); + +function progress() { + const sections = document.getElementsByTagName("section"); + const nodes = document.getElementsByTagName("nodes"); + + if (nodes[0]) { + for (var i = 0; i < sections.length; i++) { + if (isInViewport(sections[i])) { + nodes[i].style.width = "20px"; + nodes[i].style.height = "20px"; + } + else { + nodes[i].style.width = "10px"; + nodes[i].style.height = "10px"; + } + } + } +} + +function hideSidebar() { + const sidebar = document.getElementById("sidebar"); + const progressContainer = document.getElementById("progressContainer"); + const sections = document.getElementsByTagName("section"); + + 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"; + } +} + +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); + const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); + const elementHeight = rect.height; + const elementWidth = rect.width; + const halfElementHeight = elementHeight / 2; + const halfElementWidth = elementWidth / 2; + + return ( + visibleHeight >= halfElementHeight && + visibleWidth >= halfElementWidth + ); +} + + -- cgit v1.2.3