tabs minimized

assets/js/script.js

@@ -1,5 +1,30 @@
-const remFactor = 16;
-const verticalUnit = 1.3 * remFactor;
+const verticalUnit = getUnit("--unit--vertical");
+
+function getUnit(id) {
+  const remFactor = 16;
+  const rawUnit = getComputedStyle(document.documentElement).getPropertyValue(
+    id
+  );
+  if (rawUnit.length === 0) {
+    throw new Error(`getUnit() error : css variable ${id} doesn't exists.`);
+  }
+  const remUnit = parseFloat(rawUnit);
+  const pxUnit = remUnit * remFactor;
+  return pxUnit;
+}
+
+function throttle(callback, limit) {
+  let waiting = false;
+  return function () {
+    if (!waiting) {
+      callback.apply(this, arguments);
+      waiting = true;
+      setTimeout(function () {
+        waiting = false;
+      }, limit);
+    }
+  };
+}
 
 function toggleTab(data, tab) {
   if (data.activeTab === tab) {
@@ -48,24 +73,65 @@ function roundToNearestHalf(num) {
   return Math.max(round, 0);
 }
 
-setWindowHeightFactor();
+function enableToggleTabsVisibility() {
+  const tabs = document.querySelector("#tabs");
+  const toggleLeftBtn = tabs.querySelector("button.toggle.left");
+  const toggleRightBtn = tabs.querySelector("button.toggle.right");
+  const toggleLeftBtnWidth = toggleLeftBtn.offsetWidth;
+  const toggleRightBtnWidth = toggleRightBtn.offsetWidth;
+
+  toggleLeftBtn.style = `--width: ${toggleLeftBtnWidth}px`;
+  toggleRightBtn.style = `--width: ${toggleRightBtnWidth}px`;
+
+  const toggleVisibility = (entries) => {
+    entries.forEach((entry) => {
+      const isIntersecting = entry.isIntersecting;
+      if (isIntersecting) {
+        console.log("is intersecting");
+        tabs.classList.remove("minimized");
+      } else {
+        console.log("is not intersecting");
+        tabs.classList.add("minimized");
+      }
+    });
+  };
+
+  const top = verticalUnit * 6;
+
+  const observer = new IntersectionObserver(toggleVisibility, {
+    root: null,
+    rootMargin: `-${top}px 0px 0px 0px`,
+    threshold: 0,
+  });
+
+  observer.observe(tabs);
+}
+
+function toggleLogoState() {
+  const scrollY = window.scrollY || window.pageYOffset;
+
+  if (scrollY > 10) {
+    document.querySelector("#main-header").classList.add("minimized");
+  } else {
+    document.querySelector("#main-header").classList.remove("minimized");
+  }
+}
 
 document.addEventListener("DOMContentLoaded", () => {
-  function toggleLogoState() {
-    const scrollY = window.scrollY || window.pageYOffset;
-
-    if (scrollY > 10) {
-      document.querySelector("#main-header").classList.add("minimized");
-    } else {
-      document.querySelector("#main-header").classList.remove("minimized");
-    }
-  }
-
   window.window.scrollTo({
     top: 0,
   });
 
-  window.addEventListener("scroll", () => {
-    toggleLogoState();
-  });
+  window.addEventListener(
+    "scroll",
+    throttle(() => {
+      toggleLogoState();
+    }, 10)
+  );
+  setWindowHeightFactor();
+
+  // Wait for fonts applied
+  setTimeout(() => {
+    enableToggleTabsVisibility();
+  }, 100);
 });