Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
doc: make header smaller and dropdown click-driven when JS is on
- Loading branch information
1 parent
bb71433
commit 00f693b
Showing
5 changed files
with
190 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,4 +7,5 @@ tools/icu | |
| tools/lint-md/lint-md.mjs | ||
| benchmark/tmp | ||
| doc/**/*.js | ||
| !doc/api_assets/*.js | ||
| !.eslintrc.js | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| 'use strict'; | ||
|
|
||
| { | ||
| function setupTheme() { | ||
| const kCustomPreference = 'customDarkTheme'; | ||
| const userSettings = sessionStorage.getItem(kCustomPreference); | ||
| const themeToggleButton = document.getElementById('theme-toggle-btn'); | ||
|
|
||
| if (userSettings === null && window.matchMedia) { | ||
| const mq = window.matchMedia('(prefers-color-scheme: dark)'); | ||
|
|
||
| if ('onchange' in mq) { | ||
| function mqChangeListener(e) { | ||
| document.documentElement.classList.toggle('dark-mode', e.matches); | ||
| } | ||
| mq.addEventListener('change', mqChangeListener); | ||
| if (themeToggleButton) { | ||
| themeToggleButton.addEventListener('click', function() { | ||
| mq.removeEventListener('change', mqChangeListener); | ||
| }, { once: true }); | ||
| } | ||
| } | ||
|
|
||
| if (mq.matches) { | ||
| document.documentElement.classList.add('dark-mode'); | ||
| } | ||
| } else if (userSettings === 'true') { | ||
| document.documentElement.classList.add('dark-mode'); | ||
| } | ||
|
|
||
| if (themeToggleButton) { | ||
| themeToggleButton.hidden = false; | ||
| themeToggleButton.addEventListener('click', function() { | ||
| sessionStorage.setItem( | ||
| kCustomPreference, | ||
| document.documentElement.classList.toggle('dark-mode') | ||
| ); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function setupPickers() { | ||
| function closeAllPickers() { | ||
| for (const picker of pickers) { | ||
| picker.parentNode.classList.remove('expanded'); | ||
| } | ||
|
|
||
| window.removeEventListener('click', closeAllPickers); | ||
| window.removeEventListener('keydown', onKeyDown); | ||
| } | ||
|
|
||
| function onKeyDown(e) { | ||
| if (e.key === 'Escape') { | ||
| closeAllPickers(); | ||
| } | ||
| } | ||
|
|
||
| const pickers = document.querySelectorAll('.picker-header > a'); | ||
|
|
||
| for (const picker of pickers) { | ||
| const parentNode = picker.parentNode; | ||
|
|
||
| picker.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| /* | ||
| closeAllPickers as window event trigger already closed all the pickers, | ||
| if it already closed there is nothing else to do here | ||
| */ | ||
| if (parentNode.classList.contains('expanded')) { | ||
| return; | ||
| } | ||
|
|
||
| /* | ||
| In the next frame reopen the picker if needed and also setup events | ||
| to close pickers if needed. | ||
| */ | ||
|
|
||
| requestAnimationFrame(() => { | ||
| parentNode.classList.add('expanded'); | ||
| window.addEventListener('click', closeAllPickers); | ||
| window.addEventListener('keydown', onKeyDown); | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function setupStickyHeaders() { | ||
| const header = document.querySelector('.header'); | ||
| let ignoreNextIntersection = false; | ||
|
|
||
| new IntersectionObserver( | ||
| ([e]) => { | ||
| const currentStatus = header.classList.contains('is-pinned'); | ||
| const newStatus = e.intersectionRatio < 1; | ||
|
|
||
| // Same status, do nothing | ||
| if (currentStatus === newStatus) { | ||
| return; | ||
| } else if (ignoreNextIntersection) { | ||
| ignoreNextIntersection = false; | ||
| return; | ||
| } | ||
|
|
||
| /* | ||
| To avoid flickering, ignore the next changes event that is triggered | ||
| as the visible elements in the header change once we pin it. | ||
| The timer is reset anyway after few milliseconds. | ||
| */ | ||
| ignoreNextIntersection = true; | ||
| setTimeout(() => { | ||
| ignoreNextIntersection = false; | ||
| }, 50); | ||
|
|
||
| header.classList.toggle('is-pinned', newStatus); | ||
| }, | ||
| { threshold: [1] } | ||
| ).observe(header); | ||
| } | ||
|
|
||
| function bootstrap() { | ||
| // Check if we have JavaScript support | ||
| document.documentElement.classList.add('has-js'); | ||
|
|
||
| // Restore user mode preferences | ||
| setupTheme(); | ||
|
|
||
| // Handle pickers with click/taps rather than hovers | ||
| setupPickers(); | ||
|
|
||
| // Track when the header is in sticky position | ||
| setupStickyHeaders(); | ||
| } | ||
|
|
||
| if (document.readyState === 'loading') { | ||
| document.addEventListener('DOMContentLoaded', bootstrap, { once: true }); | ||
| } else { | ||
| bootstrap(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters