mig-view-router/link-push-state-behavior.js

URL based router and view web components based on lit-element

const PROTOCOL_PATTERN = /^\s*\w+:\/{2}/;
function isExternalURL(url) {
  const originURL = window.location.origin.replace(PROTOCOL_PATTERN, '');
  return !url.replace(PROTOCOL_PATTERN, '').startsWith(originURL);
}

export default function LinkPushStateBehavior(superclass) {
  return class extends superclass {
    constructor() {
      super();
      this._boundOnClick = this._pushStateClickHandler.bind(this);
    }

    connectedCallback() {
      super.connectedCallback();
      this.addEventListener('click', this._boundOnClick);
    }

    disconnectedCallback() {
      super.disconnectedCallback();
      this.removeEventListener('click', this._boundOnClick);
    }

    _pushStateClickHandler(event) {
      let target = event.target;

      while (target.localName !== 'body' && target.localName !== 'a') {
        target = target.parentElement;
      }

      if (target.localName === 'a' && !isExternalURL(target.href)) {
        event.preventDefault();
        if (target.href !== window.location.href) {
          window.history.pushState(undefined, target.textContent, target.href);
          window.dispatchEvent(new window.PopStateEvent('popstate'));
        }
      }
    }
  };
}