Fixed "scroll to anchor" issues

This commit is contained in:
Jori Lallo
2016-08-27 13:48:00 -07:00
parent 8ed81884d7
commit c2cae7e171
2 changed files with 32 additions and 19 deletions

View File

@@ -48,12 +48,15 @@ class DocumentScene extends React.Component {
didScroll: false,
}
componentDidMount = () => {
componentDidMount = async () => {
const { id } = this.props.routeParams;
this.store.fetchDocument(id);
await this.store.fetchDocument(id, {
replaceUrl: !this.props.location.hash,
});
this.scrollTohash();
}
componentWillReceiveProps = (nextProps) => {
componentWillReceiveProps = async (nextProps) => {
const key = nextProps.keydown.event;
if (key) {
if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
@@ -73,20 +76,13 @@ class DocumentScene extends React.Component {
const oldId = this.props.params.id;
const newId = nextProps.params.id;
if (oldId !== newId) {
this.store.fetchDocument(newId, true);
await this.store.fetchDocument(newId, {
softLoad: true,
replaceUrl: !this.props.location.hash,
});
}
// Scroll to anchor after loading, and only once
const { hash } = this.props.location;
if (nextProps.doc && hash && !this.state.didScroll) {
const name = hash.split('#')[1];
setTimeout(() => {
this.setState({ didScroll: true });
const element = window.document.getElementsByName(name)[0];
if (element) element.scrollIntoView();
}, 0);
}
this.scrollTohash();
}
onEdit = () => {
@@ -121,6 +117,18 @@ class DocumentScene extends React.Component {
a.click();
}
scrollTohash = () => {
// Scroll to anchor after loading, and only once
const { hash } = this.props.location;
if (hash && !this.state.didScroll) {
const name = hash.slice(1);
this.setState({ didScroll: true });
const element = window.document.getElementsByName(name)[0];
if (element) element.scrollIntoView();
}
}
render() {
const {
sidebar,

View File

@@ -43,7 +43,12 @@ class DocumentSceneStore {
/* Actions */
@action fetchDocument = async (id, softLoad = false) => {
@action fetchDocument = async (id, options = {}) => {
options = {
softLoad: false,
replaceUrl: true,
...options,
};
let cacheHit = false;
runInAction('retrieve document from cache', () => {
const cachedValue = this.cache.fetchFromCache(id);
@@ -51,15 +56,15 @@ class DocumentSceneStore {
if (cacheHit) this.document = cachedValue;
});
this.isFetching = !softLoad;
this.updatingContent = softLoad && !cacheHit;
this.isFetching = !options.softLoad;
this.updatingContent = options.softLoad && !cacheHit;
try {
const res = await client.get('/documents.info', { id }, { cache: true });
const { data } = res;
runInAction('fetchDocument', () => {
this.document = data;
browserHistory.replace(data.url);
if (options.replaceUrl) browserHistory.replace(data.url);
});
} catch (e) {
console.error("Something went wrong");