123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- // Copyright (c) 2013 The Chromium Authors. All rights reserved.
- // Use of this source code is governed by a BSD-style license that can be
- // found in the LICENSE file.
- var iframeUpdateIntervalID;
- var queryParams = '';
- function selectConfig(el) {
- deselectAllItems('.config-item');
- selectItem(el);
- updateIframe();
- }
- function selectExample(el) {
- deselectAllItems('.nav-item');
- selectItem(el);
- updateIframe();
- }
- function updateIframe() {
- var exampleEl = document.querySelector('.nav-item.selected');
- var configEl = document.querySelector('.config-item.selected');
- var url = exampleEl.dataset.href + '?config=' + configEl.textContent;
- setIframeSrc(url);
- }
- function selectItem(el) {
- el.classList.add('selected');
- }
- function deselectAllItems(selector) {
- var navItemEls = document.querySelectorAll(selector);
- for (var i = 0; i < navItemEls.length; ++i) {
- navItemEls[i].classList.remove('selected');
- }
- }
- function setIframeSrc(src) {
- var iframeEl = document.querySelector('iframe');
- window.clearInterval(iframeUpdateIntervalID);
- iframeEl.style.height = '';
- iframeEl.src = src;
- }
- document.addEventListener('DOMContentLoaded', function () {
- var iframeEl = document.querySelector('iframe');
- var iframeWrapperEl = document.querySelector('.iframe-wrapper');
- var configItemEls = document.querySelectorAll('.config-item');
- for (var i = 0; i < configItemEls.length; ++i) {
- configItemEls[i].addEventListener('click', function (e) {
- selectConfig(this);
- });
- }
- var navItemEls = document.querySelectorAll('.nav-item');
- for (var i = 0; i < navItemEls.length; ++i) {
- navItemEls[i].addEventListener('click', function (e) {
- selectExample(this);
- });
- }
- iframeEl.addEventListener('load', function () {
- var iframeDocument = this.contentWindow.document;
- var iframeBodyEl = iframeDocument.body;
- iframeEl.style.height = iframeBodyEl.scrollHeight + 'px';
- // HACK: polling the body height to update the iframe. There's got to be a
- // better way to do this...
- var prevBodyHeight;
- var prevWrapperHeight;
- iframeUpdateIntervalID = window.setInterval(function () {
- var bodyHeight = iframeBodyEl.getBoundingClientRect().height;
- var wrapperHeight = iframeWrapperEl.clientHeight;
- if (bodyHeight != prevBodyHeight || wrapperHeight != prevWrapperHeight) {
- // HACK: magic 4... without it, the scrollbar is always visible. :(
- var newHeight = Math.max(wrapperHeight - 4, bodyHeight);
- iframeEl.style.height = newHeight + 'px';
- prevBodyHeight = bodyHeight;
- prevWrapperHeight = wrapperHeight;
- }
- }, 100); // .1s
- }, false);
- var closeButtonEl = document.querySelector('.close-button');
- closeButtonEl.addEventListener('click', function () {
- window.close();
- });
- // select the first example.
- selectExample(document.querySelector('.nav-item'));
- });
|