Published
Edited
May 26, 2020
1 fork
5 stars
Insert cell
Insert cell
GoldenLayout = require('https://unpkg.com/golden-layout@1.5.9/dist/goldenlayout.js')
Insert cell
Insert cell
Insert cell
layout = {
target; // if the DOM target changes, this code should rerun
const layout = new GoldenLayout(initialConfig, jquery('#target'));
layout.registerComponent('iframeComponent', iframeComponent);
layout.registerComponent('simpleComponent', simpleComponent);
layout.init();
invalidation.then(() => layout.destroy()); // avoid layouts stacking up
return layout;
}
Insert cell
initialConfig = ({
content: [
{
type: 'row',
content: [
{
type: 'component',
componentName: 'iframeComponent',
componentState: { src: "https://placekitten.com/" }
},
{
type: 'column',
content: [
{
type: 'component',
componentName: 'iframeComponent',
componentState: { label: 'This is content inside an iframe' }
},
{
type: 'component',
componentName: 'simpleComponent',
componentState: { label: "The iframes aren't required" }
}
]
}
]
}
]
})
Insert cell
iframeComponent = function(container, componentState) {
container.on('resize', () => {
const iframe = container.getElement().get(0).childNodes[0];
iframe.width = container.width;
iframe.height = container.height;
});
// This code seems to run only once; attach .on event handlers to react to changes,
// don't expect this code to be rerun.
const newChild = componentState.src
? html`<iframe src="${componentState.src}"</iframe>`
: html`<iframe srcdoc="<!DOCTYPE html><p>${componentState.label}</p>"></iframe>`;
container
.getElement()
.get(0)
.appendChild(newChild);
}
Insert cell
simpleComponent = function(container, componentState) {
container
.getElement()
.get(0)
.appendChild(html`<h2>${componentState.label}</h2>`);
}
Insert cell
jquery = require('jquery')
Insert cell

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.
Learn more