native_client_sdk/src/resources/index.js

// Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

var iframeUpdateIntervalID;
var queryParams = '';

function selectConfig(el) {
  deselectAllItems('.config-item');
  selectItem(el);
  updateIframe();
}

function selectExample(el) {
  deselectAllItems('.nav-item');
  selectItem(el);
  updateIframe();
}

function updateIframe() {
  var exampleEl = document.querySelector('.nav-item.selected');
  var configEl = document.querySelector('.config-item.selected');
  var url = exampleEl.dataset.href + '?config=' + configEl.textContent;
  setIframeSrc(url);
}

function selectItem(el) {
  el.classList.add('selected');
}

function deselectAllItems(selector) {
  var navItemEls = document.querySelectorAll(selector);
  for (var i = 0; i < navItemEls.length; ++i) {
    navItemEls[i].classList.remove('selected');
  }
}

function setIframeSrc(src) {
  var iframeEl = document.querySelector('iframe');

  window.clearInterval(iframeUpdateIntervalID);
  iframeEl.style.height = '';
  iframeEl.src = src;
}

document.addEventListener('DOMContentLoaded', function () {
  var iframeEl = document.querySelector('iframe');
  var iframeWrapperEl = document.querySelector('.iframe-wrapper');

  var configItemEls = document.querySelectorAll('.config-item');
  for (var i = 0; i < configItemEls.length; ++i) {
    configItemEls[i].addEventListener('click', function (e) {
      selectConfig(this);
    });
  }

  var navItemEls = document.querySelectorAll('.nav-item');
  for (var i = 0; i < navItemEls.length; ++i) {
    navItemEls[i].addEventListener('click', function (e) {
      selectExample(this);
    });
  }

  iframeEl.addEventListener('load', function () {
    var iframeDocument = this.contentWindow.document;
    var iframeBodyEl = iframeDocument.body;
    iframeEl.style.height = iframeBodyEl.scrollHeight + 'px';

    // HACK: polling the body height to update the iframe. There's got to be a
    // better way to do this...
    var prevBodyHeight;
    var prevWrapperHeight;
    iframeUpdateIntervalID = window.setInterval(function () {
      var bodyHeight = iframeBodyEl.getBoundingClientRect().height;
      var wrapperHeight = iframeWrapperEl.clientHeight;
      if (bodyHeight != prevBodyHeight || wrapperHeight != prevWrapperHeight) {
        // HACK: magic 4... without it, the scrollbar is always visible. :(
        var newHeight = Math.max(wrapperHeight - 4, bodyHeight);
        iframeEl.style.height = newHeight + 'px';
        prevBodyHeight = bodyHeight;
        prevWrapperHeight = wrapperHeight;
      }
    }, 100);  // .1s
  }, false);

  var closeButtonEl = document.querySelector('.close-button');
  closeButtonEl.addEventListener('click', function () {
    window.close();
  });

  // select the first example.
  selectExample(document.querySelector('.nav-item'));
});