ff-stream-web

commit b511563b61d28b8b242cb0f698c7e9642bfc51aa
parent 374b1dfc3acca38bcbe2edf0ce13aa2b38966265
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date:   Wed, 24 Aug 2016 23:24:27 +0300

Add scrolling to element during navigation for links with hash

closes #812

Diffstat:
M
src/client.js
 | 
28
+++++++++++++++++++---------

1 file changed, 19 insertions(+), 9 deletions(-)
diff --git a/src/client.js b/src/client.js
@@ -48,20 +48,30 @@ const context = {
 };
 
 // Restore the scroll position if it was saved into the state
-function restoreScrollPosition(state) {
+function restoreScrollPosition({ state, hash }) {
   if (state && state.scrollY !== undefined) {
     window.scrollTo(state.scrollX, state.scrollY);
-  } else {
-    window.scrollTo(0, 0);
+    return;
   }
+
+  const targetHash = hash && hash.substr(1);
+  if (targetHash) {
+    const target = document.getElementById(targetHash);
+    if (target) {
+      window.scrollTo(0, windowScrollY() + target.getBoundingClientRect().top);
+      return;
+    }
+  }
+
+  window.scrollTo(0, 0);
 }
 
-let renderComplete = (state, callback) => {
+let renderComplete = (location, callback) => {
   const elem = document.getElementById('css');
   if (elem) elem.parentNode.removeChild(elem);
   callback(true);
-  renderComplete = (s) => {
-    restoreScrollPosition(s);
+  renderComplete = (l) => {
+    restoreScrollPosition(l);
 
     // Google Analytics tracking. Don't send 'pageview' event after
     // the initial rendering, as it was already sent
@@ -73,13 +83,13 @@ let renderComplete = (state, callback) => {
   };
 };
 
-function render(container, state, component) {
+function render(container, location, component) {
   return new Promise((resolve, reject) => {
     try {
       ReactDOM.render(
         component,
         container,
-        renderComplete.bind(undefined, state, resolve)
+        renderComplete.bind(undefined, location, resolve)
       );
     } catch (err) {
       reject(err);
@@ -111,7 +121,7 @@ function run() {
       query: location.query,
       state: location.state,
       context,
-      render: render.bind(undefined, container, location.state), // eslint-disable-line react/jsx-no-bind, max-len
+      render: render.bind(undefined, container, location), // eslint-disable-line react/jsx-no-bind, max-len
     }).catch(err => console.error(err)); // eslint-disable-line no-console
   }