Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Apr 9, 2024
1 parent 237d581 commit 7fd29bb
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 55 deletions.
33 changes: 20 additions & 13 deletions docs/_includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,31 +46,38 @@ <h2 class="visually-hidden">Sitemap & information</h2>
setTheme(getPreferredTheme())

const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#bd-theme')
const themeSwitchers = document.querySelectorAll('.btn-theme')

if (!themeSwitcher) {
if (!themeSwitchers) {
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')
const activeThemeIcons = document.querySelectorAll('.theme-icon-active use')
const btnsToActive = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnsToActive[0].querySelector('svg use').getAttribute('href')
console.log(btnsToActive)

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)
btnsToActive.forEach(btnToActive => {
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
})
activeThemeIcons.forEach(activeThemeIcon => {
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
})
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnsToActive[0].dataset.bsThemeValue})`
themeSwitchers.forEach(themeSwitcher => {
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

if (focus) {
themeSwitcher.focus()
}
if (focus) {
themeSwitcher.focus()
}
})
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
Expand Down
14 changes: 7 additions & 7 deletions docs/_includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 1000 1000">
<symbol id="check2" viewBox="0 0 1000 1000" fill="currentColor">
<path d="M729.667 250 396.333 583.333l-125-125L188 541.667l125 125L396.333 750l83.334-83.333L813 333.333z"></path>
</symbol>
<symbol id="ui-auto-mode" viewBox="0 0 1000 1000">
<symbol id="ui-auto-mode" viewBox="0 0 1000 1000" fill="currentColor">
<path d="M500 75C265.3 75 75 265.5 75 500.5S265.3 926 500 926s425-190.5 425-425.5S734.7 75 500 75m0 775V150c192.6.9 350 157.5 350 350.5S692.6 849.1 500 850"></path>
</symbol>
<symbol id="ui-dark-mode" viewBox="0 0 1000 1000">
<symbol id="ui-dark-mode" viewBox="0 0 1000 1000" fill="currentColor">
<path d="M675 649.88c-179.493 0-325-145.57-325-325.141A324.478 324.478 0 0 1 465.721 76C247.03 93.463 75 276.537 75 499.815 75 734.638 265.279 925 500 925c223.181 0 406.175-172.106 423.63-390.891A324.222 324.222 0 0 1 675 649.88Z"></path>
</symbol>
<symbol id="ui-light-mode" viewBox="0 0 1000 1000">
<symbol id="ui-light-mode" viewBox="0 0 1000 1000" fill="currentColor">
<path d="M287.868 712.132a25.073 25.073 0 0 0-35.355 0l-53.033 53.033a25 25 0 0 0 35.355 35.355l53.033-53.033a25.073 25.073 0 0 0 0-35.355Zm424.264-424.264a25.073 25.073 0 0 0 35.355 0l53.033-53.033a25 25 0 0 0-35.355-35.355l-53.033 53.033a25.073 25.073 0 0 0 0 35.355Zm35.355 424.264a25.073 25.073 0 0 0-35.355 0 25.073 25.073 0 0 0 0 35.355l53.033 53.033a25 25 0 0 0 35.355-35.355ZM252.513 287.868a25.073 25.073 0 0 0 35.355 0 25.073 25.073 0 0 0 0-35.355l-53.033-53.033a25 25 0 0 0-35.355 35.355ZM200 500a25.073 25.073 0 0 0-25-25h-75a25 25 0 0 0 0 50h75a25.073 25.073 0 0 0 25-25Zm700-25h-75a25 25 0 0 0 0 50h75a25 25 0 0 0 0-50ZM500 800a25.073 25.073 0 0 0-25 25v75a25 25 0 0 0 50 0v-75a25.073 25.073 0 0 0-25-25Zm0-600a25.073 25.073 0 0 0 25-25v-75a25 25 0 0 0-50 0v75a25.073 25.073 0 0 0 25 25Zm0 50c-138.071 0-250 111.929-250 250s111.929 250 250 250 250-111.929 250-250-111.929-250-250-250Z"></path>
</symbol>
</svg>

<header class="sticky-top" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg supra" data-bs-theme="dark" aria-label="Supra navigation of ODS Flutter">
<nav class="navbar navbar-expand-md supra" data-bs-theme="dark" aria-label="Supra navigation of ODS Flutter">
<div class="container-xxl">
<ul class="navbar-nav">
<li class="nav-item"><a href="https://orange-opensource.github.io/ods-android/" target="_blank" rel="noopener" class="nav-link">ODS Android</a></li>
Expand Down Expand Up @@ -42,8 +42,8 @@ <h1 class="two-lined text-white">
<span class="visually-hidden">GitHub repository</span>
</a>
</li>
<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)">
<li class="nav-item dropdown d-none d-md-block">
<button class="nav-link nav-icon btn-theme dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
<svg class="theme-icon-active"><use href="#ui-auto-mode"></use></svg>
<span class="d-none ms-2" id="bd-theme-text">Toggle mode</span>
</button>
Expand Down
104 changes: 69 additions & 35 deletions docs/_layouts/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
main > div > :last-child > * {
margin-bottom: 0;
}
.border-subtle {
--bs-border-color: var(--bs-border-color-subtle);
}
[data-bs-theme-value].active svg {
display: block !important;
}
@media (max-width: 1023.98px) {
.z-offcanvas {
z-index: 1045;
Expand Down Expand Up @@ -58,47 +64,75 @@
<div class="col-lg-3" aria-label="Global navigation of ODS iOS">
<aside class="h-100 border-end border-1 border-light overflow-auto z-offcanvas" style="position: sticky; top: 160px; max-height: calc(100vh - 220px);">

<div class="offcanvas-lg offcanvas-end border-0" tabindex="-1" id="offcanvasWrapper" aria-labelledby="offcanvasWrapperLabel" style="--bs-offcanvas-width: 100%;">
<nav class="d-lg-none navbar navbar-expand supra ps-3" data-bs-theme="dark" aria-label="Supra navigation of ODS Flutter">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">ODS Android</a></li>
<li class="nav-item"><a href="#" class="nav-link">ODS iOS</a></li>
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">ODS Flutter</a></li>
</ul>
</nav>
<div class="offcanvas-header border-bottom border-1 border-light">
<h5 class="offcanvas-title" id="offcanvasWrapperLabel">ODS Flutter navigation</h5>
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasWrapper" aria-labelledby="offcanvasWrapperLabel" style="--bs-offcanvas-width: 270px;">
<div class="offcanvas-header border-bottom py-1 border-1 border-subtle">
<div class="dropdown d-md-none">
<button class="btn btn-icon btn-no-outline btn-theme dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle mode (auto)">
<svg class="theme-icon-active" width="20" height="20"><use href="#ui-auto-mode"></use></svg>
</button>
<ul class="position-absolute dropdown-menu 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" width="20" height="20"><use href="#ui-light-mode"></use></svg>
Light
<svg class="ms-auto d-none" width="20" height="20"><use href="#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" width="20" height="20"><use href="#ui-dark-mode"></use></svg>
Dark
<svg class="ms-auto d-none" width="20" height="20"><use href="#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" width="20" height="20"><use href="#ui-auto-mode"></use></svg>
Auto
<svg class="ms-auto d-none" width="20" height="20"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasWrapper" style="margin-right: -.625rem;"><span class="visually-hidden">Close</span></button>
</div>
<nav class="offcanvas-body d-flex flex-column pb-4 pb-lg-0 pe-1 gap-4">
{% if site.data.data_menus.toc2[0] %}
{% for item in site.data.data_menus.toc2 %}
<div>
<h3 class="mb-2">{{ item.title }}</h3>
{% if item.subfolderitems[0] %}
<div class="ps-3">
<ul class="d-flex flex-column gap-2 gap-lg-1 mb-0 list-unstyled">
{% for entry in item.subfolderitems %}
{% if entry.page == page.title %}
<li><a class="text-decoration-none fw-bold" href="{{ site.baseurl }}/{{ entry.url }}">{{ entry.page }}</a>
{% else %}
<li><a class="text-decoration-none" href="{{ site.baseurl }}/{{ entry.url }}">{{ entry.page }}</a>
{% endif %}
{% if entry.subsubfolderitems[0] %}
<ul>
{% for subentry in entry.subsubfolderitems %}
<li><a href="{{ site.baseurl }}/{{ subentry.url }}">{{ subentry.page }}</a></li>
{% endfor %}
</ul>
<nav class="offcanvas-body d-flex flex-column pb-4 pb-lg-0 px-0">
<div class="d-md-none mb-4 px-3 border-bottom border-1 border-subtle">
<ul class="navbar-nav gap-3 mt-2 mb-3">
<li class="nav-item"><a href="https://orange-opensource.github.io/ods-android/" target="_blank" rel="noopener" class="fw-bold text-decoration-none">ODS Android</a></li>
<li class="nav-item"><a href="https://orange-opensource.github.io/ods-ios/" target="_blank" rel="noopener" class="fw-bold text-decoration-none">ODS iOS</a></li>
</ul>
</div>
<div class="d-flex flex-column gap-4">
{% if site.data.data_menus.toc2[0] %}
{% for item in site.data.data_menus.toc2 %}
<div class="px-3">
<h3 class="mb-2">{{ item.title }}</h3>
{% if item.subfolderitems[0] %}
<div class="ps-3">
<ul class="d-flex flex-column gap-2 gap-lg-1 mb-0 list-unstyled">
{% for entry in item.subfolderitems %}
{% if entry.page == page.title %}
<li><a class="text-decoration-none fw-bold" href="{{ site.baseurl }}/{{ entry.url }}">{{ entry.page }}</a>
{% else %}
<li><a class="text-decoration-none" href="{{ site.baseurl }}/{{ entry.url }}">{{ entry.page }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% if entry.subsubfolderitems[0] %}
<ul>
{% for subentry in entry.subsubfolderitems %}
<li><a href="{{ site.baseurl }}/{{ subentry.url }}">{{ subentry.page }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% endfor %}
{% endif %}
</nav>
</div>
</aside>
Expand Down

0 comments on commit 7fd29bb

Please sign in to comment.