pywb/pywb/static/wb_frame.js

/*
Copyright(c) 2013-2018 Rhizome and Ilya Kreymer. Released under the GNU General Public License.

This file is part of pywb, https://github.com/webrecorder/pywb

    pywb 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.

    pywb 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 pywb.  If not, see <http://www.gnu.org/licenses/>.
*/

/**
 * @param {Object} content_info - Information about the contents to be replayed
 */
function ContentFrame(content_info) {
  if (!(this instanceof ContentFrame)) return new ContentFrame(content_info);
  this.last_inner_hash = window.location.hash;
  this.last_url = content_info.url;
  this.last_ts = content_info.request_ts;
  this.content_info = content_info;
  // bind event callbacks
  this.outer_hash_changed = this.outer_hash_changed.bind(this);
  this.handle_event = this.handle_event.bind(this);
  this.wbBanner = null;
  this.checkBannerToId = null;

  window.addEventListener('hashchange', this.outer_hash_changed, false);
  window.addEventListener('message', this.handle_event);

  if (document.readyState === 'complete') {
    this.init_iframe();
  } else {
    document.addEventListener('DOMContentLoaded', this.init_iframe.bind(this), {
      once: true
    });
  }

  window.__WB_pmw = function(win) {
    this.pm_source = win;
    return this;
  };
}

/**
 * @desc Initializes the replay iframe. If a banner exists (exposed on window as WBBanner)
 * then the init function of the banner is called.
 */
ContentFrame.prototype.init_iframe = function() {
  if (typeof this.content_info.iframe === 'string') {
    this.iframe = document.querySelector(this.content_info.iframe);
  } else {
    this.iframe = this.content_info.iframe;
  }

  if (!this.iframe) {
    console.warn('no iframe found ' + this.content_info.iframe + ' found');
    return;
  }

  this.extract_prefix();
  if (window.WBBanner) {
    this.wbBanner = window.WBBanner;
    this.wbBanner.init();
  }
  this.load_url(this.content_info.url, this.content_info.request_ts);
};

/**
 * @desc Initializes the prefixes used to load the pages to be replayed
 */
ContentFrame.prototype.extract_prefix = function() {
  this.app_prefix = this.content_info.app_prefix || this.content_info.prefix;
  this.content_prefix =
    this.content_info.content_prefix || this.content_info.prefix;

  if (this.app_prefix && this.content_prefix) {
    return;
  }

  var inx = window.location.href.indexOf(this.content_info.url);

  if (inx < 0) {
    inx = window.location.href.indexOf('/http') + 1;
    if (inx <= 0) {
      inx = window.location.href.indexOf('///') + 1;
      if (inx <= 0) {
        console.warn('No Prefix Found!');
      }
    }
  }

  this.prefix = window.location.href.substr(0, inx);

  this.app_prefix = this.app_prefix || this.prefix;
  this.content_prefix = this.content_prefix || this.prefix;
};

/**
 * @desc Returns an absolute URL (with correct prefix and replay modifier) given
 * the replayed pages URL and optional timestamp and content_url
 * @param {string} url - The URL of the replayed page
 * @param {?string} ts - The timestamp of the replayed page
 * @param {?boolean} content_url - Is the abs URL to be constructed using the content_prefix or app_prefix
 * @returns {string}
 */
ContentFrame.prototype.make_url = function(url, ts, content_url) {
  var mod, prefix;

  if (content_url) {
    mod = 'mp_';
    prefix = this.content_prefix;
  } else {
    mod = '';
    prefix = this.app_prefix;
  }

  if (ts || mod) {
    mod += '/';
  }

  if (ts) {
    return prefix + ts + mod + url;
  } else {
    return prefix + mod + url;
  }
};

/**
 * @desc Handles and routes all messages received from the replay iframe.
 * @param {MessageEvent} event - A message event potentially containing a message from the replay iframe
 */
ContentFrame.prototype.handle_event = function(event) {
  var frame_win = this.iframe.contentWindow;
  if (event.source === window.parent) {
    // Pass to replay frame
    frame_win.postMessage(event.data, '*');
  } else if (event.source === frame_win) {
    // Check if iframe url change message
    if (typeof event.data === 'object' && event.data['wb_type']) {
      this.handle_message(event);
    } else {
      // Pass to parent
      window.parent.postMessage(event.data, '*');
    }
  }
};

/**
 * @desc Handles messages intended for the content frame (indicated by data.wb_type). If a banner
 * is exposed, calls the onMessage function of the exposed banner.
 * @param {MessageEvent} event - The message event containing a message from the replay iframe
 */
ContentFrame.prototype.handle_message = function(event) {
  if (this.wbBanner) {
    this.wbBanner.onMessage(event);
  }
  var state = event.data;
  var type = state.wb_type;

  if (type === 'load' || type === 'replace-url') {
    this.set_url(state);
  } else if (type === 'hashchange') {
    this.inner_hash_changed(state);
  }
};

/**
 * @desc Updates the URL of the top frame
 * @param {Object} state - The contents of a message rreceived from the replay iframe
 */
ContentFrame.prototype.set_url = function(state) {
  if (
    state.url &&
    (state.url !== this.last_url || state.request_ts !== this.last_ts)
  ) {
    var new_url = this.make_url(state.url, state.request_ts, false);

    window.history.replaceState(state, '', new_url);

    this.last_url = state.url;
    this.last_ts = state.request_ts;
  }
};

/**
 * @desc Checks to see if the banner is still indicating the replay iframe is still loading
 * 2 seconds after the load event is fired by the replay iframe. If the banner is still
 * indicating the replayed page is loading. Updates the displayed information using
 * newURL and newTS
 * @param {string} newUrl - The new URL of the replay iframe
 * @param {?string} newTs - The new timestamp of the replay iframe. Is falsy if
 * operating in live mode
 */
ContentFrame.prototype.initBannerUpdateCheck = function(newUrl, newTs) {
  if (!this.wbBanner) return;
  var contentFrame = this;
  var replayIframeLoaded = function() {
    contentFrame.iframe.removeEventListener('load', replayIframeLoaded);
    contentFrame.checkBannerToId = setTimeout(function() {
      contentFrame.checkBannerToId = null;
      if (contentFrame.wbBanner.stillIndicatesLoading()) {
        contentFrame.wbBanner.updateCaptureInfo(
          newUrl,
          newTs,
          contentFrame.content_prefix.indexOf('/live') !== -1
        );
      }
    }, 2000);
  };
  if (this.checkBannerToId) {
    clearTimeout(this.checkBannerToId);
  }
  this.iframe.addEventListener('load', replayIframeLoaded);
};

/**
 * @desc Navigates the replay iframe to a newURL and if a banner is exposed
 * the initBannerUpdateCheck function is called.
 * @param {string} newUrl - The new URL of the replay iframe
 * @param {?string} newTs - The new timestamp of the replay iframe. Is falsy if
 * operating in live mode
 */
ContentFrame.prototype.load_url = function(newUrl, newTs) {
  this.iframe.src = this.make_url(newUrl, newTs, true);
  if (this.wbBanner) {
    this.initBannerUpdateCheck(newUrl, newTs);
  }
};

/**
 * @desc Updates this frames hash to the one inside the replay iframe
 * @param {Object} state - The contents of message received from the replay iframe
 */
ContentFrame.prototype.inner_hash_changed = function(state) {
  if (window.location.hash !== state.hash) {
    window.location.hash = state.hash;
  }
  this.last_inner_hash = state.hash;
};

/**
 * @desc Updates the hash of the replay iframe on a hash change in this frame
 * @param event
 */
ContentFrame.prototype.outer_hash_changed = function(event) {
  if (window.location.hash === this.last_inner_hash) {
    return;
  }

  if (this.iframe) {
    var message = { wb_type: 'outer_hashchange', hash: window.location.hash };

    this.iframe.contentWindow.postMessage(message, '*', undefined, true);
  }
};

/**
 * @desc Cleans up any event listeners added by the content frame
 */
ContentFrame.prototype.close = function() {
  window.removeEventListener('hashchange', this.outer_hash_changed);
  window.removeEventListener('message', this.handle_event);
};