Home | History | Annotate | Download | only in resources 
      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 });
     94