function fullscreen(cell, opts) {
const test =
document.body.requestFullscreen || document.body.webkitRequestFullscreen;
if (!test) return false;
if (document.body.className === "fullscreen") return false;
if (cell.fullscreenicon) cell.fullscreenicon.remove();
cell.fullscreenicon = button();
cell.fullscreenicon.onclick = () => {
const container = cell.parentNode;
if (container.requestFullscreen) container.requestFullscreen();
else if (container.webkitRequestFullscreen)
container.webkitRequestFullscreen();
};
if (cell.parentNode) {
cell.parentNode.prepend(cell.fullscreenicon, cell);
if (opts && opts.center) cell.parentNode.className += " center";
}
if (!style.attached) document.body.appendChild((style.attached = style()));
return true;
}
button = () => html`<div class="fullscreen" title="View in Fullscreen"></div>`
style = () => html`<style>
div.fullscreen {
background-image: url('data:image/svg+xml;charset=US-ASCII,${fsicon}');
background-repeat: no-repeat;
position: absolute;
right: -16px;
top: 0px;
width: 16px;
height: 16px;
}
:fullscreen div.fullscreen { display: none; }
:fullscreen.center {
display: flex;
align-items: center;
}
`
fsicon = encodeURI(
`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' class='mr2'><path d='M8 2L3 2H2L2 3L2 8L4 8L4 5.47903L6.93541 8.41443L8.34963 7.00022L5.34941 4L8 4L8 2ZM8 14H13H14V13V8H12V10.6122L9.5 8.15797L8.1 9.58317L10.5589 12H8V14Z' fill='currentColor'></path></svg>`
).replace(/'/g, '"')
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.
