in src/playground.ts [1027:1065]
function hideControls() {
// Set display:none to all the UI elements that are hidden.
let hiddenProps = state.getHiddenProps();
hiddenProps.forEach(prop => {
let controls = d3.selectAll(`.ui-${prop}`);
if (controls.size() === 0) {
console.warn(`0 html elements found with class .ui-${prop}`);
}
controls.style("display", "none");
});
// Also add checkbox for each hidable control in the "use it in classrom"
// section.
let hideControls = d3.select(".hide-controls");
HIDABLE_CONTROLS.forEach(([text, id]) => {
let label = hideControls.append("label")
.attr("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
let input = label.append("input")
.attr({
type: "checkbox",
class: "mdl-checkbox__input",
});
if (hiddenProps.indexOf(id) === -1) {
input.attr("checked", "true");
}
input.on("change", function() {
state.setHideProperty(id, !this.checked);
state.serialize();
userHasInteracted();
d3.select(".hide-controls-link")
.attr("href", window.location.href);
});
label.append("span")
.attr("class", "mdl-checkbox__label label")
.text(text);
});
d3.select(".hide-controls-link")
.attr("href", window.location.href);
}