glsl = {
const interpolate = (strings, ...args) => {
let s = "";
for (let i = 0; i < strings.length; i++) {
s += strings[i];
if (i < args.length && args[i]) s += String(args[i]);
}
return s;
};
const ID = "glsl-styles";
const style = html`<style id="${ID}">
details.glsl summary {
list-style-type: none; /* hide the triangle in firefox */
outline: none;
cursor: pointer;
user-select: none;
}
details.glsl summary::marker {
display: none;
}
/*
details.glsl summary:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid rgb(27,30,35);
border-right: 0;
margin-right: 1px;
}*/
/*details[open].glsl summary:before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid rgb(27,30,35);
border-bottom: 0;
margin-left: -2px;
}*/
details[open].glsl summary code.glsl span,
details[open].glsl summary code.glsl,
details[open].glsl summary {
color: grey;
}
<style>`;
const createFunction =
(opts) =>
(...args) => {
let string = interpolate(...args);
if (!string.startsWith("\n")) string = "\n" + string;
if (!document.getElementById(ID)) document.head.appendChild(style);
const sig = string.match(/^\n*(.*)$/m)[1];
const summary = md`~~~glsl\n${sig}~~~`;
summary.style.display = "inline-block";
summary.style.margin = "0";
summary.style.verticalAlign = "middle";
const el = html`<details ${opts.open ? "open" : ""} class='glsl'>
<summary> ${summary} …</summary>
${md`~~~glsl${string}~~~`}
</details>`;
el.value = string;
return el;
};
const returnValue = createFunction({ open: false });
returnValue.open = createFunction({ open: true });
return returnValue;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
