Migrate scrape-examples.js to ES6
This commit is contained in:
parent
724c4bd9bb
commit
509b145744
1 changed files with 24 additions and 21 deletions
|
|
@ -1,4 +1,7 @@
|
|||
/* global addClass, hasClass, removeClass, onEach */
|
||||
/* eslint-env es6 */
|
||||
/* eslint no-var: "error" */
|
||||
/* eslint prefer-const: "error" */
|
||||
/* global addClass, hasClass, removeClass, onEachLazy */
|
||||
|
||||
(function () {
|
||||
// Number of lines shown when code viewer is not expanded
|
||||
|
|
@ -6,19 +9,19 @@
|
|||
|
||||
// Scroll code block to the given code location
|
||||
function scrollToLoc(elt, loc) {
|
||||
var lines = elt.querySelector('.line-numbers');
|
||||
var scrollOffset;
|
||||
const lines = elt.querySelector('.line-numbers');
|
||||
let scrollOffset;
|
||||
|
||||
// If the block is greater than the size of the viewer,
|
||||
// then scroll to the top of the block. Otherwise scroll
|
||||
// to the middle of the block.
|
||||
if (loc[1] - loc[0] > MAX_LINES) {
|
||||
var line = Math.max(0, loc[0] - 1);
|
||||
const line = Math.max(0, loc[0] - 1);
|
||||
scrollOffset = lines.children[line].offsetTop;
|
||||
} else {
|
||||
var wrapper = elt.querySelector(".code-wrapper");
|
||||
var halfHeight = wrapper.offsetHeight / 2;
|
||||
var offsetMid = (lines.children[loc[0]].offsetTop
|
||||
const wrapper = elt.querySelector(".code-wrapper");
|
||||
const halfHeight = wrapper.offsetHeight / 2;
|
||||
const offsetMid = (lines.children[loc[0]].offsetTop
|
||||
+ lines.children[loc[1]].offsetTop) / 2;
|
||||
scrollOffset = offsetMid - halfHeight;
|
||||
}
|
||||
|
|
@ -28,21 +31,21 @@
|
|||
}
|
||||
|
||||
function updateScrapedExample(example) {
|
||||
var locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent);
|
||||
var locIndex = 0;
|
||||
var highlights = example.querySelectorAll('.highlight');
|
||||
var link = example.querySelector('.scraped-example-title a');
|
||||
const locs = JSON.parse(example.attributes.getNamedItem("data-locs").textContent);
|
||||
let locIndex = 0;
|
||||
const highlights = Array.prototype.slice.call(example.querySelectorAll('.highlight'));
|
||||
const link = example.querySelector('.scraped-example-title a');
|
||||
|
||||
if (locs.length > 1) {
|
||||
// Toggle through list of examples in a given file
|
||||
var onChangeLoc = function(changeIndex) {
|
||||
const onChangeLoc = function(changeIndex) {
|
||||
removeClass(highlights[locIndex], 'focus');
|
||||
changeIndex();
|
||||
scrollToLoc(example, locs[locIndex][0]);
|
||||
addClass(highlights[locIndex], 'focus');
|
||||
|
||||
var url = locs[locIndex][1];
|
||||
var title = locs[locIndex][2];
|
||||
const url = locs[locIndex][1];
|
||||
const title = locs[locIndex][2];
|
||||
|
||||
link.href = url;
|
||||
link.innerHTML = title;
|
||||
|
|
@ -63,7 +66,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
var expandButton = example.querySelector('.expand');
|
||||
const expandButton = example.querySelector('.expand');
|
||||
if (expandButton) {
|
||||
expandButton.addEventListener('click', function () {
|
||||
if (hasClass(example, "expanded")) {
|
||||
|
|
@ -79,24 +82,24 @@
|
|||
scrollToLoc(example, locs[0][0]);
|
||||
}
|
||||
|
||||
var firstExamples = document.querySelectorAll('.scraped-example-list > .scraped-example');
|
||||
onEach(firstExamples, updateScrapedExample);
|
||||
onEach(document.querySelectorAll('.more-examples-toggle'), function(toggle) {
|
||||
const firstExamples = document.querySelectorAll('.scraped-example-list > .scraped-example');
|
||||
onEachLazy(firstExamples, updateScrapedExample);
|
||||
onEachLazy(document.querySelectorAll('.more-examples-toggle'), function(toggle) {
|
||||
// Allow users to click the left border of the <details> section to close it,
|
||||
// since the section can be large and finding the [+] button is annoying.
|
||||
toggle.querySelectorAll('.toggle-line, .hide-more').forEach(button => {
|
||||
onEachLazy(toggle.querySelectorAll('.toggle-line, .hide-more'), button => {
|
||||
button.addEventListener('click', function() {
|
||||
toggle.open = false;
|
||||
});
|
||||
});
|
||||
|
||||
var moreExamples = toggle.querySelectorAll('.scraped-example');
|
||||
const moreExamples = toggle.querySelectorAll('.scraped-example');
|
||||
toggle.querySelector('summary').addEventListener('click', function() {
|
||||
// Wrapping in setTimeout ensures the update happens after the elements are actually
|
||||
// visible. This is necessary since updateScrapedExample calls scrollToLoc which
|
||||
// depends on offsetHeight, a property that requires an element to be visible to
|
||||
// compute correctly.
|
||||
setTimeout(function() { onEach(moreExamples, updateScrapedExample); });
|
||||
setTimeout(function() { onEachLazy(moreExamples, updateScrapedExample); });
|
||||
}, {once: true});
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue