cellWidth = {
let style = document.createElement("style");
style.title = "cell width";
if (window.CSS && CSS.registerProperty) {
style.append(
`@property --cell-width {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
:root {
--cell-width: ${width}px;
}`
);
} else {
style.append(`:root { --cell-width: ${width}px; }`);
}
return style;
}
function indent(v, tab = "\t") {
(typeof tab == "object") && (tab = tab.valueOf());
(typeof tab == "number") && (tab = " ".repeat(tab));
if (Array.isArray(v)) {
return v.map(n => indent(n, tab));
}
return String(v).split("\n").map(n => `${tab}${n}`).join("\n");
}
function outerTag(e, depth = 0) {
let whole = e.outerHTML;
let part = e.innerHTML;
if (e instanceof HTMLStyleElement) { debugger; }
if (!part) {
return whole;
}
whole = whole.split(part, 2);
whole.splice(1, 0, indent((depth <= 0 || e.childElementCount < 1)
? part
: [...e.children].map(child => outerTag(child, depth - 1))
));
return whole;
}
md`~~~html
${outerTag((
[...document.head.cloneNode(Infinity).children]
.filter(e => e instanceof HTMLStyleElement)
.reduce((list, item) => (list.append(item), list), document.createElement("span"))
), Infinity).flat(Infinity).join("\n")}
~~~`
[...document.head.cloneNode(Infinity).children]
.filter(e => e instanceof HTMLStyleElement)
.map(({outerHTML: t}) => md`~~~html
${t}
~~~`)
.reduce((list, item) => {
let e = document.createElement("li");
e.append(item);
list.append(e);
return list;
}, document.createElement("ul"))
clear = [...document.styleSheets].forEach(sheet => {
try {
(sheet.title.startsWith("cell-width")) && sheet.ownerNode.remove();
} catch {}
})
[...document.styleSheets].find(({title}) => title == "cell-width")?.title
auto = {
let style;
debugger;
if (this) {
style = this;
} else if ((style = document.styleSheets.item("cell-width")) && (style.title == "cell-width")) {
console.log("found");
} else {
style = document.createElement("style");
style.title = "cell-width";
(document.head ?? document.body).append(style);
if (window.CSS && CSS.registerProperty) {
let propDec = document.createElement("style");
style.title = "cell-width-declaration";
style.textContent =
`@property --cell-width {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}`;
(document.head ?? document.body).append(propDec);
}
}
style.textContent = `:root { --cell-width: ${width}px; }`;
}
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.
