|
1 |
| -/* global addClass, hasClass, removeClass, onEach */ |
| 1 | +/* eslint-env es6 */ |
| 2 | +/* eslint no-var: "error" */ |
| 3 | +/* eslint prefer-const: "error" */ |
| 4 | +/* global addClass, hasClass, removeClass, onEachLazy */ |
2 | 5 |
|
3 | 6 | (function () {
|
4 | 7 | // Number of lines shown when code viewer is not expanded
|
5 | 8 | const MAX_LINES = 10;
|
6 | 9 |
|
7 | 10 | // Scroll code block to the given code location
|
8 | 11 | function scrollToLoc(elt, loc) {
|
9 |
| - var lines = elt.querySelector('.line-numbers'); |
10 |
| - var scrollOffset; |
| 12 | + const lines = elt.querySelector('.line-numbers'); |
| 13 | + let scrollOffset; |
11 | 14 |
|
12 | 15 | // If the block is greater than the size of the viewer,
|
13 | 16 | // then scroll to the top of the block. Otherwise scroll
|
14 | 17 | // to the middle of the block.
|
15 | 18 | if (loc[1] - loc[0] > MAX_LINES) {
|
16 |
| - var line = Math.max(0, loc[0] - 1); |
| 19 | + const line = Math.max(0, loc[0] - 1); |
17 | 20 | scrollOffset = lines.children[line].offsetTop;
|
18 | 21 | } else {
|
19 |
| - var wrapper = elt.querySelector(".code-wrapper"); |
20 |
| - var halfHeight = wrapper.offsetHeight / 2; |
21 |
| - var offsetMid = (lines.children[loc[0]].offsetTop |
| 22 | + const wrapper = elt.querySelector(".code-wrapper"); |
| 23 | + const halfHeight = wrapper.offsetHeight / 2; |
| 24 | + const offsetMid = (lines.children[loc[0]].offsetTop |
22 | 25 | + lines.children[loc[1]].offsetTop) / 2;
|
23 | 26 | scrollOffset = offsetMid - halfHeight;
|
24 | 27 | }
|
|
28 | 31 | }
|
29 | 32 |
|
30 | 33 | function updateScrapedExample(example) {
|
31 |
| - var locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent); |
32 |
| - var locIndex = 0; |
33 |
| - var highlights = example.querySelectorAll('.highlight'); |
34 |
| - var link = example.querySelector('.scraped-example-title a'); |
| 34 | + const locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent); |
| 35 | + let locIndex = 0; |
| 36 | + const highlights = Array.prototype.slice.call(example.querySelectorAll('.highlight')); |
| 37 | + const link = example.querySelector('.scraped-example-title a'); |
35 | 38 |
|
36 | 39 | if (locs.length > 1) {
|
37 | 40 | // Toggle through list of examples in a given file
|
38 |
| - var onChangeLoc = function(changeIndex) { |
| 41 | + const onChangeLoc = function(changeIndex) { |
39 | 42 | removeClass(highlights[locIndex], 'focus');
|
40 | 43 | changeIndex();
|
41 | 44 | scrollToLoc(example, locs[locIndex][0]);
|
42 | 45 | addClass(highlights[locIndex], 'focus');
|
43 | 46 |
|
44 |
| - var url = locs[locIndex][1]; |
45 |
| - var title = locs[locIndex][2]; |
| 47 | + const url = locs[locIndex][1]; |
| 48 | + const title = locs[locIndex][2]; |
46 | 49 |
|
47 | 50 | link.href = url;
|
48 | 51 | link.innerHTML = title;
|
|
63 | 66 | });
|
64 | 67 | }
|
65 | 68 |
|
66 |
| - var expandButton = example.querySelector('.expand'); |
| 69 | + const expandButton = example.querySelector('.expand'); |
67 | 70 | if (expandButton) {
|
68 | 71 | expandButton.addEventListener('click', function () {
|
69 | 72 | if (hasClass(example, "expanded")) {
|
|
79 | 82 | scrollToLoc(example, locs[0][0]);
|
80 | 83 | }
|
81 | 84 |
|
82 |
| - var firstExamples = document.querySelectorAll('.scraped-example-list > .scraped-example'); |
83 |
| - onEach(firstExamples, updateScrapedExample); |
84 |
| - onEach(document.querySelectorAll('.more-examples-toggle'), function(toggle) { |
| 85 | + const firstExamples = document.querySelectorAll('.scraped-example-list > .scraped-example'); |
| 86 | + onEachLazy(firstExamples, updateScrapedExample); |
| 87 | + onEachLazy(document.querySelectorAll('.more-examples-toggle'), function(toggle) { |
85 | 88 | // Allow users to click the left border of the <details> section to close it,
|
86 | 89 | // since the section can be large and finding the [+] button is annoying.
|
87 |
| - toggle.querySelectorAll('.toggle-line, .hide-more').forEach(button => { |
| 90 | + onEachLazy(toggle.querySelectorAll('.toggle-line, .hide-more'), button => { |
88 | 91 | button.addEventListener('click', function() {
|
89 | 92 | toggle.open = false;
|
90 | 93 | });
|
91 | 94 | });
|
92 | 95 |
|
93 |
| - var moreExamples = toggle.querySelectorAll('.scraped-example'); |
| 96 | + const moreExamples = toggle.querySelectorAll('.scraped-example'); |
94 | 97 | toggle.querySelector('summary').addEventListener('click', function() {
|
95 | 98 | // Wrapping in setTimeout ensures the update happens after the elements are actually
|
96 | 99 | // visible. This is necessary since updateScrapedExample calls scrollToLoc which
|
97 | 100 | // depends on offsetHeight, a property that requires an element to be visible to
|
98 | 101 | // compute correctly.
|
99 |
| - setTimeout(function() { onEach(moreExamples, updateScrapedExample); }); |
| 102 | + setTimeout(function() { onEachLazy(moreExamples, updateScrapedExample); }); |
100 | 103 | }, {once: true});
|
101 | 104 | });
|
102 | 105 | })();
|
0 commit comments