Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add a color mode switcher + a sticky header on all pages #421

Merged
merged 6 commits into from
Dec 13, 2024
Merged

Docs: Add a color mode switcher + a sticky header on all pages #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18c26f9
Add a color mode switcher + a sticky header on all pages
louismaximepiton Dec 5, 2024
6900672
Add footer
louismaximepiton Dec 5, 2024
07cf951
Merge remote-tracking branch 'origin/main' into main-lmp-handle-dark-…
louismaximepiton Dec 6, 2024
d85cf25
fix(ci)
louismaximepiton Dec 6, 2024
3c41c75
[FIX] Keep use case example in light mode
jacques-lebourgeois Dec 9, 2024
2a1d4a3
fix(review): remove useless change
louismaximepiton Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions docs/assets/color-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
})();
13 changes: 13 additions & 0 deletions docs/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
html,
body {
min-height: 100vh;
}
jacques-lebourgeois marked this conversation as resolved.
Show resolved Hide resolved

.footer {
position: sticky;
top: 100vh;
}
jacques-lebourgeois marked this conversation as resolved.
Show resolved Hide resolved

.border-subtle {
--bs-border-color: var(--bs-border-color-subtle);
jacques-lebourgeois marked this conversation as resolved.
Show resolved Hide resolved
}
51 changes: 49 additions & 2 deletions docs/examples/bar-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
51 changes: 49 additions & 2 deletions docs/examples/bar-line-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
51 changes: 49 additions & 2 deletions docs/examples/donut-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading