{"size": 2481, "ext": "js", "max_stars_repo_path": "gists/2017-01-30-browser-history-functioning-&-loopback-gotcha/index.js", "max_stars_repo_name": "Ashid6/ashid6.github.io", "max_stars_repo_stars_event_min_datetime": "2017-09-11T18:31:21.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-24T18:29:50.000Z", "max_issues_repo_path": "gists/2017-01-30-browser-history-functioning-&-loopback-gotcha/index.js", "max_issues_repo_name": "Ashid6/ashid6.github.io", "max_issues_repo_issues_event_min_datetime": "2019-10-13T05:46:23.000Z", "max_issues_repo_issues_event_max_datetime": "2019-10-13T05:46:24.000Z", "max_forks_repo_path": "gists/2017-01-30-browser-history-functioning-&-loopback-gotcha/index.js", "max_forks_repo_name": "Ashid6/ashid6.github.io", "max_forks_repo_forks_event_min_datetime": "2019-02-21T14:09:17.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-17T06:13:21.000Z"}
{"max_stars_count": 8, "max_issues_count": 2, "max_forks_count": 5, "avg_line_length": 21.3879310345, "max_line_length": 102, "alphanum_fraction": 0.6078194277}
(function init() {
  'use strict';

  const data = {
    history: [
      // 'New Tab',
      window.location.hash.slice(1),
    ],
    active: 0,
  };


  // create copies of window.history methods
  const historyPushState = history.pushState;
  const historyBack = history.back;
  const historyForward = history.forward;

  // override window.history
  function pushState(state, title, url) {
    let isNew = false;
    if (data.active < data.history.length-1) {
      // new history branch
      isNew = true;

      const currentBranchNodes = Array.from(document.querySelectorAll('#historyStructure .node'));
      currentBranchNodes.slice(data.active + 1)
        .forEach((span, i) => {
          span.classList.add('deleted');
        });

      historyStructure.removeAttribute('id');
      historyStructures.innerHTML = `<div id="historyStructure"></div>${historyStructures.innerHTML}`;

      // truncate history list
      data.history.length = data.active + 1;
    }

    data.history.push(url.match(/#(.*)/)[1]);
    data.active++;

    render(isNew);

    historyPushState.call(history, state, title, url);
  }

  function back() {
    if (data.active <= 0) {
      return;
    }

    data.active--;

    historyBack.call(history);
    render();
  }

  function forward() {
    if (data.active >= data.history.length - 1) {
      return;
    }

    data.active++;

    historyForward.call(history);
    render();
  }


  // DOM interaction
  function backBtnOnclick() {
    history.back();
  }

  function forwardBtnOnclick() {
    history.forward();
  }

  function navOnclick() {
    const href = this.getAttribute('href');
    history.pushState({
      timestamp: +(new Date()),
    }, '', href);

    window.parent.postMessage({
      height: document.body.scrollHeight,
      target: window.location.href,
    }, '*');

    // return false;
  }

  function render(isNew = false) {
    historyStructure.innerHTML = data.history.map((x, i) => (
      `<span class="node ${(i === data.active) ? 'active' : ''}">
        ${x}
      </span>`
    )).join('<span class="arrow">&harr;</span>');
  }


  history.pushState = pushState;
  history.back = back;
  history.forward = forward;

  backBtn.onclick = backBtnOnclick;
  forwardBtn.onclick = forwardBtnOnclick;

  Array.from(document.querySelectorAll('a')).forEach((a) => (a.onclick = navOnclick));

  window.onpopstate = function(e) {
    // connect browser's back/forward button to the app
  };

  render();
})();
