Skip to content

Commit

Permalink
Fix: Scroll section into view when exiting isolated mode (#1331)
Browse files Browse the repository at this point in the history
  • Loading branch information
Blightwidow authored and sapegin committed Apr 10, 2019
1 parent 6663744 commit 63251bb
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 12 deletions.
23 changes: 13 additions & 10 deletions src/client/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './polyfills';
import './styles';
import ReactDOM from 'react-dom';
import renderStyleguide from './utils/renderStyleguide';
import { getParameterByName, hasInHash } from './utils/handleHash';
import { getParameterByName, hasInHash, getHash } from './utils/handleHash';

// Examples code revision to rerender only code examples (not the whole page) when code changes
// eslint-disable-next-line no-unused-vars
Expand All @@ -12,22 +12,25 @@ let codeRevision = 0;
// Scrolls to origin when current window location hash points to an isolated view.
const scrollToOrigin = () => {
const hash = window.location.hash;
let idHashParam;

if (hasInHash(hash, '#/') || hasInHash(hash, '#!/')) {
// Extracts the id param of hash
const idHashParam = getParameterByName(hash, 'id');

// For default scroll scrollTop is the page top
let scrollTop = 0;
idHashParam = getParameterByName(hash, 'id');
} else {
idHashParam = getHash(hash, '#');
}

if (hash) {
if (idHashParam) {
// Searches the node with the same id, takes his offsetTop
// And with offsetTop, tries to scroll to node
const idElement = document.getElementById(idHashParam);
if (idElement && idElement.offsetTop) {
scrollTop = idElement.offsetTop;

if (idElement) {
idElement.scrollIntoView(true);
}
} else {
window.scrollTo(0, 0);
}
window.scrollTo(0, scrollTop);
}
};

Expand Down
5 changes: 4 additions & 1 deletion src/client/rsg-components/slots/IsolateButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import getUrl from '../../utils/getUrl';

const IsolateButton = ({ name, example, isolated }) =>
isolated ? (
<ToolbarButton href={getUrl({ anchor: true, slug: '/' })} title="Show all components">
<ToolbarButton
href={getUrl({ anchor: true, slug: name.toLowerCase() })}
title="Show all components"
>
<MdFullscreenExit />
</ToolbarButton>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`should renderer a link home in isolated mode 1`] = `
<Styled(ToolbarButton)
href="/#/"
href="/#pizza"
title="Show all components"
>
<MdFullscreenExit />
Expand Down

0 comments on commit 63251bb

Please sign in to comment.