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 var queryParams = '';
   7
   8 function selectConfig(el) {
   9   deselectAllItems('.config-item');
  10   selectItem(el);
  11   updateIframe();
  12 }
  13
  14 function selectExample(el) {
  15   deselectAllItems('.nav-item');
  16   selectItem(el);
  17   updateIframe();
  18 }
  19
  20 function updateIframe() {
  21   var exampleEl = document.querySelector('.nav-item.selected');
  22   var configEl = document.querySelector('.config-item.selected');
  23   var url = exampleEl.dataset.href + '?config=' + configEl.textContent;
  24   setIframeSrc(url);
  25 }
  26
  27 function selectItem(el) {
  28   el.classList.add('selected');
  29 }
  30
  31 function deselectAllItems(selector) {
  32   var navItemEls = document.querySelectorAll(selector);
  33   for (var i = 0; i < navItemEls.length; ++i) {
  34     navItemEls[i].classList.remove('selected');
  35   }
  36 }
  37
  38 function setIframeSrc(src) {
  39   var iframeEl = document.querySelector('iframe');
  40
  41   window.clearInterval(iframeUpdateIntervalID);
  42   iframeEl.style.height = '';
  43   iframeEl.src = src;
  44 }
  45
  46 document.addEventListener('DOMContentLoaded', function () {
  47   var iframeEl = document.querySelector('iframe');
  48   var iframeWrapperEl = document.querySelector('.iframe-wrapper');
  49
  50   var configItemEls = document.querySelectorAll('.config-item');
  51   for (var i = 0; i < configItemEls.length; ++i) {
  52     configItemEls[i].addEventListener('click', function (e) {
  53       selectConfig(this);
  54     });
  55   }
  56
  57   var navItemEls = document.querySelectorAll('.nav-item');
  58   for (var i = 0; i < navItemEls.length; ++i) {
  59     navItemEls[i].addEventListener('click', function (e) {
  60       selectExample(this);
  61     });
  62   }
  63
  64   iframeEl.addEventListener('load', function () {
  65     var iframeDocument = this.contentWindow.document;
  66     var iframeBodyEl = iframeDocument.body;
  67     iframeEl.style.height = iframeBodyEl.scrollHeight + 'px';
  68
  69     // HACK: polling the body height to update the iframe. There's got to be a
  70     // better way to do this...
  71     var prevBodyHeight;
  72     var prevWrapperHeight;
  73     iframeUpdateIntervalID = window.setInterval(function () {
  74       var bodyHeight = iframeBodyEl.getBoundingClientRect().height;
  75       var wrapperHeight = iframeWrapperEl.clientHeight;
  76       if (bodyHeight != prevBodyHeight || wrapperHeight != prevWrapperHeight) {
  77         // HACK: magic 4... without it, the scrollbar is always visible. :(
  78         var newHeight = Math.max(wrapperHeight - 4, bodyHeight);
  79         iframeEl.style.height = newHeight + 'px';
  80         prevBodyHeight = bodyHeight;
  81         prevWrapperHeight = wrapperHeight;
  82       }
  83     }, 100);  // .1s
  84   }, false);
  85
  86   var closeButtonEl = document.querySelector('.close-button');
  87   closeButtonEl.addEventListener('click', function () {
  88     window.close();
  89   });
  90
  91   // select the first example.
  92   selectExample(document.querySelector('.nav-item'));
  93 });