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 
      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 });
     73