Migrate scrape-examples.js to ES6

This commit is contained in:
Guillaume Gomez 2022-04-25 14:53:55 +02:00
parent 724c4bd9bb
commit 509b145744

View file

@ -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});
});
})();