hy-push-state/src/mixin/scrolling.js

Turn static web sites into dynamic web apps

// # src / mixin / scrolling.js
// Copyright (c) 2018 Florian Klampfer <https://qwtel.com/>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

import { getScrollTop, getScrollHeight } from "../common";

import { PUSH, POP } from "./constants";

// ### Managing scroll positions
// The following functions deal with managing the scroll position of the site.

export const scrollMixin = C =>
  class extends C {
    // TODO: doc
    assignScrollPosition(state) {
      const id = this.histId();
      return Object.assign(state, {
        [id]: Object.assign(state[id] || {}, {
          scrollTop: getScrollTop(),
          scrollHeight: getScrollHeight(),
        }),
      });
    }

    // TODO
    manageScrollPostion({ type, url: { hash } }) {
      switch (type) {
        case PUSH:
          // FIXME: make configurable
          this.scrollHashIntoView(hash, { behavior: "smooth", block: "start", inline: "nearest" });
          break;
        case POP: {
          this.restoreScrollPostion();
          break;
        }
        case INIT:
          break;
        default: {
          if (process.env.DEBUG) console.warn(`Type '${type}' not reconginzed.`);
          break;
        }
      }
    }

    // Given a hash, find the element of the same id on the page, and scroll it into view.
    // If no hash is provided, scroll to the top instead.
    scrollHashIntoView(hash, options) {
      if (hash) {
        const el = document.getElementById(decodeURIComponent(hash.substr(1)));
        if (el) el.scrollIntoView(options);
        else if (process.env.DEBUG) console.warn(`Can't find element with id ${hash}`);
      } else {
        window.scroll(window.pageXOffset, 0);
      }
    }

    // Takes the current history state, and restores the scroll position.
    restoreScrollPostion() {
      const id = this.histId();
      const { scrollTop, scrollHeight } = (window.history.state && window.history.state[id]) || {};

      if (scrollTop != null) {
        // FIXME: Setting `min-height` to ensure that we can scroll back to the previous position?
        // FIXME: Use `attributeStyleMap`?
        /* document.body.style.minHeight = `${scrollHeight}px`; */
        window.scroll(window.pageXOffset, scrollTop);
      }
    }

    // Only restore position on page reload when the user hasn't started scorlling yet.
    restoreScrollPostionOnReload() {
      const userHasScrolled = getScrollTop() != 0;
      if (!userHasScrolled) this.restoreScrollPostion();
    }
  };