• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
5var iframeUpdateIntervalID;
6var queryParams = '';
7
8function selectConfig(el) {
9  deselectAllItems('.config-item');
10  selectItem(el);
11  updateIframe();
12}
13
14function selectExample(el) {
15  deselectAllItems('.nav-item');
16  selectItem(el);
17  updateIframe();
18}
19
20function 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
27function selectItem(el) {
28  el.classList.add('selected');
29}
30
31function 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
38function setIframeSrc(src) {
39  var iframeEl = document.querySelector('iframe');
40
41  window.clearInterval(iframeUpdateIntervalID);
42  iframeEl.style.height = '';
43  iframeEl.src = src;
44}
45
46document.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