src/native_client_sdk/src/resources/index.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 var iframeUpdateIntervalID;
   6
   7 function selectExample(el) {
   8   setIframeSrc(el.dataset.href);
   9   deselectAllNavItems();
  10   selectNavItem(el);
  11 }
  12
  13 function selectNavItem(el) {
  14   el.classList.add('selected');
  15 }
  16
  17 function deselectAllNavItems() {
  18   var navItemEls = document.querySelectorAll('.nav-item');
  19   for (var i = 0; i < navItemEls.length; ++i) {
  20     navItemEls[i].classList.remove('selected');
  21   }
  22 }
  23
  24 function setIframeSrc(src) {
  25   var iframeEl = document.querySelector('iframe');
  26
  27   window.clearInterval(iframeUpdateIntervalID);
  28   iframeEl.style.height = '';
  29   iframeEl.src = src;
  30 }
  31
  32 document.addEventListener('DOMContentLoaded', function () {
  33   var iframeEl = document.querySelector('iframe');
  34   var iframeWrapperEl = document.querySelector('.iframe-wrapper');
  35   var navItemEls = document.querySelectorAll('.nav-item');
  36
  37   for (var i = 0; i < navItemEls.length; ++i) {
  38     navItemEls[i].addEventListener('click', function (e) {
  39       selectExample(this);
  40     });
  41   }
  42
  43   iframeEl.addEventListener('load', function () {
  44     var iframeDocument = this.contentWindow.document;
  45     var iframeBodyEl = iframeDocument.body;
  46     iframeEl.style.height = iframeBodyEl.scrollHeight + 'px';
  47
  48     // HACK: polling the body height to update the iframe. There's got to be a
  49     // better way to do this...
  50     var prevBodyHeight;
  51     var prevWrapperHeight;
  52     iframeUpdateIntervalID = window.setInterval(function () {
  53       var bodyHeight = iframeBodyEl.getBoundingClientRect().height;
  54       var wrapperHeight = iframeWrapperEl.clientHeight;
  55       if (bodyHeight != prevBodyHeight || wrapperHeight != prevWrapperHeight) {
  56         // HACK: magic 4... without it, the scrollbar is always visible. :(
  57         var newHeight = Math.max(wrapperHeight - 4, bodyHeight);
  58         iframeEl.style.height = newHeight + 'px';
  59         prevBodyHeight = bodyHeight;
  60         prevWrapperHeight = wrapperHeight;
  61       }
  62     }, 100);  // .1s
  63   }, false);
  64
  65   var closeButtonEl = document.querySelector('.close-button');
  66   closeButtonEl.addEventListener('click', function () {
  67     window.close();
  68   });
  69
  70   // select the first example.
  71   selectExample(document.querySelector('.nav-item'));
  72 });