blob: ab4b4ff61849400411fcb262ea4272b2610d3e78 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
// 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;
function selectExample(el) {
setIframeSrc(el.dataset.href);
deselectAllNavItems();
selectNavItem(el);
}
function selectNavItem(el) {
el.classList.add('selected');
}
function deselectAllNavItems() {
var navItemEls = document.querySelectorAll('.nav-item');
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 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'));
});
|
