3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-12 15:52:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): unify anchor behavior (#2162)

Browse source 
* fix(v2): unify anchor behavior

* fix(v2): use activeElement

* fix(v2): add support for sticky header

* Fix highlighted anchor if non-hidable navbar enabled
This commit is contained in:
Alexey Pyltsyn 2020-01-23 19:06:51 +03:00 • committed by GitHub
parent c0c0ad6661
commit 155539421b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

56
packages/docusaurus-theme-classic/src/theme/Heading/index.js
View file

@ -8,27 +8,45 @@
/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
import React from 'react'; import React from 'react';
import classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import './styles.css'; import './styles.css';
import styles from './styles.module.css';
const Heading = Tag => ({id, ...props}) => { const Heading = Tag =>
if (!id) { function TargetComponent({id, ...props}) {
return <Tag {...props} />; const {
} siteConfig: {
return ( themeConfig: {navbar: {hideOnScroll = false} = {}} = {},
<Tag {...props}> } = {},
<a aria-hidden="true" tabIndex="-1" className="anchor" id={id} /> } = useDocusaurusContext();
<a
aria-hidden="true" if (!id) {
tabIndex="-1" return <Tag {...props} />;
className="hash-link" }
href={`#${id}`}
title="Direct link to heading"> return (
# <Tag {...props}>
</a> <a
{props.children} aria-hidden="true"
</Tag> tabIndex="-1"
); className={classnames('anchor', {
}; [styles.enhancedAnchor]: !hideOnScroll,
})}
id={id}
/>
<a
aria-hidden="true"
tabIndex="-1"
className="hash-link"
href={`#${id}`}
title="Direct link to heading">
#
</a>
{props.children}
</Tag>
);
};
export default Heading; export default Heading;

9
packages/docusaurus-theme-classic/src/theme/Heading/styles.css
View file

@ -8,13 +8,8 @@
.anchor { .anchor {
display: block; display: block;
position: relative; position: relative;
top: -5rem; top: -0.5rem;
} outline: none;
@media only screen and (max-width: 735px) {
.anchor {
top: -10rem;
}
} }
.hash-link { .hash-link {

7
packages/docusaurus-theme-classic/src/theme/Heading/styles.module.css Normal file
View file

@ -0,0 +1,7 @@
.enhancedAnchor:target:before {
content: '';
display: block;
height: var(--ifm-navbar-height);
margin: calc(var(--ifm-navbar-height) * -1) 0 0;
visibility: hidden;
}

13
packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js
View file

@ -21,13 +21,22 @@ const useHideableNavbar = hideOnScroll => {
const handleScroll = () => { const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const documentHeight = document.documentElement.scrollHeight - navbarHeight;
const windowHeight = window.innerHeight;
if (scrollTop < navbarHeight) { if (scrollTop < navbarHeight) {
return; return;
} }
const focusedElement = document.activeElement;
if (focusedElement && /^#/.test(window.location.hash)) {
setIsNavbarVisible(false);
focusedElement.blur();
return;
}
const documentHeight = document.documentElement.scrollHeight - navbarHeight;
const windowHeight = window.innerHeight;
if (lastScrollTop && scrollTop > lastScrollTop) { if (lastScrollTop && scrollTop > lastScrollTop) {
setIsNavbarVisible(false); setIsNavbarVisible(false);
} else if (scrollTop + windowHeight < documentHeight) { } else if (scrollTop + windowHeight < documentHeight) {