tabs minimized

assets/css/src/tabs.css

@@ -5,6 +5,13 @@ button.toggle.open:not(.see-more) {
   font-weight: bold;
 }
 
+#tabs button.toggle {
+  transition: margin 0.4s var(--curve-sine);
+}
+
+#tabs.minimized button.toggle.left {
+  margin-left: calc(-4px - var(--width));
+}
 button.toggle.left::after {
   margin-left: var(--unit--horizontal);
 }
@@ -15,6 +22,9 @@ button.toggle.left.open::after {
   content: "-";
 }
 
+#tabs.minimized button.toggle.right {
+  margin-right: calc(-4px - var(--width));
+}
 button.toggle.right::before {
   margin-right: var(--unit--horizontal);
 }
@@ -26,10 +36,12 @@ button.toggle.right.open::before {
 }
 
 #tabs {
-  position: absolute;
   width: 100%;
   z-index: 1;
-  bottom: calc(var(--unit--vertical-relative) * 4);
+
+  position: sticky;
+  top: calc(var(--unit--vertical) * 8);
+  transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
 }
 
 .active-tab {

assets/css/src/variables.css

@@ -21,6 +21,8 @@
   --font-weight-light: 200;
   --font-weight-bold: 400;
   --font-weight-extra-bold: 550;
+
+  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 
 @media screen and (min-width: 640px) {

assets/js/script.js

@@ -1,5 +1,30 @@
-const remFactor = 16;
+const verticalUnit = getUnit("--unit--vertical");
-const verticalUnit = 1.3 * remFactor;
+
+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", () => {
+  window.addEventListener(
-    toggleLogoState();
+    "scroll",
-  });
+    throttle(() => {
+      toggleLogoState();
+    }, 10)
+  );
+  setWindowHeightFactor();
+
+  // Wait for fonts applied
+  setTimeout(() => {
+    enableToggleTabsVisibility();
+  }, 100);
 });

site/snippets/cover.php

@@ -3,10 +3,6 @@ $isOpen = isset($isOpen) ? $isOpen : false;
 ?>
 
 <header 
-  x-data="{
-    activeTab: ''
-  }"
-  :class="activeTab.length > 0 ? 'open' : 'close'"
   class="page-cover"
 >
   <div class="title-wrapper">

site/snippets/header.php

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
     <link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
-    <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
+    <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" type="module" defer></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <meta name="robots" content="noindex, nofollow, noarchive">
   </head>

site/snippets/tabs.php

@@ -8,7 +8,12 @@ $authorFilter = isset($authorFilter) ? $authorFilter : false;
 $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
 ?>
 
-<nav id="tabs" :class="activeTab.length > 0 ? 'open' : 'close'">
+<nav id="tabs" 
+  x-data="{
+    activeTab: ''
+  }"
+  :class="activeTab.length > 0 ? 'open' : 'close'"
+>
     <div class="toggle-btns | flex space-between" style="
     --content:space-between;
     ">
@@ -65,8 +70,8 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
             <?php snippet(
                 'text-item',
                 [
-                                                      'article' => $article
+                                                                                          'article' => $article
-                                                    ]
+                                                                                        ]
             ) ?>
           <?php endif ?>
         <?php endforeach ?>

site/templates/linear.php

@@ -1,31 +1,29 @@
 <?php snippet('header') ?>
 <main id="<?= $page->template() ?>">
-<article>
+  <article>
-  <?php snippet('cover', ['isOpen' => true], slots: true) ?>
+    <?php snippet('cover', ['isOpen' => true], slots: true) ?>
-    <?php slot('title') ?>
+      <?php slot('title') ?>
-    <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
+      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
-    <p>
+      <p>
-      <span class="opacity" style="--opacity:.6">par </span>
+        <span class="opacity" style="--opacity:.6">par </span>
-      <a 
+        <a 
-        class="author" 
+          class="author" 
-        href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
+          href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
-        title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"
+          title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"
-      >
+        >
-        <?= $page->author()->toUser()->name() ?>
+          <?= $page->author()->toUser()->name() ?>
-      </a><br>
+        </a><br>
-      <span class="opacity" style="--opacity:.6">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
+        <span class="opacity" style="--opacity:.6">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
-      <span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
+        <span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
-    </p>
+      </p>
-    <?php endslot() ?>
+      <?php endslot() ?>
-    <?php slot('tabs') ?>
+    <?php endsnippet() ?>
     <?php snippet('tabs', [
       'left' => [
         'label' => 'édito ' . $page->parent()->title(),
         'content' => $page->parent()->edito()
       ],
-    ]) ?>    
+    ]) ?>
-    <?php endslot() ?>
+    <?= $page->body() ?>
-  <?php endsnippet() ?>
+  </article>
-  <?= $page->body() ?>
-</article>
 </main>