feat(docs): add a color mode switcher, a sticky header and a footer t…

…o each page Co-authored-by: Jacques Lebourgeois <[email protected]>
Orange-OpenSource · Dec 13, 2024 · 7d690af · 7d690af
1 parent eb62885
commit 7d690af
Show file tree

Hide file tree

Showing 22 changed files with 964 additions and 55 deletions.
diff --git a/docs/assets/color-mode.js b/docs/assets/color-mode.js
@@ -0,0 +1,79 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict';
+
+  const getStoredTheme = () => localStorage.getItem('theme');
+  const setStoredTheme = (theme) => localStorage.setItem('theme', theme);
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+      return storedTheme;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+
+  const setTheme = (theme) => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    }
+  };
+
+  setTheme(getPreferredTheme());
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme');
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text');
+    const activeThemeIcon = document.querySelector('.theme-icon-active use');
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href');
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
+      element.classList.remove('active');
+      element.setAttribute('aria-pressed', 'false');
+    });
+
+    btnToActive.classList.add('active');
+    btnToActive.setAttribute('aria-pressed', 'true');
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme());
+    }
+  });
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme());
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value');
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -0,0 +1,13 @@
+html,
+body {
+  min-height: 100vh;
+}
+
+.footer {
+  position: sticky;
+  top: 100vh;
+}
+
+.border-subtle {
+  --bs-border-color: var(--bs-border-color-subtle);
+}
diff --git a/docs/examples/bar-chart.html b/docs/examples/bar-chart.html
@@ -8,6 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
     <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link href="../assets/style.css" rel="stylesheet" />
     <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
     <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
     <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
@@ -21,17 +22,51 @@
     -->
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
     <script type="module" src="./index.js"></script>
+    <script type="text/javascript" src="../assets/color-mode.js"></script>
   </head>
   <body>
-    <header data-bs-theme="dark">
+    <header class="sticky-top" data-bs-theme="dark">
       <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
-          <div class="navbar-brand me-auto me-lg-4">
+          <div class="navbar-brand me-auto">
             <a class="stretched-link" href="./">
               <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
+          <div id="global-header" class="navbar-collapse d-lg-flex collapse show">
+            <ul class="navbar-nav flex-row">
+              <li class="nav-item dropdown">
+                <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+                  <svg class="theme-icon-active"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                  <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-light-mode"></use></svg>
+                      Light
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-dark-mode"></use></svg>
+                      Dark
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                      Auto
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </nav>
     </header>
@@ -112,6 +147,18 @@ <h5 class="card-title">Grouped bar chart with dataset</h5>
         </div>
       </div>
     </main>
+
+    <footer class="footer navbar mt-5" data-bs-theme="dark">
+      <h2 class="visually-hidden">Sitemap & information</h2>
+      <div class="container-xxl footer-terms">
+        <ul class="navbar-nav gap-md-3">
+          <li class="fw-bold">© Orange 2024</li>
+          <li><a class="nav-link" href="javascript:tarteaucitron.userInterface.openPanel();">Cookies</a></li>
+          <li><a class="nav-link" href="https://github.com/Orange-OpenSource/ods-charts/blob/main/LICENSE" target="blank" rel="license noopener">License</a></li>
+        </ul>
+      </div>
+    </footer>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
     <script src="../assets/tarteaucitron-config.js"></script>

diff --git a/docs/examples/bar-line-chart.html b/docs/examples/bar-line-chart.html
@@ -8,6 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
     <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link href="../assets/style.css" rel="stylesheet" />
     <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
     <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
     <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
@@ -21,17 +22,51 @@
     -->
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
     <script type="module" src="./index.js"></script>
+    <script type="text/javascript" src="../assets/color-mode.js"></script>
   </head>
   <body>
-    <header data-bs-theme="dark">
+    <header class="sticky-top" data-bs-theme="dark">
       <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
-          <div class="navbar-brand me-auto me-lg-4">
+          <div class="navbar-brand me-auto">
             <a class="stretched-link" href="./">
               <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
+          <div id="global-header" class="navbar-collapse d-lg-flex collapse show">
+            <ul class="navbar-nav flex-row">
+              <li class="nav-item dropdown">
+                <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+                  <svg class="theme-icon-active"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                  <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-light-mode"></use></svg>
+                      Light
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-dark-mode"></use></svg>
+                      Dark
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                      Auto
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </nav>
     </header>
@@ -70,6 +105,18 @@ <h5 class="card-title">Grouped bar and line chart</h5>
         </div>
       </div>
     </main>
+
+    <footer class="footer navbar mt-5" data-bs-theme="dark">
+      <h2 class="visually-hidden">Sitemap & information</h2>
+      <div class="container-xxl footer-terms">
+        <ul class="navbar-nav gap-md-3">
+          <li class="fw-bold">© Orange 2024</li>
+          <li><a class="nav-link" href="javascript:tarteaucitron.userInterface.openPanel();">Cookies</a></li>
+          <li><a class="nav-link" href="https://github.com/Orange-OpenSource/ods-charts/blob/main/LICENSE" target="blank" rel="license noopener">License</a></li>
+        </ul>
+      </div>
+    </footer>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
     <script src="../assets/tarteaucitron-config.js"></script>

diff --git a/docs/examples/donut-chart.html b/docs/examples/donut-chart.html
@@ -8,6 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous" />
     <link href="../assets/tarteaucitron-config.css" rel="stylesheet" />
+    <link href="../assets/style.css" rel="stylesheet" />
     <link rel="apple-touch-icon" href="../images/favicons/apple-touch-icon.png" sizes="180x180" />
     <link rel="icon" href="../images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
     <link rel="icon" href="../images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
@@ -21,17 +22,51 @@
     -->
     <script type="text/javascript" src="../../dist/ods-charts.js"></script>
     <script type="module" src="./index.js"></script>
+    <script type="text/javascript" src="../assets/color-mode.js"></script>
   </head>
   <body>
-    <header data-bs-theme="dark">
+    <header class="sticky-top" data-bs-theme="dark">
       <nav class="navbar navbar-expand-lg" aria-label="Global navigation">
         <div class="container-xxl">
-          <div class="navbar-brand me-auto me-lg-4">
+          <div class="navbar-brand me-auto">
             <a class="stretched-link" href="./">
               <img src="../images/orange-logo.svg" width="50" height="50" alt="ODS Charts - Back to Home" loading="lazy" />
             </a>
             <h1 class="title">Orange Design System Charts</h1>
           </div>
+          <div id="global-header" class="navbar-collapse d-lg-flex collapse show">
+            <ul class="navbar-nav flex-row">
+              <li class="nav-item dropdown">
+                <button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
+                  <svg class="theme-icon-active"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                  <span class="d-lg-none ms-2" id="bd-theme-text">Toggle mode</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end mb-2" aria-labelledby="bd-theme-text">
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-light-mode"></use></svg>
+                      Light
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-dark-mode"></use></svg>
+                      Dark
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+                      <svg class="me-2"><use href="../images/ods-charts-icons.svg#ui-auto-mode"></use></svg>
+                      Auto
+                      <svg class="ms-auto d-none"><use href="../images/ods-charts-icons.svg#check2"></use></svg>
+                    </button>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </nav>
     </header>
@@ -56,6 +91,18 @@ <h5 class="card-title">Donut chart</h5>
         </div>
       </div>
     </main>
+
+    <footer class="footer navbar mt-5" data-bs-theme="dark">
+      <h2 class="visually-hidden">Sitemap & information</h2>
+      <div class="container-xxl footer-terms">
+        <ul class="navbar-nav gap-md-3">
+          <li class="fw-bold">© Orange 2024</li>
+          <li><a class="nav-link" href="javascript:tarteaucitron.userInterface.openPanel();">Cookies</a></li>
+          <li><a class="nav-link" href="https://github.com/Orange-OpenSource/ods-charts/blob/main/LICENSE" target="blank" rel="license noopener">License</a></li>
+        </ul>
+      </div>
+    </footer>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
     <script src="../assets/tarteaucitron-config.js"></script>