index.js 2.8 KB

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